X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=a0bcef0a37e9c6c597a20aa795d122f721b66c01;hb=07052665845283c65b50a76537669d0602ba436b;hp=1e1a2149ada7c34a36ce548bd0727d4737478b93;hpb=6e0c0bcba5c9e76a50a2676aa3e63bc317123bcb;p=vchess.git diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 1e1a2149..a0bcef0a 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -14,7 +14,7 @@ div#baseGame ref="board" :vr="vr" :last-move="lastMove" - :analyze="game.mode=='analyze'" + :analyze="mode=='analyze'" :score="game.score" :user-color="game.mycolor" :orientation="orientation" @@ -40,6 +40,7 @@ div#baseGame img.inline(src="/images/icons/play.svg") button(@click="gotoEnd()") img.inline(src="/images/icons/fast-forward.svg") + p(v-show="showFen") {{ (!!vr ? vr.getFen() : "") }} #movesList MoveList( :show="showMoves" @@ -52,7 +53,7 @@ div#baseGame :cursor="cursor" @download="download" @showrules="showRules" - @analyze="analyzePosition" + @analyze="toggleAnalyze" @goto-move="gotoMove" @reset-arrows="resetArrows" ) @@ -84,6 +85,7 @@ export default { vr: null, //VariantRules object, game state endgameMessage: "", orientation: "w", + mode: "", score: "*", //'*' means 'unfinished' moves: [], cursor: -1, //index of the move just played @@ -111,6 +113,12 @@ export default { : "" ); }, + showFen: function() { + return ( + this.mode == "analyze" && + this.$router.currentRoute.path.indexOf("/analyse") === -1 + ); + }, // TODO: is it OK to pass "computed" as properties? // Also, some are seemingly not recomputed when vr is initialized. showMoves: function() { @@ -192,14 +200,15 @@ export default { this.$refs["board"].cancelResetArrows(); }, showRules: function() { - //this.$router.push("/variants/" + this.game.vname); - window.open("#/variants/" + this.game.vname, "_blank"); //better + // The button is here only on Game page: + document.getElementById("modalRules").checked = true; }, re_setVariables: function(game) { if (!game) game = this.game; //in case of... this.endgameMessage = ""; // "w": default orientation for observed games this.orientation = game.mycolor || "w"; + this.mode = game.mode || game.type; //TODO: merge... this.moves = JSON.parse(JSON.stringify(game.moves || [])); // Post-processing: decorate each move with notation and FEN this.vr = new V(game.fenStart); @@ -207,15 +216,22 @@ export default { const firstMoveColor = parsedFen.turn; this.firstMoveNumber = Math.floor(parsedFen.movesCount / 2) + 1; let L = this.moves.length; - this.moves.forEach(move => { + this.moves.forEach((move,idx) => { // Strategy working also for multi-moves: if (!Array.isArray(move)) move = [move]; - move.forEach((m,idx) => { + const Lm = move.length; + move.forEach((m,idxM) => { m.notation = this.vr.getNotation(m); m.unambiguous = V.GetUnambiguousNotation(m); this.vr.play(m); - if (idx < L - 1 && this.vr.getCheckSquares(this.vr.turn).length > 0) - m.notation += "+"; + const checkSquares = this.vr.getCheckSquares(); + if (checkSquares.length > 0) m.notation += "+"; + if (idxM == Lm - 1) m.fen = this.vr.getFen(); + if (idx == L - 1 && idxM == Lm - 1) { + this.incheck = checkSquares; + const score = this.vr.getCurrentScore(); + if (["1-0", "0-1"].includes(score)) m.notation += "#"; + } }); }); if (firstMoveColor == "b") { @@ -229,34 +245,37 @@ export default { }); L++; } - this.positionCursorTo(this.moves.length - 1); - this.incheck = this.vr.getCheckSquares(this.vr.turn); - const score = this.vr.getCurrentScore(); - if (L > 0 && this.moves[L - 1].notation != "...") { - if (["1-0","0-1"].includes(score)) this.moves[L - 1].notation += "#"; - else if (this.incheck.length > 0) this.moves[L - 1].notation += "+"; - } + this.positionCursorTo(L - 1); }, positionCursorTo: function(index) { this.cursor = index; - // Caution: last move in moves array might be a multi-move - if (index >= 0) { - if (Array.isArray(this.moves[index])) { - const L = this.moves[index].length; - this.lastMove = this.moves[index][L - 1]; - } else { - this.lastMove = this.moves[index]; - } - } else this.lastMove = null; + // Note: last move in moves array might be a multi-move + if (index >= 0) this.lastMove = this.moves[index]; + else this.lastMove = null; }, - analyzePosition: function() { - let newUrl = - "/analyse/" + - this.game.vname + - "/?fen=" + - this.vr.getFen().replace(/ /g, "_"); - if (!!this.game.mycolor) newUrl += "&side=" + this.game.mycolor; - window.open("#" + newUrl); + toggleAnalyze: function() { + if (this.mode != "analyze") { + // Enter analyze mode: + this.gameMode = this.mode; //was not 'analyze' + this.mode = "analyze"; + this.gameCursor = this.cursor; + this.gameMoves = JSON.parse(JSON.stringify(this.moves)); + document.getElementById("analyzeBtn").classList.add("active"); + } + else { + // Exit analyze mode: + this.mode = this.gameMode ; + this.cursor = this.gameCursor; + this.moves = this.gameMoves; + let fen = this.game.fenStart; + if (this.cursor >= 0) { + let mv = this.moves[this.cursor]; + if (!Array.isArray(mv)) mv = [mv]; + fen = mv[mv.length-1].fen; + } + this.vr = new V(fen); + document.getElementById("analyzeBtn").classList.remove("active"); + } }, download: function() { const content = this.getPgn(); @@ -277,10 +296,10 @@ export default { pgn += '[Black "' + this.game.players[1].name + '"]\n'; pgn += '[Fen "' + this.game.fenStart + '"]\n'; pgn += '[Result "' + this.game.score + '"]\n'; - if (!!this.game.id) { - pgn += '[Cadence "' + this.game.cadence + '"]\n'; + if (!!this.game.id) pgn += '[Url "' + params.serverUrl + '/game/' + this.game.id + '"]\n'; - } + if (!!this.game.cadence) + pgn += '[Cadence "' + this.game.cadence + '"]\n'; pgn += '\n'; for (let i = 0; i < this.moves.length; i += 2) { if (i > 0) pgn += " "; @@ -378,10 +397,15 @@ export default { // For Analyse mode: emitFenIfAnalyze: function() { if (this.game.mode == "analyze") { - this.$emit( - "fenchange", - !!this.lastMove ? this.lastMove.fen : this.game.fenStart - ); + let fen = this.game.fenStart; + if (!!this.lastMove) { + if (Array.isArray(this.lastMove)) { + const L = this.lastMove.length; + fen = this.lastMove[L-1].fen; + } + else fen = this.lastMove.fen; + } + this.$emit("fenchange", fen); } }, clickSquare: function(square) { @@ -408,10 +432,17 @@ export default { smove.notation = this.vr.getNotation(smove); smove.unambiguous = V.GetUnambiguousNotation(smove); this.vr.play(smove); - this.lastMove = smove; + if (this.inMultimove && !!this.lastMove) { + if (!Array.isArray(this.lastMove)) + this.lastMove = [this.lastMove, smove]; + else this.lastMove.push(smove); + } // Is opponent (or me) in check? - this.incheck = this.vr.getCheckSquares(this.vr.turn); + this.incheck = this.vr.getCheckSquares(); + if (this.incheck.length > 0) smove.notation += "+"; if (!this.inMultimove) { + // First sub-move: + this.lastMove = smove; // Condition is "!navigate" but we mean "!this.autoplay" if (!navigate) { if (this.cursor < this.moves.length - 1) @@ -458,10 +489,15 @@ export default { const computeScore = () => { const score = this.vr.getCurrentScore(); if (!navigate) { - if (["1-0","0-1"].includes(score)) this.lastMove.notation += "#"; - else if (this.incheck.length > 0) this.lastMove.notation += "+"; + if (["1-0","0-1"].includes(score)) { + if (Array.isArray(this.lastMove)) { + const L = this.lastMove.length; + this.lastMove[L - 1].notation += "#"; + } + else this.lastMove.notation += "#"; + } } - if (score != "*" && this.game.mode == "analyze") { + if (score != "*" && this.mode == "analyze") { const message = getScoreMessage(score); // Just show score on screen (allow undo) this.showEndgameMsg(score + " . " + this.st.tr[message]); @@ -477,7 +513,7 @@ export default { this.emitFenIfAnalyze(); this.inMultimove = false; this.score = computeScore(); - if (this.game.mode != "analyze" && !navigate) { + if (this.mode != "analyze" && !navigate) { if (!noemit) { // Post-processing (e.g. computer play). const L = this.moves.length; @@ -503,8 +539,8 @@ export default { if (!Array.isArray(move)) move = [move]; for (let i=0; i < move.length; i++) this.vr.play(move[i]); if (!light) { - this.lastMove = move[move.length-1]; - this.incheck = this.vr.getCheckSquares(this.vr.turn); + this.lastMove = move; + this.incheck = this.vr.getCheckSquares(); this.score = computeScore(); this.emitFenIfAnalyze(); } @@ -515,16 +551,19 @@ export default { // Forbid playing outside analyze mode, except if move is received. // Sufficient condition because Board already knows which turn it is. if ( - this.game.mode != "analyze" && + this.mode != "analyze" && !navigate && !received && (this.game.score != "*" || this.cursor < this.moves.length - 1) ) { return; } - // To play a received move, cursor must be at the end of the game: - if (received && this.cursor < this.moves.length - 1) - this.gotoEnd(); + if (!!received) { + if (this.mode == "analyze") this.toggleAnalyze(); + if (this.cursor < this.moves.length - 1) + // To play a received move, cursor must be at the end of the game: + this.gotoEnd(); + } playMove(); }, cancelCurrentMultimove: function() { @@ -548,7 +587,7 @@ export default { this.$refs["board"].resetCurrentAttempt(); if (this.inMultimove) { this.cancelCurrentMultimove(); - this.incheck = this.vr.getCheckSquares(this.vr.turn); + this.incheck = this.vr.getCheckSquares(); } else { if (!move) { const minCursor = @@ -563,7 +602,7 @@ export default { if (light) this.cursor--; else { this.positionCursorTo(this.cursor - 1); - this.incheck = this.vr.getCheckSquares(this.vr.turn); + this.incheck = this.vr.getCheckSquares(); this.emitFenIfAnalyze(); } } @@ -584,7 +623,7 @@ export default { } // NOTE: next line also re-assign cursor, but it's very light this.positionCursorTo(index); - this.incheck = this.vr.getCheckSquares(this.vr.turn); + this.incheck = this.vr.getCheckSquares(); this.emitFenIfAnalyze(); }, gotoBegin: function() { @@ -597,7 +636,7 @@ export default { : 0; while (this.cursor >= minCursor) this.undo(null, null, "light"); this.lastMove = (minCursor == 1 ? this.moves[0] : null); - this.incheck = this.vr.getCheckSquares(this.vr.turn); + this.incheck = this.vr.getCheckSquares(); this.emitFenIfAnalyze(); }, gotoEnd: function() {