X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=0d5a3bbce3e4d457349020685c01a0143b78a090;hb=28b32b4fc7c23b1c72bed68e1897576c5be46c3d;hp=2a54cbbe1a18f9f162e889e71b325371f7d53847;hpb=e891730f77312340d68bb7ef72a4207541fa3914;p=vchess.git diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 2a54cbbe..0d5a3bbc 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -23,35 +23,29 @@ div#baseGame ) #turnIndicator(v-if="showTurn") {{ turn }} #controls - button(@click="gotoBegin()") << - button(@click="undo()") < - button(v-if="canFlip" @click="flip()") ⇅ - button(@click="play()") > - button(@click="gotoEnd()") >> - #belowControls - #downloadDiv(v-if="allowDownloadPGN") - a#download(href="#") - button(@click="download()") {{ st.tr["Download"] }} PGN - button( - v-if="canAnalyze" - @click="analyzePosition()" - ) - | {{ st.tr["Analyse"] }} - // NOTE: variants pages already have a "Rules" link on top - button( - v-if="!$route.path.match('/variants/')" - @click="showRules()" - ) - | {{ st.tr["Rules"] }} + button(@click="gotoBegin()") + img.inline(src="/images/icons/fast-forward_rev.svg") + button(@click="undo()") + img.inline(src="/images/icons/play_rev.svg") + button(v-if="canFlip" @click="flip()") + img.inline(src="/images/icons/flip.svg") + button(@click="play()") + img.inline(src="/images/icons/play.svg") + button(@click="gotoEnd()") + img.inline(src="/images/icons/fast-forward.svg") #movesList MoveList( - v-if="showMoves != 'none'" :show="showMoves" + :canAnalyze="canAnalyze" + :canDownload="allowDownloadPGN" :score="game.score" :message="game.scoreMsg" :firstNum="firstMoveNumber" :moves="moves" :cursor="cursor" + @download="download" + @showrules="showRules" + @analyze="analyzePosition" @goto-move="gotoMove" ) .clearer @@ -83,18 +77,20 @@ export default { orientation: "w", score: "*", //'*' means 'unfinished' moves: [], - // TODO: later, use subCursor to navigate intra-multimoves? cursor: -1, //index of the move just played lastMove: null, firstMoveNumber: 0, //for printing incheck: [], //for Board - inMultimove: false + inMultimove: false, + inPlay: false, + stackToPlay: [] }; }, watch: { - // game initial FEN changes when a new game starts - "game.fenStart": function() { - this.re_setVariables(); + // game initial FEN changes when a new game starts. + // NOTE: when game ID change on Game page, fenStart may be temporarily undefined + "game.fenStart": function(fenStart) { + if (!!fenStart) this.re_setVariables(); }, }, computed: { @@ -223,11 +219,13 @@ export default { this.lastMove = null; }, analyzePosition: function() { - const newUrl = + let newUrl = "/analyse/" + this.game.vname + "/?fen=" + this.vr.getFen().replace(/ /g, "_"); + if (this.game.mycolor) + newUrl += "&side=" + this.game.mycolor; // Open in same tab in live games (against cheating) if (this.game.type == "live") this.$router.push(newUrl); else window.open("#" + newUrl); @@ -259,15 +257,12 @@ export default { }, showEndgameMsg: function(message) { this.endgameMessage = message; - let modalBox = document.getElementById("modalEog"); - modalBox.checked = true; - setTimeout(() => { - modalBox.checked = false; - }, 2000); + document.getElementById("modalEog").checked = true; }, // Animate an elementary move animateMove: function(move, callback) { let startSquare = document.getElementById(getSquareId(move.start)); + if (!startSquare) return; //shouldn't happen but... let endSquare = document.getElementById(getSquareId(move.end)); let rectStart = startSquare.getBoundingClientRect(); let rectEnd = endSquare.getBoundingClientRect(); @@ -278,6 +273,9 @@ export default { let movingPiece = document.querySelector( "#" + getSquareId(move.start) + " > img.piece" ); + // For some unknown reasons Opera get "movingPiece == null" error + // TOOO: is it calling 'animate()' twice ? One extra time ? + if (!movingPiece) 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"); @@ -306,8 +304,15 @@ export default { } }, // "light": if gotoMove() or gotoEnd() - // data: some custom data (addTime) to be re-emitted - play: function(move, received, light, data) { + play: function(move, received, light, noemit) { + if (!!noemit) { + if (this.inPlay) { + // Received moves in observed games can arrive too fast: + this.stackToPlay.unshift(move); + return; + } + this.inPlay = true; + } const navigate = !move; const playSubmove = (smove) => { if (!navigate) smove.notation = this.vr.getNotation(smove); @@ -333,7 +338,7 @@ export default { } }; const playMove = () => { - const animate = V.ShowMoves == "all" && received; + const animate = V.ShowMoves == "all" && (received || navigate); if (!Array.isArray(move)) move = [move]; let moveIdx = 0; let self = this; @@ -355,8 +360,6 @@ export default { })(); }; const afterMove = (smove, initurn) => { - if (this.st.settings.sound == 2) - new Audio("/sounds/move.mp3").play().catch(() => {}); if (this.vr.turn != initurn) { // Turn has changed: move is complete if (!smove.fen) { @@ -365,18 +368,27 @@ export default { this.emitFenIfAnalyze(); } this.inMultimove = false; - const score = this.vr.getCurrentScore(); - if (score != "*") { - const message = getScoreMessage(score); - if (!navigate && this.game.mode != "analyze") - this.$emit("gameover", score, message); - // Just show score on screen (allow undo) - else this.showEndgameMsg(score + " . " + this.st.tr[message]); + if (!noemit) { + var score = this.vr.getCurrentScore(); + if (score != "*" && this.game.mode == "analyze") { + const message = getScoreMessage(score); + // Just show score on screen (allow undo) + this.showEndgameMsg(score + " . " + this.st.tr[message]); + } } if (!navigate && this.game.mode != "analyze") { const L = this.moves.length; - // Post-processing (e.g. computer play) - this.$emit("newmove", this.moves[L-1], data); + if (!noemit) + // Post-processing (e.g. computer play). + // NOTE: always emit the score, even in unfinished, + // to tell Game::processMove() that it's not a received move. + this.$emit("newmove", this.moves[L-1], { score: score }); + else { + this.inPlay = false; + if (this.stackToPlay.length > 0) + // Move(s) arrived in-between + this.play(this.stackToPlay.pop(), received, light, noemit); + } } } }; @@ -440,8 +452,6 @@ export default { if (light) this.cursor--; else { this.positionCursorTo(this.cursor - 1); - if (this.st.settings.sound == 2) - new Audio("/sounds/undo.mp3").play().catch(() => {}); this.incheck = this.vr.getCheckSquares(this.vr.turn); this.emitFenIfAnalyze(); } @@ -506,29 +516,27 @@ export default { display: inline-block #controls + user-select: none margin: 0 auto text-align: center + display: flex button display: inline-block width: 20% margin: 0 + padding-top: 5px + padding-bottom: 5px + +img.inline + height: 24px + padding-top: 5px + @media screen and (max-width: 767px) + height: 18px #turnIndicator text-align: center font-weight: bold -#belowControls - border-top: 1px solid #2f4f4f - text-align: center - margin: 0 auto - & > #downloadDiv - margin: 0 - & > button - margin: 0 - & > button - border-left: 1px solid #2f4f4f - margin: 0 - #boardContainer float: left // TODO: later, maybe, allow movesList of variable width