From 06e79b0783d6e9962ca6b2a25f62d46f46fa5c8b Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Tue, 28 Jan 2020 16:21:03 +0100
Subject: [PATCH] Some fixes

---
 client/src/components/BaseGame.vue | 17 ++++++++++++-----
 client/src/components/Board.vue    | 10 +++++++---
 client/src/views/Game.vue          |  9 +++++----
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index 41ab55dc..fad599b3 100644
--- a/client/src/components/BaseGame.vue
+++ b/client/src/components/BaseGame.vue
@@ -51,6 +51,7 @@ export default {
       moves: [],
       cursor: -1, //index of the move just played
       lastMove: null,
+      gameHasEnded: false, //to avoid showing end message twice
     };
   },
   watch: {
@@ -63,8 +64,11 @@ export default {
       this.play(this.game.moveToPlay, "receive", this.game.vname=="Dark");
     },
     "game.score": function(score) {
-      if (score != "*")
-        this.endGame(score, this.game.scoreMsg);
+      if (!this.gameHasEnded && score != "*")
+      {
+        // "false" says "don't bubble up": the parent already knows
+        this.endGame(score, this.game.scoreMsg, false);
+      }
     },
   },
   computed: {
@@ -88,6 +92,7 @@ export default {
       this.endgameMessage = "";
       this.orientation = this.game.mycolor || "w"; //default orientation for observed games
       this.score = this.game.score || "*"; //mutable (if initially "*")
+      this.gameHasEnded = (this.score != "*");
       this.moves = JSON.parse(JSON.stringify(this.game.moves || []));
       // Post-processing: decorate each move with color + current FEN:
       // (to be able to jump to any position quickly)
@@ -172,12 +177,14 @@ export default {
       modalBox.checked = true;
       setTimeout(() => { modalBox.checked = false; }, 2000);
     },
-    endGame: function(score, message) {
+    endGame: function(score, message, bubbleUp) {
+      this.gameHasEnded = true;
       this.score = score;
       if (!message)
         message = this.getScoreMessage(score);
       this.showEndgameMsg(score + " . " + message);
-      this.$emit("gameover", score);
+      if (bubbleUp)
+        this.$emit("gameover", score);
     },
     animateMove: function(move) {
       let startSquare = document.getElementById(getSquareId(move.start));
@@ -259,7 +266,7 @@ export default {
       if (score != "*")
       {
         if (!this.analyze)
-          this.endGame(score);
+          this.endGame(score, undefined, true);
         else
         {
           // Just show score on screen (allow undo)
diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index 4e03b187..914b3c3f 100644
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -29,7 +29,11 @@ export default {
     // Also precompute in-check squares
     let incheckSq = ArrayFun.init(sizeX, sizeY, false);
     this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
-    const squareWidth = 40; //TODO: compute this
+
+    let firstRow = document.querySelector(".game > .row");
+    const squareWidth = (!!firstRow
+      ? document.querySelector(".game > .row").offsetWidth / sizeY
+      : 40); //arbitrary value (not relevant)
     const choices = h(
       'div',
       {
@@ -37,7 +41,7 @@ export default {
         'class': { 'row': true },
         style: {
           "display": (this.choices.length > 0 ? "block" : "none"),
-          "top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
+          "top": ((sizeY/2)*squareWidth+squareWidth/2) + "px",
           "width": (this.choices.length * squareWidth) + "px",
           "height": squareWidth + "px",
         },
@@ -382,7 +386,7 @@ div.board11
   padding-bottom: 9.1%
 
 .game
-  width: 80vh
+  width: #{'min(80vw, 500px)'}
   margin: 0 auto
   .board
     cursor: pointer
diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index 94b5dc70..262823df 100644
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -199,7 +199,7 @@ export default {
           break;
         case "newmove":
           this.corrMsg = data.move.message; //may be empty
-          this.game.moveToPlay = data.move;
+          this.$set(this.game, "moveToPlay", data.move); //TODO: Vue3...
           break;
         case "lastate": //got opponent infos about last move
         {
@@ -247,7 +247,7 @@ export default {
       if (data.movesCount > L)
       {
         // Just got last move from him
-        this.game.moveToPlay = data.lastMove;
+        this.$set(this.game, "moveToPlay", data.lastMove);
         if (data.score != "*" && this.game.score == "*")
         {
           // Opponent resigned or aborted game, or accepted draw offer
@@ -261,7 +261,7 @@ export default {
     },
     setScore: function(score, message) {
       this.game.scoreMsg = message;
-      this.game.score = score;
+      this.$set(this.game, "score", score); //TODO: Vue3...
     },
     offerDraw: function() {
       if (this.drawOffer == "received")
@@ -508,7 +508,8 @@ export default {
     },
     gameOver: function(score) {
       this.game.mode = "analyze";
-      this.game.score = score;
+      this.game.score = score; //until Vue3, this property change isn't seen
+                               //by child (and doesn't need to be)
       const myIdx = this.game.players.findIndex(p => {
         return p.sid == this.st.user.sid || p.uid == this.st.user.id;
       });
-- 
2.44.0