move abandon btn

client/assets/styles/controls.less

@@ -22,7 +22,14 @@ aside {
         grid-area: controls;
 
         display: grid;
-        grid-auto-rows: 1fr;
+
+        grid-template-areas:
+            "top"
+            "p0"
+            "p1"
+            "bottom";
+
+        grid-template-rows: min-content 3fr 3fr 1fr;
         grid-gap: 0.5em 0;
     }
 
@@ -107,13 +114,13 @@ aside {
 
     button {
         flex: 0;
+    }
 
-        &:first-child {
+    .ready {
         flex: 1;
         font-size: 200%;
     }
 }
-}
 
 .abandon:not([disabled]) {
     &:hover {

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

@@ -49,48 +49,24 @@ const addState = connect(
     }
 );
 
-function InstanceCtrlBtns(args) {
+function GameCtrlBtns(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>
+            <button disabled={animating} class="ready" onClick={() => sendReady()}>Ready</button>
         </div>
     );
 }
 
-module.exports = addState(InstanceCtrlBtns);
+module.exports = addState(GameCtrlBtns);

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

@@ -0,0 +1,64 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const actions = require('../actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            game,
+        } = state;
+
+        function sendAbandon() {
+            return ws.sendInstanceAbandon(game.instance);
+        }
+
+        return {
+            game,
+
+            sendAbandon,
+        };
+    },
+    function receiveDispatch(dispatch) {
+        function leave() {
+            dispatch(actions.setNav('play'));
+            dispatch(actions.setGame(null));
+            dispatch(actions.setInstance(null));
+        }
+
+        return { leave };
+    }
+);
+
+function GameCtrlTopBtns(args) {
+    const {
+        game,
+
+        leave,
+        sendAbandon,
+    } = args;
+
+    const finished = game && game.phase === 'Finished';
+    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;
+
+    const abandonBtn = <button class={abandonClasses} disabled={finished} onClick={abandonAction}>Abandon</button>;
+    const leaveBtn = <button class='abandon confirming' onClick={leave}>Leave</button>;
+
+    return (
+        <div class="instance-ctrl-btns">
+            {finished ? leaveBtn : abandonBtn}
+        </div>
+    );
+}
+
+module.exports = addState(GameCtrlTopBtns);

client/src/components/game.ctrl.jsx

@@ -5,6 +5,7 @@ const actions = require('../actions');
 
 const PlayerBox = require('./player.box');
 const GameCtrlButtons = require('./game.ctrl.btns');
+const GameCtrlTopButtons = require('./game.ctrl.btns.top');
 
 const addState = connect(
     function receiveState(state) {
@@ -61,6 +62,7 @@ function Controls(args) {
         <aside>
             {timer}
             <div class="controls instance-ctrl">
+                <GameCtrlTopButtons />
                 <PlayerBox player={opponent}/>
                 <PlayerBox player={player} isPlayer={true} />
                 <GameCtrlButtons />

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

@@ -26,16 +26,6 @@ const addState = connect(
             sendReady,
         };
     },
-
-    function receiveDispatch(dispatch) {
-        function leave() {
-            dispatch(actions.setNav('play'));
-            dispatch(actions.setGame(null));
-            dispatch(actions.setInstance(null));
-        }
-
-        return { leave };
-    }
 );
 
 function InstanceCtrlBtns(args) {
@@ -44,30 +34,12 @@ function InstanceCtrlBtns(args) {
 
         sendAbandon,
         sendReady,
-        leave,
     } = args;
 
-    const finished = instance && instance.phase === 'Finished';
-    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;
-
-    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>
-            <button class={abandonClasses} disabled={finished} onClick={abandonAction}>Abandon</button>
+            <button class="ready" onClick={() => sendReady()}>Ready</button>
         </div>
     );
 }

client/src/components/instance.ctrl.jsx

@@ -4,6 +4,7 @@ const { connect } = require('preact-redux');
 const actions = require('../actions');
 const PlayerBox = require('./player.box');
 const InstanceCtrlBtns = require('./instance.ctrl.btns');
+const InstanceCtrlTopBtns = require('./instance.ctrl.top.btns');
 
 const addState = connect(
     function receiveState(state) {
@@ -61,6 +62,7 @@ function Controls(args) {
         <aside>
             {timer}
             <div class="controls instance-ctrl">
+                <InstanceCtrlTopBtns />
                 <PlayerBox player={opponent} />
                 <PlayerBox player={player} isPlayer={true} />
                 <InstanceCtrlBtns />

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

@@ -0,0 +1,64 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const actions = require('../actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            instance,
+        } = state;
+
+        function sendAbandon() {
+            return ws.sendInstanceAbandon(instance.id);
+        }
+
+        return {
+            instance,
+
+            sendAbandon,
+        };
+    },
+    function receiveDispatch(dispatch) {
+        function leave() {
+            dispatch(actions.setNav('play'));
+            dispatch(actions.setGame(null));
+            dispatch(actions.setInstance(null));
+        }
+
+        return { leave };
+    }
+);
+
+function InstanceTopBtns(args) {
+    const {
+        instance,
+
+        leave,
+        sendAbandon,
+    } = args;
+
+    const finished = instance && instance.phase === 'Finished';
+    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;
+
+    const abandonBtn = <button class={abandonClasses} disabled={finished} onClick={abandonAction}>Abandon</button>;
+    const leaveBtn = <button class='abandon confirming' onClick={leave}>Leave</button>;
+
+    return (
+        <div class="instance-ctrl-btns">
+            {finished ? leaveBtn : abandonBtn}
+        </div>
+    );
+}
+
+module.exports = addState(InstanceTopBtns);

client/src/components/player.box.jsx

@@ -3,10 +3,7 @@ const preact = require('preact');
 function Scoreboard(args) {
     const {
         isPlayer,
-        ready,
         player,
-
-        leave,
     } = args;
 
     const scoreText = () => {
@@ -32,13 +29,11 @@ function Scoreboard(args) {
     if (!isPlayer) {
         return (
             <div class={`player-box top ${player.ready ? 'ready' : ''}`}>
-                <div class="ctrl">&nbsp;</div>
                 <div class="score">{scoreText()}</div>
                 <div class="name">{player.name}</div>
                 <div class="img avatar"
                     id='a9edadda-2b44-4270-b9a7-d7bf30ae35a7'
                     style={{ 'background-image': `url(/imgs/c170c913-7bd1-4196-97d0-97f404cfbbe9.svg)` }}>
-                    &nbsp;
                 </div>
                 <div class="msg">glhf</div>
             </div>
@@ -53,10 +48,6 @@ function Scoreboard(args) {
             <div class="img avatar"
                 id='a9edadda-2b44-4270-b9a7-d7bf30ae35a7'
                 style={{ 'background-image': `url(/imgs/a9edadda-2b44-4270-b9a7-d7bf30ae35a7.svg)` }}>
-                &nbsp;
-            </div>
-            <div class="ctrl">
-                {leave ? <button onClick={leave}>Leave</button> : null}
             </div>
         </div>
     );