X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=85007395acb1dc185527aba19e2242830e98fb92;hb=e533e1ba918a45e6f8f3292dc5180ec9cb05f4d7;hp=488567b5b3ec9b22cc4f1c2261104c6482f19702;hpb=e71161fbfffe53b0f4b174e0467cdd98cc70b7b0;p=vchess.git diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 488567b5..85007395 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( @@ -47,7 +32,6 @@ div#baseGame #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()" @@ -158,55 +142,14 @@ 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) { @@ -255,9 +198,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 } }); } @@ -352,6 +296,15 @@ 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) { @@ -365,7 +318,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++; @@ -402,18 +355,22 @@ 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); + else if (this.game.mode == "analyze") + // 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; @@ -432,7 +389,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 +411,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 +439,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 +459,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 +472,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 +490,6 @@ export default { [type="checkbox"]#modalEog+div .card min-height: 45px -[type="checkbox"]#modalAdjust+div .card - padding: 5px - #baseGame width: 100% &:focus