mnml/client/src/components/game.ctrl.btns.jsx

97 lines
2.2 KiB
JavaScript

const preact = require('preact');
const { connect } = require('preact-redux');
const actions = require('../actions');
const addState = connect(
function receiveState(state) {
const {
ws,
game,
account,
chatShow,
animating,
} = state;
function sendReady() {
document.activeElement.blur();
return ws.sendGameReady(game.id);
}
function getInstanceState() {
return ws.sendInstanceState(game.instance);
}
function sendGameSkillClear() {
return ws.sendGameSkillClear(game.id);
}
function sendAbandon() {
return ws.sendInstanceAbandon(game.instance);
}
return {
game,
account,
chatShow,
sendAbandon,
sendGameSkillClear,
sendReady,
getInstanceState,
animating,
};
},
function receiveDispatch(dispatch) {
function quit() {
dispatch(actions.setNav('transition'));
dispatch(actions.setGame(null));
}
function setChatShow(v) {
dispatch(actions.setChatShow(v));
}
return {
setChatShow,
quit,
};
}
);
function GameCtrlBtns(args) {
const {
game,
animating,
account,
chatShow,
getInstanceState,
sendGameSkillClear,
sendReady,
setChatShow,
quit,
} = args;
if (!game) return false;
const finished = game.phase === 'Finished';
function quitClick() {
getInstanceState();
quit();
}
const readyBtn = <button disabled={animating} class="ready" onClick={() => sendReady()}>Ready</button>;
const quitBtn = <button disabled={animating} class="quit" onClick={quitClick}>Back</button>;
return (
<div class="game-ctrl-btns">
<button disabled={!account.subscribed} onClick={() => setChatShow(!chatShow)}>Chat</button>
<button disabled={animating} onClick={sendGameSkillClear}>Clear</button>
{finished ? quitBtn : readyBtn}
</div>
);
}
module.exports = addState(GameCtrlBtns);