From: Benjamin Auder <benjamin.auder@somewhere>
Date: Fri, 12 Nov 2021 01:13:47 +0000 (+0100)
Subject: Fix vanished piece bug when a player is on game infos while a move arrive
X-Git-Url: https://git.auder.net/images/assets/js/img/pieces/common.css?a=commitdiff_plain;h=21e8e7122487ae9417c5e7e72c25aa642b7a1226;p=xogo.git

Fix vanished piece bug when a player is on game infos while a move arrive
---

diff --git a/app.js b/app.js
index f897062..c553ce5 100644
--- a/app.js
+++ b/app.js
@@ -328,7 +328,7 @@ const afterPlay = (move) => { //pack into one moves array, then send
     start: move.start,
     end: move.end
   });
-  if (vr.turn != color) {
+  if (vr.turn != playerColor) {
     toggleTurnIndicator(false);
     send("newmove", { gid: gid, moves: curMoves, fen: vr.getFen() });
     curMoves = [];
@@ -354,13 +354,13 @@ const conditionalLoadCSS = (vname) => {
   }
 };
 
-let vr, color;
+let vr, playerColor;
 function initializeGame(obj) {
   const options = obj.options || {};
   import(`/variants/${obj.vname}/class.js`).then(module => {
     const Rules = module.default;
     conditionalLoadCSS(obj.vname);
-    color = (sid == obj.players[0].sid ? "w" : "b");
+    playerColor = (sid == obj.players[0].sid ? "w" : "b");
     // Init + remove potential extra DOM elements from a previous game:
     document.getElementById("boardContainer").innerHTML = `
       <div id="upLeftInfos"
@@ -376,13 +376,13 @@ function initializeGame(obj) {
       seed: obj.seed, //may be null if FEN already exists (running game)
       fen: obj.fen,
       element: "chessboard",
-      color: color,
+      color: playerColor,
       afterPlay: afterPlay,
       options: options
     });
     if (!obj.fen) {
       // Game creation
-      if (color == "w") send("setfen", {gid: obj.gid, fen: vr.getFen()});
+      if (playerColor == "w") send("setfen", {gid: obj.gid, fen: vr.getFen()});
       localStorage.setItem("gid", obj.gid);
     }
     const select = $.getElementById("selectVariant");
@@ -393,10 +393,10 @@ function initializeGame(obj) {
         break;
       }
     }
-    fillGameInfos(obj, color == "w" ? 1 : 0);
+    fillGameInfos(obj, playerColor == "w" ? 1 : 0);
     if (obj.randvar) toggleVisible("gameInfos");
     else toggleVisible("boardContainer");
-    toggleTurnIndicator(vr.turn == color);
+    toggleTurnIndicator(vr.turn == playerColor);
   });
 }
 
@@ -411,7 +411,11 @@ function confirmStopGame() {
 function toggleGameInfos() {
   if ($.getElementById("gameInfos").style.display == "none")
     toggleVisible("gameInfos");
-  else toggleVisible("boardContainer");
+  else {
+    toggleVisible("boardContainer");
+    // Quickfix for the "vanished piece" bug (move played while on game infos)
+    vr.setupPieces(); //TODO: understand better
+  }
 }
 
 $.body.addEventListener("keydown", (e) => {
diff --git a/base_rules.js b/base_rules.js
index 6f11aa1..eb01442 100644
--- a/base_rules.js
+++ b/base_rules.js
@@ -664,6 +664,7 @@ export default class ChessRules {
     }
     else this.g_pieces = ArrayFun.init(this.size.x, this.size.y, null);
     let container = document.getElementById(this.containerId);
+    if (!r) r = container.getBoundingClientRect();
     const pieceWidth = this.getPieceWidth(r.width);
     for (let i=0; i < this.size.x; i++) {
       for (let j=0; j < this.size.y; j++) {
@@ -2067,24 +2068,36 @@ export default class ChessRules {
   }
 
   playReceivedMove(moves, callback) {
+    const launchAnimation = () => {
+      const r =
+        document.getElementById(this.containerId).getBoundingClientRect();
+      const animateRec = i => {
+        this.animate(moves[i], () => {
+          this.playVisual(moves[i], r);
+          this.play(moves[i]);
+          if (i < moves.length - 1) setTimeout(() => animateRec(i+1), 300);
+          else callback();
+        });
+      };
+      animateRec(0);
+    };
+    const checkDisplayThenAnimate = () => {
+      if (boardContainer.style.display == "none") {
+        alert("New move! Let's go back to game...");
+        document.getElementById("gameInfos").style.display = "none";
+        boardContainer.style.display = "block";
+        setTimeout(launchAnimation, 700);
+      }
+      else launchAnimation(); //focused user!
+    };
+    let boardContainer = document.getElementById("boardContainer");
     if (!document.hasFocus()) {
       window.onfocus = () => {
         window.onfocus = undefined;
-        setTimeout(() => this.playReceivedMove(moves, callback), 700);
+        checkDisplayThenAnimate();
       };
-      return;
     }
-    const r =
-      document.getElementById(this.containerId).getBoundingClientRect();
-    const animateRec = i => {
-      this.animate(moves[i], () => {
-        this.playVisual(moves[i], r);
-        this.play(moves[i]);
-        if (i < moves.length - 1) setTimeout(() => animateRec(i+1), 300);
-        else callback();
-      });
-    };
-    animateRec(0);
+    else checkDisplayThenAnimate();
   }
 
 };