From b1e46b33d78bdf144a5603f82a6907901763abb9 Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Thu, 12 Mar 2020 16:54:19 +0100 Subject: [PATCH] Remove watcher for fenStart in BaseGame: call re_setVariables manually. Less Vue-ish but seemingly more reliable... --- client/src/components/BaseGame.vue | 28 ++++++++-------------- client/src/components/ComputerGame.vue | 3 ++- client/src/views/Analyse.vue | 32 ++++++++++++++++---------- client/src/views/Problems.vue | 12 ++++++---- 4 files changed, 39 insertions(+), 36 deletions(-) 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) { -- 2.44.0