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 | |
4665d3c6 | 84 | ? 0.7 * Math.min(window.innerWidth, window.innerHeight) |
75f009f4 | 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); | |
4665d3c6 BA |
92 | window.addEventListener("resize", () => this.adjustBoard()); |
93 | if ("ontouchstart" in window) { | |
94 | // TODO: find something better than next height adjustment... | |
95 | // maybe each variant could give its ratio (?!) | |
96 | setTimeout( () => { this.adjustBoard("vertical"); }, 1000); | |
97 | } | |
107dc1bd BA |
98 | }, |
99 | beforeDestroy: function() { | |
100 | window.removeEventListener("resize", this.adjustBoard); | |
5b3dc10e | 101 | }, |
c6b8d37f BA |
102 | watch: { |
103 | cursor: function(newCursor) { | |
104 | if (window.innerWidth <= 767) return; //scrolling would hide chessboard | |
c6b8d37f BA |
105 | // $nextTick to wait for table > tr to be rendered |
106 | this.$nextTick(() => { | |
3c186115 | 107 | let curMove = document.querySelector(".td.highlight-lm"); |
2c5d7b20 | 108 | if (!curMove && this.moves.length > 0) { |
c51c301f | 109 | // Cursor is before game beginning, and some moves were made: |
2c5d7b20 BA |
110 | curMove = |
111 | document.querySelector(".moves-list > .tr:first-child > .td"); | |
112 | } | |
3c186115 BA |
113 | if (!!curMove) { |
114 | curMove.scrollIntoView({ | |
c6b8d37f BA |
115 | behavior: "auto", |
116 | block: "nearest" | |
117 | }); | |
118 | } | |
119 | }); | |
120 | } | |
121 | }, | |
e71161fb BA |
122 | computed: { |
123 | evenNumbers: function() { | |
124 | return [...Array(this.moves.length).keys()].filter(i => i%2==0); | |
57078452 BA |
125 | }, |
126 | btnRulesClass: function() { | |
127 | // "rr" for "rules read" | |
77a37196 BA |
128 | return { |
129 | highlightRules: | |
130 | !!this.vname && !localStorage.getItem("rr_" + this.vname) | |
131 | }; | |
e71161fb BA |
132 | } |
133 | }, | |
430a2038 | 134 | methods: { |
90df90bc BA |
135 | notation: function(moveIdx) { |
136 | const move = this.moves[moveIdx]; | |
137 | if (this.score != "*") return getFullNotation(move); | |
138 | if ( | |
139 | ['none','highlight'].includes(this.show) || | |
e6bcc1d8 | 140 | ( |
e6bcc1d8 | 141 | this.show == "byrow" && |
90df90bc BA |
142 | moveIdx == this.moves.length-1 && |
143 | moveIdx % 2 == 0 | |
e6bcc1d8 | 144 | ) |
90df90bc BA |
145 | ) { |
146 | return "?"; | |
147 | } | |
148 | return getFullNotation(move); | |
08a5069c | 149 | }, |
1e02d16d BA |
150 | btnTooltipClass: function() { |
151 | return { tooltip: !("ontouchstart" in window) }; | |
152 | }, | |
57078452 BA |
153 | clickRulesBtn: function() { |
154 | const key = "rr_" + this.vname; | |
155 | if (!localStorage.getItem(key)) { | |
156 | localStorage.setItem(key, '1'); | |
157 | document.getElementById("rulesBtn").classList.remove("highlightRules"); | |
158 | } | |
159 | this.$emit("showrules"); | |
160 | }, | |
dac39588 | 161 | gotoMove: function(index) { |
107dc1bd BA |
162 | // Goto move except if click on current move: |
163 | if (this.cursor != index) this.$emit("goto-move", index); | |
5b3dc10e | 164 | }, |
75f009f4 | 165 | adjustBoard: function(vertical) { |
5b3dc10e BA |
166 | const boardContainer = document.getElementById("boardContainer"); |
167 | if (!boardContainer) return; //no board on page | |
5b3dc10e | 168 | const movesWidth = window.innerWidth >= 768 ? 280 : 0; |
75f009f4 BA |
169 | let gameContainer = document.getElementById("gameContainer"); |
170 | if (vertical) { | |
171 | const bRect = | |
172 | document.getElementById("rootBoardElement").getBoundingClientRect(); | |
173 | if (bRect.bottom > window.innerHeight) { | |
174 | const maxHeight = window.innerHeight - 20; | |
175 | gameContainer.style.height = maxHeight + "px"; | |
176 | const boardSize = maxHeight * bRect.width / bRect.height; | |
177 | boardContainer.style.width = boardSize + "px"; | |
178 | gameContainer.style.width = boardSize + movesWidth + "px"; | |
179 | this.$emit("redraw-board"); | |
180 | setTimeout( () => window.scroll(0, bRect.top), 1000); | |
181 | } | |
182 | } | |
183 | else { | |
184 | const k = document.getElementById("boardSize").value; | |
185 | const minBoardWidth = 160; //TODO: these 160 and 280 are arbitrary... | |
186 | // Value of 0 is board min size; 100 is window.width [- movesWidth] | |
187 | const boardSize = | |
188 | minBoardWidth + | |
189 | (k * (window.innerWidth - (movesWidth + minBoardWidth))) / 100; | |
190 | boardContainer.style.width = boardSize + "px"; | |
191 | gameContainer.style.width = boardSize + movesWidth + "px"; | |
192 | this.$emit("redraw-board"); | |
193 | } | |
6808d7a1 BA |
194 | } |
195 | } | |
430a2038 BA |
196 | }; |
197 | </script> | |
198 | ||
199 | <style lang="sass" scoped> | |
200 | .moves-list | |
28b32b4f | 201 | user-select: none |
8477e53d BA |
202 | cursor: pointer |
203 | min-height: 1px | |
204 | max-height: 500px | |
205 | overflow: auto | |
206 | background-color: white | |
207 | width: 280px | |
208 | & > .tr | |
209 | clear: both | |
210 | border-bottom: 1px solid lightgrey | |
211 | & > .td | |
212 | float: left | |
f9c36b2d | 213 | padding: 2% 0 2% 2% |
8477e53d BA |
214 | &:first-child |
215 | color: grey | |
f9c36b2d | 216 | width: 13% |
8477e53d | 217 | &:not(first-child) |
f9c36b2d | 218 | width: 40.5% |
8477e53d BA |
219 | |
220 | @media screen and (max-width: 767px) | |
221 | .moves-list | |
222 | width: 100% | |
910d631b | 223 | |
8477e53d | 224 | .td.highlight-lm |
430a2038 | 225 | background-color: plum |
5b3dc10e | 226 | |
57078452 BA |
227 | .highlightRules |
228 | padding: 3px 5px | |
229 | background-color: yellow | |
230 | ||
5b3dc10e BA |
231 | #boardSizeBtnContainer |
232 | width: 100% | |
233 | text-align: center | |
234 | ||
5b3dc10e BA |
235 | [type="checkbox"]#modalAdjust+div .card |
236 | padding: 5px | |
feaf1bf7 BA |
237 | |
238 | img.inline | |
54ec15eb | 239 | height: 22px |
feaf1bf7 BA |
240 | @media screen and (max-width: 767px) |
241 | height: 18px | |
242 | ||
0cc44e58 BA |
243 | #scoreInfo |
244 | margin: 10px 0 | |
245 | @media screen and (max-width: 767px) | |
246 | margin: 5px 0 | |
247 | ||
feaf1bf7 BA |
248 | span.score |
249 | display: inline-block | |
250 | margin-left: 10px | |
251 | font-weight: bold | |
252 | ||
253 | span.score-msg | |
254 | display: inline-block | |
255 | margin-left: 10px | |
256 | font-style: italic | |
257 | ||
258 | #downloadDiv | |
259 | display: inline-block | |
260 | margin: 0 | |
261 | ||
262 | span#rulesBtn | |
263 | cursor: pointer | |
264 | display: inline-block | |
265 | margin: 0 10px | |
266 | font-weight: bold | |
267 | ||
268 | button | |
269 | margin: 0 | |
07052665 | 270 | &.active |
236485b5 | 271 | background-color: #48C9B0 |
5b4de147 | 272 | |
42a92848 | 273 | #aboveMoves button |
5b4de147 | 274 | padding-bottom: 5px |
430a2038 | 275 | </style> |