concede game round

client/src/components/game.ctrl.btns.top.jsx

@@ -20,12 +20,17 @@ const addState = connect(
             return ws.sendGameOfferDraw(game.id);
         }
 
+        function sendConcede() {
+            return ws.sendGameConcede(game.id);
+        }
+
         return {
             game,
             account,
 
             sendAbandon,
             sendDraw,
+            sendConcede,
             animating,
         };
     },
@@ -49,11 +54,12 @@ function GameCtrlTopBtns(args) {
         leave,
         sendAbandon,
         sendDraw,
+        sendConcede,
         animating,
     } = args;
 
     const finished = game && game.phase === 'Finished';
-    const { abandonState, drawState } = this.state;
+    const { abandonState, drawState, concedeState } = this.state;
 
     const player = game.players.find(p => p.id === account.id);
     const drawOffered = player && player.draw_offered;
@@ -70,6 +76,12 @@ function GameCtrlTopBtns(args) {
         setTimeout(() => this.setState({ drawState: false }), 2000);
     };
 
+    const concedeStateTrue = e => {
+        e.stopPropagation();
+        this.setState({ concedeState: true });
+        setTimeout(() => this.setState({ concedeState: false }), 2000);
+    };
+
     const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`;
     const abandonText = abandonState ? 'Confirm' : 'Abandon';
     const abandonAction = abandonState ? sendAbandon : abandonStateTrue;
@@ -83,9 +95,15 @@ function GameCtrlTopBtns(args) {
     const drawAction = drawState ? sendDraw : drawStateTrue;
     const drawBtn = <button class={drawClasses} disabled={finished || animating || drawOffered} onClick={drawAction}>{drawText}</button>;
 
+    const concedeClasses = `draw ${concedeState ? 'confirming' : ''}`;
+    const concedeText = concedeState ? 'Round' : 'Concede';
+    const concedeAction = concedeState ? sendConcede : concedeStateTrue;
+    const concedeBtn = <button class={concedeClasses} disabled={finished || animating } onClick={concedeAction}>{concedeText}</button>;
+
     return (
         <div class="instance-ctrl-btns">
             {abandonBtn}
+            {concedeBtn}
             {drawBtn}
         </div>
     );