instance btn file

client/src/components/game.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 addState = connect(
     function receiveState(state) {
@@ -122,14 +123,11 @@ function Controls(args) {
     return (
         <aside onClick={cancelAbandon}>
             {timer}
-            <div class="controls game-controls">
+            <div class="controls instance-ctrl">
                 <PlayerBox player={opponent}/>
                 {game.phase === 'Finish' ? quitBtn : readyBtn}
                 <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>
+                <InstanceCtrlBtns />
             </div>
         </aside>
     );

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

@@ -0,0 +1,75 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const actions = require('../actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            game,
+            instance,
+            animating,
+        } = state;
+
+        function sendReady() {
+            document.activeElement.blur();
+            return ws.sendGameReady(game.id);
+        }
+
+        function sendGameSkillClear() {
+            return ws.sendGameSkillClear(game.id);
+        }
+
+        function sendAbandon() {
+            return ws.sendInstanceAbandon(instance.id);
+        }
+
+        return {
+            game,
+            instance,
+            animating,
+
+            sendAbandon,
+            sendGameSkillClear,
+        };
+    },
+);
+
+function InstanceCtrlBtns(args) {
+    const {
+        sendAbandon,
+        animating,
+        sendGameSkillClear,
+
+        game,
+        instance,
+    } = args;
+
+    const finished = instance.phase === 'Finished';
+
+    const { abandonState } = this.state;
+
+    const cancelAbandon = e => {
+        e.stopPropagation();
+        return this.setState({ abandonState: false });
+    };
+
+    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;
+
+    return (
+        <div>
+            {game ? <button disabled={animating} onClick={sendGameSkillClear}>Clear</button> : null}
+            <button class={abandonClasses} disabled={animating || finished} onClick={abandonAction}>Abandon</button>
+        </div>
+    );
+}
+
+module.exports = addState(InstanceCtrlBtns);

client/src/components/instance.ctrl.jsx

@@ -2,8 +2,8 @@ const preact = require('preact');
 const { connect } = require('preact-redux');
 
 const actions = require('../actions');
-
 const PlayerBox = require('./player.box');
+const InstanceCtrlBtns = require('./instance.ctrl.btns');
 
 const addState = connect(
     function receiveState(state) {
@@ -87,13 +87,15 @@ function Controls(args) {
         : <button class="ready" onClick={leave}>Leave</button>
 
     const abandon = instance.phase !== 'Finished' ? sendAbandon : false;
+
     return (
         <aside>
             {timer}
-            <div class="controls">
+            <div class="controls instance-ctrl">
                 <PlayerBox player={opponent} />
                 {ready}
                 <PlayerBox player={player} isPlayer={true} abandon={abandon}/>
+                <InstanceCtrlBtns />
             </div>
         </aside>
     );