instance btn file

client/assets/styles/controls.less

@@ -14,7 +14,7 @@ aside {
 
     padding-left: 1em;
 
-    .game-controls {
+    .instance-ctrl {
        grid-template-rows: 1fr 1fr 1fr min-content;
     }
 
@@ -100,15 +100,16 @@ aside {
     padding: 0 0.75em 0 0.75em;
 }
 
-.abandon {
+.abandon:not([disabled]) {
     &:hover {
         color: @red;
         border-color: @red;
+        border: 2px solid @red;
     };
 
     &:active, &.confirming {
         background: @red;
         color: black;
-        border: 1px solid black;
+        border: 2px solid black;
     }
 }

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">
+                <InstanceCtrlBtns />
-                    <button disabled={animating} onClick={sendGameSkillClear}>Clear</button>
-                    <button class={abandonClasses} disabled={animating} onClick={abandonAction}>Abandon</button>
-                </div>
             </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>
     );

server/src/instance.rs

@@ -748,6 +748,13 @@ pub fn pvp(tx: &mut Transaction, a: &Account, b: &Account) -> Result<Instance, E
 
 pub fn instance_abandon(tx: &mut Transaction, account: &Account, instance_id: Uuid) -> Result<RpcMessage, Error> {
     let mut instance = instance_get(tx, instance_id)?;
+
+    if let Some(game_id) = instance.current_game_id() {
+        let mut game = game_get(tx, game_id)?;
+        game.player_by_id(account.id)?.forfeit();
+        game_update(tx, &game)?;
+    }
+
     instance.account_player(account.id)?.set_lose();
     instance.account_opponent(account.id)?.set_win();
     instance.next_round();