confirm abandon

client/assets/styles/controls.less

@@ -1,3 +1,5 @@
+@import 'colours.less';
+
 aside {
     grid-area: ctrl;
     display: grid;
@@ -93,3 +95,16 @@ aside {
 .team-page-ctrl h2 {
     padding: 0 0.75em 0 0.75em;
 }
+
+.abandon {
+    &:hover {
+        color: @red;
+        border-color: @red;
+    };
+
+    &:active, &.confirming {
+        background: @red;
+        color: black;
+        border: 1px solid black;
+    }
+}

client/src/components/player.box.jsx

@@ -1,4 +1,5 @@
 const preact = require('preact');
+const { Component } = require('preact')
 const { connect } = require('preact-redux');
 
 const addState = connect(
@@ -8,52 +9,74 @@ const addState = connect(
     }
 );
 
-function Scoreboard(args) {
-    const {
-        abandon,
-        animating,
-        isPlayer,
-        player,
-        isGame,
-        clear,
-    } = args;
 
-    const scoreText = () => {
+class Scoreboard extends Component {
-        if (player.score === 'Zero') return '▫▫▫▫';
+    constructor(props) {
-        if (player.score === 'One') return '■▫▫▫';
+        super(props);
-        if (player.score === 'Two') return '■■▫▫';
+        this.state = {
-        if (player.score === 'Three') return '■■■▫';
+            abandonState: false,
-        if (player.score === 'Adv') return '■■■+';
+        };
-        if (player.score === 'Win') return '■■■■';
+    }
-        return '';
-    };
 
-    if (!isPlayer) {
+    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;
         return (
-            <div class={`player-box top ${player.ready ? 'ready' : ''}`}>
+            <div onClick={divClick} class={`player-box bottom ${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>
-                {(isPlayer && isGame) ? <button disabled={animating} onClick={clear}>Clear</button> : null}
-            </div>
-            <div>
-                {(abandon) ? <button disabled={animating} onClick={abandon}>Abandon</button> : null}
-            </div>
-        </div>
-    );
 }
 
 module.exports = addState(Scoreboard);