X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=ea07a6dcdada778e0c2b2cea54b0a9a4fa480337;hb=f51c37cf24a7d695cdd51a3b0298a8ff64c3963a;hp=595f9aa371c8861aaadcb8af5c90944f63085f28;hpb=41c80bb63b85b2696d3925c10784c3d7bb5d2aa3;p=vchess.git diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 595f9aa3..ea07a6dc 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -2,15 +2,24 @@ div#baseGame(tabindex=-1 @click="() => focusBg()" @keydown="handleKeys" @wheel="handleScroll") input#modalEog.modal(type="checkbox") - div(role="dialog" data-checkbox="modalEog" aria-labelledby="eogMessage") + div#eogDiv(role="dialog" data-checkbox="modalEog" aria-labelledby="eogMessage") .card.smallpad.small-modal.text-center label.modal-close(for="modalEog") h3#eogMessage.section {{ endgameMessage }} + input#modalAdjust.modal(type="checkbox") + div#adjuster(role="dialog" data-checkbox="modalAdjust" aria-labelledby="labelAdjust") + .card.smallpad.small-modal.text-center + label.modal-close(for="modalAdjust") + label#labelAdjust(for="boardSize") {{ st.tr["Board size"] }} + input#boardSize.slider(type="range" min="0" max="100" value="50" + @input="adjustBoard") #gameContainer #boardContainer - Board(:vr="vr" :last-move="lastMove" :analyze="game.mode=='analyze'" + Board(:vr="vr" :last-move="lastMove" :analyze="analyze" :user-color="game.mycolor" :orientation="orientation" - :vname="game.vname" @play-move="play") + :vname="game.vname" :incheck="incheck" @play-move="play") + #turnIndicator(v-if="game.vname=='Dark' && game.score=='*'") + | {{ turn }} #controls button(@click="gotoBegin") << button(@click="() => undo()") < @@ -18,10 +27,16 @@ div#baseGame(tabindex=-1 @click="() => focusBg()" button(@click="() => play()") > button(@click="gotoEnd") >> #pgnDiv - a#download(href="#") - button(@click="download") {{ st.tr["Download PGN"] }} - button(v-if="game.mode!='analyze'" @click="analyzePosition") + #downloadDiv(v-if="game.vname!='Dark' || game.score!='*'") + a#download(href="#") + button(@click="download") {{ st.tr["Download PGN"] }} + button(onClick="doClick('modalAdjust')") ⤢ + button(v-if="game.vname!='Dark' && game.mode!='analyze'" + @click="analyzePosition") | {{ st.tr["Analyze"] }} + // NOTE: rather ugly hack to avoid showing twice "rules" link... + button(v-if="!$route.path.match('/variants/')" @click="showRules") + | {{ st.tr["Rules"] }} #movesList MoveList(v-if="showMoves" :score="game.score" :message="game.scoreMsg" :firstNum="firstMoveNumber" :moves="moves" :cursor="cursor" @@ -35,6 +50,7 @@ import MoveList from "@/components/MoveList.vue"; import { store } from "@/store"; import { getSquareId } from "@/utils/squareId"; import { getDate } from "@/utils/datetime"; +import { processModalClick } from "@/utils/modalClick"; export default { name: 'my-base-game', @@ -55,6 +71,7 @@ export default { cursor: -1, //index of the move just played lastMove: null, firstMoveNumber: 0, //for printing + incheck: [], //for Board }; }, watch: { @@ -70,7 +87,21 @@ export default { }, computed: { showMoves: function() { - return this.game.vname != "Dark" || this.game.mode=="analyze"; + return this.game.vname != "Dark" || this.game.score != "*"; + }, + turn: function() { + let color = ""; + const L = this.moves.length; + if (L == 0 || this.moves[L-1].color == "b") + color = "White"; + else //if (this.moves[L-1].color == "w") + color = "Black"; + return this.st.tr[color + " to move"]; + }, + analyze: function() { + return this.game.mode=="analyze" || + // From Board viewpoint, a finished Dark game == analyze (TODO: unclear) + (this.game.vname == "Dark" && this.game.score != "*"); }, }, created: function() { @@ -78,6 +109,8 @@ export default { this.re_setVariables(); }, mounted: function() { + [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) @@ -90,12 +123,41 @@ export default { document.getElementById("boardContainer").style.width = boardSize + "px"; let gameContainer = document.getElementById("gameContainer"); gameContainer.style.width = (boardSize + movesWidth) + "px"; + // TODO: find the right formula here: + //document.getElementById("boardSize").value = Math.floor(boardSize / 10); + // timeout to avoid calling too many time the adjust method + let timeoutLaunched = false; + window.addEventListener("resize", (e) => { + if (!timeoutLaunched) + { + timeoutLaunched = true; + setTimeout( () => { + this.adjustBoard(); + timeoutLaunched = false; + }, 500); + } + }); }, methods: { focusBg: function() { // NOTE: small blue border appears... 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(); @@ -119,7 +181,8 @@ export default { } }, handleScroll: function(e) { - if (this.game.mode == "analyze" || this.game.score != "*") + // NOTE: since game.mode=="analyze" => no score, next condition is enough + if (this.game.score != "*") { e.preventDefault(); if (e.deltaY < 0) @@ -128,6 +191,10 @@ export default { this.play(); } }, + showRules: function() { + //this.$router.push("/variants/" + this.game.vname); + window.open("#/variants/" + this.game.vname, "_blank"); //better + }, re_setVariables: function() { this.endgameMessage = ""; this.orientation = this.game.mycolor || "w"; //default orientation for observed games @@ -158,8 +225,10 @@ export default { analyzePosition: function() { const newUrl = "/analyze/" + this.game.vname + "/?fen=" + this.vr.getFen().replace(/ /g, "_"); - //window.open("#" + newUrl); //to open in a new tab - this.$router.push(newUrl); //better + 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 }, download: function() { const content = this.getPgn(); @@ -195,7 +264,7 @@ export default { return pgn + "\n"; }, getScoreMessage: function(score) { - let eogMessage = "Undefined"; + let eogMessage = "Undefined"; //not translated: unused switch (score) { case "1-0": @@ -208,7 +277,7 @@ export default { eogMessage = this.st.tr["Draw"]; break; case "?": - eogMessage = this.st.tr["Unfinished"]; + eogMessage = this.st.tr["Unknown"]; break; } return eogMessage; @@ -253,7 +322,7 @@ export default { // Forbid playing outside analyze mode, except if move is received. // Sufficient condition because Board already knows which turn it is. if (!navigate && this.game.mode!="analyze" && !receive - && this.cursor < this.moves.length-1) + && (this.game.score != "*" || this.cursor < this.moves.length-1)) { return; } @@ -285,8 +354,6 @@ export default { else this.moves = this.moves.slice(0,this.cursor).concat([move]); } - if (!navigate && this.game.mode != "analyze") - this.$emit("newmove", move); //post-processing (e.g. computer play) // Is opponent in check? this.incheck = this.vr.getCheckSquares(this.vr.turn); const score = this.vr.getCurrentScore(); @@ -298,6 +365,8 @@ export default { else //just show score on screen (allow undo) this.showEndgameMsg(score + " . " + message); } + if (!navigate && this.game.mode!="analyze") + this.$emit("newmove", move); //post-processing (e.g. computer play) }; if (!!receive && this.game.vname != "Dark") this.animateMove(move, doPlayMove); @@ -347,7 +416,7 @@ export default { this.gotoMove(this.moves.length-1); }, flip: function() { - this.orientation = V.GetNextCol(this.orientation); + this.orientation = V.GetOppCol(this.orientation); }, }, }; @@ -356,11 +425,16 @@ export default {