draw fixes and client side showing

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

@@ -8,6 +8,7 @@ const addState = connect(
         const {
             ws,
             game,
+            account,
         } = state;
 
         function sendAbandon() {
@@ -20,6 +21,7 @@ const addState = connect(
 
         return {
             game,
+            account,
 
             sendAbandon,
             sendDraw,
@@ -39,6 +41,7 @@ const addState = connect(
 function GameCtrlTopBtns(args) {
     const {
         game,
+        account,
 
         leave,
         sendAbandon,
@@ -48,6 +51,9 @@ function GameCtrlTopBtns(args) {
     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();
         this.setState({ abandonState: true });
@@ -66,10 +72,12 @@ function GameCtrlTopBtns(args) {
 
     const abandonBtn = <button class={abandonClasses} disabled={finished} onClick={abandonAction}>{abandonText}</button>;
 
-    const drawClasses = `draw ${drawState ? 'confirming' : ''}`;
-    const drawText = drawState ? 'Draw' : 'Offer';
+    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} onClick={drawAction}>{drawText}</button>;
+    const drawBtn = <button class={drawClasses} disabled={finished || drawOffered} onClick={drawAction}>{drawText}</button>;
 
     return (
         <div class="instance-ctrl-btns">

client/src/components/player.box.jsx

@@ -68,6 +68,11 @@ function Scoreboard(args) {
     };
 
     const winner = player.score === 'Win';
+    const chatText = player.draw_offered
+        ? 'draw?'
+        : chat || '\u00A0';
+
+    console.log(chatText);
 
     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} />