diff --git a/client/src/components/game.ctrl.btns.jsx b/client/src/components/game.ctrl.btns.jsx new file mode 100644 index 00000000..c990d2df --- /dev/null +++ b/client/src/components/game.ctrl.btns.jsx @@ -0,0 +1,96 @@ +const preact = require('preact'); +const { connect } = require('preact-redux'); + +const actions = require('../actions'); + +const addState = connect( + function receiveState(state) { + const { + ws, + game, + 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, + sendAbandon, + sendGameSkillClear, + sendReady, + getInstanceState, + animating, + }; + }, + + function receiveDispatch(dispatch) { + function quit() { + dispatch(actions.setNav('transition')); + dispatch(actions.setGame(null)); + dispatch(actions.setInstance(null)); + } + + return { quit }; + } +); + +function InstanceCtrlBtns(args) { + const { + game, + animating, + + getInstanceState, + sendAbandon, + sendGameSkillClear, + sendReady, + quit, + } = args; + + if (!game) return false; + + const finished = game.phase === 'Finish'; + const { abandonState } = this.state; + + const abandonStateTrue = e => { + e.stopPropagation(); + this.setState({ abandonState: true }); + setTimeout(() => this.setState({ abandonState: false }), 2000); + }; + + const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`; + const abandonAction = abandonState ? sendAbandon : abandonStateTrue; + + function quitClick() { + getInstanceState(); + quit(); + } + + const readyBtn = ; + const quitBtn = ; + + return ( +
+ {finished ? quitBtn : readyBtn} + + + +
+ ); +} + +module.exports = addState(InstanceCtrlBtns); diff --git a/client/src/components/game.ctrl.jsx b/client/src/components/game.ctrl.jsx index 0aa4220f..696d67bc 100644 --- a/client/src/components/game.ctrl.jsx +++ b/client/src/components/game.ctrl.jsx @@ -4,80 +4,33 @@ const { connect } = require('preact-redux'); const actions = require('../actions'); const PlayerBox = require('./player.box'); -const InstanceCtrlBtns = require('./instance.ctrl.btns'); +const GameCtrlButtons = require('./game.ctrl.btns'); const addState = connect( function receiveState(state) { const { - ws, game, account, - 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, - sendAbandon, - sendGameSkillClear, - sendReady, account, - getInstanceState, - animating, }; }, - - function receiveDispatch(dispatch) { - function quit() { - dispatch(actions.setNav('transition')); - dispatch(actions.setGame(null)); - dispatch(actions.setInstance(null)); - } - - return { quit }; - } ); function Controls(args) { const { account, - sendAbandon, game, - animating, - sendGameSkillClear, - sendReady, - getInstanceState, - quit, } = args; if (!game) return false; - const { abandonState } = this.state; - const opponent = game.players.find(t => t.id !== account.id); const player = game.players.find(t => t.id === account.id); - function quitClick() { - getInstanceState(); - quit(); - } - const zero = Date.parse(game.phase_start); const now = Date.now(); const end = Date.parse(game.phase_end); @@ -104,30 +57,13 @@ function Controls(args) { ); - const readyBtn = ; - const quitBtn = ; - - const cancelAbandon = e => { - e.stopPropagation(); - return this.setState({ abandonState: false }); - }; - - const abandonStateTrue = e => { - e.stopPropagation(); - this.setState({ abandonState: true }); - }; - - const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`; - const abandonAction = abandonState ? sendAbandon : abandonStateTrue; - return ( -