ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

confirm abandon

Browse Source
This commit is contained in:
Mashy 2019-09-12 14:05:36 +10:00
parent c45cf59f29
commit e8e63e0943
2 changed files with 74 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/assets/styles/controls.less
View File

@ -1,3 +1,5 @@
@import 'colours.less';
aside {
grid-area: ctrl;
display: grid;
@ -93,3 +95,16 @@ aside {
.team-page-ctrl h2 {
padding: 0 0.75em 0 0.75em;
}
.abandon {
&:hover {
color: @red;
border-color: @red;
};
&:active, &.confirming {
background: @red;
color: black;
border: 1px solid black;
}
}

95
client/src/components/player.box.jsx
View File

@ -1,4 +1,5 @@
const preact = require('preact');
const { Component } = require('preact')
const { connect } = require('preact-redux');
const addState = connect(
@ -8,52 +9,74 @@ const addState = connect(
}
);
function Scoreboard(args) {
const {
abandon,
animating,
isPlayer,
player,
isGame,
clear,
} = args;
const scoreText = () => {
if (player.score === 'Zero') return '▫▫▫▫';
if (player.score === 'One') return '■▫▫▫';
if (player.score === 'Two') return '■■▫▫';
if (player.score === 'Three') return '■■■▫';
if (player.score === 'Adv') return '■■■+';
if (player.score === 'Win') return '■■■■';
return '';
};
class Scoreboard extends Component {
constructor(props) {
super(props);
this.state = {
abandonState: false,
};
}
if (!isPlayer) {
render(args, state) {
const {
abandon,
animating,
isPlayer,
player,
isGame,
clear,
} = args;
const { abandonState } = state;
const scoreText = () => {
if (player.score === 'Zero') return '▫▫▫▫';
if (player.score === 'One') return '■▫▫▫';
if (player.score === 'Two') return '■■▫▫';
if (player.score === 'Three') return '■■■▫';
if (player.score === 'Adv') return '■■■+';
if (player.score === 'Win') return '■■■■';
return '';
};
const divClick = e => {
e.stopPropagation();
return this.setState({ abandonState: false });
};
const abandonStateTrue = e => {
e.stopPropagation();
this.setState({ abandonState: true });
};
if (!isPlayer) {
return (
<div class={`player-box top ${player.ready ? 'ready' : ''}`}>
<div class="ctrl">&nbsp;</div>
<div class="score">{scoreText()}</div>
<div class="img">
<div>{player.name}</div>
</div>
</div>
);
}
const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`;
const abandonAction = abandonState ? abandon : abandonStateTrue;
return (
<div class={`player-box top ${player.ready ? 'ready' : ''}`}>
<div class="ctrl">&nbsp;</div>
<div onClick={divClick} class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
<div class="score">{scoreText()}</div>
<div class="img">
<div>{player.name}</div>
</div>
<div>
{(isPlayer && isGame) ? <button disabled={animating} onClick={clear}>Clear</button> : null}
</div>
<div>
{(abandon) ? <button class={abandonClasses} disabled={animating} onClick={abandonAction}>Abandon</button> : null}
</div>
</div>
);
}
return (
<div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
<div class="score">{scoreText()}</div>
<div class="img">
<div>{player.name}</div>
</div>
<div>
{(isPlayer && isGame) ? <button disabled={animating} onClick={clear}>Clear</button> : null}
</div>
<div>
{(abandon) ? <button disabled={animating} onClick={abandon}>Abandon</button> : null}
</div>
</div>
);
}
module.exports = addState(Scoreboard);