Commit | Line | Data |
---|---|---|
a6088c90 | 1 | <template lang="pug"> |
e71161fb | 2 | div#baseGame |
7e355d68 | 3 | input#modalEog.modal(type="checkbox") |
6808d7a1 BA |
4 | div#eogDiv( |
5 | role="dialog" | |
6 | data-checkbox="modalEog" | |
7 | ) | |
9a3049f3 | 8 | .card.text-center |
7e355d68 | 9 | label.modal-close(for="modalEog") |
9a3049f3 | 10 | h3.section {{ endgameMessage }} |
cf94b843 BA |
11 | #gameContainer |
12 | #boardContainer | |
6808d7a1 | 13 | Board( |
a6836242 | 14 | ref="board" |
6808d7a1 BA |
15 | :vr="vr" |
16 | :last-move="lastMove" | |
20620465 BA |
17 | :analyze="game.mode=='analyze'" |
18 | :score="game.score" | |
6808d7a1 BA |
19 | :user-color="game.mycolor" |
20 | :orientation="orientation" | |
21 | :vname="game.vname" | |
22 | :incheck="incheck" | |
23 | @play-move="play" | |
61656127 | 24 | @click-square="clickSquare" |
6808d7a1 | 25 | ) |
20620465 | 26 | #turnIndicator(v-if="showTurn") {{ turn }} |
b1e46b33 | 27 | #controls.button-group |
b9a5fe01 BA |
28 | button(@click="gotoBegin()") |
29 | img.inline(src="/images/icons/fast-forward_rev.svg") | |
30 | button(@click="undo()") | |
31 | img.inline(src="/images/icons/play_rev.svg") | |
32 | button(v-if="canFlip" @click="flip()") | |
33 | img.inline(src="/images/icons/flip.svg") | |
54ec15eb BA |
34 | button( |
35 | @click="runAutoplay()" | |
36 | :class="{'in-autoplay': autoplay}" | |
37 | ) | |
38 | img.inline(src="/images/icons/autoplay.svg") | |
b9a5fe01 BA |
39 | button(@click="play()") |
40 | img.inline(src="/images/icons/play.svg") | |
41 | button(@click="gotoEnd()") | |
42 | img.inline(src="/images/icons/fast-forward.svg") | |
cf94b843 | 43 | #movesList |
6808d7a1 | 44 | MoveList( |
933fd1f9 | 45 | :show="showMoves" |
feaf1bf7 BA |
46 | :canAnalyze="canAnalyze" |
47 | :canDownload="allowDownloadPGN" | |
6808d7a1 BA |
48 | :score="game.score" |
49 | :message="game.scoreMsg" | |
50 | :firstNum="firstMoveNumber" | |
51 | :moves="moves" | |
52 | :cursor="cursor" | |
feaf1bf7 BA |
53 | @download="download" |
54 | @showrules="showRules" | |
55 | @analyze="analyzePosition" | |
6808d7a1 BA |
56 | @goto-move="gotoMove" |
57 | ) | |
41c80bb6 | 58 | .clearer |
a6088c90 BA |
59 | </template> |
60 | ||
61 | <script> | |
62 | import Board from "@/components/Board.vue"; | |
f21cd6d9 | 63 | import MoveList from "@/components/MoveList.vue"; |
2c5d7b20 | 64 | import params from "@/parameters"; |
a6088c90 BA |
65 | import { store } from "@/store"; |
66 | import { getSquareId } from "@/utils/squareId"; | |
d4036efe | 67 | import { getDate } from "@/utils/datetime"; |
602d6bef | 68 | import { processModalClick } from "@/utils/modalClick"; |
77c50966 | 69 | import { getScoreMessage } from "@/utils/scoring"; |
e71161fb BA |
70 | import { getFullNotation } from "@/utils/notation"; |
71 | import { undoMove } from "@/utils/playUndo"; | |
a6088c90 | 72 | export default { |
6808d7a1 | 73 | name: "my-base-game", |
a6088c90 BA |
74 | components: { |
75 | Board, | |
6808d7a1 | 76 | MoveList |
a6088c90 | 77 | }, |
e71161fb | 78 | props: ["game"], |
a6088c90 BA |
79 | data: function() { |
80 | return { | |
81 | st: store.state, | |
b7c32f1a | 82 | // NOTE: all following variables must be reset at the beginning of a game |
e71161fb | 83 | vr: null, //VariantRules object, game state |
a6088c90 BA |
84 | endgameMessage: "", |
85 | orientation: "w", | |
86 | score: "*", //'*' means 'unfinished' | |
b7c32f1a | 87 | moves: [], |
a6088c90 BA |
88 | cursor: -1, //index of the move just played |
89 | lastMove: null, | |
5157ce0b | 90 | firstMoveNumber: 0, //for printing |
e71161fb | 91 | incheck: [], //for Board |
57eb158f | 92 | inMultimove: false, |
54ec15eb BA |
93 | autoplay: false, |
94 | autoplayLoop: null, | |
57eb158f BA |
95 | inPlay: false, |
96 | stackToPlay: [] | |
a6088c90 BA |
97 | }; |
98 | }, | |
99 | computed: { | |
6b9378a6 BA |
100 | turn: function() { |
101 | if (!this.vr) return ""; | |
102 | if (this.vr.showMoves != "all") { | |
103 | return this.st.tr[ | |
104 | (this.vr.turn == 'w' ? "White" : "Black") + " to move"]; | |
105 | } | |
106 | // Cannot flip: racing king or circular chess | |
107 | return ( | |
108 | this.vr.movesCount == 0 && this.game.mycolor == "w" | |
109 | ? this.st.tr["It's your turn!"] | |
110 | : "" | |
111 | ); | |
112 | }, | |
113 | // TODO: is it OK to pass "computed" as propoerties? | |
114 | // Also, some are seemingly not recomputed when vr is initialized. | |
a6088c90 | 115 | showMoves: function() { |
933fd1f9 BA |
116 | return this.game.score != "*" |
117 | ? "all" | |
6b9378a6 | 118 | : (!!this.vr ? this.vr.showMoves : "none"); |
20620465 BA |
119 | }, |
120 | showTurn: function() { | |
71ef1664 BA |
121 | return ( |
122 | this.game.score == '*' && | |
6b9378a6 | 123 | !!this.vr && (this.vr.showMoves != "all" || !this.vr.canFlip) |
71ef1664 | 124 | ); |
a6088c90 | 125 | }, |
20620465 | 126 | canAnalyze: function() { |
6b9378a6 BA |
127 | return ( |
128 | this.game.mode != "analyze" && | |
129 | !!this.vr && this.vr.canAnalyze | |
130 | ); | |
20620465 | 131 | }, |
71ef1664 | 132 | canFlip: function() { |
6b9378a6 | 133 | return !!this.vr && this.vr.canFlip; |
71ef1664 | 134 | }, |
20620465 | 135 | allowDownloadPGN: function() { |
6b9378a6 BA |
136 | return ( |
137 | this.game.score != "*" || | |
138 | (!!this.vr && this.vr.showMoves == "all") | |
139 | ); | |
6808d7a1 | 140 | } |
a6088c90 | 141 | }, |
4b0384fa | 142 | created: function() { |
b1e46b33 | 143 | if (!!this.game.fenStart) this.re_setVariables(); |
4b0384fa | 144 | }, |
cf94b843 | 145 | mounted: function() { |
e71161fb BA |
146 | if (!("ontouchstart" in window)) { |
147 | // Desktop browser: | |
148 | const baseGameDiv = document.getElementById("baseGame"); | |
149 | baseGameDiv.tabIndex = 0; | |
150 | baseGameDiv.addEventListener("click", this.focusBg); | |
151 | baseGameDiv.addEventListener("keydown", this.handleKeys); | |
152 | baseGameDiv.addEventListener("wheel", this.handleScroll); | |
153 | } | |
42a92848 BA |
154 | document.getElementById("eogDiv") |
155 | .addEventListener("click", processModalClick); | |
cf94b843 | 156 | }, |
54ec15eb BA |
157 | beforeDestroy: function() { |
158 | if (!!this.autoplayLoop) clearInterval(this.autoplayLoop); | |
159 | }, | |
a6088c90 | 160 | methods: { |
9ca1e26b | 161 | focusBg: function() { |
9ca1e26b BA |
162 | document.getElementById("baseGame").focus(); |
163 | }, | |
164 | handleKeys: function(e) { | |
6808d7a1 BA |
165 | if ([32, 37, 38, 39, 40].includes(e.keyCode)) e.preventDefault(); |
166 | switch (e.keyCode) { | |
9ca1e26b BA |
167 | case 37: |
168 | this.undo(); | |
169 | break; | |
170 | case 39: | |
171 | this.play(); | |
172 | break; | |
5701c228 | 173 | case 38: |
9ca1e26b BA |
174 | this.gotoBegin(); |
175 | break; | |
176 | case 40: | |
177 | this.gotoEnd(); | |
178 | break; | |
179 | case 32: | |
9ca1e26b BA |
180 | this.flip(); |
181 | break; | |
182 | } | |
183 | }, | |
dcd68c41 | 184 | handleScroll: function(e) { |
e71161fb BA |
185 | e.preventDefault(); |
186 | if (e.deltaY < 0) this.undo(); | |
187 | else if (e.deltaY > 0) this.play(); | |
dcd68c41 | 188 | }, |
0e16cb26 BA |
189 | showRules: function() { |
190 | //this.$router.push("/variants/" + this.game.vname); | |
191 | window.open("#/variants/" + this.game.vname, "_blank"); //better | |
192 | }, | |
b1e46b33 BA |
193 | re_setVariables: function(game) { |
194 | if (!game) game = this.game; //in case of... | |
4b0384fa | 195 | this.endgameMessage = ""; |
8477e53d | 196 | // "w": default orientation for observed games |
b1e46b33 BA |
197 | this.orientation = game.mycolor || "w"; |
198 | this.moves = JSON.parse(JSON.stringify(game.moves || [])); | |
e71161fb | 199 | // Post-processing: decorate each move with notation and FEN |
b1e46b33 BA |
200 | this.vr = new V(game.fenStart); |
201 | const parsedFen = V.ParseFen(game.fenStart); | |
8477e53d BA |
202 | const firstMoveColor = parsedFen.turn; |
203 | this.firstMoveNumber = Math.floor(parsedFen.movesCount / 2); | |
f54f4c26 | 204 | let L = this.moves.length; |
d4036efe | 205 | this.moves.forEach(move => { |
e71161fb BA |
206 | // Strategy working also for multi-moves: |
207 | if (!Array.isArray(move)) move = [move]; | |
f54f4c26 | 208 | move.forEach((m,idx) => { |
e71161fb | 209 | m.notation = this.vr.getNotation(m); |
2c5d7b20 | 210 | m.unambiguous = V.GetUnambiguousNotation(m); |
e71161fb | 211 | this.vr.play(m); |
f54f4c26 BA |
212 | if (idx < L - 1 && this.vr.getCheckSquares(this.vr.turn).length > 0) |
213 | m.notation += "+"; | |
e71161fb | 214 | }); |
d4036efe | 215 | }); |
8477e53d | 216 | if (firstMoveColor == "b") { |
311cba76 | 217 | // 'start' & 'end' is required for Board component |
6808d7a1 | 218 | this.moves.unshift({ |
6808d7a1 | 219 | notation: "...", |
2c5d7b20 | 220 | unambiguous: "...", |
311cba76 | 221 | start: { x: -1, y: -1 }, |
3a2a7b5f BA |
222 | end: { x: -1, y: -1 }, |
223 | fen: game.fenStart | |
6808d7a1 | 224 | }); |
f54f4c26 | 225 | L++; |
697ee580 | 226 | } |
e71161fb | 227 | this.positionCursorTo(this.moves.length - 1); |
9ef63965 | 228 | this.incheck = this.vr.getCheckSquares(this.vr.turn); |
f54f4c26 | 229 | const score = this.vr.getCurrentScore(); |
3f22c2c3 BA |
230 | if (L > 0 && this.moves[L - 1].notation != "...") { |
231 | if (["1-0","0-1"].includes(score)) | |
232 | this.moves[L - 1].notation += "#"; | |
233 | else if (this.vr.getCheckSquares(this.vr.turn).length > 0) | |
234 | this.moves[L - 1].notation += "+"; | |
235 | } | |
4b0384fa | 236 | }, |
e71161fb BA |
237 | positionCursorTo: function(index) { |
238 | this.cursor = index; | |
239 | // Caution: last move in moves array might be a multi-move | |
240 | if (index >= 0) { | |
241 | if (Array.isArray(this.moves[index])) { | |
242 | const L = this.moves[index].length; | |
243 | this.lastMove = this.moves[index][L - 1]; | |
244 | } else { | |
245 | this.lastMove = this.moves[index]; | |
246 | } | |
3a2a7b5f | 247 | } else this.lastMove = null; |
e71161fb | 248 | }, |
63ca2b89 | 249 | analyzePosition: function() { |
7ba4a5bc | 250 | let newUrl = |
6808d7a1 BA |
251 | "/analyse/" + |
252 | this.game.vname + | |
253 | "/?fen=" + | |
254 | this.vr.getFen().replace(/ /g, "_"); | |
7ba4a5bc BA |
255 | if (this.game.mycolor) |
256 | newUrl += "&side=" + this.game.mycolor; | |
910d631b | 257 | // Open in same tab in live games (against cheating) |
6808d7a1 | 258 | if (this.game.type == "live") this.$router.push(newUrl); |
910d631b | 259 | else window.open("#" + newUrl); |
603b8a8b | 260 | }, |
a6088c90 BA |
261 | download: function() { |
262 | const content = this.getPgn(); | |
263 | // Prepare and trigger download link | |
264 | let downloadAnchor = document.getElementById("download"); | |
265 | downloadAnchor.setAttribute("download", "game.pgn"); | |
6808d7a1 BA |
266 | downloadAnchor.href = |
267 | "data:text/plain;charset=utf-8," + encodeURIComponent(content); | |
a6088c90 BA |
268 | downloadAnchor.click(); |
269 | }, | |
270 | getPgn: function() { | |
271 | let pgn = ""; | |
272 | pgn += '[Site "vchess.club"]\n'; | |
834c202a | 273 | pgn += '[Variant "' + this.game.vname + '"]\n'; |
a6088c90 | 274 | pgn += '[Date "' + getDate(new Date()) + '"]\n'; |
d4036efe BA |
275 | pgn += '[White "' + this.game.players[0].name + '"]\n'; |
276 | pgn += '[Black "' + this.game.players[1].name + '"]\n'; | |
834c202a | 277 | pgn += '[Fen "' + this.game.fenStart + '"]\n'; |
2c5d7b20 BA |
278 | pgn += '[Result "' + this.game.score + '"]\n'; |
279 | if (!!this.game.id) | |
280 | pgn += '[URL "' + params.serverUrl + '/game/' + this.game.id + '"]\n'; | |
281 | pgn += '\n'; | |
e71161fb | 282 | for (let i = 0; i < this.moves.length; i += 2) { |
2c5d7b20 BA |
283 | if (i > 0) pgn += " "; |
284 | pgn += (i/2+1) + "." + getFullNotation(this.moves[i]); | |
e71161fb | 285 | if (i+1 < this.moves.length) |
2c5d7b20 | 286 | pgn += " " + getFullNotation(this.moves[i+1]); |
a6088c90 | 287 | } |
2c5d7b20 BA |
288 | pgn += "\n\n"; |
289 | for (let i = 0; i < this.moves.length; i += 2) { | |
290 | pgn += getFullNotation(this.moves[i], "unambiguous") + "\n"; | |
291 | if (i+1 < this.moves.length) | |
292 | pgn += getFullNotation(this.moves[i+1], "unambiguous") + "\n"; | |
293 | } | |
294 | return pgn; | |
a6088c90 | 295 | }, |
b988c726 BA |
296 | showEndgameMsg: function(message) { |
297 | this.endgameMessage = message; | |
aae89b49 | 298 | document.getElementById("modalEog").checked = true; |
a6088c90 | 299 | }, |
54ec15eb BA |
300 | runAutoplay: function() { |
301 | const infinitePlay = () => { | |
302 | if (this.cursor == this.moves.length - 1) { | |
303 | clearInterval(this.autoplayLoop); | |
304 | this.autoplayLoop = null; | |
305 | this.autoplay = false; | |
306 | return; | |
307 | } | |
308 | if (this.inPlay || this.inMultimove) | |
309 | // Wait next tick | |
310 | return; | |
311 | this.play(); | |
312 | }; | |
313 | if (this.autoplay) { | |
314 | this.autoplay = false; | |
315 | clearInterval(this.autoplayLoop); | |
316 | this.autoplayLoop = null; | |
317 | } else { | |
318 | this.autoplay = true; | |
319 | infinitePlay(); | |
320 | this.autoplayLoop = setInterval(infinitePlay, 1500); | |
321 | } | |
322 | }, | |
e71161fb | 323 | // Animate an elementary move |
63ca2b89 | 324 | animateMove: function(move, callback) { |
a6088c90 | 325 | let startSquare = document.getElementById(getSquareId(move.start)); |
f9c36b2d | 326 | if (!startSquare) return; //shouldn't happen but... |
a6088c90 BA |
327 | let endSquare = document.getElementById(getSquareId(move.end)); |
328 | let rectStart = startSquare.getBoundingClientRect(); | |
329 | let rectEnd = endSquare.getBoundingClientRect(); | |
6808d7a1 BA |
330 | let translation = { |
331 | x: rectEnd.x - rectStart.x, | |
332 | y: rectEnd.y - rectStart.y | |
333 | }; | |
334 | let movingPiece = document.querySelector( | |
335 | "#" + getSquareId(move.start) + " > img.piece" | |
336 | ); | |
efdfb4c7 | 337 | // For some unknown reasons Opera get "movingPiece == null" error |
2c5d7b20 | 338 | // TODO: is it calling 'animate()' twice ? One extra time ? |
efdfb4c7 | 339 | if (!movingPiece) return; |
a6088c90 | 340 | const squares = document.getElementsByClassName("board"); |
6808d7a1 | 341 | for (let i = 0; i < squares.length; i++) { |
a6088c90 | 342 | let square = squares.item(i); |
2c5d7b20 BA |
343 | if (square.id != getSquareId(move.start)) |
344 | // HACK for animation: | |
345 | // (with positive translate, image slides "under background") | |
346 | square.style.zIndex = "-1"; | |
a6088c90 | 347 | } |
6808d7a1 BA |
348 | movingPiece.style.transform = |
349 | "translate(" + translation.x + "px," + translation.y + "px)"; | |
910d631b | 350 | movingPiece.style.transitionDuration = "0.25s"; |
a6088c90 | 351 | movingPiece.style.zIndex = "3000"; |
6808d7a1 BA |
352 | setTimeout(() => { |
353 | for (let i = 0; i < squares.length; i++) | |
a6088c90 BA |
354 | squares.item(i).style.zIndex = "auto"; |
355 | movingPiece.style = {}; //required e.g. for 0-0 with KR swap | |
63ca2b89 | 356 | callback(); |
a6088c90 BA |
357 | }, 250); |
358 | }, | |
8055eabd BA |
359 | // For Analyse mode: |
360 | emitFenIfAnalyze: function() { | |
361 | if (this.game.mode == "analyze") { | |
362 | this.$emit( | |
363 | "fenchange", | |
f1c9d707 | 364 | !!this.lastMove ? this.lastMove.fen : this.game.fenStart |
8055eabd BA |
365 | ); |
366 | } | |
367 | }, | |
61656127 BA |
368 | clickSquare: function(square) { |
369 | // Some variants make use of a single click at specific times: | |
370 | const move = this.vr.doClick(square); | |
371 | if (!!move) this.play(move); | |
372 | }, | |
e71161fb | 373 | // "light": if gotoMove() or gotoEnd() |
57eb158f | 374 | play: function(move, received, light, noemit) { |
a6836242 BA |
375 | // Freeze while choices are shown: |
376 | if (this.$refs["board"].choices.length > 0) return; | |
57eb158f BA |
377 | if (!!noemit) { |
378 | if (this.inPlay) { | |
379 | // Received moves in observed games can arrive too fast: | |
380 | this.stackToPlay.unshift(move); | |
381 | return; | |
382 | } | |
383 | this.inPlay = true; | |
384 | } | |
9d54ab89 | 385 | const navigate = !move; |
e71161fb | 386 | const playSubmove = (smove) => { |
fbd68f75 | 387 | smove.notation = this.vr.getNotation(smove); |
2c5d7b20 | 388 | smove.unambiguous = V.GetUnambiguousNotation(smove); |
e71161fb | 389 | this.vr.play(smove); |
f14572c4 | 390 | this.lastMove = smove; |
fbd68f75 | 391 | if (!this.inMultimove) { |
54ec15eb BA |
392 | // Condition is "!navigate" but we mean "!this.autoplay" |
393 | if (!navigate) { | |
394 | if (this.cursor < this.moves.length - 1) | |
395 | this.moves = this.moves.slice(0, this.cursor + 1); | |
396 | this.moves.push(smove); | |
397 | } | |
fbd68f75 BA |
398 | this.inMultimove = true; //potentially |
399 | this.cursor++; | |
54ec15eb | 400 | } else if (!navigate) { |
fbd68f75 BA |
401 | // Already in the middle of a multi-move |
402 | const L = this.moves.length; | |
403 | if (!Array.isArray(this.moves[L-1])) | |
404 | this.$set(this.moves, L-1, [this.moves[L-1], smove]); | |
405 | else | |
406 | this.$set(this.moves, L-1, this.moves.concat([smove])); | |
e71161fb BA |
407 | } |
408 | }; | |
409 | const playMove = () => { | |
54ec15eb | 410 | const animate = ( |
57d9b2c4 | 411 | ["all", "highlight"].includes(V.ShowMoves) && |
54ec15eb BA |
412 | (this.autoplay || !!received) |
413 | ); | |
e71161fb BA |
414 | if (!Array.isArray(move)) move = [move]; |
415 | let moveIdx = 0; | |
416 | let self = this; | |
417 | const initurn = this.vr.turn; | |
418 | (function executeMove() { | |
419 | const smove = move[moveIdx++]; | |
420 | if (animate) { | |
421 | self.animateMove(smove, () => { | |
422 | playSubmove(smove); | |
423 | if (moveIdx < move.length) | |
424 | setTimeout(executeMove, 500); | |
425 | else afterMove(smove, initurn); | |
426 | }); | |
427 | } else { | |
428 | playSubmove(smove); | |
429 | if (moveIdx < move.length) executeMove(); | |
430 | else afterMove(smove, initurn); | |
431 | } | |
432 | })(); | |
433 | }; | |
fbd68f75 BA |
434 | const computeScore = () => { |
435 | const score = this.vr.getCurrentScore(); | |
f54f4c26 BA |
436 | if (!navigate) { |
437 | if (["1-0","0-1"].includes(score)) | |
438 | this.lastMove.notation += "#"; | |
439 | else if (this.vr.getCheckSquares(this.vr.turn).length > 0) | |
440 | this.lastMove.notation += "+"; | |
441 | } | |
fbd68f75 BA |
442 | if (score != "*" && this.game.mode == "analyze") { |
443 | const message = getScoreMessage(score); | |
444 | // Just show score on screen (allow undo) | |
445 | this.showEndgameMsg(score + " . " + this.st.tr[message]); | |
446 | } | |
447 | return score; | |
448 | }; | |
e71161fb | 449 | const afterMove = (smove, initurn) => { |
e71161fb BA |
450 | if (this.vr.turn != initurn) { |
451 | // Turn has changed: move is complete | |
3a2a7b5f | 452 | if (!smove.fen) |
2c5d7b20 | 453 | // NOTE: only FEN of last sub-move is required (=> setting it here) |
cc00b83c | 454 | smove.fen = this.vr.getFen(); |
b0a0468a BA |
455 | // Is opponent in check? |
456 | this.incheck = this.vr.getCheckSquares(this.vr.turn); | |
3a2a7b5f | 457 | this.emitFenIfAnalyze(); |
e71161fb | 458 | this.inMultimove = false; |
f54f4c26 | 459 | this.score = computeScore(); |
54ec15eb | 460 | if (this.game.mode != "analyze" && !navigate) { |
f54f4c26 | 461 | if (!noemit) { |
5aa14a21 | 462 | // Post-processing (e.g. computer play). |
f54f4c26 | 463 | const L = this.moves.length; |
5aa14a21 BA |
464 | // NOTE: always emit the score, even in unfinished, |
465 | // to tell Game::processMove() that it's not a received move. | |
f54f4c26 BA |
466 | this.$emit("newmove", this.moves[L-1], { score: this.score }); |
467 | } else { | |
57eb158f BA |
468 | this.inPlay = false; |
469 | if (this.stackToPlay.length > 0) | |
470 | // Move(s) arrived in-between | |
471 | this.play(this.stackToPlay.pop(), received, light, noemit); | |
472 | } | |
e71161fb BA |
473 | } |
474 | } | |
475 | }; | |
476 | // NOTE: navigate and received are mutually exclusive | |
477 | if (navigate) { | |
478 | // The move to navigate to is necessarily full: | |
479 | if (this.cursor == this.moves.length - 1) return; //no more moves | |
480 | move = this.moves[this.cursor + 1]; | |
54ec15eb BA |
481 | if (!this.autoplay) { |
482 | // Just play the move: | |
483 | if (!Array.isArray(move)) move = [move]; | |
484 | for (let i=0; i < move.length; i++) this.vr.play(move[i]); | |
485 | if (!light) { | |
486 | this.lastMove = move[move.length-1]; | |
487 | this.incheck = this.vr.getCheckSquares(this.vr.turn); | |
488 | this.score = computeScore(); | |
489 | this.emitFenIfAnalyze(); | |
490 | } | |
491 | this.cursor++; | |
492 | return; | |
8055eabd | 493 | } |
e71161fb | 494 | } |
63ca2b89 BA |
495 | // Forbid playing outside analyze mode, except if move is received. |
496 | // Sufficient condition because Board already knows which turn it is. | |
6808d7a1 | 497 | if ( |
6808d7a1 | 498 | this.game.mode != "analyze" && |
dcb3637c | 499 | !navigate && |
e71161fb | 500 | !received && |
6808d7a1 BA |
501 | (this.game.score != "*" || this.cursor < this.moves.length - 1) |
502 | ) { | |
a6088c90 BA |
503 | return; |
504 | } | |
e71161fb BA |
505 | // To play a received move, cursor must be at the end of the game: |
506 | if (received && this.cursor < this.moves.length - 1) | |
507 | this.gotoEnd(); | |
508 | playMove(); | |
509 | }, | |
510 | cancelCurrentMultimove: function() { | |
e71161fb BA |
511 | const L = this.moves.length; |
512 | let move = this.moves[L-1]; | |
513 | if (!Array.isArray(move)) move = [move]; | |
514 | for (let i=move.length -1; i >= 0; i--) this.vr.undo(move[i]); | |
515 | this.moves.pop(); | |
516 | this.cursor--; | |
517 | this.inMultimove = false; | |
518 | }, | |
519 | cancelLastMove: function() { | |
520 | // The last played move was canceled (corr game) | |
521 | this.undo(); | |
522 | this.moves.pop(); | |
523 | }, | |
524 | // "light": if gotoMove() or gotoBegin() | |
525 | undo: function(move, light) { | |
a6836242 BA |
526 | // Freeze while choices are shown: |
527 | if (this.$refs["board"].choices.length > 0) return; | |
e71161fb BA |
528 | if (this.inMultimove) { |
529 | this.cancelCurrentMultimove(); | |
63ca2b89 | 530 | this.incheck = this.vr.getCheckSquares(this.vr.turn); |
e71161fb BA |
531 | } else { |
532 | if (!move) { | |
3a2a7b5f BA |
533 | const minCursor = |
534 | this.moves.length > 0 && this.moves[0].notation == "..." | |
535 | ? 1 | |
536 | : 0; | |
537 | if (this.cursor < minCursor) return; //no more moves | |
e71161fb BA |
538 | move = this.moves[this.cursor]; |
539 | } | |
e71161fb BA |
540 | undoMove(move, this.vr); |
541 | if (light) this.cursor--; | |
542 | else { | |
543 | this.positionCursorTo(this.cursor - 1); | |
e71161fb | 544 | this.incheck = this.vr.getCheckSquares(this.vr.turn); |
8055eabd | 545 | this.emitFenIfAnalyze(); |
63ca2b89 | 546 | } |
a6088c90 | 547 | } |
a6088c90 BA |
548 | }, |
549 | gotoMove: function(index) { | |
a6836242 | 550 | if (this.$refs["board"].choices.length > 0) return; |
e71161fb BA |
551 | if (this.inMultimove) this.cancelCurrentMultimove(); |
552 | if (index == this.cursor) return; | |
553 | if (index < this.cursor) { | |
554 | while (this.cursor > index) | |
555 | this.undo(null, null, "light"); | |
556 | } | |
557 | else { | |
558 | // index > this.cursor) | |
559 | while (this.cursor < index) | |
560 | this.play(null, null, "light"); | |
561 | } | |
562 | // NOTE: next line also re-assign cursor, but it's very light | |
563 | this.positionCursorTo(index); | |
8b405c81 | 564 | this.incheck = this.vr.getCheckSquares(this.vr.turn); |
8055eabd | 565 | this.emitFenIfAnalyze(); |
a6088c90 BA |
566 | }, |
567 | gotoBegin: function() { | |
a6836242 | 568 | if (this.$refs["board"].choices.length > 0) return; |
e71161fb | 569 | if (this.inMultimove) this.cancelCurrentMultimove(); |
3a2a7b5f BA |
570 | const minCursor = |
571 | this.moves.length > 0 && this.moves[0].notation == "..." | |
572 | ? 1 | |
573 | : 0; | |
574 | while (this.cursor >= minCursor) this.undo(null, null, "light"); | |
575 | this.lastMove = (minCursor == 1 ? this.moves[0] : null); | |
576 | this.incheck = this.vr.getCheckSquares(this.vr.turn); | |
8055eabd | 577 | this.emitFenIfAnalyze(); |
a6088c90 BA |
578 | }, |
579 | gotoEnd: function() { | |
a6836242 | 580 | if (this.$refs["board"].choices.length > 0) return; |
6808d7a1 BA |
581 | if (this.cursor == this.moves.length - 1) return; |
582 | this.gotoMove(this.moves.length - 1); | |
8055eabd | 583 | this.emitFenIfAnalyze(); |
a6088c90 BA |
584 | }, |
585 | flip: function() { | |
a6836242 | 586 | if (this.$refs["board"].choices.length > 0) return; |
0e16cb26 | 587 | this.orientation = V.GetOppCol(this.orientation); |
6808d7a1 BA |
588 | } |
589 | } | |
a6088c90 BA |
590 | }; |
591 | </script> | |
72ccbd67 | 592 | |
41c80bb6 | 593 | <style lang="sass" scoped> |
9a3049f3 BA |
594 | [type="checkbox"]#modalEog+div .card |
595 | min-height: 45px | |
910d631b | 596 | |
cf94b843 BA |
597 | #baseGame |
598 | width: 100% | |
4f518610 BA |
599 | &:focus |
600 | outline: none | |
cf94b843 BA |
601 | |
602 | #gameContainer | |
72ccbd67 BA |
603 | margin-left: auto |
604 | margin-right: auto | |
cf94b843 | 605 | |
ed06d9e9 BA |
606 | #downloadDiv |
607 | display: inline-block | |
608 | ||
72ccbd67 | 609 | #controls |
28b32b4f | 610 | user-select: none |
72ccbd67 | 611 | button |
b1e46b33 | 612 | border: none |
72ccbd67 | 613 | margin: 0 |
feaf1bf7 BA |
614 | padding-top: 5px |
615 | padding-bottom: 5px | |
616 | ||
54ec15eb BA |
617 | .in-autoplay |
618 | background-color: #FACF8C | |
619 | ||
feaf1bf7 | 620 | img.inline |
54ec15eb | 621 | height: 22px |
feaf1bf7 BA |
622 | padding-top: 5px |
623 | @media screen and (max-width: 767px) | |
624 | height: 18px | |
910d631b | 625 | |
0e16cb26 BA |
626 | #turnIndicator |
627 | text-align: center | |
29bc61be | 628 | font-weight: bold |
910d631b | 629 | |
72ccbd67 | 630 | #boardContainer |
cf94b843 | 631 | float: left |
41c80bb6 BA |
632 | // TODO: later, maybe, allow movesList of variable width |
633 | // or e.g. between 250 and 350px (but more complicated) | |
910d631b | 634 | |
cf94b843 BA |
635 | #movesList |
636 | width: 280px | |
637 | float: left | |
910d631b | 638 | |
96e9585a BA |
639 | @media screen and (max-width: 767px) |
640 | #movesList | |
641 | width: 100% | |
642 | float: none | |
643 | clear: both | |
72ccbd67 | 644 | </style> |