From: Benjamin Auder 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/%7B%7B%20asset%28%27mixstore/images/css/doc/%7B%7B%20targetUrl%20%7D%7D?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 = `
{ 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(); } };