113 lines
3.1 KiB
JavaScript
113 lines
3.1 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
|
|
const actions = require('../actions');
|
|
|
|
const addState = connect(
|
|
function receiveState(state) {
|
|
const {
|
|
ws,
|
|
game,
|
|
animating,
|
|
account,
|
|
} = state;
|
|
|
|
function sendAbandon() {
|
|
return ws.sendInstanceAbandon(game.instance);
|
|
}
|
|
|
|
function sendDraw() {
|
|
return ws.sendGameOfferDraw(game.id);
|
|
}
|
|
|
|
function sendConcede() {
|
|
return ws.sendGameConcede(game.id);
|
|
}
|
|
|
|
return {
|
|
game,
|
|
account,
|
|
|
|
sendAbandon,
|
|
sendDraw,
|
|
sendConcede,
|
|
animating,
|
|
};
|
|
},
|
|
|
|
function receiveDispatch(dispatch) {
|
|
function leave() {
|
|
dispatch(actions.setNav('play'));
|
|
dispatch(actions.setGame(null));
|
|
}
|
|
|
|
return { leave };
|
|
}
|
|
|
|
);
|
|
|
|
function GameCtrlTopBtns(args) {
|
|
const {
|
|
game,
|
|
account,
|
|
|
|
leave,
|
|
sendAbandon,
|
|
sendDraw,
|
|
sendConcede,
|
|
animating,
|
|
} = args;
|
|
|
|
const finished = game && game.phase === 'Finished';
|
|
const { abandonState, drawState, concedeState } = this.state;
|
|
|
|
const player = game.players.find(p => p.id === account.id);
|
|
const drawOffered = player && player.draw_offered;
|
|
|
|
const abandonStateTrue = e => {
|
|
e.stopPropagation();
|
|
this.setState({ abandonState: true });
|
|
setTimeout(() => this.setState({ abandonState: false }), 2000);
|
|
};
|
|
|
|
const drawStateTrue = e => {
|
|
e.stopPropagation();
|
|
this.setState({ drawState: true });
|
|
setTimeout(() => this.setState({ drawState: false }), 2000);
|
|
};
|
|
|
|
const concedeStateTrue = e => {
|
|
e.stopPropagation();
|
|
this.setState({ concedeState: true });
|
|
setTimeout(() => this.setState({ concedeState: false }), 2000);
|
|
};
|
|
|
|
const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`;
|
|
const abandonText = abandonState ? 'Confirm' : 'Abandon';
|
|
const abandonAction = abandonState ? sendAbandon : abandonStateTrue;
|
|
|
|
const abandonBtn = <button class={abandonClasses} disabled={finished || animating} onClick={abandonAction}>{abandonText}</button>;
|
|
|
|
const drawClasses = `draw ${drawState || drawOffered ? 'confirming' : ''}`;
|
|
const drawText = drawOffered
|
|
? 'Offered'
|
|
: drawState ? 'Draw' : 'Offer';
|
|
const drawAction = drawState ? sendDraw : drawStateTrue;
|
|
const drawBtn = <button class={drawClasses} disabled={finished || animating || drawOffered} onClick={drawAction}>{drawText}</button>;
|
|
|
|
const concedeClasses = `draw ${concedeState ? 'confirming' : ''}`;
|
|
const concedeText = concedeState ? 'Round' : 'Concede';
|
|
const concedeAction = concedeState ? sendConcede : concedeStateTrue;
|
|
const concedeBtn = <button class={concedeClasses} disabled={finished || animating } onClick={concedeAction}>{concedeText}</button>;
|
|
|
|
return (
|
|
<div class="instance-ctrl-btns">
|
|
{abandonBtn}
|
|
{concedeBtn}
|
|
{drawBtn}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(GameCtrlTopBtns);
|