move buttons out of game.ctrl

client/assets/styles/controls.less

@@ -14,6 +14,10 @@ aside {
 
     padding-left: 1em;
 
+    .game-controls {
+       grid-template-rows: 1fr 1fr 1fr min-content;
+    }
+
     .controls {
         grid-area: controls;
 

client/src/components/game.ctrl.jsx

@@ -67,6 +67,8 @@ function Controls(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);
 
@@ -104,13 +106,30 @@ function Controls(args) {
     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 class="controls">
+        <aside onClick={cancelAbandon}>
             {timer}
-            <div class="controls">
+            <div class="controls game-controls">
                 <PlayerBox player={opponent}/>
                 {game.phase === 'Finish' ? quitBtn : readyBtn}
-                <PlayerBox player={player} isPlayer={true} isGame={true} clear={sendGameSkillClear} abandon={sendAbandon}/>
+                <PlayerBox player={player} isPlayer={true} />
+                <div class="game-btns">
+                    <button disabled={animating} onClick={sendGameSkillClear}>Clear</button>
+                    <button class={abandonClasses} disabled={animating} onClick={abandonAction}>Abandon</button>
+                </div>
             </div>
         </aside>
     );

client/src/components/player.box.jsx

@@ -1,82 +1,47 @@
 const preact = require('preact');
-const { Component } = require('preact')
-const { connect } = require('preact-redux');
 
-const addState = connect(
+function Scoreboard(args) {
-    function receiveState(state) {
+    const {
-        const { animating } = state;
+        isPlayer,
-        return { animating };
+        ready,
-    }
+        player,
-);
 
+        leave,
+    } = args;
 
-class Scoreboard extends Component {
+    let scoreText = () => {
-    constructor(props) {
+        if (player.score === 'Zero') return '▫▫▫▫';
-        super(props);
+        if (player.score === 'One') return '■▫▫▫';
-        this.state = {
+        if (player.score === 'Two') return '■■▫▫';
-            abandonState: false,
+        if (player.score === 'Three') return '■■■▫';
-        };
+        if (player.score === 'Adv') return '■■■+';
-    }
+        if (player.score === 'Win') return '■■■■';
+        return '';
+    };
 
-    render(args, state) {
+    if (!isPlayer) {
-        const {
-            abandon,
-            animating,
-            isPlayer,
-            player,
-            isGame,
-            clear,
-        } = args;
-
-        const { abandonState } = state;
-
-        const scoreText = () => {
-            if (player.score === 'Zero') return '▫▫▫▫';
-            if (player.score === 'One') return '■▫▫▫';
-            if (player.score === 'Two') return '■■▫▫';
-            if (player.score === 'Three') return '■■■▫';
-            if (player.score === 'Adv') return '■■■+';
-            if (player.score === 'Win') return '■■■■';
-            return '';
-        };
-
-        const divClick = e => {
-            e.stopPropagation();
-            return this.setState({ abandonState: false });
-        };
-        const abandonStateTrue = e => {
-            e.stopPropagation();
-            this.setState({ abandonState: true });
-        };
-
-        if (!isPlayer) {
-            return (
-                <div class={`player-box top ${player.ready ? 'ready' : ''}`}>
-                    <div class="ctrl">&nbsp;</div>
-                    <div class="score">{scoreText()}</div>
-                    <div class="img">
-                        <div>{player.name}</div>
-                    </div>
-                </div>
-            );
-        }
-        const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`;
-        const abandonAction = abandonState ? abandon : abandonStateTrue;
         return (
-            <div onClick={divClick} class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
+            <div class={`player-box top ${player.ready ? 'ready' : ''}`}>
+                <div class="ctrl">&nbsp;</div>
                 <div class="score">{scoreText()}</div>
                 <div class="img">
                     <div>{player.name}</div>
                 </div>
-                <div>
-                    {(isPlayer && isGame) ? <button disabled={animating} onClick={clear}>Clear</button> : null}
-                </div>
-                <div>
-                    {(abandon) ? <button class={abandonClasses} disabled={animating} onClick={abandonAction}>Abandon</button> : null}
-                </div>
             </div>
         );
     }
+
+    return (
+        <div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
+            <div class="score">{scoreText()}</div>
+            <div class="img">
+                <div>{player.name}</div>
+            </div>
+            <div class="ctrl">
+                {leave ? <button onClick={leave}>Leave</button> : null}
+            </div>
+        </div>
+    );
 }
 
-module.exports = addState(Scoreboard);
+module.exports = Scoreboard;