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/')" | |
57078452 BA |
22 | @click="clickRulesBtn()" |
23 | :class="btnRulesClass" | |
feaf1bf7 BA |
24 | ) |
25 | | {{ st.tr["Rules"] }} | |
1e02d16d | 26 | button( |
659a9bd2 | 27 | :class="btnTooltipClass()" |
feaf1bf7 BA |
28 | onClick="window.doClick('modalAdjust')" |
29 | :aria-label="st.tr['Resize board']" | |
30 | ) | |
31 | img.inline(src="/images/icons/resize.svg") | |
1e02d16d BA |
32 | button#analyzeBtn( |
33 | v-if="canAnalyze" | |
659a9bd2 | 34 | :class="btnTooltipClass()" |
b83a675a BA |
35 | @click="$emit('analyze')" |
36 | :aria-label="st.tr['Analyse']" | |
37 | ) | |
38 | img.inline(src="/images/icons/analyse.svg") | |
feaf1bf7 BA |
39 | #downloadDiv(v-if="canDownload") |
40 | a#download(href="#") | |
1e02d16d | 41 | button( |
659a9bd2 | 42 | :class="btnTooltipClass()" |
feaf1bf7 BA |
43 | @click="$emit('download')" |
44 | :aria-label="st.tr['Download'] + ' PGN'" | |
45 | ) | |
46 | img.inline(src="/images/icons/download.svg") | |
e71161fb | 47 | #scoreInfo(v-if="score!='*'") |
feaf1bf7 BA |
48 | span.score {{ score }} |
49 | span.score-msg {{ st.tr[message] }} | |
90df90bc | 50 | .moves-list |
e71161fb | 51 | .tr(v-for="moveIdx in evenNumbers") |
fef153df | 52 | .td {{ firstNum + moveIdx / 2 }} |
90df90bc | 53 | .td( |
e71161fb BA |
54 | :class="{'highlight-lm': cursor == moveIdx}" |
55 | @click="() => gotoMove(moveIdx)" | |
737a5daf | 56 | v-html="notation(moveIdx)") |
e71161fb BA |
57 | .td( |
58 | v-if="moveIdx < moves.length-1" | |
90df90bc | 59 | :class="{'highlight-lm': cursor == moveIdx+1}" |
e71161fb | 60 | @click="() => gotoMove(moveIdx+1)" |
737a5daf | 61 | v-html="notation(moveIdx + 1)") |
e71161fb BA |
62 | </template> |
63 | ||
cf2343ce | 64 | <script> |
fcd299a3 | 65 | import { store } from "@/store"; |
e71161fb | 66 | import { getFullNotation } from "@/utils/notation"; |
5b3dc10e | 67 | import { processModalClick } from "@/utils/modalClick"; |
cf2343ce | 68 | export default { |
6808d7a1 | 69 | name: "my-move-list", |
feaf1bf7 BA |
70 | props: [ |
71 | "moves", "show", "canAnalyze", "canDownload", | |
57078452 | 72 | "vname", "cursor", "score", "message", "firstNum"], |
311cba76 BA |
73 | data: function() { |
74 | return { | |
75 | st: store.state | |
76 | }; | |
77 | }, | |
5b3dc10e | 78 | mounted: function() { |
42a92848 BA |
79 | document.getElementById("adjuster") |
80 | .addEventListener("click", processModalClick); | |
5b3dc10e | 81 | // Take full width on small screens: |
75f009f4 BA |
82 | let boardSize = |
83 | window.innerWidth >= 768 | |
84 | ? 0.75 * Math.min(window.innerWidth, window.innerHeight) | |
85 | : window.innerWidth; | |
5b3dc10e BA |
86 | const movesWidth = window.innerWidth >= 768 ? 280 : 0; |
87 | document.getElementById("boardContainer").style.width = boardSize + "px"; | |
88 | let gameContainer = document.getElementById("gameContainer"); | |
89 | gameContainer.style.width = boardSize + movesWidth + "px"; | |
90 | document.getElementById("boardSize").value = | |
91 | (boardSize * 100) / (window.innerWidth - movesWidth); | |
107dc1bd | 92 | window.addEventListener("resize", this.adjustBoard); |
75f009f4 BA |
93 | // TODO: find sometjhing better than next height adjustment... |
94 | // maybe each variant could give its ratio (?!) | |
95 | setTimeout( () => { this.adjustBoard("vertical"); }, 1000); | |
107dc1bd BA |
96 | }, |
97 | beforeDestroy: function() { | |
98 | window.removeEventListener("resize", this.adjustBoard); | |
5b3dc10e | 99 | }, |
c6b8d37f BA |
100 | watch: { |
101 | cursor: function(newCursor) { | |
102 | if (window.innerWidth <= 767) return; //scrolling would hide chessboard | |
c6b8d37f BA |
103 | // $nextTick to wait for table > tr to be rendered |
104 | this.$nextTick(() => { | |
3c186115 | 105 | let curMove = document.querySelector(".td.highlight-lm"); |
2c5d7b20 | 106 | if (!curMove && this.moves.length > 0) { |
c51c301f | 107 | // Cursor is before game beginning, and some moves were made: |
2c5d7b20 BA |
108 | curMove = |
109 | document.querySelector(".moves-list > .tr:first-child > .td"); | |
110 | } | |
3c186115 BA |
111 | if (!!curMove) { |
112 | curMove.scrollIntoView({ | |
c6b8d37f BA |
113 | behavior: "auto", |
114 | block: "nearest" | |
115 | }); | |
116 | } | |
117 | }); | |
118 | } | |
119 | }, | |
e71161fb BA |
120 | computed: { |
121 | evenNumbers: function() { | |
122 | return [...Array(this.moves.length).keys()].filter(i => i%2==0); | |
57078452 BA |
123 | }, |
124 | btnRulesClass: function() { | |
125 | // "rr" for "rules read" | |
77a37196 BA |
126 | return { |
127 | highlightRules: | |
128 | !!this.vname && !localStorage.getItem("rr_" + this.vname) | |
129 | }; | |
e71161fb BA |
130 | } |
131 | }, | |
430a2038 | 132 | methods: { |
90df90bc BA |
133 | notation: function(moveIdx) { |
134 | const move = this.moves[moveIdx]; | |
135 | if (this.score != "*") return getFullNotation(move); | |
136 | if ( | |
137 | ['none','highlight'].includes(this.show) || | |
e6bcc1d8 | 138 | ( |
e6bcc1d8 | 139 | this.show == "byrow" && |
90df90bc BA |
140 | moveIdx == this.moves.length-1 && |
141 | moveIdx % 2 == 0 | |
e6bcc1d8 | 142 | ) |
90df90bc BA |
143 | ) { |
144 | return "?"; | |
145 | } | |
146 | return getFullNotation(move); | |
08a5069c | 147 | }, |
1e02d16d BA |
148 | btnTooltipClass: function() { |
149 | return { tooltip: !("ontouchstart" in window) }; | |
150 | }, | |
57078452 BA |
151 | clickRulesBtn: function() { |
152 | const key = "rr_" + this.vname; | |
153 | if (!localStorage.getItem(key)) { | |
154 | localStorage.setItem(key, '1'); | |
155 | document.getElementById("rulesBtn").classList.remove("highlightRules"); | |
156 | } | |
157 | this.$emit("showrules"); | |
158 | }, | |
dac39588 | 159 | gotoMove: function(index) { |
107dc1bd BA |
160 | // Goto move except if click on current move: |
161 | if (this.cursor != index) this.$emit("goto-move", index); | |
5b3dc10e | 162 | }, |
75f009f4 | 163 | adjustBoard: function(vertical) { |
5b3dc10e BA |
164 | const boardContainer = document.getElementById("boardContainer"); |
165 | if (!boardContainer) return; //no board on page | |
5b3dc10e | 166 | const movesWidth = window.innerWidth >= 768 ? 280 : 0; |
75f009f4 BA |
167 | let gameContainer = document.getElementById("gameContainer"); |
168 | if (vertical) { | |
169 | const bRect = | |
170 | document.getElementById("rootBoardElement").getBoundingClientRect(); | |
171 | if (bRect.bottom > window.innerHeight) { | |
172 | const maxHeight = window.innerHeight - 20; | |
173 | gameContainer.style.height = maxHeight + "px"; | |
174 | const boardSize = maxHeight * bRect.width / bRect.height; | |
175 | boardContainer.style.width = boardSize + "px"; | |
176 | gameContainer.style.width = boardSize + movesWidth + "px"; | |
177 | this.$emit("redraw-board"); | |
178 | setTimeout( () => window.scroll(0, bRect.top), 1000); | |
179 | } | |
180 | } | |
181 | else { | |
182 | const k = document.getElementById("boardSize").value; | |
183 | const minBoardWidth = 160; //TODO: these 160 and 280 are arbitrary... | |
184 | // Value of 0 is board min size; 100 is window.width [- movesWidth] | |
185 | const boardSize = | |
186 | minBoardWidth + | |
187 | (k * (window.innerWidth - (movesWidth + minBoardWidth))) / 100; | |
188 | boardContainer.style.width = boardSize + "px"; | |
189 | gameContainer.style.width = boardSize + movesWidth + "px"; | |
190 | this.$emit("redraw-board"); | |
191 | } | |
6808d7a1 BA |
192 | } |
193 | } | |
430a2038 BA |
194 | }; |
195 | </script> | |
196 | ||
197 | <style lang="sass" scoped> | |
198 | .moves-list | |
28b32b4f | 199 | user-select: none |
8477e53d BA |
200 | cursor: pointer |
201 | min-height: 1px | |
202 | max-height: 500px | |
203 | overflow: auto | |
204 | background-color: white | |
205 | width: 280px | |
206 | & > .tr | |
207 | clear: both | |
208 | border-bottom: 1px solid lightgrey | |
209 | & > .td | |
210 | float: left | |
f9c36b2d | 211 | padding: 2% 0 2% 2% |
8477e53d BA |
212 | &:first-child |
213 | color: grey | |
f9c36b2d | 214 | width: 13% |
8477e53d | 215 | &:not(first-child) |
f9c36b2d | 216 | width: 40.5% |
8477e53d BA |
217 | |
218 | @media screen and (max-width: 767px) | |
219 | .moves-list | |
220 | width: 100% | |
910d631b | 221 | |
8477e53d | 222 | .td.highlight-lm |
430a2038 | 223 | background-color: plum |
5b3dc10e | 224 | |
57078452 BA |
225 | .highlightRules |
226 | padding: 3px 5px | |
227 | background-color: yellow | |
228 | ||
5b3dc10e BA |
229 | #boardSizeBtnContainer |
230 | width: 100% | |
231 | text-align: center | |
232 | ||
5b3dc10e BA |
233 | [type="checkbox"]#modalAdjust+div .card |
234 | padding: 5px | |
feaf1bf7 BA |
235 | |
236 | img.inline | |
54ec15eb | 237 | height: 22px |
feaf1bf7 BA |
238 | @media screen and (max-width: 767px) |
239 | height: 18px | |
240 | ||
0cc44e58 BA |
241 | #scoreInfo |
242 | margin: 10px 0 | |
243 | @media screen and (max-width: 767px) | |
244 | margin: 5px 0 | |
245 | ||
feaf1bf7 BA |
246 | span.score |
247 | display: inline-block | |
248 | margin-left: 10px | |
249 | font-weight: bold | |
250 | ||
251 | span.score-msg | |
252 | display: inline-block | |
253 | margin-left: 10px | |
254 | font-style: italic | |
255 | ||
256 | #downloadDiv | |
257 | display: inline-block | |
258 | margin: 0 | |
259 | ||
260 | span#rulesBtn | |
261 | cursor: pointer | |
262 | display: inline-block | |
263 | margin: 0 10px | |
264 | font-weight: bold | |
265 | ||
266 | button | |
267 | margin: 0 | |
07052665 | 268 | &.active |
236485b5 | 269 | background-color: #48C9B0 |
5b4de147 | 270 | |
42a92848 | 271 | #aboveMoves button |
5b4de147 | 272 | padding-bottom: 5px |
430a2038 | 273 | </style> |