X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=8c96e3940a2092a7b8d98979d09808273a8395cb;hb=b1e46b33d78bdf144a5603f82a6907901763abb9;hp=488567b5b3ec9b22cc4f1c2261104c6482f19702;hpb=e71161fbfffe53b0f4b174e0467cdd98cc70b7b0;p=vchess.git diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 488567b5..8c96e394 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -8,21 +8,6 @@ div#baseGame .card.text-center label.modal-close(for="modalEog") h3.section {{ endgameMessage }} - input#modalAdjust.modal(type="checkbox") - div#adjuster( - role="dialog" - data-checkbox="modalAdjust" - ) - .card.text-center - label.modal-close(for="modalAdjust") - label(for="boardSize") {{ st.tr["Board size"] }} - input#boardSize.slider( - type="range" - min="0" - max="100" - value="50" - @input="adjustBoard()" - ) #gameContainer #boardContainer Board( @@ -37,37 +22,30 @@ div#baseGame @play-move="play" ) #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(onClick="window.doClick('modalAdjust')") ⤢ - 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"] }} + #controls.button-group + 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 @@ -99,20 +77,15 @@ 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(); - }, - }, computed: { showMoves: function() { return this.game.score != "*" @@ -147,7 +120,7 @@ export default { } }, created: function() { - if (this.game.fenStart) this.re_setVariables(); + if (!!this.game.fenStart) this.re_setVariables(); }, mounted: function() { if (!("ontouchstart" in window)) { @@ -158,55 +131,13 @@ export default { baseGameDiv.addEventListener("keydown", this.handleKeys); baseGameDiv.addEventListener("wheel", this.handleScroll); } - [ - document.getElementById("eogDiv"), - document.getElementById("adjuster") - ].forEach(elt => elt.addEventListener("click", processModalClick)); - // Take full width on small screens: - let boardSize = parseInt(localStorage.getItem("boardSize")); - if (!boardSize) { - boardSize = - window.innerWidth >= 768 - ? 0.75 * Math.min(window.innerWidth, window.innerHeight) - : window.innerWidth; - } - const movesWidth = window.innerWidth >= 768 ? 280 : 0; - document.getElementById("boardContainer").style.width = boardSize + "px"; - let gameContainer = document.getElementById("gameContainer"); - gameContainer.style.width = boardSize + movesWidth + "px"; - document.getElementById("boardSize").value = - (boardSize * 100) / (window.innerWidth - movesWidth); - // timeout to avoid calling too many time the adjust method - let timeoutLaunched = false; - window.addEventListener("resize", () => { - if (!timeoutLaunched) { - timeoutLaunched = true; - setTimeout(() => { - this.adjustBoard(); - timeoutLaunched = false; - }, 500); - } - }); + document.getElementById("eogDiv") + .addEventListener("click", processModalClick); }, methods: { focusBg: function() { document.getElementById("baseGame").focus(); }, - adjustBoard: function() { - const boardContainer = document.getElementById("boardContainer"); - if (!boardContainer) return; //no board on page - const k = document.getElementById("boardSize").value; - const movesWidth = window.innerWidth >= 768 ? 280 : 0; - const minBoardWidth = 240; //TODO: these 240 and 280 are arbitrary... - // Value of 0 is board min size; 100 is window.width [- movesWidth] - const boardSize = - minBoardWidth + - (k * (window.innerWidth - (movesWidth + minBoardWidth))) / 100; - localStorage.setItem("boardSize", boardSize); - boardContainer.style.width = boardSize + "px"; - document.getElementById("gameContainer").style.width = - boardSize + movesWidth + "px"; - }, handleKeys: function(e) { if ([32, 37, 38, 39, 40].includes(e.keyCode)) e.preventDefault(); switch (e.keyCode) { @@ -236,14 +167,15 @@ export default { //this.$router.push("/variants/" + this.game.vname); window.open("#/variants/" + this.game.vname, "_blank"); //better }, - re_setVariables: function() { + re_setVariables: function(game) { + if (!game) game = this.game; //in case of... this.endgameMessage = ""; // "w": default orientation for observed games - this.orientation = this.game.mycolor || "w"; - this.moves = JSON.parse(JSON.stringify(this.game.moves || [])); + this.orientation = game.mycolor || "w"; + this.moves = JSON.parse(JSON.stringify(game.moves || [])); // Post-processing: decorate each move with notation and FEN - this.vr = new V(this.game.fenStart); - const parsedFen = V.ParseFen(this.game.fenStart); + this.vr = new V(game.fenStart); + const parsedFen = V.ParseFen(game.fenStart); const firstMoveColor = parsedFen.turn; this.firstMoveNumber = Math.floor(parsedFen.movesCount / 2); this.moves.forEach(move => { @@ -255,9 +187,10 @@ export default { }); }); if (firstMoveColor == "b") { - // 'end' is required for Board component to check lastMove for e.p. + // 'start' & 'end' is required for Board component this.moves.unshift({ notation: "...", + start: { x: -1, y: -1 }, end: { x: -1, y: -1 } }); } @@ -279,11 +212,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); @@ -315,15 +250,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(); @@ -334,6 +266,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"); @@ -352,9 +287,25 @@ export default { callback(); }, 250); }, + // For Analyse mode: + emitFenIfAnalyze: function() { + if (this.game.mode == "analyze") { + this.$emit( + "fenchange", + this.lastMove ? this.lastMove.fen : this.game.fenStart + ); + } + }, // "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); @@ -365,7 +316,7 @@ export default { if (!navigate) { if (!this.inMultimove) { if (this.cursor < this.moves.length - 1) - this.moves = this.moves.slice(0, Math.max(this.cursor, 0)); + this.moves = this.moves.slice(0, this.cursor + 1); this.moves.push(smove); this.inMultimove = true; //potentially this.cursor++; @@ -380,7 +331,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; @@ -402,23 +353,35 @@ 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) { + // NOTE: only FEN of last sub-move is required (thus setting it here) + smove.fen = this.vr.getFen(); + 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 + " . " + 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); + } } } }; @@ -432,7 +395,10 @@ export default { if (!Array.isArray(move)) move = [move]; for (let i=0; i < move.length; i++) this.vr.play(move[i]); } - else playMove(); + else { + playMove(); + this.emitFenIfAnalyze(); + } this.cursor++; return; } @@ -451,7 +417,6 @@ export default { playMove(); }, cancelCurrentMultimove: function() { - // Cancel current multi-move const L = this.moves.length; let move = this.moves[L-1]; if (!Array.isArray(move)) move = [move]; @@ -480,9 +445,8 @@ 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(); } } }, @@ -501,6 +465,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.emitFenIfAnalyze(); }, gotoBegin: function() { if (this.inMultimove) this.cancelCurrentMultimove(); @@ -513,10 +478,12 @@ export default { this.lastMove = null; } this.incheck = []; + this.emitFenIfAnalyze(); }, gotoEnd: function() { if (this.cursor == this.moves.length - 1) return; this.gotoMove(this.moves.length - 1); + this.emitFenIfAnalyze(); }, flip: function() { this.orientation = V.GetOppCol(this.orientation); @@ -529,9 +496,6 @@ export default { [type="checkbox"]#modalEog+div .card min-height: 45px -[type="checkbox"]#modalAdjust+div .card - padding: 5px - #baseGame width: 100% &:focus @@ -545,29 +509,23 @@ export default { display: inline-block #controls - margin: 0 auto - text-align: center + user-select: none button - display: inline-block - width: 20% + border: none 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