TODO: finish draw offer logic + fix inCheck bug (no highlight)

[vchess.git] / client / src / views / Game.vue

diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index 2682a60..ec1962e 100644 (file)
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -1,12 +1,11 @@
 <template lang="pug">
 main
   input#modalChat.modal(type="checkbox" @click="resetChatColor")
-  div#chatWrap(role="dialog" data-checkbox="modalChat"
-      aria-labelledby="inputChat")
+  div#chatWrap(role="dialog" data-checkbox="modalChat" aria-labelledby="inputChat")
     #chat.card
       label.modal-close(for="modalChat")
       #participants
-        span {{ Object.keys(people).length }} participant(s): 
+        span {{ Object.keys(people).length }} st.tr["participant(s):"] 
         span(v-for="p in Object.values(people)" v-if="!!p.name")
           | {{ p.name }} 
         span.anonymous(v-if="Object.values(people).some(p => !p.name)")
@@ -17,9 +16,10 @@ main
     #aboveBoard.col-sm-12.col-md-9.col-md-offset-3.col-lg-10.col-lg-offset-2
       button#chatBtn(onClick="doClick('modalChat')") Chat
       #actions(v-if="game.score=='*'")
-        button(@click="clickDraw" :class="{['draw-' + drawOffer]: true}") Draw
-        button(@click="abortGame") Abort
-        button(@click="resign") Resign
+        button(@click="clickDraw" :class="{['draw-' + drawOffer]: true}")
+          | {{ st.tr["Draw"] }}
+        button(@click="abortGame") {{ st.tr["Abort"] }}
+        button(@click="resign") {{ st.tr["Resign"] }}
       #playersInfo
         p
           span.name(:class="{connected: isConnected(0)}")
@@ -94,7 +94,7 @@ export default {
         {
           clearInterval(clockUpdate);
           if (countdown < 0)
-            this.gameOver(this.vr.turn=="w" ? "0-1" : "1-0", "Time");
+            this.gameOver(this.vr.turn=="w" ? "0-1" : "1-0", this.st.tr["Time"]);
         }
         else
         {
@@ -159,7 +159,7 @@ export default {
       switch (data.code)
       {
         case "duplicate":
-          alert("Warning: duplicate 'offline' connection");
+          alert(this.st.tr["Warning: multi-tabs not supported"]);
           break;
         // 0.2] Receive clients list (just socket IDs)
         case "pollclients":
@@ -227,7 +227,7 @@ export default {
           {
             // Minimal game informations:
             id: this.game.id,
-            players: this.game.players.map(p => { return {name:p.name}; }),
+            players: this.game.players,
             vid: this.game.vid,
             timeControl: this.game.timeControl,
           };
@@ -246,13 +246,13 @@ export default {
           break;
         }
         case "resign":
-          this.gameOver(data.side=="b" ? "1-0" : "0-1", "Resign");
+          this.gameOver(data.side=="b" ? "1-0" : "0-1", this.st.tr["Resign"]);
           break;
         case "abort":
-          this.gameOver("?", "Abort");
+          this.gameOver("?", this.st.tr["Abort"]);
           break;
         case "draw":
-          this.gameOver("1/2", data.message);
+          this.gameOver("1/2", this.st.tr[data.message]);
           break;
         case "drawoffer":
           // NOTE: observers don't know who offered draw
@@ -304,7 +304,7 @@ export default {
     clickDraw: function() {
       if (["received","threerep"].includes(this.drawOffer))
       {
-        if (!confirm("Accept draw?"))
+        if (!confirm(this.st.tr["Accept draw?"]))
           return;
         const message = (this.drawOffer == "received"
           ? "Mutual agreement"
@@ -316,24 +316,26 @@ export default {
               message:message, target:sid}));
           }
         });
-        this.gameOver("1/2", message);
+        this.gameOver("1/2", this.st.tr[message]);
       }
       else if (this.drawOffer == "") //no effect if drawOffer == "sent"
       {
-        if (!confirm("Offer draw?"))
+        if (this.game.mycolor != this.vr.turn)
+          return alert(this.st.tr["Draw offer only in your turn"]);
+        if (!confirm(this.st.tr["Offer draw?"]))
           return;
         this.drawOffer = "sent";
         Object.keys(this.people).forEach(sid => {
           if (sid != this.st.user.sid)
             this.st.conn.send(JSON.stringify({code:"drawoffer", target:sid}));
         });
-        GameStorage.update(this.gameRef.id, {drawOffer: true});
+        GameStorage.update(this.gameRef.id, {drawOffer: this.game.mycolor});
       }
     },
     abortGame: function() {
       if (!confirm(this.st.tr["Terminate game?"]))
         return;
-      this.gameOver("?", "Abort");
+      this.gameOver("?", this.st.tr["Abort"]);
       Object.keys(this.people).forEach(sid => {
         if (sid != this.st.user.sid)
         {
@@ -345,7 +347,7 @@ export default {
       });
     },
     resign: function(e) {
-      if (!confirm("Resign the game?"))
+      if (!confirm(this.st.tr["Resign the game?"]))
         return;
       Object.keys(this.people).forEach(sid => {
         if (sid != this.st.user.sid)
@@ -354,7 +356,7 @@ export default {
             side:this.game.mycolor, target:sid}));
         }
       });
-      this.gameOver(this.game.mycolor=="w" ? "0-1" : "1-0", "Resign");
+      this.gameOver(this.game.mycolor=="w" ? "0-1" : "1-0", this.st.tr["Resign"]);
     },
     // 3 cases for loading a game:
     //  - from indexedDB (running or completed live game I play)
@@ -396,8 +398,6 @@ export default {
             }
             if (L >= 1)
               game.initime[L%2] = game.moves[L-1].played;
-            if (game.drawOffer)
-              this.drawOffer = "received";
           }
           // Now that we used idx and played, re-format moves as for live games
           game.moves = game.moves.map( (m) => {
@@ -432,6 +432,22 @@ export default {
             }
           }
         }
+
+
+
+        // TODO: (and also when receiving / sending a move ?)
+//        if (!!game.drawOffer)
+//        {
+//          if (game.drawOffer == "w")
+//          {
+//            if (myIdx == 0)
+//            {
+//              this.drawOffer = "sent";
+
+
+
+
+
         this.game = Object.assign({},
           game,
           // NOTE: assign mycolor here, since BaseGame could also be VS computer
@@ -613,6 +629,9 @@ export default {
 @media screen and (max-width: 767px)
   #aboveBoard
     text-align: center
+@media screen and (min-width: 768px)
+  #aboveBoard
+    margin-left: 30%
 
 .name
   font-size: 1.5rem