From ba48123fbcee51676be6841e4df6a88c5511b31e Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Fri, 13 Sep 2019 12:36:32 +1000
Subject: [PATCH] move buttons out of game.ctrl

---
 client/assets/styles/controls.less   |  4 ++
 client/src/components/game.ctrl.jsx  | 25 ++++++-
 client/src/components/player.box.jsx | 99 +++++++++-------------------
 3 files changed, 58 insertions(+), 70 deletions(-)

diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less
index 6aac705b..678fb29f 100644
--- a/client/assets/styles/controls.less
+++ b/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;
 
diff --git a/client/src/components/game.ctrl.jsx b/client/src/components/game.ctrl.jsx
index a1a1675c..8da239bf 100644
--- a/client/src/components/game.ctrl.jsx
+++ b/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>
     );
diff --git a/client/src/components/player.box.jsx b/client/src/components/player.box.jsx
index 39a4cb2b..4b626171 100644
--- a/client/src/components/player.box.jsx
+++ b/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 receiveState(state) {
-        const { animating } = state;
-        return { animating };
-    }
-);
+function Scoreboard(args) {
+    const {
+        isPlayer,
+        ready,
+        player,
 
+        leave,
+    } = args;
 
-class Scoreboard extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            abandonState: false,
-        };
-    }
+    let 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 '';
+    };
 
-    render(args, state) {
-        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;
+    if (!isPlayer) {
         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;