X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=8c96e3940a2092a7b8d98979d09808273a8395cb;hb=afbf3ca7151ef15a9e579b0f913683ab212396c4;hp=ac8b32366ca0e2784746caf5ae91a9672f7a8c1a;hpb=feaf1bf73fa8c6054e353585dee0b8a4fdcfbc4e;p=vchess.git diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index ac8b3236..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,12 +86,6 @@ export default { stackToPlay: [] }; }, - watch: { - // game initial FEN changes when a new game starts - "game.fenStart": function() { - this.re_setVariables(); - }, - }, computed: { showMoves: function() { return this.game.score != "*" @@ -126,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)) { @@ -137,9 +131,8 @@ export default { baseGameDiv.addEventListener("keydown", this.handleKeys); baseGameDiv.addEventListener("wheel", this.handleScroll); } - document.getElementById("eogDiv").addEventListener( - "click", - processModalClick); + document.getElementById("eogDiv") + .addEventListener("click", processModalClick); }, methods: { focusBg: function() { @@ -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 => { @@ -256,11 +250,7 @@ export default { }, showEndgameMsg: function(message) { this.endgameMessage = message; - let modalBox = document.getElementById("modalEog"); - modalBox.checked = true; - setTimeout(() => { - modalBox.checked = false; - }, 2000); + document.getElementById("modalEog").checked = true; }, // Animate an elementary move animateMove: function(move, callback) { @@ -371,20 +361,21 @@ export default { this.emitFenIfAnalyze(); } this.inMultimove = false; - const score = this.vr.getCurrentScore(); - if (score != "*") { - const message = getScoreMessage(score); - if (!navigate && this.game.mode != "analyze") - this.$emit("gameover", score, message); - else if (this.game.mode == "analyze") + if (!noemit) { + var score = this.vr.getCurrentScore(); + if (score != "*" && this.game.mode == "analyze") { + const message = getScoreMessage(score); // Just show score on screen (allow undo) this.showEndgameMsg(score + " . " + this.st.tr[message]); + } } if (!navigate && this.game.mode != "analyze") { const L = this.moves.length; if (!noemit) - // Post-processing (e.g. computer play) - this.$emit("newmove", this.moves[L-1]); + // Post-processing (e.g. computer play). + // NOTE: always emit the score, even in unfinished, + // to tell Game::processMove() that it's not a received move. + this.$emit("newmove", this.moves[L-1], { score: score }); else { this.inPlay = false; if (this.stackToPlay.length > 0) @@ -518,12 +509,9 @@ export default { display: inline-block #controls - margin: 0 auto - text-align: center - display: flex + user-select: none button - display: inline-block - width: 20% + border: none margin: 0 padding-top: 5px padding-bottom: 5px