From 21e8e7122487ae9417c5e7e72c25aa642b7a1226 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Fri, 12 Nov 2021 02:13:47 +0100 Subject: [PATCH] Fix vanished piece bug when a player is on game infos while a move arrive --- app.js | 20 ++++++++++++-------- base_rules.js | 39 ++++++++++++++++++++++++++------------- 2 files changed, 38 insertions(+), 21 deletions(-) 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(); } }; -- 2.44.0