From: Benjamin Auder Date: Tue, 28 Jan 2020 15:21:03 +0000 (+0100) Subject: Some fixes X-Git-Url: https://git.auder.net/%7B%7B%20asset%28%27mixstore/images/pieces/scripts/current/git-favicon.png?a=commitdiff_plain;h=06e79b0783d6e9962ca6b2a25f62d46f46fa5c8b;p=vchess.git Some fixes --- diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 41ab55dc..fad599b3 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -51,6 +51,7 @@ export default { moves: [], cursor: -1, //index of the move just played lastMove: null, + gameHasEnded: false, //to avoid showing end message twice }; }, watch: { @@ -63,8 +64,11 @@ export default { this.play(this.game.moveToPlay, "receive", this.game.vname=="Dark"); }, "game.score": function(score) { - if (score != "*") - this.endGame(score, this.game.scoreMsg); + if (!this.gameHasEnded && score != "*") + { + // "false" says "don't bubble up": the parent already knows + this.endGame(score, this.game.scoreMsg, false); + } }, }, computed: { @@ -88,6 +92,7 @@ export default { this.endgameMessage = ""; this.orientation = this.game.mycolor || "w"; //default orientation for observed games this.score = this.game.score || "*"; //mutable (if initially "*") + this.gameHasEnded = (this.score != "*"); this.moves = JSON.parse(JSON.stringify(this.game.moves || [])); // Post-processing: decorate each move with color + current FEN: // (to be able to jump to any position quickly) @@ -172,12 +177,14 @@ export default { modalBox.checked = true; setTimeout(() => { modalBox.checked = false; }, 2000); }, - endGame: function(score, message) { + endGame: function(score, message, bubbleUp) { + this.gameHasEnded = true; this.score = score; if (!message) message = this.getScoreMessage(score); this.showEndgameMsg(score + " . " + message); - this.$emit("gameover", score); + if (bubbleUp) + this.$emit("gameover", score); }, animateMove: function(move) { let startSquare = document.getElementById(getSquareId(move.start)); @@ -259,7 +266,7 @@ export default { if (score != "*") { if (!this.analyze) - this.endGame(score); + this.endGame(score, undefined, true); else { // Just show score on screen (allow undo) diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 4e03b187..914b3c3f 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -29,7 +29,11 @@ export default { // Also precompute in-check squares let incheckSq = ArrayFun.init(sizeX, sizeY, false); this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; }); - const squareWidth = 40; //TODO: compute this + + let firstRow = document.querySelector(".game > .row"); + const squareWidth = (!!firstRow + ? document.querySelector(".game > .row").offsetWidth / sizeY + : 40); //arbitrary value (not relevant) const choices = h( 'div', { @@ -37,7 +41,7 @@ export default { 'class': { 'row': true }, style: { "display": (this.choices.length > 0 ? "block" : "none"), - "top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px", + "top": ((sizeY/2)*squareWidth+squareWidth/2) + "px", "width": (this.choices.length * squareWidth) + "px", "height": squareWidth + "px", }, @@ -382,7 +386,7 @@ div.board11 padding-bottom: 9.1% .game - width: 80vh + width: #{'min(80vw, 500px)'} margin: 0 auto .board cursor: pointer diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 94b5dc70..262823df 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -199,7 +199,7 @@ export default { break; case "newmove": this.corrMsg = data.move.message; //may be empty - this.game.moveToPlay = data.move; + this.$set(this.game, "moveToPlay", data.move); //TODO: Vue3... break; case "lastate": //got opponent infos about last move { @@ -247,7 +247,7 @@ export default { if (data.movesCount > L) { // Just got last move from him - this.game.moveToPlay = data.lastMove; + this.$set(this.game, "moveToPlay", data.lastMove); if (data.score != "*" && this.game.score == "*") { // Opponent resigned or aborted game, or accepted draw offer @@ -261,7 +261,7 @@ export default { }, setScore: function(score, message) { this.game.scoreMsg = message; - this.game.score = score; + this.$set(this.game, "score", score); //TODO: Vue3... }, offerDraw: function() { if (this.drawOffer == "received") @@ -508,7 +508,8 @@ export default { }, gameOver: function(score) { this.game.mode = "analyze"; - this.game.score = score; + this.game.score = score; //until Vue3, this property change isn't seen + //by child (and doesn't need to be) const myIdx = this.game.players.findIndex(p => { return p.sid == this.st.user.sid || p.uid == this.st.user.id; });