X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=83311cc1039150c084b3cb19de176ab63bf967d3;hb=a4480041556612060da8ba4cf30adc48895d746e;hp=715d2fb75d7253ac9f7bafc36ec100df0a9a72b9;hpb=4fe5664d48e37cf7e0de7562e8e76e8698b0ea74;p=vchess.git diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 715d2fb7..83311cc1 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -6,22 +6,25 @@ .card.smallpad.small-modal.text-center label.modal-close(for="modalEog") h3#eogMessage.section {{ endgameMessage }} + // TODO: or "BoardHex" if this.game.vname in "Hexagonal..." Board(:vr="vr" :last-move="lastMove" :analyze="analyze" - :user-color="gameInfo.mycolor" :orientation="orientation" - :vname="vname" @play-move="play") + :user-color="game.mycolor" :orientation="orientation" + :vname="game.vname" @play-move="play") .button-group button(@click="() => play()") Play button(@click="() => undo()") Undo button(@click="flip") Flip button(@click="gotoBegin") GotoBegin button(@click="gotoEnd") GotoEnd + #messageDiv.section-content(v-if="game.type=='corr'") {{ curMoveMessage() }} #fenDiv.section-content(v-if="showFen && !!vr") p#fenString.text-center {{ vr.getFen() }} #pgnDiv.section-content a#download(href="#") .button-group button#downloadBtn(@click="download") {{ st.tr["Download PGN"] }} - button Import game + // TODO: Import game button copy game locally in IndexedDB + //button Import game //MoveList(v-if="showMoves" :moves="moves" :cursor="cursor" @goto-move="gotoMove") @@ -31,6 +34,7 @@ import Board from "@/components/Board.vue"; //import MoveList from "@/components/MoveList.vue"; import { store } from "@/store"; import { getSquareId } from "@/utils/squareId"; +import { getDate } from "@/utils/datetime"; export default { name: 'my-base-game', @@ -39,8 +43,7 @@ export default { //MoveList, }, // "vr": VariantRules object, describing the game state + rules - // fenStart, players, mycolor - props: ["vname","analyze","vr","gameInfo"], + props: ["vr","game"], data: function() { return { st: store.state, @@ -54,23 +57,9 @@ export default { }; }, watch: { - // gameInfo (immutable once set) changes when a new game starts - "gameInfo": function() { - // Reset all variables - this.endgameMessage = ""; - this.orientation = this.gameInfo.mycolor || "w"; //default orientation for observed games - this.score = this.gameInfo.score; //mutable (if initially "*") - this.moves = this.gameInfo.moves; //TODO: this is mutable; make a copy instead - const L = this.moves.length; - this.cursor = L-1; - this.lastMove = (L > 0 ? this.moves[L-1] : null); - }, - analyze: function() { - if (this.analyze) - { - // Switched to analyze mode: game is over - this.endGame("*"); - } + // game initial FEN changes when a new game starts + "game.fenStart": function() { + this.re_setVariables(); }, }, computed: { @@ -79,28 +68,45 @@ export default { //return window.innerWidth >= 768; }, showFen: function() { - return this.vname != "Dark" || this.score != "*"; + return this.game.vname != "Dark" || this.score != "*"; + }, + analyze: function() { + return this.game.mode == "analyze" || this.game.score != "*"; }, }, + created: function() { + if (!!this.game.fenStart) + this.re_setVariables(); + }, methods: { - setEndgameMessage: function(score) { - let eogMessage = "Undefined"; - switch (score) - { - case "1-0": - eogMessage = translations["White win"]; - break; - case "0-1": - eogMessage = translations["Black win"]; - break; - case "1/2": - eogMessage = translations["Draw"]; - break; - case "?": - eogMessage = "Unfinished"; - break; - } - this.endgameMessage = eogMessage; + re_setVariables: function() { + this.endgameMessage = ""; + this.orientation = this.game.mycolor || "w"; //default orientation for observed games + this.score = this.game.score || "*"; //mutable (if initially "*") + 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) + let vr_tmp = new V(this.game.fenStart); //vr is already at end of game + this.moves.forEach(move => { + // NOTE: this is doing manually what play() function below achieve, + // but in a lighter "fast-forward" way + move.color = vr_tmp.turn; + move.notation = vr_tmp.getNotation(move); + vr_tmp.play(move); + move.fen = vr_tmp.getFen(); + }); + const L = this.moves.length; + this.cursor = L-1; + this.lastMove = (L > 0 ? this.moves[L-1] : null); + }, + // For corr games, potential message with each move sent + curMoveMessage: function() { + if (this.cursor < 0) + return ""; + return this.game.moves[this.cursor].message || ""; + }, + setCurrentMessage: function(message) { + this.game.moves[this.game.moves.length-1].message = message; }, download: function() { const content = this.getPgn(); @@ -113,11 +119,11 @@ export default { getPgn: function() { let pgn = ""; pgn += '[Site "vchess.club"]\n'; - pgn += '[Variant "' + this.vname + '"]\n'; + pgn += '[Variant "' + this.game.vname + '"]\n'; pgn += '[Date "' + getDate(new Date()) + '"]\n'; - pgn += '[White "' + this.gameInfo.players[0] + '"]\n'; - pgn += '[Black "' + this.gameInfo.players[1] + '"]\n'; - pgn += '[Fen "' + this.gameInfo.fenStart + '"]\n'; + pgn += '[White "' + this.game.players[0].name + '"]\n'; + pgn += '[Black "' + this.game.players[1].name + '"]\n'; + pgn += '[Fen "' + this.game.fenStart + '"]\n'; pgn += '[Result "' + this.score + '"]\n\n'; let counter = 1; let i = 0; @@ -128,23 +134,44 @@ export default { { let move = ""; while (i < this.moves.length && this.moves[i].color == color) - move += this.moves[i++].notation[0] + ","; + move += this.moves[i++].notation + ","; move = move.slice(0,-1); //remove last comma - pgn += move + (i < this.moves.length-1 ? " " : ""); + pgn += move + (i < this.moves.length ? " " : ""); } } return pgn + "\n"; }, - showScoreMsg: function(score) { - this.setEndgameMessage(score); + getScoreMessage: function(score) { + let eogMessage = "Undefined"; + switch (score) + { + case "1-0": + eogMessage = this.st.tr["White win"]; + break; + case "0-1": + eogMessage = this.st.tr["Black win"]; + break; + case "1/2": + eogMessage = this.st.tr["Draw"]; + break; + case "?": + eogMessage = this.st.tr["Unfinished"]; + break; + } + return eogMessage; + }, + showEndgameMsg: function(message) { + this.endgameMessage = message; let modalBox = document.getElementById("modalEog"); modalBox.checked = true; setTimeout(() => { modalBox.checked = false; }, 2000); }, - endGame: function(score) { + endGame: function(score, message) { this.score = score; - this.showScoreMsg(score); - this.$emit("game-over"); + if (!message) + message = this.getScoreMessage(score); + this.showEndgameMsg(score + " . " + message); + this.$emit("gameover", score); }, animateMove: function(move) { let startSquare = document.getElementById(getSquareId(move.start)); @@ -174,11 +201,11 @@ export default { this.play(move); }, 250); }, - play: function(move, programmatic) { - let navigate = !move; + play: function(move, receive, noanimate) { + const navigate = !move; // Forbid playing outside analyze mode when cursor isn't at moves.length-1 // (except if we receive opponent's move, human or computer) - if (!navigate && !this.analyze && !programmatic + if (!navigate && !this.analyze && !receive && this.cursor < this.moves.length-1) { return; @@ -189,32 +216,37 @@ export default { return; //no more moves move = this.moves[this.cursor+1]; } - if (!!programmatic) //computer or (remote) human opponent + if (!!receive && !noanimate) //opponent move, variant != "Dark" { if (this.cursor < this.moves.length-1) this.gotoEnd(); //required to play the move return this.animateMove(move); } - // Not programmatic, or animation is over - if (!move.notation) - move.notation = this.vr.getNotation(move); - if (!move.color) + if (!navigate) + { move.color = this.vr.turn; + move.notation = this.vr.getNotation(move); + } + // Not programmatic, or animation is over this.vr.play(move); this.cursor++; this.lastMove = move; - if (!move.fen) - move.fen = this.vr.getFen(); if (this.st.settings.sound == 2) new Audio("/sounds/move.mp3").play().catch(err => {}); - if (!navigate && (this.score == "*" || this.analyze)) + if (!navigate) { - // Stack move on movesList at current cursor - if (this.cursor == this.moves.length) - this.moves.push(move); - else - this.moves = this.moves.slice(0,this.cursor).concat([move]); + move.fen = this.vr.getFen(); + if (this.score == "*" || this.analyze) + { + // Stack move on movesList at current cursor + if (this.cursor == this.moves.length) + this.moves.push(move); + else + this.moves = this.moves.slice(0,this.cursor).concat([move]); + } } + if (!this.analyze) + this.$emit("newmove", move); //post-processing (e.g. computer play) // Is opponent in check? this.incheck = this.vr.getCheckSquares(this.vr.turn); const score = this.vr.getCurrentScore(); @@ -222,14 +254,16 @@ export default { { if (!this.analyze) this.endGame(score); - else //just show score on screen (allow undo) - this.showScoreMsg(score); + else + { + // Just show score on screen (allow undo) + const message = this.getScoreMessage(score); + this.showEndgameMsg(score + " . " + message); + } } - if (!this.analyze) - this.$emit("newmove", move); //post-processing (e.g. computer play) }, undo: function(move) { - let navigate = !move; + const navigate = !move; if (navigate) { if (this.cursor < 0) @@ -251,7 +285,7 @@ export default { this.lastMove = this.moves[index]; }, gotoBegin: function() { - this.vr.re_init(this.fenStart); + this.vr.re_init(this.game.fenStart); this.cursor = -1; this.lastMove = null; },