X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=b5a82dfbfda16cbcc9fb462f560fb233ce6807ea;hb=21baf44462799a80c4b1cd772de8c3c4fa0b3d37;hp=5ee5e0c72ae9d9d1bb2ff2072f61d5f26ab0d9da;hpb=b4fb161253c5e7b4581ca37d22339111dd4aa861;p=vchess.git diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 5ee5e0c7..b5a82dfb 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -6,7 +6,8 @@ .card.smallpad.small-modal.text-center label.modal-close(for="modalEog") h3#eogMessage.section {{ endgameMessage }} - Board(:vr="vr" :last-move="lastMove" :analyze="game.mode=='analyze'" + // TODO: or "BoardHex" if this.game.vname in "Hexagonal..." + Board(:vr="vr" :last-move="lastMove" :analyze="analyze" :user-color="game.mycolor" :orientation="orientation" :vname="game.vname" @play-move="play") .button-group @@ -21,7 +22,8 @@ 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 +33,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', @@ -67,7 +70,7 @@ export default { return this.game.vname != "Dark" || this.score != "*"; }, analyze: function() { - return this.game.mode == "analyze"; + return this.game.mode == "analyze" || this.game.score != "*"; }, }, created: function() { @@ -80,29 +83,21 @@ export default { 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); }, - 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; - }, download: function() { const content = this.getPgn(); // Prepare and trigger download link @@ -116,8 +111,8 @@ export default { pgn += '[Site "vchess.club"]\n'; pgn += '[Variant "' + this.game.vname + '"]\n'; pgn += '[Date "' + getDate(new Date()) + '"]\n'; - pgn += '[White "' + this.game.players[0] + '"]\n'; - pgn += '[Black "' + this.game.players[1] + '"]\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; @@ -129,22 +124,43 @@ 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); + if (!message) + message = this.getScoreMessage(score); + this.showEndgameMsg(score + " . " + message); this.$emit("gameover", score); }, animateMove: function(move) { @@ -175,11 +191,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; @@ -190,47 +206,55 @@ 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]); + } } - // Is opponent in check? + // Is opponent in check? (TODO: generalize, find all check squares) this.incheck = this.vr.getCheckSquares(this.vr.turn); const score = this.vr.getCurrentScore(); - if (score != "*") + if (score != "*") //TODO: generalize score for 3 or 4 players { 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) + if (!this.analyze) { console.log("EMIT NEWMOVE"); 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)