X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=68afce35f4a833a61d6e75771ed6f89a6cff79e9;hb=cd049aa1928888cc2a87e740930552eabe748b96;hp=6d37d1ed85496c91651794f53c6ab0f7c89cb502;hpb=f5768809ae96cf4565c0bc3d2747ffc206837e20;p=vchess.git

diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index 6d37d1ed..68afce35 100644
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -96,7 +96,7 @@ main
       )
         img(src="/images/icons/rematch.svg")
       #playersInfo
-        p
+        p(v-if="isLargeScreen()")
           span.name(:class="{connected: isConnected(0)}")
             | {{ game.players[0].name || "@nonymous" }}
           span.time(
@@ -118,6 +118,29 @@ main
             span.time-separator(v-if="!!virtualClocks[1][1]") :
             span.time-right(v-if="!!virtualClocks[1][1]")
               | {{ virtualClocks[1][1] }}
+        p(v-else)
+          span.name(:class="{connected: isConnected(0)}")
+            | {{ game.players[0].name || "@nonymous" }}
+          span.split-names -
+          span.name(:class="{connected: isConnected(1)}")
+            | {{ game.players[1].name || "@nonymous" }}
+          br
+          span.time(
+            v-if="game.score=='*'"
+            :class="{yourturn: !!vr && vr.turn == 'w'}"
+          )
+            span.time-left {{ virtualClocks[0][0] }}
+            span.time-separator(v-if="!!virtualClocks[0][1]") :
+            span.time-right(v-if="!!virtualClocks[0][1]")
+              | {{ virtualClocks[0][1] }}
+          span.time(
+            v-if="game.score=='*'"
+            :class="{yourturn: !!vr && vr.turn == 'b'}"
+          )
+            span.time-left {{ virtualClocks[1][0] }}
+            span.time-separator(v-if="!!virtualClocks[1][1]") :
+            span.time-right(v-if="!!virtualClocks[1][1]")
+              | {{ virtualClocks[1][1] }}
   BaseGame(
     ref="basegame"
     :game="game"
@@ -155,7 +178,7 @@ export default {
       gameRef: "",
       nextIds: [],
       game: {}, //passed to BaseGame
-      focus: false,
+      focus: !document.hidden, //will not always work... TODO
       // virtualClocks will be initialized from true game.clocks
       virtualClocks: [],
       vr: null, //"variant rules" object initialized from FEN
@@ -186,8 +209,7 @@ export default {
       retrySendmove: null,
       clockUpdate: null,
       // Related to (killing of) self multi-connects:
-      newConnect: {},
-      killed: {}
+      newConnect: {}
     };
   },
   watch: {
@@ -262,6 +284,9 @@ export default {
       }
       this.send("losefocus");
     },
+    isLargeScreen: function() {
+      return window.innerWidth >= 500;
+    },
     participateInChat: function(p) {
       return Object.keys(p.tmpIds).some(x => p.tmpIds[x].focus) && !!p.name;
     },
@@ -317,7 +342,6 @@ export default {
       this.retrySendmove = null;
       this.clockUpdate = null;
       this.newConnect = {};
-      this.killed = {};
       // 1] Initialize connection
       this.connexionString =
         params.socketUrl +
@@ -332,7 +356,8 @@ export default {
       this.socketCloseListener = setInterval(
         () => {
           if (this.conn.readyState == 3) {
-            this.conn.removeEventListener("message", this.socketMessageListener);
+            this.conn.removeEventListener(
+              "message", this.socketMessageListener);
             this.conn = new WebSocket(this.connexionString);
             this.conn.addEventListener("message", this.socketMessageListener);
           }
@@ -354,7 +379,7 @@ export default {
           this.loadVariantThenGame(game, () => socketInit(this.roomInit));
         else
           // Live game stored remotely: need socket to retrieve it
-          // NOTE: the callback "roomInit" will be lost, so we don't provide it.
+          // NOTE: the callback "roomInit" will be lost, so it's not provided.
           // --> It will be given when receiving "fullgame" socket event.
           socketInit(() => { this.send("askfullgame"); });
       });
@@ -371,7 +396,7 @@ export default {
       }
     },
     send: function(code, obj) {
-      if (!!this.conn)
+      if (!!this.conn && this.conn.readyState == 1)
         this.conn.send(JSON.stringify(Object.assign({ code: code }, obj)));
     },
     isConnected: function(index) {
@@ -521,7 +546,8 @@ export default {
                 }
               }
             );
-            this.newConnect[data.from] = true; //for self multi-connects tests
+            // For self multi-connects tests:
+            this.newConnect[data.from[0]] = true;
             this.send("askidentity", { target: data.from[0] });
           } else {
             this.people[data.from[0]].tmpIds[data.from[1]] = { focus: true };
@@ -551,13 +577,6 @@ export default {
           }
           break;
         }
-        case "killed":
-          // I logged in elsewhere:
-          this.conn.removeEventListener("message", this.socketMessageListener);
-          this.conn.removeEventListener("close", this.socketCloseListener);
-          this.conn = null;
-          alert(this.st.tr["New connexion detected: tab now offline"]);
-          break;
         case "askidentity": {
           // Request for identification
           const me = {
@@ -578,46 +597,44 @@ export default {
           this.$forceUpdate(); //TODO: shouldn't be required
           // If I multi-connect, kill current connexion if no mark (I'm older)
           if (this.newConnect[user.sid]) {
+            delete this.newConnect[user.sid];
             if (
               user.id > 0 &&
               user.id == this.st.user.id &&
-              user.sid != this.st.user.sid &&
-              !this.killed[this.st.user.sid]
+              user.sid != this.st.user.sid
             ) {
-                this.send("killme", { sid: this.st.user.sid });
-                this.killed[this.st.user.sid] = true;
+              this.cleanBeforeDestroy();
+              alert(this.st.tr["New connexion detected: tab now offline"]);
+              break;
             }
-            delete this.newConnect[user.sid];
           }
-          if (!this.killed[this.st.user.sid]) {
-            // Ask potentially missed last state, if opponent and I play
-            if (
-              !this.gotLastate &&
-              !!this.game.mycolor &&
-              this.game.type == "live" &&
-              this.game.score == "*" &&
-              this.game.players.some(p => p.sid == user.sid)
-            ) {
-              this.send("asklastate", { target: user.sid });
-              let counter = 1;
-              this.askLastate = setInterval(
-                () => {
-                  // Ask at most 3 times:
-                  // if no reply after that there should be a network issue.
-                  if (
-                    counter < 3 &&
-                    !this.gotLastate &&
-                    !!this.people[user.sid]
-                  ) {
-                    this.send("asklastate", { target: user.sid });
-                    counter++;
-                  } else {
-                    clearInterval(this.askLastate);
-                  }
-                },
-                1500
-              );
-            }
+          // Ask potentially missed last state, if opponent and I play
+          if (
+            !this.gotLastate &&
+            !!this.game.mycolor &&
+            this.game.type == "live" &&
+            this.game.score == "*" &&
+            this.game.players.some(p => p.sid == user.sid)
+          ) {
+            this.send("asklastate", { target: user.sid });
+            let counter = 1;
+            this.askLastate = setInterval(
+              () => {
+                // Ask at most 3 times:
+                // if no reply after that there should be a network issue.
+                if (
+                  counter < 3 &&
+                  !this.gotLastate &&
+                  !!this.people[user.sid]
+                ) {
+                  this.send("asklastate", { target: user.sid });
+                  counter++;
+                } else {
+                  clearInterval(this.askLastate);
+                }
+              },
+              1500
+            );
           }
           break;
         }
@@ -666,7 +683,7 @@ export default {
         case "asklastate":
           // Sending informative last state if I played a move or score != "*"
           // If the game or moves aren't loaded yet, delay the sending:
-          // TODO: since socket init after game load, the game is supposedly ready
+          // TODO: socket init after game load, so the game is supposedly ready
           if (!this.game || !this.game.moves) this.lastateAsked = true;
           else this.sendLastate(data.from);
           break;
@@ -703,7 +720,10 @@ export default {
               const moveColIdx = ["w", "b"].indexOf(movePlus.color);
               if (!receiveMyMove && !!this.game.mycolor) {
                 // Notify opponent that I got the move:
-                this.send("gotmove", {data: movePlus.index, target: data.from});
+                this.send(
+                  "gotmove",
+                  { data: movePlus.index, target: data.from }
+                );
                 // And myself if I'm elsewhere:
                 if (!this.focus) {
                   notify(
@@ -728,7 +748,8 @@ export default {
                   GameStorage.update(this.gameRef, { drawOffer: "" });
                 }
               }
-              this.$refs["basegame"].play(movePlus.move, "received", null, true);
+              this.$refs["basegame"].play(
+                movePlus.move, "received", null, true);
               this.game.clocks[moveColIdx] = movePlus.clock;
               this.processMove(
                 movePlus.move,
@@ -982,7 +1003,8 @@ export default {
       }
     },
     abortGame: function() {
-      if (!this.game.mycolor || !confirm(this.st.tr["Terminate game?"])) return;
+      if (!this.game.mycolor || !confirm(this.st.tr["Terminate game?"]))
+        return;
       this.gameOver("?", "Stop");
       this.send("abort");
     },
@@ -1001,9 +1023,10 @@ export default {
       const myIdx = game.players.findIndex(p => {
         return p.sid == this.st.user.sid || p.id == this.st.user.id;
       });
-      const mycolor = [undefined, "w", "b"][myIdx + 1]; //undefined for observers
-      // Live games before 26/03/2020 don't have chat history. TODO: remove next line
-      if (!game.chats) game.chats = [];
+      // "mycolor" is undefined for observers
+      const mycolor = [undefined, "w", "b"][myIdx + 1];
+      // Live games before 26/03/2020 don't have chat history:
+      if (!game.chats) game.chats = []; //TODO: remove line
       // Sort chat messages from newest to oldest
       game.chats.sort((c1, c2) => c2.added - c1.added);
       if (gtype == "corr") {
@@ -1337,7 +1360,8 @@ export default {
           let sendMove = {
             move: filtered_move,
             index: origMovescount,
-            // color is required to check if this is my move (if several tabs opened)
+            // color is required to check if this is my move
+            // (if several tabs opened)
             color: moveCol,
             cancelDrawOffer: this.drawOffer == ""
           };
@@ -1468,7 +1492,8 @@ export default {
           if (!!callback) callback();
         }
         else this.updateCorrGame(scoreObj, callback);
-        // Notify the score to main Hall. TODO: only one player (currently double send)
+        // Notify the score to main Hall.
+        // TODO: only one player (currently double send)
         this.send("result", { gid: this.game.id, score: score });
         // Also to MyGames page (TODO: doubled as well...)
         this.notifyMyGames(