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,36 +1,15 @@
 const preact = require('preact');
-const { Component } = require('preact')
-const { connect } = require('preact-redux');
 
-const addState = connect(
-    function receiveState(state) {
-        const { animating } = state;
-        return { animating };
-    }
-);
-
-
-class Scoreboard extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            abandonState: false,
-        };
-    }
-
-    render(args, state) {
+function Scoreboard(args) {
     const {
-            abandon,
-            animating,
         isPlayer,
+        ready,
         player,
-            isGame,
-            clear,
+
+        leave,
     } = args;
 
-        const { abandonState } = state;
-
-        const scoreText = () => {
+    let scoreText = () => {
         if (player.score === 'Zero') return '▫▫▫▫';
         if (player.score === 'One') return '■▫▫▫';
         if (player.score === 'Two') return '■■▫▫';
@@ -40,15 +19,6 @@ class Scoreboard extends Component {
         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' : ''}`}>
@@ -60,23 +30,18 @@ class Scoreboard extends Component {
             </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 bottom ${player.ready ? 'ready' : ''}`}>
             <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 class="ctrl">
+                {leave ? <button onClick={leave}>Leave</button> : null}
             </div>
         </div>
     );
 }
-}
 
-module.exports = addState(Scoreboard);
+module.exports = Scoreboard;