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" | |
07052665 | 17 | :analyze="mode=='analyze'" |
20620465 | 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" |
bc1e1f2a | 25 | @rendered="adjustSize" |
6808d7a1 | 26 | ) |
20620465 | 27 | #turnIndicator(v-if="showTurn") {{ turn }} |
b1e46b33 | 28 | #controls.button-group |
b9a5fe01 BA |
29 | button(@click="gotoBegin()") |
30 | img.inline(src="/images/icons/fast-forward_rev.svg") | |
31 | button(@click="undo()") | |
32 | img.inline(src="/images/icons/play_rev.svg") | |
33 | button(v-if="canFlip" @click="flip()") | |
34 | img.inline(src="/images/icons/flip.svg") | |
54ec15eb BA |
35 | button( |
36 | @click="runAutoplay()" | |
37 | :class="{'in-autoplay': autoplay}" | |
38 | ) | |
39 | img.inline(src="/images/icons/autoplay.svg") | |
b9a5fe01 BA |
40 | button(@click="play()") |
41 | img.inline(src="/images/icons/play.svg") | |
42 | button(@click="gotoEnd()") | |
43 | img.inline(src="/images/icons/fast-forward.svg") | |
5fc82c80 | 44 | p#fenAnalyze(v-show="showFen") {{ (!!vr ? vr.getFen() : "") }} |
cf94b843 | 45 | #movesList |
6808d7a1 | 46 | MoveList( |
bc1e1f2a | 47 | ref="moveslist" |
933fd1f9 | 48 | :show="showMoves" |
feaf1bf7 BA |
49 | :canAnalyze="canAnalyze" |
50 | :canDownload="allowDownloadPGN" | |
6808d7a1 BA |
51 | :score="game.score" |
52 | :message="game.scoreMsg" | |
53 | :firstNum="firstMoveNumber" | |
54 | :moves="moves" | |
55 | :cursor="cursor" | |
57078452 | 56 | :vname="game.vname" |
feaf1bf7 BA |
57 | @download="download" |
58 | @showrules="showRules" | |
07052665 | 59 | @analyze="toggleAnalyze" |
6808d7a1 | 60 | @goto-move="gotoMove" |
107dc1bd | 61 | @redraw-board="redrawBoard" |
6808d7a1 | 62 | ) |
41c80bb6 | 63 | .clearer |
a6088c90 BA |
64 | </template> |
65 | ||
66 | <script> | |
67 | import Board from "@/components/Board.vue"; | |
f21cd6d9 | 68 | import MoveList from "@/components/MoveList.vue"; |
2c5d7b20 | 69 | import params from "@/parameters"; |
a6088c90 BA |
70 | import { store } from "@/store"; |
71 | import { getSquareId } from "@/utils/squareId"; | |
d4036efe | 72 | import { getDate } from "@/utils/datetime"; |
602d6bef | 73 | import { processModalClick } from "@/utils/modalClick"; |
77c50966 | 74 | import { getScoreMessage } from "@/utils/scoring"; |
e71161fb BA |
75 | import { getFullNotation } from "@/utils/notation"; |
76 | import { undoMove } from "@/utils/playUndo"; | |
a6088c90 | 77 | export default { |
6808d7a1 | 78 | name: "my-base-game", |
a6088c90 BA |
79 | components: { |
80 | Board, | |
6808d7a1 | 81 | MoveList |
a6088c90 | 82 | }, |
e71161fb | 83 | props: ["game"], |
a6088c90 BA |
84 | data: function() { |
85 | return { | |
86 | st: store.state, | |
b7c32f1a | 87 | // NOTE: all following variables must be reset at the beginning of a game |
e71161fb | 88 | vr: null, //VariantRules object, game state |
a6088c90 BA |
89 | endgameMessage: "", |
90 | orientation: "w", | |
07052665 | 91 | mode: "", |
e50a8025 | 92 | gameMode: "", |
a6088c90 | 93 | score: "*", //'*' means 'unfinished' |
b7c32f1a | 94 | moves: [], |
a6088c90 BA |
95 | cursor: -1, //index of the move just played |
96 | lastMove: null, | |
74fcb454 | 97 | touchLastClick: "", |
5157ce0b | 98 | firstMoveNumber: 0, //for printing |
e71161fb | 99 | incheck: [], //for Board |
57eb158f | 100 | inMultimove: false, |
54ec15eb | 101 | autoplay: false, |
57eb158f BA |
102 | inPlay: false, |
103 | stackToPlay: [] | |
a6088c90 BA |
104 | }; |
105 | }, | |
106 | computed: { | |
6b9378a6 BA |
107 | turn: function() { |
108 | if (!this.vr) return ""; | |
109 | if (this.vr.showMoves != "all") { | |
110 | return this.st.tr[ | |
111 | (this.vr.turn == 'w' ? "White" : "Black") + " to move"]; | |
112 | } | |
5246b49d | 113 | // Cannot flip (racing king or circular chess), or Monochrome |
6b9378a6 BA |
114 | return ( |
115 | this.vr.movesCount == 0 && this.game.mycolor == "w" | |
116 | ? this.st.tr["It's your turn!"] | |
117 | : "" | |
118 | ); | |
119 | }, | |
07052665 BA |
120 | showFen: function() { |
121 | return ( | |
122 | this.mode == "analyze" && | |
123 | this.$router.currentRoute.path.indexOf("/analyse") === -1 | |
124 | ); | |
125 | }, | |
1ef65040 | 126 | // TODO: is it OK to pass "computed" as properties? |
6b9378a6 | 127 | // Also, some are seemingly not recomputed when vr is initialized. |
a6088c90 | 128 | showMoves: function() { |
00eef1ca BA |
129 | return ( |
130 | !!this.game.score && this.game.score != "*" | |
131 | ? "all" | |
132 | : (!!this.vr ? this.vr.showMoves : "none") | |
133 | ); | |
20620465 BA |
134 | }, |
135 | showTurn: function() { | |
71ef1664 | 136 | return ( |
00eef1ca | 137 | !!this.game.score && this.game.score == '*' && |
5246b49d BA |
138 | !!this.vr && |
139 | ( | |
140 | this.vr.showMoves != "all" || | |
141 | !this.vr.canFlip || | |
142 | this.vr.showFirstTurn | |
143 | ) | |
71ef1664 | 144 | ); |
a6088c90 | 145 | }, |
20620465 | 146 | canAnalyze: function() { |
6b9378a6 | 147 | return ( |
3cfd9287 | 148 | (!this.game.mode || this.game.mode != "analyze") && |
6b9378a6 BA |
149 | !!this.vr && this.vr.canAnalyze |
150 | ); | |
20620465 | 151 | }, |
71ef1664 | 152 | canFlip: function() { |
6b9378a6 | 153 | return !!this.vr && this.vr.canFlip; |
71ef1664 | 154 | }, |
20620465 | 155 | allowDownloadPGN: function() { |
6b9378a6 | 156 | return ( |
00eef1ca BA |
157 | (!!this.game.score && this.game.score != "*") || |
158 | (!!this.vr && !this.vr.someHiddenMoves) | |
6b9378a6 | 159 | ); |
6808d7a1 | 160 | } |
a6088c90 | 161 | }, |
4b0384fa | 162 | created: function() { |
b1e46b33 | 163 | if (!!this.game.fenStart) this.re_setVariables(); |
4b0384fa | 164 | }, |
cf94b843 | 165 | mounted: function() { |
e71161fb BA |
166 | if (!("ontouchstart" in window)) { |
167 | // Desktop browser: | |
168 | const baseGameDiv = document.getElementById("baseGame"); | |
169 | baseGameDiv.tabIndex = 0; | |
170 | baseGameDiv.addEventListener("click", this.focusBg); | |
171 | baseGameDiv.addEventListener("keydown", this.handleKeys); | |
4313762d BA |
172 | if (this.st.settings.scrollmove) |
173 | baseGameDiv.addEventListener("wheel", this.handleScroll); | |
e71161fb | 174 | } |
42a92848 BA |
175 | document.getElementById("eogDiv") |
176 | .addEventListener("click", processModalClick); | |
cf94b843 | 177 | }, |
54ec15eb | 178 | beforeDestroy: function() { |
5b18515f BA |
179 | // TODO: probably not required |
180 | this.autoplay = false; | |
54ec15eb | 181 | }, |
a6088c90 | 182 | methods: { |
9ca1e26b | 183 | focusBg: function() { |
9ca1e26b BA |
184 | document.getElementById("baseGame").focus(); |
185 | }, | |
186 | handleKeys: function(e) { | |
6808d7a1 BA |
187 | if ([32, 37, 38, 39, 40].includes(e.keyCode)) e.preventDefault(); |
188 | switch (e.keyCode) { | |
9ca1e26b BA |
189 | case 37: |
190 | this.undo(); | |
191 | break; | |
192 | case 39: | |
193 | this.play(); | |
194 | break; | |
5701c228 | 195 | case 38: |
9ca1e26b BA |
196 | this.gotoBegin(); |
197 | break; | |
198 | case 40: | |
199 | this.gotoEnd(); | |
200 | break; | |
201 | case 32: | |
9ca1e26b BA |
202 | this.flip(); |
203 | break; | |
204 | } | |
205 | }, | |
dcd68c41 | 206 | handleScroll: function(e) { |
e71161fb BA |
207 | e.preventDefault(); |
208 | if (e.deltaY < 0) this.undo(); | |
209 | else if (e.deltaY > 0) this.play(); | |
dcd68c41 | 210 | }, |
bc1e1f2a BA |
211 | adjustSize: function() { |
212 | this.$refs["moveslist"].adjustBoard("vertical"); | |
213 | }, | |
107dc1bd BA |
214 | redrawBoard: function() { |
215 | this.$refs["board"].re_setDrawings(); | |
49dad261 | 216 | }, |
0e16cb26 | 217 | showRules: function() { |
07052665 BA |
218 | // The button is here only on Game page: |
219 | document.getElementById("modalRules").checked = true; | |
0e16cb26 | 220 | }, |
b1e46b33 BA |
221 | re_setVariables: function(game) { |
222 | if (!game) game = this.game; //in case of... | |
4b0384fa | 223 | this.endgameMessage = ""; |
8477e53d | 224 | // "w": default orientation for observed games |
b1e46b33 | 225 | this.orientation = game.mycolor || "w"; |
07052665 | 226 | this.mode = game.mode || game.type; //TODO: merge... |
b1e46b33 | 227 | this.moves = JSON.parse(JSON.stringify(game.moves || [])); |
e71161fb | 228 | // Post-processing: decorate each move with notation and FEN |
b1e46b33 | 229 | this.vr = new V(game.fenStart); |
cd49e617 | 230 | this.inMultimove = false; //in case of |
6c7cbfed BA |
231 | if (!!this.$refs["board"]) |
232 | // Also in case of: | |
233 | this.$refs["board"].resetCurrentAttempt(); | |
cd49e617 BA |
234 | let analyseBtn = document.getElementById("analyzeBtn"); |
235 | if (!!analyseBtn) analyseBtn.classList.remove("active"); | |
b1e46b33 | 236 | const parsedFen = V.ParseFen(game.fenStart); |
8477e53d | 237 | const firstMoveColor = parsedFen.turn; |
6e0c0bcb | 238 | this.firstMoveNumber = Math.floor(parsedFen.movesCount / 2) + 1; |
f54f4c26 | 239 | let L = this.moves.length; |
1b56b736 BA |
240 | this.moves.forEach((move,idx) => { |
241 | // Strategy working also for multi-moves: | |
242 | if (!Array.isArray(move)) move = [move]; | |
243 | move.forEach(m => { | |
244 | m.notation = this.vr.getNotation(m); | |
245 | m.unambiguous = V.GetUnambiguousNotation(m); | |
246 | this.vr.play(m); | |
e71161fb | 247 | }); |
1b56b736 BA |
248 | const Lm = move.length; |
249 | move[Lm - 1].fen = this.vr.getFen(); | |
250 | if (idx < L - 1 && this.vr.getCheckSquares().length > 0) | |
251 | move[Lm - 1].notation += "+"; | |
252 | }); | |
253 | this.incheck = this.vr.getCheckSquares(); | |
254 | this.score = this.vr.getCurrentScore(); | |
255 | if (L >= 1) { | |
256 | const move = | |
257 | !Array.isArray(this.moves[L - 1]) | |
258 | ? [this.moves[L - 1]] | |
259 | : this.moves[L - 1]; | |
260 | const Lm = move.length; | |
261 | if (["1-0", "0-1"].includes(this.score)) move[Lm - 1].notation += "#"; | |
262 | else if (this.incheck.length > 0) move[Lm - 1].notation += "+"; | |
263 | } | |
264 | if (this.score != '*') { | |
265 | // Show score on screen | |
266 | const message = getScoreMessage(this.score); | |
267 | this.showEndgameMsg(this.score + " . " + this.st.tr[message]); | |
6c7cbfed | 268 | } |
8477e53d | 269 | if (firstMoveColor == "b") { |
311cba76 | 270 | // 'start' & 'end' is required for Board component |
6808d7a1 | 271 | this.moves.unshift({ |
6808d7a1 | 272 | notation: "...", |
2c5d7b20 | 273 | unambiguous: "...", |
311cba76 | 274 | start: { x: -1, y: -1 }, |
3a2a7b5f BA |
275 | end: { x: -1, y: -1 }, |
276 | fen: game.fenStart | |
6808d7a1 | 277 | }); |
f54f4c26 | 278 | L++; |
697ee580 | 279 | } |
af34341d | 280 | this.positionCursorTo(L - 1); |
4b0384fa | 281 | }, |
e71161fb BA |
282 | positionCursorTo: function(index) { |
283 | this.cursor = index; | |
af34341d BA |
284 | // Note: last move in moves array might be a multi-move |
285 | if (index >= 0) this.lastMove = this.moves[index]; | |
286 | else this.lastMove = null; | |
e71161fb | 287 | }, |
07052665 | 288 | toggleAnalyze: function() { |
8506fc3b | 289 | // Freeze while choices are shown (and autoplay has priority) |
b967d5ba BA |
290 | if ( |
291 | this.inPlay || | |
292 | this.$refs["board"].choices.length > 0 || | |
293 | this.autoplay | |
294 | ) { | |
295 | return; | |
296 | } | |
07052665 BA |
297 | if (this.mode != "analyze") { |
298 | // Enter analyze mode: | |
596e24d0 | 299 | this.gameMode = this.mode; //was not 'analyze' |
b967d5ba | 300 | this.mode = "analyze"; |
e0f26496 | 301 | if (this.inMultimove) this.cancelCurrentMultimove(); |
07052665 BA |
302 | this.gameCursor = this.cursor; |
303 | this.gameMoves = JSON.parse(JSON.stringify(this.moves)); | |
304 | document.getElementById("analyzeBtn").classList.add("active"); | |
305 | } | |
306 | else { | |
307 | // Exit analyze mode: | |
e50a8025 | 308 | this.mode = this.gameMode; |
07052665 BA |
309 | this.cursor = this.gameCursor; |
310 | this.moves = this.gameMoves; | |
311 | let fen = this.game.fenStart; | |
312 | if (this.cursor >= 0) { | |
313 | let mv = this.moves[this.cursor]; | |
314 | if (!Array.isArray(mv)) mv = [mv]; | |
315 | fen = mv[mv.length-1].fen; | |
316 | } | |
317 | this.vr = new V(fen); | |
0e912cb2 | 318 | this.inMultimove = false; //in case of |
8506fc3b | 319 | this.$refs["board"].resetCurrentAttempt(); //also in case of |
0f0552a7 | 320 | this.incheck = this.vr.getCheckSquares(); |
8aa314fa BA |
321 | if (this.cursor >= 0) this.lastMove = this.moves[this.cursor]; |
322 | else this.lastMove = null; | |
07052665 BA |
323 | document.getElementById("analyzeBtn").classList.remove("active"); |
324 | } | |
603b8a8b | 325 | }, |
a6088c90 BA |
326 | download: function() { |
327 | const content = this.getPgn(); | |
328 | // Prepare and trigger download link | |
329 | let downloadAnchor = document.getElementById("download"); | |
330 | downloadAnchor.setAttribute("download", "game.pgn"); | |
6808d7a1 BA |
331 | downloadAnchor.href = |
332 | "data:text/plain;charset=utf-8," + encodeURIComponent(content); | |
a6088c90 BA |
333 | downloadAnchor.click(); |
334 | }, | |
335 | getPgn: function() { | |
336 | let pgn = ""; | |
337 | pgn += '[Site "vchess.club"]\n'; | |
834c202a | 338 | pgn += '[Variant "' + this.game.vname + '"]\n'; |
1ef65040 BA |
339 | const gdt = getDate(new Date(this.game.created || Date.now())); |
340 | pgn += '[Date "' + gdt + '"]\n'; | |
d4036efe BA |
341 | pgn += '[White "' + this.game.players[0].name + '"]\n'; |
342 | pgn += '[Black "' + this.game.players[1].name + '"]\n'; | |
834c202a | 343 | pgn += '[Fen "' + this.game.fenStart + '"]\n'; |
2c5d7b20 | 344 | pgn += '[Result "' + this.game.score + '"]\n'; |
fef153df | 345 | if (!!this.game.id) |
1ef65040 | 346 | pgn += '[Url "' + params.serverUrl + '/game/' + this.game.id + '"]\n'; |
fef153df BA |
347 | if (!!this.game.cadence) |
348 | pgn += '[Cadence "' + this.game.cadence + '"]\n'; | |
4313762d | 349 | pgn += '[Options "' + JSON.stringify(this.game.options) + '"]\n'; |
2c5d7b20 | 350 | pgn += '\n'; |
e71161fb | 351 | for (let i = 0; i < this.moves.length; i += 2) { |
2c5d7b20 | 352 | if (i > 0) pgn += " "; |
49dad261 BA |
353 | // Adjust dots notation for a better display: |
354 | let fullNotation = getFullNotation(this.moves[i]); | |
355 | if (fullNotation == "...") fullNotation = ".."; | |
6e0c0bcb | 356 | pgn += (i / 2 + this.firstMoveNumber) + "." + fullNotation; |
e71161fb | 357 | if (i+1 < this.moves.length) |
2c5d7b20 | 358 | pgn += " " + getFullNotation(this.moves[i+1]); |
a6088c90 | 359 | } |
2c5d7b20 BA |
360 | pgn += "\n\n"; |
361 | for (let i = 0; i < this.moves.length; i += 2) { | |
6e0c0bcb | 362 | const moveNumber = i / 2 + this.firstMoveNumber; |
1ef65040 BA |
363 | // Skip "dots move", useless for machine reading: |
364 | if (this.moves[i].notation != "...") { | |
365 | pgn += moveNumber + ".w " + | |
366 | getFullNotation(this.moves[i], "unambiguous") + "\n"; | |
367 | } | |
49dad261 | 368 | if (i+1 < this.moves.length) { |
1ef65040 | 369 | pgn += moveNumber + ".b " + |
49dad261 BA |
370 | getFullNotation(this.moves[i+1], "unambiguous") + "\n"; |
371 | } | |
2c5d7b20 BA |
372 | } |
373 | return pgn; | |
a6088c90 | 374 | }, |
b988c726 BA |
375 | showEndgameMsg: function(message) { |
376 | this.endgameMessage = message; | |
aae89b49 | 377 | document.getElementById("modalEog").checked = true; |
a6088c90 | 378 | }, |
54ec15eb | 379 | runAutoplay: function() { |
54ec15eb BA |
380 | if (this.autoplay) { |
381 | this.autoplay = false; | |
5b18515f BA |
382 | if (this.stackToPlay.length > 0) |
383 | // Move(s) arrived in-between | |
384 | this.play(this.stackToPlay.pop(), "received"); | |
385 | } | |
386 | else if (this.cursor < this.moves.length - 1) { | |
54ec15eb | 387 | this.autoplay = true; |
5fc82c80 | 388 | this.play(null, null, null, "autoplay"); |
54ec15eb BA |
389 | } |
390 | }, | |
e71161fb | 391 | // Animate an elementary move |
63ca2b89 | 392 | animateMove: function(move, callback) { |
a6088c90 | 393 | let startSquare = document.getElementById(getSquareId(move.start)); |
f9c36b2d | 394 | if (!startSquare) return; //shouldn't happen but... |
a6088c90 BA |
395 | let endSquare = document.getElementById(getSquareId(move.end)); |
396 | let rectStart = startSquare.getBoundingClientRect(); | |
397 | let rectEnd = endSquare.getBoundingClientRect(); | |
6808d7a1 BA |
398 | let translation = { |
399 | x: rectEnd.x - rectStart.x, | |
400 | y: rectEnd.y - rectStart.y | |
401 | }; | |
402 | let movingPiece = document.querySelector( | |
403 | "#" + getSquareId(move.start) + " > img.piece" | |
404 | ); | |
efdfb4c7 | 405 | // For some unknown reasons Opera get "movingPiece == null" error |
2c5d7b20 | 406 | // TODO: is it calling 'animate()' twice ? One extra time ? |
efdfb4c7 | 407 | if (!movingPiece) return; |
a6088c90 | 408 | const squares = document.getElementsByClassName("board"); |
6808d7a1 | 409 | for (let i = 0; i < squares.length; i++) { |
a6088c90 | 410 | let square = squares.item(i); |
2c5d7b20 BA |
411 | if (square.id != getSquareId(move.start)) |
412 | // HACK for animation: | |
413 | // (with positive translate, image slides "under background") | |
414 | square.style.zIndex = "-1"; | |
a6088c90 | 415 | } |
6808d7a1 BA |
416 | movingPiece.style.transform = |
417 | "translate(" + translation.x + "px," + translation.y + "px)"; | |
910d631b | 418 | movingPiece.style.transitionDuration = "0.25s"; |
a6088c90 | 419 | movingPiece.style.zIndex = "3000"; |
6808d7a1 BA |
420 | setTimeout(() => { |
421 | for (let i = 0; i < squares.length; i++) | |
a6088c90 BA |
422 | squares.item(i).style.zIndex = "auto"; |
423 | movingPiece.style = {}; //required e.g. for 0-0 with KR swap | |
63ca2b89 | 424 | callback(); |
a6088c90 BA |
425 | }, 250); |
426 | }, | |
8055eabd BA |
427 | // For Analyse mode: |
428 | emitFenIfAnalyze: function() { | |
429 | if (this.game.mode == "analyze") { | |
af34341d BA |
430 | let fen = this.game.fenStart; |
431 | if (!!this.lastMove) { | |
432 | if (Array.isArray(this.lastMove)) { | |
433 | const L = this.lastMove.length; | |
434 | fen = this.lastMove[L-1].fen; | |
435 | } | |
436 | else fen = this.lastMove.fen; | |
437 | } | |
438 | this.$emit("fenchange", fen); | |
8055eabd BA |
439 | } |
440 | }, | |
61656127 BA |
441 | clickSquare: function(square) { |
442 | // Some variants make use of a single click at specific times: | |
1b56b736 BA |
443 | const move_s = this.vr.doClick(square); |
444 | if (!!move_s) { | |
74fcb454 BA |
445 | const playMove = () => { |
446 | if (!Array.isArray(move_s)) this.play(move_s); | |
447 | else this.$refs["board"].choices = move_s; | |
448 | } | |
449 | if ("ontouchstart" in window) { | |
95bc4bf5 BA |
450 | const squareId = "sq-" + square[0] + "-" + square[1]; |
451 | const highlight = function(on, sq) { | |
452 | let elt = document.getElementById(sq); | |
453 | if (!!elt) { | |
454 | if (on) elt.classList.add("touch-hover"); | |
455 | else elt.classList.remove("touch-hover"); | |
456 | } | |
457 | } | |
74fcb454 | 458 | // Touch screen (smartphone): require confirmation |
95bc4bf5 BA |
459 | const squareStr = square[0] + "_" + square[1] |
460 | if (this.touchLastClick == squareId) { | |
461 | highlight(false, squareId); | |
462 | playMove(); | |
463 | } | |
464 | else { | |
465 | highlight(true, squareId); | |
466 | highlight(false, this.touchLastClick); | |
467 | } | |
468 | this.touchLastClick = squareId; | |
74fcb454 BA |
469 | } |
470 | else playMove(); | |
1b56b736 | 471 | } |
61656127 | 472 | }, |
e71161fb | 473 | // "light": if gotoMove() or gotoEnd() |
5fc82c80 | 474 | play: function(move, received, light, autoplay) { |
a6836242 | 475 | // Freeze while choices are shown: |
6c7cbfed BA |
476 | if ( |
477 | !!this.$refs["board"].selectedPiece || | |
478 | this.$refs["board"].choices.length > 0 | |
479 | ) { | |
480 | return; | |
481 | } | |
d6289b54 | 482 | const navigate = !move; |
5fc82c80 BA |
483 | // Forbid navigation during autoplay: |
484 | if (navigate && this.autoplay && !autoplay) return; | |
d6289b54 BA |
485 | // Forbid playing outside analyze mode, except if move is received. |
486 | // Sufficient condition because Board already knows which turn it is. | |
487 | if ( | |
488 | this.mode != "analyze" && | |
489 | !navigate && | |
490 | !received && | |
491 | (this.game.score != "*" || this.cursor < this.moves.length - 1) | |
492 | ) { | |
493 | return; | |
494 | } | |
495 | if (!!received) { | |
5b18515f BA |
496 | if (this.autoplay || this.inPlay) { |
497 | // Received moves while autoplaying are stacked, | |
498 | // and in observed games they could arrive too fast: | |
57eb158f BA |
499 | this.stackToPlay.unshift(move); |
500 | return; | |
501 | } | |
5b18515f BA |
502 | if (this.mode == "analyze") this.toggleAnalyze(); |
503 | if (this.cursor < this.moves.length - 1) | |
504 | // To play a received move, cursor must be at the end of the game: | |
505 | this.gotoEnd(); | |
e50a8025 | 506 | this.inPlay = true; |
57eb158f | 507 | } |
ad030c7d | 508 | // The board may show some possible moves: (TODO: bad solution) |
d6289b54 | 509 | this.$refs["board"].resetCurrentAttempt(); |
e71161fb | 510 | const playSubmove = (smove) => { |
fbd68f75 | 511 | smove.notation = this.vr.getNotation(smove); |
2c5d7b20 | 512 | smove.unambiguous = V.GetUnambiguousNotation(smove); |
e71161fb | 513 | this.vr.play(smove); |
07052665 | 514 | if (this.inMultimove && !!this.lastMove) { |
af34341d BA |
515 | if (!Array.isArray(this.lastMove)) |
516 | this.lastMove = [this.lastMove, smove]; | |
517 | else this.lastMove.push(smove); | |
518 | } | |
fbd68f75 | 519 | if (!this.inMultimove) { |
af34341d BA |
520 | // First sub-move: |
521 | this.lastMove = smove; | |
54ec15eb BA |
522 | // Condition is "!navigate" but we mean "!this.autoplay" |
523 | if (!navigate) { | |
691d6952 | 524 | if (this.cursor < this.moves.length - 1) |
54ec15eb BA |
525 | this.moves = this.moves.slice(0, this.cursor + 1); |
526 | this.moves.push(smove); | |
527 | } | |
fbd68f75 BA |
528 | this.inMultimove = true; //potentially |
529 | this.cursor++; | |
39fe711a BA |
530 | } |
531 | else if (!navigate) { | |
fbd68f75 BA |
532 | // Already in the middle of a multi-move |
533 | const L = this.moves.length; | |
534 | if (!Array.isArray(this.moves[L-1])) | |
535 | this.$set(this.moves, L-1, [this.moves[L-1], smove]); | |
6e47d367 | 536 | else this.moves[L-1].push(smove); |
e71161fb BA |
537 | } |
538 | }; | |
539 | const playMove = () => { | |
54ec15eb | 540 | const animate = ( |
57d9b2c4 | 541 | ["all", "highlight"].includes(V.ShowMoves) && |
54ec15eb BA |
542 | (this.autoplay || !!received) |
543 | ); | |
e71161fb BA |
544 | if (!Array.isArray(move)) move = [move]; |
545 | let moveIdx = 0; | |
546 | let self = this; | |
547 | const initurn = this.vr.turn; | |
548 | (function executeMove() { | |
549 | const smove = move[moveIdx++]; | |
ad1e629e | 550 | // NOTE: condition "smove.start.x >= 0" required for Dynamo, |
596e24d0 BA |
551 | // because second move may be empty. noHighlight condition |
552 | // is used at least for Chakart. | |
553 | if (animate && smove.start.x >= 0 && !smove.end.noHighlight) { | |
e71161fb BA |
554 | self.animateMove(smove, () => { |
555 | playSubmove(smove); | |
5b18515f | 556 | if (moveIdx < move.length) setTimeout(executeMove, 500); |
e71161fb BA |
557 | else afterMove(smove, initurn); |
558 | }); | |
39fe711a BA |
559 | } |
560 | else { | |
e71161fb BA |
561 | playSubmove(smove); |
562 | if (moveIdx < move.length) executeMove(); | |
563 | else afterMove(smove, initurn); | |
564 | } | |
565 | })(); | |
566 | }; | |
fbd68f75 BA |
567 | const computeScore = () => { |
568 | const score = this.vr.getCurrentScore(); | |
f54f4c26 | 569 | if (!navigate) { |
5b18515f | 570 | if (["1-0", "0-1"].includes(score)) { |
af34341d BA |
571 | if (Array.isArray(this.lastMove)) { |
572 | const L = this.lastMove.length; | |
573 | this.lastMove[L - 1].notation += "#"; | |
574 | } | |
575 | else this.lastMove.notation += "#"; | |
576 | } | |
f54f4c26 | 577 | } |
ff3a8d16 | 578 | if (score != "*" && ["analyze", "versus"].includes(this.mode)) { |
cbe95378 | 579 | const message = getScoreMessage(score, V.ReverseColors); |
ff3a8d16 | 580 | // Show score on screen |
fbd68f75 BA |
581 | this.showEndgameMsg(score + " . " + this.st.tr[message]); |
582 | } | |
583 | return score; | |
584 | }; | |
e71161fb | 585 | const afterMove = (smove, initurn) => { |
e71161fb BA |
586 | if (this.vr.turn != initurn) { |
587 | // Turn has changed: move is complete | |
3a2a7b5f | 588 | if (!smove.fen) |
2c5d7b20 | 589 | // NOTE: only FEN of last sub-move is required (=> setting it here) |
cc00b83c | 590 | smove.fen = this.vr.getFen(); |
3a2a7b5f | 591 | this.emitFenIfAnalyze(); |
e71161fb | 592 | this.inMultimove = false; |
1b56b736 BA |
593 | this.incheck = this.vr.getCheckSquares(); |
594 | if (this.incheck.length > 0) smove.notation += "+"; | |
f54f4c26 | 595 | this.score = computeScore(); |
5b18515f BA |
596 | if (this.autoplay) { |
597 | if (this.cursor < this.moves.length - 1) | |
5fc82c80 | 598 | setTimeout(() => this.play(null, null, null, "autoplay"), 1000); |
5b18515f BA |
599 | else { |
600 | this.autoplay = false; | |
601 | if (this.stackToPlay.length > 0) | |
602 | // Move(s) arrived in-between | |
603 | this.play(this.stackToPlay.pop(), "received"); | |
604 | } | |
605 | } | |
07052665 | 606 | if (this.mode != "analyze" && !navigate) { |
5b18515f | 607 | if (!received) { |
5aa14a21 | 608 | // Post-processing (e.g. computer play). |
f54f4c26 | 609 | const L = this.moves.length; |
5b18515f | 610 | // NOTE: always emit the score, even in unfinished |
f54f4c26 | 611 | this.$emit("newmove", this.moves[L-1], { score: this.score }); |
39fe711a BA |
612 | } |
613 | else { | |
57eb158f BA |
614 | this.inPlay = false; |
615 | if (this.stackToPlay.length > 0) | |
616 | // Move(s) arrived in-between | |
5b18515f | 617 | this.play(this.stackToPlay.pop(), "received"); |
57eb158f | 618 | } |
e71161fb BA |
619 | } |
620 | } | |
621 | }; | |
622 | // NOTE: navigate and received are mutually exclusive | |
623 | if (navigate) { | |
624 | // The move to navigate to is necessarily full: | |
625 | if (this.cursor == this.moves.length - 1) return; //no more moves | |
626 | move = this.moves[this.cursor + 1]; | |
54ec15eb BA |
627 | if (!this.autoplay) { |
628 | // Just play the move: | |
629 | if (!Array.isArray(move)) move = [move]; | |
630 | for (let i=0; i < move.length; i++) this.vr.play(move[i]); | |
631 | if (!light) { | |
af34341d BA |
632 | this.lastMove = move; |
633 | this.incheck = this.vr.getCheckSquares(); | |
54ec15eb BA |
634 | this.score = computeScore(); |
635 | this.emitFenIfAnalyze(); | |
636 | } | |
637 | this.cursor++; | |
638 | return; | |
8055eabd | 639 | } |
e71161fb | 640 | } |
e71161fb BA |
641 | playMove(); |
642 | }, | |
643 | cancelCurrentMultimove: function() { | |
e71161fb BA |
644 | const L = this.moves.length; |
645 | let move = this.moves[L-1]; | |
646 | if (!Array.isArray(move)) move = [move]; | |
93ce6119 | 647 | for (let i = move.length - 1; i >= 0; i--) this.vr.undo(move[i]); |
e71161fb BA |
648 | this.moves.pop(); |
649 | this.cursor--; | |
650 | this.inMultimove = false; | |
651 | }, | |
652 | cancelLastMove: function() { | |
653 | // The last played move was canceled (corr game) | |
654 | this.undo(); | |
655 | this.moves.pop(); | |
656 | }, | |
657 | // "light": if gotoMove() or gotoBegin() | |
658 | undo: function(move, light) { | |
6c7cbfed BA |
659 | if ( |
660 | this.autoplay || | |
661 | !!this.$refs["board"].selectedPiece || | |
662 | this.$refs["board"].choices.length > 0 | |
663 | ) { | |
664 | return; | |
665 | } | |
93ce6119 | 666 | this.$refs["board"].resetCurrentAttempt(); |
e71161fb BA |
667 | if (this.inMultimove) { |
668 | this.cancelCurrentMultimove(); | |
af34341d | 669 | this.incheck = this.vr.getCheckSquares(); |
c3f02a0e BA |
670 | if (this.cursor >= 0) this.lastMove = this.moves[this.cursor]; |
671 | else this.lastMove = null; | |
39fe711a BA |
672 | } |
673 | else { | |
e71161fb | 674 | if (!move) { |
3a2a7b5f BA |
675 | const minCursor = |
676 | this.moves.length > 0 && this.moves[0].notation == "..." | |
677 | ? 1 | |
678 | : 0; | |
679 | if (this.cursor < minCursor) return; //no more moves | |
e71161fb BA |
680 | move = this.moves[this.cursor]; |
681 | } | |
93ce6119 | 682 | this.$refs["board"].resetCurrentAttempt(); |
e71161fb BA |
683 | undoMove(move, this.vr); |
684 | if (light) this.cursor--; | |
685 | else { | |
686 | this.positionCursorTo(this.cursor - 1); | |
af34341d | 687 | this.incheck = this.vr.getCheckSquares(); |
8055eabd | 688 | this.emitFenIfAnalyze(); |
63ca2b89 | 689 | } |
a6088c90 | 690 | } |
a6088c90 BA |
691 | }, |
692 | gotoMove: function(index) { | |
6c7cbfed BA |
693 | if ( |
694 | this.autoplay || | |
695 | !!this.$refs["board"].selectedPiece || | |
696 | this.$refs["board"].choices.length > 0 | |
697 | ) { | |
698 | return; | |
699 | } | |
93ce6119 | 700 | this.$refs["board"].resetCurrentAttempt(); |
e71161fb BA |
701 | if (this.inMultimove) this.cancelCurrentMultimove(); |
702 | if (index == this.cursor) return; | |
703 | if (index < this.cursor) { | |
704 | while (this.cursor > index) | |
705 | this.undo(null, null, "light"); | |
706 | } | |
707 | else { | |
708 | // index > this.cursor) | |
709 | while (this.cursor < index) | |
710 | this.play(null, null, "light"); | |
711 | } | |
712 | // NOTE: next line also re-assign cursor, but it's very light | |
713 | this.positionCursorTo(index); | |
af34341d | 714 | this.incheck = this.vr.getCheckSquares(); |
8055eabd | 715 | this.emitFenIfAnalyze(); |
a6088c90 BA |
716 | }, |
717 | gotoBegin: function() { | |
6c7cbfed BA |
718 | if ( |
719 | this.autoplay || | |
720 | !!this.$refs["board"].selectedPiece || | |
721 | this.$refs["board"].choices.length > 0 | |
722 | ) { | |
723 | return; | |
724 | } | |
93ce6119 | 725 | this.$refs["board"].resetCurrentAttempt(); |
e71161fb | 726 | if (this.inMultimove) this.cancelCurrentMultimove(); |
3a2a7b5f BA |
727 | const minCursor = |
728 | this.moves.length > 0 && this.moves[0].notation == "..." | |
729 | ? 1 | |
730 | : 0; | |
731 | while (this.cursor >= minCursor) this.undo(null, null, "light"); | |
732 | this.lastMove = (minCursor == 1 ? this.moves[0] : null); | |
af34341d | 733 | this.incheck = this.vr.getCheckSquares(); |
8055eabd | 734 | this.emitFenIfAnalyze(); |
a6088c90 BA |
735 | }, |
736 | gotoEnd: function() { | |
6808d7a1 BA |
737 | if (this.cursor == this.moves.length - 1) return; |
738 | this.gotoMove(this.moves.length - 1); | |
a6088c90 BA |
739 | }, |
740 | flip: function() { | |
a6836242 | 741 | if (this.$refs["board"].choices.length > 0) return; |
0e16cb26 | 742 | this.orientation = V.GetOppCol(this.orientation); |
6808d7a1 BA |
743 | } |
744 | } | |
a6088c90 BA |
745 | }; |
746 | </script> | |
72ccbd67 | 747 | |
41c80bb6 | 748 | <style lang="sass" scoped> |
9a3049f3 BA |
749 | [type="checkbox"]#modalEog+div .card |
750 | min-height: 45px | |
a06fc4ba | 751 | max-width: 350px |
910d631b | 752 | |
cf94b843 BA |
753 | #baseGame |
754 | width: 100% | |
4f518610 BA |
755 | &:focus |
756 | outline: none | |
cf94b843 BA |
757 | |
758 | #gameContainer | |
72ccbd67 BA |
759 | margin-left: auto |
760 | margin-right: auto | |
cf94b843 | 761 | |
ed06d9e9 BA |
762 | #downloadDiv |
763 | display: inline-block | |
764 | ||
72ccbd67 | 765 | #controls |
28b32b4f | 766 | user-select: none |
72ccbd67 | 767 | button |
b1e46b33 | 768 | border: none |
72ccbd67 | 769 | margin: 0 |
feaf1bf7 BA |
770 | padding-top: 5px |
771 | padding-bottom: 5px | |
772 | ||
5fc82c80 BA |
773 | p#fenAnalyze |
774 | margin: 5px | |
775 | ||
54ec15eb BA |
776 | .in-autoplay |
777 | background-color: #FACF8C | |
778 | ||
feaf1bf7 | 779 | img.inline |
54ec15eb | 780 | height: 22px |
feaf1bf7 BA |
781 | padding-top: 5px |
782 | @media screen and (max-width: 767px) | |
783 | height: 18px | |
910d631b | 784 | |
0e16cb26 BA |
785 | #turnIndicator |
786 | text-align: center | |
29bc61be | 787 | font-weight: bold |
910d631b | 788 | |
72ccbd67 | 789 | #boardContainer |
cf94b843 | 790 | float: left |
41c80bb6 BA |
791 | // TODO: later, maybe, allow movesList of variable width |
792 | // or e.g. between 250 and 350px (but more complicated) | |
910d631b | 793 | |
cf94b843 BA |
794 | #movesList |
795 | width: 280px | |
796 | float: left | |
910d631b | 797 | |
96e9585a BA |
798 | @media screen and (max-width: 767px) |
799 | #movesList | |
800 | width: 100% | |
801 | float: none | |
802 | clear: both | |
72ccbd67 | 803 | </style> |