Merge branch 'develop' into tutorial-merged

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/package.json

@@ -1,12 +1,12 @@
 {
   "name": "mnml-client",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "",
   "main": "index.js",
   "scripts": {
     "start": "parcel watch index.html --out-dir /var/lib/mnml/public/current",
     "anims": "parcel watch animations.html --no-hmr --out-dir /var/lib/mnml/public/current",
-    "build": "parcel build index.html",
+    "build": "parcel build index.html --no-source-maps",
     "scss": "node-sass --watch assets/scss -o assets/styles",
     "lint": "eslint --fix --ext .jsx src/",
     "test": "echo \"Error: no test specified\" && exit 1"

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} />

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,