Improve games/challenges display and fix MyGames page reactivity (using () for now...)

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

diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index e909f70..e7db972 100644 (file)
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -7,7 +7,13 @@ main
   )
     .card.text-center
       label.modal-close(for="modalInfo")
-      p(v-html="infoMessage")
+      p
+        span {{ st.tr["Rematch in progress:"] }}
+        a(
+          :href="'#/game/' + rematchId"
+          onClick="document.getElementById('modalInfo').checked=false"
+        )
+          | {{ "#/game/" + rematchId }}
   input#modalChat.modal(
     type="checkbox"
     @click="resetChatColor()"
@@ -89,7 +95,7 @@ main
         )
           img(src="/images/icons/resign.svg")
       button.tooltip(
-        v-else-if="!!game.mycolor"
+        v-else
         @click="clickRematch()"
         :class="{['rematch-' + rematchOffer]: true}"
         :aria-label="st.tr['Rematch']"
@@ -161,7 +167,7 @@ export default {
       virtualClocks: [],
       vr: null, //"variant rules" object initialized from FEN
       drawOffer: "",
-      infoMessage: "",
+      rematchId: "",
       rematchOffer: "",
       lastateAsked: false,
       people: {}, //players + observers
@@ -216,12 +222,13 @@ export default {
   },
   mounted: function() {
     document.addEventListener('visibilitychange', this.visibilityChange);
-    document
-      .getElementById("chatWrap")
-      .addEventListener("click", processModalClick);
+    ["chatWrap", "infoDiv"].forEach(eltName => {
+      document.getElementById(eltName)
+        .addEventListener("click", processModalClick);
+    });
     if ("ontouchstart" in window) {
       // Disable tooltips on smartphones:
-      document.getElementsByClassName("tooltip").forEach(elt => {
+      document.querySelectorAll("#aboveBoard .tooltip").forEach(elt => {
         elt.classList.remove("tooltip");
       });
     }
@@ -700,14 +707,7 @@ export default {
               });
               urlRid += onlineSid[Math.floor(Math.random() * onlineSid.length)];
             }
-            this.infoMessage =
-              this.st.tr["Rematch in progress:"] +
-              " <a href='#/game/" +
-              gameInfo.id + urlRid +
-              "'>" +
-              "#/game/" +
-              gameInfo.id + urlRid +
-              "</a>";
+            this.rematchId = gameInfo.id + urlRid;
             document.getElementById("modalInfo").checked = true;
           }
           break;
@@ -757,7 +757,7 @@ export default {
           drawSent: this.drawOffer == "sent",
           rematchSent: this.rematchOffer == "sent",
           score: this.game.score,
-          score: this.game.scoreMsg,
+          scoreMsg: this.game.scoreMsg,
           movesCount: L,
           initime: this.game.initime[1 - myIdx] //relevant only if I played
         };
@@ -832,7 +832,7 @@ export default {
         if (!err) {
           if (this.st.settings.sound)
             new Audio("/sounds/newgame.flac").play().catch(() => {});
-          callback();
+          if (!!callback) callback();
           this.$router.push("/game/" + gameInfo.id);
         }
       });
@@ -937,14 +937,9 @@ export default {
           if (game.score == "*") {
             // Set clocks + initime
             game.initime = [0, 0];
-            if (L >= 1) {
-              const gameLastupdate = game.moves[L-1].played;
-              game.initime[L % 2] = gameLastupdate;
-              if (L >= 2) {
-                game.clocks[L % 2] =
-                  tc.mainTime - (Date.now() - gameLastupdate) / 1000;
-              }
-            }
+            if (L >= 1) game.initime[L % 2] = game.moves[L-1].played;
+            // NOTE: game.clocks shouldn't be computed right now:
+            // job will be done in re_setClocks() called soon below.
           }
           // Sort chat messages from newest to oldest
           game.chats.sort((c1, c2) => {
@@ -1040,11 +1035,8 @@ export default {
           },
           game,
         );
-        if (this.gameIsLoading)
-          // Re-load game because we missed some moves:
-          // artificially reset BaseGame (required if moves arrived in wrong order)
-          this.$refs["basegame"].re_setVariables();
-        else {
+        this.$refs["basegame"].re_setVariables(this.game);
+        if (!this.gameIsLoading) {
           // Initial loading:
           this.gotMoveIdx = game.moves.length - 1;
           // If we arrive here after 'nextGame' action, the board might be hidden