offer draws

client/assets/styles/controls.less

@@ -144,7 +144,15 @@ aside {
     &:active, &.confirming {
         background: @red;
         color: black;
-        border: 2px solid black;
+        border: 2px solid @red;
+    }
+}
+
+.draw:not([disabled]) {
+    &:active, &.confirming {
+        background: @gray-hover;
+        color: black;
+        border: 2px solid @gray-hover;
     }
 }
 

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

@@ -75,7 +75,7 @@ function GameCtrlBtns(args) {
     } = args;
 
     if (!game) return false;
-    const finished = game.phase === 'Finish';
+    const finished = game.phase === 'Finished';
 
     function quitClick() {
         getInstanceState();

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

@@ -14,10 +14,15 @@ const addState = connect(
             return ws.sendInstanceAbandon(game.instance);
         }
 
+        function sendDraw() {
+            return ws.sendGameOfferDraw(game.id);
+        }
+
         return {
             game,
 
             sendAbandon,
+            sendDraw,
         };
     },
     function receiveDispatch(dispatch) {
@@ -37,10 +42,11 @@ function GameCtrlTopBtns(args) {
 
         leave,
         sendAbandon,
+        sendDraw,
     } = args;
 
     const finished = game && game.phase === 'Finished';
-    const { abandonState } = this.state;
+    const { abandonState, drawState } = this.state;
 
     const abandonStateTrue = e => {
         e.stopPropagation();
@@ -48,16 +54,27 @@ function GameCtrlTopBtns(args) {
         setTimeout(() => this.setState({ abandonState: false }), 2000);
     };
 
+    const drawStateTrue = e => {
+        e.stopPropagation();
+        this.setState({ drawState: true });
+        setTimeout(() => this.setState({ drawState: false }), 2000);
+    };
+
     const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`;
     const abandonText = abandonState ? 'Confirm' : 'Abandon';
     const abandonAction = abandonState ? sendAbandon : abandonStateTrue;
 
     const abandonBtn = <button class={abandonClasses} disabled={finished} onClick={abandonAction}>{abandonText}</button>;
-    const leaveBtn = <button class='abandon confirming' onClick={leave}>Leave</button>;
+
+    const drawClasses = `draw ${drawState ? 'confirming' : ''}`;
+    const drawText = drawState ? 'Draw' : 'Offer';
+    const drawAction = drawState ? sendDraw : drawStateTrue;
+    const drawBtn = <button class={drawClasses} disabled={finished} onClick={drawAction}>{drawText}</button>;
 
     return (
         <div class="instance-ctrl-btns">
-            {finished ? leaveBtn : abandonBtn}
+            {abandonBtn}
+            {drawBtn}
         </div>
     );
 }

client/src/components/game.footer.jsx

@@ -82,7 +82,7 @@ function GameFooter(props) {
     const now = Date.now();
     const end = Date.parse(game.phase_end);
     const timerPct = ((now - zero) / (end - zero) * 100);
-    const displayPct = game.phase === 'Finish' || !game.phase_end
+    const displayPct = game.phase === 'Finished' || !game.phase_end
         ? 0
         : Math.min(timerPct, 100);
 
@@ -108,7 +108,7 @@ function GameFooter(props) {
     return (
         <footer>
             {timer}
-            {game.phase === 'Finish' && quitBtn }
+            {game.phase === 'Finished' && quitBtn }
             {game.phase === 'Skill' && readyBtn }
         </footer>
     );

client/src/socket.jsx

@@ -123,6 +123,11 @@ function createSocket(events) {
         events.setActiveSkill(null);
     }
 
+    function sendGameOfferDraw(gameId) {
+        send(['GameOfferDraw', { game_id: gameId }]);
+        events.setActiveSkill(null);
+    }
+
     function sendGameTarget(gameId, constructId, skillId) {
         send(['GameTarget', { game_id: gameId, construct_id: constructId, skill_id: skillId }]);
         events.setActiveSkill(null);
@@ -362,6 +367,7 @@ function createSocket(events) {
         sendGameReady,
         sendGameSkill,
         sendGameSkillClear,
+        sendGameOfferDraw,
         sendGameTarget,
 
         sendInstanceAbandon,