Commit | Line | Data |
---|---|---|
e71161fb BA |
1 | <template lang="pug"> |
2 | div | |
5b3dc10e BA |
3 | input#modalAdjust.modal(type="checkbox") |
4 | div#adjuster( | |
5 | role="dialog" | |
6 | data-checkbox="modalAdjust" | |
7 | ) | |
8 | .card.text-center | |
9 | label.modal-close(for="modalAdjust") | |
10 | label(for="boardSize") {{ st.tr["Board size"] }} | |
11 | input#boardSize.slider( | |
12 | type="range" | |
13 | min="0" | |
14 | max="100" | |
15 | value="50" | |
16 | @input="adjustBoard()" | |
17 | ) | |
feaf1bf7 BA |
18 | #aboveMoves |
19 | // NOTE: variants pages already have a "Rules" link on top | |
20 | span#rulesBtn( | |
21 | v-if="!$route.path.match('/variants/')" | |
22 | @click="$emit('showrules')" | |
23 | ) | |
24 | | {{ st.tr["Rules"] }} | |
25 | button.tooltip( | |
26 | onClick="window.doClick('modalAdjust')" | |
27 | :aria-label="st.tr['Resize board']" | |
28 | ) | |
29 | img.inline(src="/images/icons/resize.svg") | |
b83a675a BA |
30 | button.tooltip( |
31 | v-if="canAnalyze" | |
32 | @click="$emit('analyze')" | |
33 | :aria-label="st.tr['Analyse']" | |
34 | ) | |
35 | img.inline(src="/images/icons/analyse.svg") | |
feaf1bf7 BA |
36 | #downloadDiv(v-if="canDownload") |
37 | a#download(href="#") | |
38 | button.tooltip( | |
39 | @click="$emit('download')" | |
40 | :aria-label="st.tr['Download'] + ' PGN'" | |
41 | ) | |
42 | img.inline(src="/images/icons/download.svg") | |
e71161fb | 43 | #scoreInfo(v-if="score!='*'") |
feaf1bf7 BA |
44 | span.score {{ score }} |
45 | span.score-msg {{ st.tr[message] }} | |
57eb158f | 46 | .moves-list(v-if="!['none','highlight'].includes(show)") |
e71161fb BA |
47 | .tr(v-for="moveIdx in evenNumbers") |
48 | .td {{ firstNum + moveIdx / 2 + 1 }} | |
49 | .td(v-if="moveIdx < moves.length-1 || show == 'all'" | |
50 | :class="{'highlight-lm': cursor == moveIdx}" | |
51 | @click="() => gotoMove(moveIdx)" | |
52 | ) | |
53 | | {{ notation(moves[moveIdx]) }} | |
54 | .td( | |
55 | v-if="moveIdx < moves.length-1" | |
b866a62a | 56 | :class="{'highlight-lm': highlightBlackmove(moveIdx+1)}" |
e71161fb BA |
57 | @click="() => gotoMove(moveIdx+1)" |
58 | ) | |
59 | | {{ notation(moves[moveIdx+1]) }} | |
e71161fb BA |
60 | </template> |
61 | ||
cf2343ce | 62 | <script> |
fcd299a3 | 63 | import { store } from "@/store"; |
e71161fb | 64 | import { getFullNotation } from "@/utils/notation"; |
5b3dc10e | 65 | import { processModalClick } from "@/utils/modalClick"; |
cf2343ce | 66 | export default { |
6808d7a1 | 67 | name: "my-move-list", |
feaf1bf7 BA |
68 | props: [ |
69 | "moves", "show", "canAnalyze", "canDownload", | |
70 | "cursor", "score", "message", "firstNum"], | |
311cba76 BA |
71 | data: function() { |
72 | return { | |
73 | st: store.state | |
74 | }; | |
75 | }, | |
5b3dc10e | 76 | mounted: function() { |
42a92848 BA |
77 | document.getElementById("adjuster") |
78 | .addEventListener("click", processModalClick); | |
5b4de147 BA |
79 | if ("ontouchstart" in window) { |
80 | // Disable tooltips on smartphones: | |
abb5917e | 81 | document.querySelectorAll("#aboveMoves .tooltip").forEach(elt => { |
407342b6 | 82 | elt.classList.remove("tooltip"); |
5b4de147 BA |
83 | }); |
84 | } | |
5b3dc10e BA |
85 | // Take full width on small screens: |
86 | let boardSize = parseInt(localStorage.getItem("boardSize")); | |
87 | if (!boardSize) { | |
88 | boardSize = | |
89 | window.innerWidth >= 768 | |
90 | ? 0.75 * Math.min(window.innerWidth, window.innerHeight) | |
91 | : window.innerWidth; | |
92 | } | |
93 | const movesWidth = window.innerWidth >= 768 ? 280 : 0; | |
94 | document.getElementById("boardContainer").style.width = boardSize + "px"; | |
95 | let gameContainer = document.getElementById("gameContainer"); | |
96 | gameContainer.style.width = boardSize + movesWidth + "px"; | |
97 | document.getElementById("boardSize").value = | |
98 | (boardSize * 100) / (window.innerWidth - movesWidth); | |
99 | // timeout to avoid calling too many time the adjust method | |
100 | let timeoutLaunched = false; | |
101 | window.addEventListener("resize", () => { | |
102 | if (!timeoutLaunched) { | |
103 | timeoutLaunched = true; | |
1ef65040 BA |
104 | this.adjustBoard(); |
105 | setTimeout(() => { timeoutLaunched = false; }, 500); | |
5b3dc10e BA |
106 | } |
107 | }); | |
108 | }, | |
c6b8d37f BA |
109 | watch: { |
110 | cursor: function(newCursor) { | |
111 | if (window.innerWidth <= 767) return; //scrolling would hide chessboard | |
c6b8d37f BA |
112 | // $nextTick to wait for table > tr to be rendered |
113 | this.$nextTick(() => { | |
3c186115 | 114 | let curMove = document.querySelector(".td.highlight-lm"); |
2c5d7b20 | 115 | if (!curMove && this.moves.length > 0) { |
c51c301f | 116 | // Cursor is before game beginning, and some moves were made: |
2c5d7b20 BA |
117 | curMove = |
118 | document.querySelector(".moves-list > .tr:first-child > .td"); | |
119 | } | |
3c186115 BA |
120 | if (!!curMove) { |
121 | curMove.scrollIntoView({ | |
c6b8d37f BA |
122 | behavior: "auto", |
123 | block: "nearest" | |
124 | }); | |
125 | } | |
126 | }); | |
127 | } | |
128 | }, | |
e71161fb BA |
129 | computed: { |
130 | evenNumbers: function() { | |
131 | return [...Array(this.moves.length).keys()].filter(i => i%2==0); | |
132 | } | |
133 | }, | |
430a2038 | 134 | methods: { |
e71161fb BA |
135 | notation: function(move) { |
136 | return getFullNotation(move); | |
137 | }, | |
08a5069c BA |
138 | highlightBlackmove: function(moveIdx) { |
139 | return ( | |
b866a62a BA |
140 | this.cursor == moveIdx || |
141 | (this.show == "byrow" && this.cursor == moveIdx + 1) | |
08a5069c BA |
142 | ); |
143 | }, | |
dac39588 BA |
144 | gotoMove: function(index) { |
145 | this.$emit("goto-move", index); | |
5b3dc10e BA |
146 | }, |
147 | adjustBoard: function() { | |
148 | const boardContainer = document.getElementById("boardContainer"); | |
149 | if (!boardContainer) return; //no board on page | |
49dad261 BA |
150 | let arrows = document.getElementById("arrowCanvas"); |
151 | // TODO: arrows on board don't scale | |
152 | if (!!arrows) this.$emit("reset-arrows"); | |
5b3dc10e BA |
153 | const k = document.getElementById("boardSize").value; |
154 | const movesWidth = window.innerWidth >= 768 ? 280 : 0; | |
155 | const minBoardWidth = 240; //TODO: these 240 and 280 are arbitrary... | |
156 | // Value of 0 is board min size; 100 is window.width [- movesWidth] | |
157 | const boardSize = | |
158 | minBoardWidth + | |
159 | (k * (window.innerWidth - (movesWidth + minBoardWidth))) / 100; | |
160 | localStorage.setItem("boardSize", boardSize); | |
161 | boardContainer.style.width = boardSize + "px"; | |
162 | document.getElementById("gameContainer").style.width = | |
163 | boardSize + movesWidth + "px"; | |
6808d7a1 BA |
164 | } |
165 | } | |
430a2038 BA |
166 | }; |
167 | </script> | |
168 | ||
169 | <style lang="sass" scoped> | |
170 | .moves-list | |
28b32b4f | 171 | user-select: none |
8477e53d BA |
172 | cursor: pointer |
173 | min-height: 1px | |
174 | max-height: 500px | |
175 | overflow: auto | |
176 | background-color: white | |
177 | width: 280px | |
178 | & > .tr | |
179 | clear: both | |
180 | border-bottom: 1px solid lightgrey | |
181 | & > .td | |
182 | float: left | |
f9c36b2d | 183 | padding: 2% 0 2% 2% |
8477e53d BA |
184 | &:first-child |
185 | color: grey | |
f9c36b2d | 186 | width: 13% |
8477e53d | 187 | &:not(first-child) |
f9c36b2d | 188 | width: 40.5% |
8477e53d BA |
189 | |
190 | @media screen and (max-width: 767px) | |
191 | .moves-list | |
192 | width: 100% | |
910d631b | 193 | |
8477e53d | 194 | .td.highlight-lm |
430a2038 | 195 | background-color: plum |
5b3dc10e BA |
196 | |
197 | #boardSizeBtnContainer | |
198 | width: 100% | |
199 | text-align: center | |
200 | ||
5b3dc10e BA |
201 | [type="checkbox"]#modalAdjust+div .card |
202 | padding: 5px | |
feaf1bf7 BA |
203 | |
204 | img.inline | |
54ec15eb | 205 | height: 22px |
feaf1bf7 BA |
206 | @media screen and (max-width: 767px) |
207 | height: 18px | |
208 | ||
0cc44e58 BA |
209 | #scoreInfo |
210 | margin: 10px 0 | |
211 | @media screen and (max-width: 767px) | |
212 | margin: 5px 0 | |
213 | ||
feaf1bf7 BA |
214 | span.score |
215 | display: inline-block | |
216 | margin-left: 10px | |
217 | font-weight: bold | |
218 | ||
219 | span.score-msg | |
220 | display: inline-block | |
221 | margin-left: 10px | |
222 | font-style: italic | |
223 | ||
224 | #downloadDiv | |
225 | display: inline-block | |
226 | margin: 0 | |
227 | ||
228 | span#rulesBtn | |
229 | cursor: pointer | |
230 | display: inline-block | |
231 | margin: 0 10px | |
232 | font-weight: bold | |
233 | ||
234 | button | |
235 | margin: 0 | |
5b4de147 | 236 | |
42a92848 | 237 | #aboveMoves button |
5b4de147 | 238 | padding-bottom: 5px |
430a2038 | 239 | </style> |