From: Benjamin Auder Date: Sun, 25 Apr 2021 09:05:05 +0000 (+0200) Subject: Experimental board size auto-adjust X-Git-Url: https://git.auder.net/variants/Apocalypse/scripts/current/pieces/css/common.css?a=commitdiff_plain;h=bc1e1f2adf7de1efdf29933a666bcce4214e132f;p=vchess.git Experimental board size auto-adjust --- diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 4b6529ff..ee3bea18 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -22,6 +22,7 @@ div#baseGame :incheck="incheck" @play-move="play" @click-square="clickSquare" + @rendered="adjustSize" ) #turnIndicator(v-if="showTurn") {{ turn }} #controls.button-group @@ -43,6 +44,7 @@ div#baseGame p#fenAnalyze(v-show="showFen") {{ (!!vr ? vr.getFen() : "") }} #movesList MoveList( + ref="moveslist" :show="showMoves" :canAnalyze="canAnalyze" :canDownload="allowDownloadPGN" @@ -206,6 +208,9 @@ export default { if (e.deltaY < 0) this.undo(); else if (e.deltaY > 0) this.play(); }, + adjustSize: function() { + this.$refs["moveslist"].adjustBoard("vertical"); + }, redrawBoard: function() { this.$refs["board"].re_setDrawings(); }, diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 799185e4..a871dc34 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -31,6 +31,7 @@ export default { circles: {}, //object of squares' ID --> true (TODO: use a set?) click: "", clickTime: 0, + initialized: 0, settings: store.state.settings }; }, @@ -463,6 +464,8 @@ export default { } }; } + if (this.initialized == 1) this.$emit("rendered"); + if (this.initialized <= 1) this.initialized++; return ( h( "div", diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue index 26c54719..e360cb0d 100644 --- a/client/src/components/MoveList.vue +++ b/client/src/components/MoveList.vue @@ -79,22 +79,16 @@ export default { document.getElementById("adjuster") .addEventListener("click", processModalClick); // Take full width on small screens: - let boardSize = - window.innerWidth >= 768 - ? 0.7 * Math.min(window.innerWidth, window.innerHeight) - : window.innerWidth; + const winBound = Math.min(window.innerWidth, window.innerHeight); + let boardSize = (window.innerWidth >= 768 ? 0.7 : 1.0) * winBound; 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); + const maxWidth = + Math.min(window.innerHeight, window.innerWidth - movesWidth); + document.getElementById("boardSize").value = (boardSize * 100) / maxWidth; window.addEventListener("resize", () => this.adjustBoard()); - if ("ontouchstart" in window) { - // TODO: find something better than next height adjustment... - // maybe each variant could give its ratio (?!) - setTimeout( () => { this.adjustBoard("vertical"); }, 1000); - } }, beforeDestroy: function() { window.removeEventListener("resize", this.adjustBoard); @@ -182,11 +176,14 @@ export default { } else { const k = document.getElementById("boardSize").value; - const minBoardWidth = 160; //TODO: these 160 and 280 are arbitrary... + // TODO: these 160 and 280 are arbitrary... + const minBoardWidth = + (window.innerWidth <= 767 || "ontouchstart" in window) ? 160 : 240; // Value of 0 is board min size; 100 is window.width [- movesWidth] + const maxWidth = + Math.min(window.innerHeight, window.innerWidth - movesWidth); const boardSize = - minBoardWidth + - (k * (window.innerWidth - (movesWidth + minBoardWidth))) / 100; + minBoardWidth + (k * (maxWidth - minBoardWidth)) / 100; boardContainer.style.width = boardSize + "px"; gameContainer.style.width = boardSize + movesWidth + "px"; this.$emit("redraw-board"); diff --git a/client/src/variants/Pacosako.js b/client/src/variants/Pacosako.js index ddf2fab8..70121c9d 100644 --- a/client/src/variants/Pacosako.js +++ b/client/src/variants/Pacosako.js @@ -16,6 +16,10 @@ export class PacosakoRules extends ChessRules { }; } + static AbbreviateOptions(opts) { + return (opts["pacoplay"] ? "PP" : ""); + } + static get IMAGE_EXTENSION() { return ".png"; }