solidify controls

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 = <button disabled={animating} class="ready" onClick={() => sendReady()}>Ready</button>;
+    const quitBtn = <button disabled={animating} onClick={quitClick}>Back</button>;
+
+    return (
+        <div class="instance-ctrl-btns">
+            {finished ? quitBtn : readyBtn}
+            <button>Chat</button>
+            <button disabled={animating} onClick={sendGameSkillClear}>Clear</button>
+            <button class={abandonClasses} disabled={animating || finished} onClick={abandonAction}>Abandon</button>
+        </div>
+    );
+}
+
+module.exports = addState(InstanceCtrlBtns);

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) {
         </div>
     );
 
-    const readyBtn = <button disabled={animating} class="ready" onClick={() => sendReady()}>Ready</button>;
-    const quitBtn = <button disabled={animating} onClick={quitClick}>Back</button>;
-
-    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 (
-        <aside onClick={cancelAbandon}>
+        <aside>
             {timer}
             <div class="controls instance-ctrl">
                 <PlayerBox player={opponent}/>
-                {game.phase === 'Finish' ? quitBtn : readyBtn}
                 <PlayerBox player={player} isPlayer={true} />
-                <InstanceCtrlBtns />
+                <GameCtrlButtons />
             </div>
         </aside>
     );

client/src/components/instance.ctrl.btns.jsx

@@ -7,55 +7,49 @@ const addState = connect(
     function receiveState(state) {
         const {
             ws,
-            game,
             instance,
-            animating,
         } = state;
 
         function sendReady() {
             document.activeElement.blur();
-            return ws.sendGameReady(game.id);
+            return ws.sendInstanceReady(instance.id);
-        }
-
-        function sendGameSkillClear() {
-            return ws.sendGameSkillClear(game.id);
         }
 
         function sendAbandon() {
-            const id = instance ? instance.id : game.instance;
+            return ws.sendInstanceAbandon(instance.id);
-            return ws.sendInstanceAbandon(id);
         }
 
         return {
-            game,
             instance,
-            animating,
 
             sendAbandon,
-            sendGameSkillClear,
+            sendReady,
         };
     },
+
+    function receiveDispatch(dispatch) {
+        function leave() {
+            dispatch(actions.setNav('play'));
+            dispatch(actions.setGame(null));
+            dispatch(actions.setInstance(null));
+        }
+
+        return { leave };
+    }
 );
 
 function InstanceCtrlBtns(args) {
     const {
-        sendAbandon,
-        animating,
-        sendGameSkillClear,
-
-        game,
         instance,
+
+        sendAbandon,
+        sendReady,
+        leave,
     } = args;
 
     const finished = instance && instance.phase === 'Finished';
-
     const { abandonState } = this.state;
 
-    const cancelAbandon = e => {
-        e.stopPropagation();
-        return this.setState({ abandonState: false });
-    };
-
     const abandonStateTrue = e => {
         e.stopPropagation();
         this.setState({ abandonState: true });
@@ -65,11 +59,15 @@ function InstanceCtrlBtns(args) {
     const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`;
     const abandonAction = abandonState ? sendAbandon : abandonStateTrue;
 
+    const ready = !finished
+        ? <button class="ready" onClick={() => sendReady()}>Ready</button>
+        : <button class="ready" onClick={leave}>Leave</button>;
+
     return (
         <div class="instance-ctrl-btns">
+            {ready}
             <button>Chat</button>
-            {game ? <button disabled={animating} onClick={sendGameSkillClear}>Clear</button> : null}
+            <button class={abandonClasses} disabled={finished} onClick={abandonAction}>Abandon</button>
-            <button class={abandonClasses} disabled={animating || finished} onClick={abandonAction}>Abandon</button>
         </div>
     );
 }

client/src/components/instance.ctrl.jsx

@@ -11,44 +11,19 @@ const addState = connect(
             ws,
             instance,
             account,
-            animating,
         } = state;
 
-        function sendReady() {
-            document.activeElement.blur();
-            return ws.sendInstanceReady(instance.id);
-        }
-
-        function sendAbandon() {
-            return ws.sendInstanceAbandon(instance.id);
-        }
-
         return {
-            sendAbandon,
             instance,
-            sendReady,
             account,
-            animating,
         };
     },
-    function receiveDispatch(dispatch) {
-        function leave() {
-            dispatch(actions.setNav('play'));
-            dispatch(actions.setGame(null));
-            dispatch(actions.setInstance(null));
-        }
-
-        return { leave };
-    }
 );
 
 function Controls(args) {
     const {
         account,
-        sendAbandon,
         instance,
-        sendReady,
-        leave,
     } = args;
 
     if (!instance) return false;
@@ -76,27 +51,18 @@ function Controls(args) {
         background: displayColour,
     };
 
-    const timer = instance.phase !== 'InProgress'
+    const timer = (
-        ? null
+        <div class="timer-container">
-        : (
+            <div class="timer" style={timerStyles} >&nbsp;</div>
-            <div class="timer-container">
+        </div>
-                <div class="timer" style={timerStyles} >&nbsp;</div>
+    );
-            </div>
-        );
-
-    const ready = instance.phase !== 'Finished'
-        ? <button class="ready" onClick={() => sendReady()}>Ready</button>
-        : <button class="ready" onClick={leave}>Leave</button>
-
-    const abandon = instance.phase !== 'Finished' ? sendAbandon : false;
 
     return (
         <aside>
             {timer}
             <div class="controls instance-ctrl">
                 <PlayerBox player={opponent} />
-                <PlayerBox player={player} isPlayer={true} abandon={abandon}/>
+                <PlayerBox player={player} isPlayer={true} />
-                {ready}
                 <InstanceCtrlBtns />
             </div>
         </aside>