X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=ec1962ee4d744620004938f7e22ebb9b97faa9cc;hb=dfeb96ea90e880a2557cbb5953dbb7258c912283;hp=e77492f0da0d212d04cd6bac2c4422341cdca0ed;hpb=ed06d9e92387e60fc15d7c9768dd5680605e35d1;p=vchess.git

diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index e77492f0..ec1962ee 100644
--- 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" @change="toggleChat")
-  div#chatWrap(role="dialog" data-checkbox="modalChat"
-      aria-labelledby="inputChat")
+  input#modalChat.modal(type="checkbox" @click="resetChatColor")
+  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
@@ -555,12 +571,9 @@ export default {
       if (this.repeat[repIdx] >= 3)
         this.drawOffer = "threerep";
     },
-    toggleChat: function() {
-      let modalChat = document.getElementById("modalChat");
-      modalChat.style.backgroundColor =
-        (modalChat.style.backgroundColor == "#e2e2e2"
-          ? "#c5fefe"
-          : "#e2e2e2");
+    resetChatColor: function() {
+      // TODO: this is called twice, once on opening an once on closing
+      document.getElementById("chatBtn").style.backgroundColor = "#e2e2e2";
     },
     finishSendChat: function(chat) {
       // NOTE: anonymous chats in corr games are not stored on server (TODO?)
@@ -616,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