3 input#modalAdjust.modal(type="checkbox")
6 data-checkbox="modalAdjust"
9 label.modal-close(for="modalAdjust")
10 label(for="boardSize") {{ st.tr["Board size"] }}
11 input#boardSize.slider(
16 @input="adjustBoard()"
18 div#boardSizeBtnContainer
19 button#boardSizeBtn(onClick="window.doClick('modalAdjust')")
20 | {{ st.tr["Set board size"] }}
21 #scoreInfo(v-if="score!='*'")
23 p {{ st.tr[message] }}
24 .moves-list(v-if="!['none','highlight'].includes(show)")
25 .tr(v-for="moveIdx in evenNumbers")
26 .td {{ firstNum + moveIdx / 2 + 1 }}
27 .td(v-if="moveIdx < moves.length-1 || show == 'all'"
28 :class="{'highlight-lm': cursor == moveIdx}"
29 @click="() => gotoMove(moveIdx)"
31 | {{ notation(moves[moveIdx]) }}
33 v-if="moveIdx < moves.length-1"
34 :class="{'highlight-lm': cursor == moveIdx+1}"
35 @click="() => gotoMove(moveIdx+1)"
37 | {{ notation(moves[moveIdx+1]) }}
41 import { store } from "@/store";
42 import { getFullNotation } from "@/utils/notation";
43 import { processModalClick } from "@/utils/modalClick";
46 props: ["moves", "show", "cursor", "score", "message", "firstNum"],
53 document.getElementById("adjuster").addEventListener(
56 // Take full width on small screens:
57 let boardSize = parseInt(localStorage.getItem("boardSize"));
60 window.innerWidth >= 768
61 ? 0.75 * Math.min(window.innerWidth, window.innerHeight)
64 const movesWidth = window.innerWidth >= 768 ? 280 : 0;
65 document.getElementById("boardContainer").style.width = boardSize + "px";
66 let gameContainer = document.getElementById("gameContainer");
67 gameContainer.style.width = boardSize + movesWidth + "px";
68 document.getElementById("boardSize").value =
69 (boardSize * 100) / (window.innerWidth - movesWidth);
70 // timeout to avoid calling too many time the adjust method
71 let timeoutLaunched = false;
72 window.addEventListener("resize", () => {
73 if (!timeoutLaunched) {
74 timeoutLaunched = true;
77 timeoutLaunched = false;
83 cursor: function(newCursor) {
84 if (window.innerWidth <= 767) return; //scrolling would hide chessboard
85 // $nextTick to wait for table > tr to be rendered
86 this.$nextTick(() => {
87 let curMove = document.querySelector(".td.highlight-lm");
89 curMove.scrollIntoView({
98 evenNumbers: function() {
99 return [...Array(this.moves.length).keys()].filter(i => i%2==0);
103 notation: function(move) {
104 return getFullNotation(move);
106 gotoMove: function(index) {
107 this.$emit("goto-move", index);
109 adjustBoard: function() {
110 const boardContainer = document.getElementById("boardContainer");
111 if (!boardContainer) return; //no board on page
112 const k = document.getElementById("boardSize").value;
113 const movesWidth = window.innerWidth >= 768 ? 280 : 0;
114 const minBoardWidth = 240; //TODO: these 240 and 280 are arbitrary...
115 // Value of 0 is board min size; 100 is window.width [- movesWidth]
118 (k * (window.innerWidth - (movesWidth + minBoardWidth))) / 100;
119 localStorage.setItem("boardSize", boardSize);
120 boardContainer.style.width = boardSize + "px";
121 document.getElementById("gameContainer").style.width =
122 boardSize + movesWidth + "px";
128 <style lang="sass" scoped>
134 background-color: white
138 border-bottom: 1px solid lightgrey
148 @media screen and (max-width: 767px)
153 background-color: plum
155 #boardSizeBtnContainer
162 [type="checkbox"]#modalAdjust+div .card