X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=47776de24987e40dc9c7c81d20aa90ad34c93526;hb=933fd1f90a080c1a3e477cc36adebb5e8db8a9d3;hp=b2dd4a72365a0458a7a9d9468fa96ccfb79800a7;hpb=6808d7a16ec1e761c6a2dffec2281c96953e4d89;p=vchess.git diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index b2dd4a72..47776de2 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -33,15 +33,15 @@ div#baseGame( Board( :vr="vr" :last-move="lastMove" - :analyze="analyze" + :analyze="game.mode=='analyze'" + :score="game.score" :user-color="game.mycolor" :orientation="orientation" :vname="game.vname" :incheck="incheck" @play-move="play" ) - #turnIndicator(v-if="game.vname=='Dark' && game.score=='*'") - | {{ st.tr[vr.turn + " to move"] }} + #turnIndicator(v-if="showTurn") {{ turn }} #controls button(@click="gotoBegin()") << button(@click="undo()") < @@ -49,16 +49,16 @@ div#baseGame( button(@click="play()") > button(@click="gotoEnd()") >> #belowControls - #downloadDiv(v-if="game.vname!='Dark' || game.score!='*'") + #downloadDiv(v-if="allowDownloadPGN") a#download(href="#") button(@click="download()") {{ st.tr["Download"] }} PGN - button(onClick="doClick('modalAdjust')") ⤢ + button(onClick="window.doClick('modalAdjust')") ⤢ button( - v-if="game.vname!='Dark' && game.mode!='analyze'" + v-if="canAnalyze" @click="analyzePosition()" ) | {{ st.tr["Analyse"] }} - // NOTE: rather ugly hack to avoid showing twice "rules" link... + // NOTE: variants pages already have a "Rules" link on top button( v-if="!$route.path.match('/variants/')" @click="showRules()" @@ -66,7 +66,8 @@ div#baseGame( | {{ st.tr["Rules"] }} #movesList MoveList( - v-if="showMoves" + v-if="showMoves != 'none'" + :show="showMoves" :score="game.score" :message="game.scoreMsg" :firstNum="firstMoveNumber" @@ -112,25 +113,26 @@ export default { "game.fenStart": function() { this.re_setVariables(); }, - // Received a new move to play: - "game.moveToPlay": function(move) { - if (move) this.play(move, "receive"); - }, - // ...Or to undo (corr game, move not validated) - "game.moveToUndo": function(move) { - if (move) this.undo(move); - } }, computed: { showMoves: function() { - return this.game.vname != "Dark" || this.game.score != "*"; + return this.game.score != "*" + ? "all" + : (this.vr ? this.vr.showMoves : "none"); }, - analyze: function() { - return ( - this.game.mode == "analyze" || - // From Board viewpoint, a finished Dark game == analyze (TODO: unclear) - (this.game.vname == "Dark" && this.game.score != "*") - ); + showTurn: function() { + return this.game.score == '*' && this.vr && this.vr.showMoves != "all"; + }, + turn: function() { + return this.vr + ? this.st.tr[(this.vr.turn == 'w' ? "White" : "Black") + " to move"] + : ""; + }, + canAnalyze: function() { + return this.game.mode != "analyze" && this.vr && this.vr.canAnalyze; + }, + allowDownloadPGN: function() { + return this.game.score != "*" || (this.vr && this.vr.showMoves == "all"); } }, created: function() { @@ -169,7 +171,6 @@ export default { }, methods: { focusBg: function() { - // NOTE: small blue border appears... document.getElementById("baseGame").focus(); }, adjustBoard: function() { @@ -221,26 +222,21 @@ export default { }, re_setVariables: function() { this.endgameMessage = ""; - this.orientation = this.game.mycolor || "w"; //default orientation for observed games + // "w": default orientation for observed games + this.orientation = this.game.mycolor || "w"; 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.firstMoveNumber = Math.floor( - V.ParseFen(this.game.fenStart).movesCount / 2 - ); + // Post-processing: decorate each move with color, notation and FEN + let vr_tmp = new V(this.game.fenStart); + const parsedFen = V.ParseFen(this.game.fenStart); + const firstMoveColor = parsedFen.turn; + this.firstMoveNumber = Math.floor(parsedFen.movesCount / 2); 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(); }); - if ( - (this.moves.length > 0 && this.moves[0].color == "b") || - (this.moves.length == 0 && vr_tmp.turn == "b") - ) { + if (firstMoveColor == "b") { // 'end' is required for Board component to check lastMove for e.p. this.moves.unshift({ color: "w", @@ -259,9 +255,9 @@ export default { this.game.vname + "/?fen=" + this.vr.getFen().replace(/ /g, "_"); + // Open in same tab in live games (against cheating) if (this.game.type == "live") this.$router.push(newUrl); - //open in same tab: against cheating... - else window.open("#" + newUrl); //open in a new tab: more comfortable + else window.open("#" + newUrl); }, download: function() { const content = this.getPgn(); @@ -305,9 +301,6 @@ export default { }, animateMove: function(move, callback) { let startSquare = document.getElementById(getSquareId(move.start)); - // TODO: error "flush nextTick callbacks" when observer reloads page: - // this late check is not a fix! - if (!startSquare) return; let endSquare = document.getElementById(getSquareId(move.end)); let rectStart = startSquare.getBoundingClientRect(); let rectEnd = endSquare.getBoundingClientRect(); @@ -318,9 +311,6 @@ export default { let movingPiece = document.querySelector( "#" + getSquareId(move.start) + " > img.piece" ); - if (!movingPiece) - //TODO: shouldn't happen - return; // HACK for animation (with positive translate, image slides "under background") // Possible improvement: just alter squares on the piece's way... const squares = document.getElementsByClassName("board"); @@ -330,7 +320,7 @@ export default { } movingPiece.style.transform = "translate(" + translation.x + "px," + translation.y + "px)"; - movingPiece.style.transitionDuration = "0.2s"; + movingPiece.style.transitionDuration = "0.25s"; movingPiece.style.zIndex = "3000"; setTimeout(() => { for (let i = 0; i < squares.length; i++) @@ -353,7 +343,8 @@ export default { return; } const doPlayMove = () => { - if (!!receive && this.cursor < this.moves.length - 1) this.gotoEnd(); //required to play the move + // To play a move, cursor must be at the end of the game: + if (!!receive && this.cursor < this.moves.length - 1) this.gotoEnd(); if (navigate) { if (this.cursor == this.moves.length - 1) return; //no more moves move = this.moves[this.cursor + 1]; @@ -385,7 +376,7 @@ export default { if (!navigate && this.game.mode != "analyze") this.$emit("newmove", move); //post-processing (e.g. computer play) }; - if (!!receive && this.game.vname != "Dark") + if (!!receive && V.ShowMoves == "all") this.animateMove(move, doPlayMove); else doPlayMove(); }, @@ -407,6 +398,7 @@ export default { this.vr.re_init(this.moves[index].fen); this.cursor = index; this.lastMove = this.moves[index]; + this.incheck = this.vr.getCheckSquares(this.vr.turn); }, gotoBegin: function() { if (this.cursor == -1) return; @@ -418,6 +410,7 @@ export default { this.cursor = -1; this.lastMove = null; } + this.incheck = this.vr.getCheckSquares(this.vr.turn); }, gotoEnd: function() { if (this.cursor == this.moves.length - 1) return; @@ -433,6 +426,7 @@ export default {