From: Benjamin Auder <benjamin.auder@somewhere>
Date: Thu, 12 Mar 2020 15:54:19 +0000 (+0100)
Subject: Remove watcher for fenStart in BaseGame: call re_setVariables manually. Less Vue... 
X-Git-Url: https://git.auder.net/doc/html/css/current/scripts/pieces/DESCRIPTION?a=commitdiff_plain;h=b1e46b33d78bdf144a5603f82a6907901763abb9;p=vchess.git

Remove watcher for fenStart in BaseGame: call re_setVariables manually. Less Vue-ish but seemingly more reliable...
---

diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index 8e88b055..8c96e394 100644
--- a/client/src/components/BaseGame.vue
+++ b/client/src/components/BaseGame.vue
@@ -22,7 +22,7 @@ div#baseGame
         @play-move="play"
       )
       #turnIndicator(v-if="showTurn") {{ turn }}
-      #controls
+      #controls.button-group
         button(@click="gotoBegin()")
           img.inline(src="/images/icons/fast-forward_rev.svg")
         button(@click="undo()")
@@ -86,13 +86,6 @@ export default {
       stackToPlay: []
     };
   },
-  watch: {
-    // game initial FEN changes when a new game starts.
-    // NOTE: when game ID change on Game page, fenStart may be temporarily undefined
-    "game.fenStart": function(fenStart) {
-      if (!!fenStart) this.re_setVariables();
-    },
-  },
   computed: {
     showMoves: function() {
       return this.game.score != "*"
@@ -127,7 +120,7 @@ export default {
     }
   },
   created: function() {
-    if (this.game.fenStart) this.re_setVariables();
+    if (!!this.game.fenStart) this.re_setVariables();
   },
   mounted: function() {
     if (!("ontouchstart" in window)) {
@@ -174,14 +167,15 @@ export default {
       //this.$router.push("/variants/" + this.game.vname);
       window.open("#/variants/" + this.game.vname, "_blank"); //better
     },
-    re_setVariables: function() {
+    re_setVariables: function(game) {
+      if (!game) game = this.game; //in case of...
       this.endgameMessage = "";
       // "w": default orientation for observed games
-      this.orientation = this.game.mycolor || "w";
-      this.moves = JSON.parse(JSON.stringify(this.game.moves || []));
+      this.orientation = game.mycolor || "w";
+      this.moves = JSON.parse(JSON.stringify(game.moves || []));
       // Post-processing: decorate each move with notation and FEN
-      this.vr = new V(this.game.fenStart);
-      const parsedFen = V.ParseFen(this.game.fenStart);
+      this.vr = new V(game.fenStart);
+      const parsedFen = V.ParseFen(game.fenStart);
       const firstMoveColor = parsedFen.turn;
       this.firstMoveNumber = Math.floor(parsedFen.movesCount / 2);
       this.moves.forEach(move => {
@@ -516,12 +510,8 @@ export default {
 
 #controls
   user-select: none
-  margin: 0 auto
-  text-align: center
-  display: flex
   button
-    display: inline-block
-    width: 20%
+    border: none
     margin: 0
     padding-top: 5px
     padding-bottom: 5px
diff --git a/client/src/components/ComputerGame.vue b/client/src/components/ComputerGame.vue
index ce895ee1..5fe29e6f 100644
--- a/client/src/components/ComputerGame.vue
+++ b/client/src/components/ComputerGame.vue
@@ -66,7 +66,7 @@ export default {
           CompgameStorage.add(game);
       }
       if (this.gameInfo.mode == "versus" && !game.mycolor)
-        game.mycolor = Math.random() < 0.5 ? "w" : "b";
+        game.mycolor = (Math.random() < 0.5 ? "w" : "b");
       this.compWorker.postMessage(["init", game.fen]);
       this.vr = new V(game.fen);
       game.players = [{ name: "Myself" }, { name: "Computer" }];
@@ -74,6 +74,7 @@ export default {
       game.score = "*"; //finished games are removed
       this.currentUrl = document.location.href; //to avoid playing outside page
       this.game = game;
+      this.$refs["basegame"].re_setVariables(game);
       this.compWorker.postMessage(["init", game.fen]);
       if (this.gameInfo.mode == "auto" || game.mycolor != this.vr.turn)
         this.playComputerMove();
diff --git a/client/src/views/Analyse.vue b/client/src/views/Analyse.vue
index baf10364..e829ae4f 100644
--- a/client/src/views/Analyse.vue
+++ b/client/src/views/Analyse.vue
@@ -8,6 +8,7 @@ main
           @input="adjustFenSize(); tryGotoFen()"
         )
   BaseGame(
+    ref="basegame"
     :game="game"
     @fenchange="setFen"
   )
@@ -37,19 +38,14 @@ export default {
       curFen: ""
     };
   },
-  // NOTE: no watcher for $route change, because if fenStart doesn't change
-  // then it doesn't trigger BaseGame.re_init() and the result is weird.
-  created: function() {
-    this.gameRef.vname = this.$route.params["vname"];
-    const routeFen = this.$route.query["fen"];
-    if (!routeFen) this.alertAndQuit("Missing FEN");
-    else {
-      this.gameRef.fen = routeFen.replace(/_/g, " ");
-      // orientation is optional: taken from FEN if missing
-      const orientation = this.$route.query["side"];
-      this.initialize(orientation);
+  watch: {
+    $route: function() {
+      this.initFromUrl();
     }
   },
+  created: function() {
+    this.initFromUrl();
+  },
   methods: {
     alertAndQuit: function(text, wrongVname) {
       // Soon after component creation, st.tr might be uninitialized.
@@ -60,6 +56,17 @@ export default {
         this.$router.replace(newUrl);
       }, 500);
     },
+    initFromUrl: function() {
+      this.gameRef.vname = this.$route.params["vname"];
+      const routeFen = this.$route.query["fen"];
+      if (!routeFen) this.alertAndQuit("Missing FEN");
+      else {
+        this.gameRef.fen = routeFen.replace(/_/g, " ");
+        // orientation is optional: taken from FEN if missing
+        const orientation = this.$route.query["side"];
+        this.initialize(orientation);
+      }
+    },
     initialize: async function(orientation) {
       // Obtain VariantRules object
       await import("@/variants/" + this.gameRef.vname + ".js")
@@ -75,11 +82,12 @@ export default {
     loadGame: function(orientation) {
       // NOTE: no need to set score (~unused)
       this.game.vname = this.gameRef.vname;
+      this.game.fenStart = this.gameRef.fen;
       this.game.fen = this.gameRef.fen;
       this.curFen = this.game.fen;
       this.adjustFenSize();
       this.game.mycolor = orientation || V.ParseFen(this.gameRef.fen).turn;
-      this.$set(this.game, "fenStart", this.gameRef.fen);
+      this.$refs["basegame"].re_setVariables(this.game);
     },
     // Triggered by "fenchange" emitted in BaseGame:
     setFen: function(fen) {
diff --git a/client/src/views/Problems.vue b/client/src/views/Problems.vue
index 71f5c3e0..3b53a1a0 100644
--- a/client/src/views/Problems.vue
+++ b/client/src/views/Problems.vue
@@ -97,6 +97,7 @@ main
           td {{ firstChars(p.instruction) }}
           td {{ p.id }}
   BaseGame(
+    ref="basegame"
     v-if="showOne"
     :game="game"
   )
@@ -162,7 +163,7 @@ export default {
           });
           const showOneIfPid = () => {
             const pid = this.$route.query["id"];
-            if (pid) this.showProblem(this.problems.find(p => p.id == pid));
+            if (!!pid) this.showProblem(this.problems.find(p => p.id == pid));
           };
           if (Object.keys(names).length > 0) {
             ajax(
@@ -200,7 +201,7 @@ export default {
     },
     $route: function(to) {
       const pid = to.query["id"];
-      if (pid) this.showProblem(this.problems.find(p => p.id == pid));
+      if (!!pid) this.showProblem(this.problems.find(p => p.id == pid));
       else this.showOne = false;
     }
   },
@@ -298,10 +299,13 @@ export default {
         // The FEN is already checked at this stage:
         this.game.vname = p.vname;
         this.game.mycolor = V.ParseFen(p.fen).turn; //diagram orientation
+        this.game.fenStart = p.fen;
         this.game.fen = p.fen;
-        this.$set(this.game, "fenStart", p.fen);
-        this.copyProblem(p, this.curproblem);
         this.showOne = true;
+        // $nextTick to be sure $refs["basegame"] exists
+        this.$nextTick(() => {
+          this.$refs["basegame"].re_setVariables(this.game); });
+        this.copyProblem(p, this.curproblem);
       });
     },
     gotoPrevNext: function(e, prob, dir) {