Merge branch 'develop' into tutorial-merged

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

@@ -9,15 +9,23 @@ const addState = connect(
             ws,
             game,
             animating,
+            account,
         } = state;
 
         function sendAbandon() {
             return ws.sendInstanceAbandon(game.instance);
         }
 
+        function sendDraw() {
+            return ws.sendGameOfferDraw(game.id);
+        }
+
         return {
             game,
+            account,
+
             sendAbandon,
+            sendDraw,
             animating,
         };
     },
@@ -36,13 +44,19 @@ const addState = connect(
 function GameCtrlTopBtns(args) {
     const {
         game,
+        account,
+
         leave,
         sendAbandon,
+        sendDraw,
         animating,
     } = args;
 
-    const finished = game && game.phase === 'Finish';
-    const { abandonState } = this.state;
+    const finished = game && game.phase === 'Finished';
+    const { abandonState, drawState } = this.state;
+
+    const player = game.players.find(p => p.id === account.id);
+    const drawOffered = player && player.draw_offered;
 
     const abandonStateTrue = e => {
         e.stopPropagation();
@@ -50,16 +64,29 @@ 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 || animating} onClick={abandonAction}>{abandonText}</button>;
-    const leaveBtn = <button class='abandon confirming' onClick={leave}>Leave</button>;
+
+    const drawClasses = `draw ${drawState || drawOffered ? 'confirming' : ''}`;
+    const drawText = drawOffered
+        ? 'Offered'
+        : drawState ? 'Draw' : 'Offer';
+    const drawAction = drawState ? sendDraw : drawStateTrue;
+    const drawBtn = <button class={drawClasses} disabled={finished || drawOffered} 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/components/player.box.jsx

@@ -68,6 +68,11 @@ function Scoreboard(args) {
     };
 
     const winner = player.score === 'Win';
+    const chatText = chat
+        ? chat
+        : player.draw_offered
+            ? 'draw'
+            : '\u00A0';
 
     if (!isPlayer) {
         const nameClass = `name ${player.img ? 'subscriber' : ''}`;
@@ -77,7 +82,7 @@ function Scoreboard(args) {
                 <div class="score">{scoreText()}</div>
                 <div class={nameClass}>{player.name}</div>
                 <Img img={player.img} id={player.id} />
-                <div class="msg">{chat || '\u00A0'}</div>
+                <div class="msg">{chatText}</div>
             </div>
         );
     }
@@ -87,7 +92,7 @@ function Scoreboard(args) {
 
     return (
         <div class={boxClass}>
-            <div class="msg">{chat || '\u00A0'}</div>
+            <div class="msg">{chatText}</div>
             <div class="score">{scoreText()}</div>
             <div class={nameClass}>{player.name}</div>
             <Img img={player.img} id={player.id} />