Commit | Line | Data |
---|---|---|
a6088c90 | 1 | <template lang="pug"> |
9ddaf8da | 2 | div#baseGame(tabindex=-1 @click="focusBg()" |
9a3049f3 | 3 | @keydown="handleKeys($event)" @wheel="handleScroll($event)") |
7e355d68 | 4 | input#modalEog.modal(type="checkbox") |
9a3049f3 BA |
5 | div#eogDiv(role="dialog" data-checkbox="modalEog") |
6 | .card.text-center | |
7e355d68 | 7 | label.modal-close(for="modalEog") |
9a3049f3 | 8 | h3.section {{ endgameMessage }} |
602d6bef | 9 | input#modalAdjust.modal(type="checkbox") |
9a3049f3 BA |
10 | div#adjuster(role="dialog" data-checkbox="modalAdjust") |
11 | .card.text-center | |
602d6bef | 12 | label.modal-close(for="modalAdjust") |
9a3049f3 | 13 | label(for="boardSize") {{ st.tr["Board size"] }} |
602d6bef | 14 | input#boardSize.slider(type="range" min="0" max="100" value="50" |
9a3049f3 | 15 | @input="adjustBoard()") |
cf94b843 BA |
16 | #gameContainer |
17 | #boardContainer | |
4f518610 | 18 | Board(:vr="vr" :last-move="lastMove" :analyze="analyze" |
cf94b843 | 19 | :user-color="game.mycolor" :orientation="orientation" |
f51c37cf | 20 | :vname="game.vname" :incheck="incheck" @play-move="play") |
4f518610 | 21 | #turnIndicator(v-if="game.vname=='Dark' && game.score=='*'") |
0e16cb26 | 22 | | {{ turn }} |
cf94b843 | 23 | #controls |
9ddaf8da BA |
24 | button(@click="gotoBegin()") << |
25 | button(@click="undo()") < | |
26 | button(@click="flip()") ⇅ | |
27 | button(@click="play()") > | |
28 | button(@click="gotoEnd()") >> | |
cf94b843 | 29 | #pgnDiv |
ed06d9e9 | 30 | #downloadDiv(v-if="game.vname!='Dark' || game.score!='*'") |
4f518610 | 31 | a#download(href="#") |
9ddaf8da | 32 | button(@click="download()") {{ st.tr["Download"] }} PGN |
602d6bef | 33 | button(onClick="doClick('modalAdjust')") ⤢ |
0e16cb26 | 34 | button(v-if="game.vname!='Dark' && game.mode!='analyze'" |
9ddaf8da | 35 | @click="analyzePosition()") |
677fe285 | 36 | | {{ st.tr["Analyse"] }} |
4f518610 | 37 | // NOTE: rather ugly hack to avoid showing twice "rules" link... |
9ddaf8da | 38 | button(v-if="!$route.path.match('/variants/')" @click="showRules()") |
4f518610 | 39 | | {{ st.tr["Rules"] }} |
cf94b843 | 40 | #movesList |
430a2038 | 41 | MoveList(v-if="showMoves" :score="game.score" :message="game.scoreMsg" |
5157ce0b BA |
42 | :firstNum="firstMoveNumber" :moves="moves" :cursor="cursor" |
43 | @goto-move="gotoMove") | |
41c80bb6 | 44 | .clearer |
a6088c90 BA |
45 | </template> |
46 | ||
47 | <script> | |
48 | import Board from "@/components/Board.vue"; | |
f21cd6d9 | 49 | import MoveList from "@/components/MoveList.vue"; |
a6088c90 BA |
50 | import { store } from "@/store"; |
51 | import { getSquareId } from "@/utils/squareId"; | |
d4036efe | 52 | import { getDate } from "@/utils/datetime"; |
602d6bef | 53 | import { processModalClick } from "@/utils/modalClick"; |
77c50966 | 54 | import { getScoreMessage } from "@/utils/scoring"; |
a6088c90 BA |
55 | export default { |
56 | name: 'my-base-game', | |
57 | components: { | |
58 | Board, | |
f21cd6d9 | 59 | MoveList, |
a6088c90 | 60 | }, |
bc8734ba | 61 | // "vr": VariantRules object, describing the game state + rules |
834c202a | 62 | props: ["vr","game"], |
a6088c90 BA |
63 | data: function() { |
64 | return { | |
65 | st: store.state, | |
b7c32f1a | 66 | // NOTE: all following variables must be reset at the beginning of a game |
a6088c90 BA |
67 | endgameMessage: "", |
68 | orientation: "w", | |
69 | score: "*", //'*' means 'unfinished' | |
b7c32f1a | 70 | moves: [], |
a6088c90 BA |
71 | cursor: -1, //index of the move just played |
72 | lastMove: null, | |
5157ce0b | 73 | firstMoveNumber: 0, //for printing |
f51c37cf | 74 | incheck: [], //for Board |
a6088c90 BA |
75 | }; |
76 | }, | |
37cdcbf3 | 77 | watch: { |
834c202a BA |
78 | // game initial FEN changes when a new game starts |
79 | "game.fenStart": function() { | |
4b0384fa | 80 | this.re_setVariables(); |
37cdcbf3 | 81 | }, |
7e355d68 | 82 | // Received a new move to play: |
63ca2b89 BA |
83 | "game.moveToPlay": function(newMove) { |
84 | if (!!newMove) //if stop + launch new game, get undefined move | |
85 | this.play(newMove, "receive"); | |
7e355d68 | 86 | }, |
89021f18 BA |
87 | // ...Or to undo (corr game, move not validated) |
88 | "game.moveToUndo": function(move) { | |
89 | if (!!move) | |
90 | this.undo(move); | |
91 | }, | |
37cdcbf3 | 92 | }, |
a6088c90 BA |
93 | computed: { |
94 | showMoves: function() { | |
4f518610 | 95 | return this.game.vname != "Dark" || this.game.score != "*"; |
a6088c90 | 96 | }, |
0e16cb26 BA |
97 | turn: function() { |
98 | let color = ""; | |
99 | const L = this.moves.length; | |
100 | if (L == 0 || this.moves[L-1].color == "b") | |
101 | color = "White"; | |
102 | else //if (this.moves[L-1].color == "w") | |
103 | color = "Black"; | |
602d6bef | 104 | return this.st.tr[color + " to move"]; |
0e16cb26 | 105 | }, |
4f518610 BA |
106 | analyze: function() { |
107 | return this.game.mode=="analyze" || | |
108 | // From Board viewpoint, a finished Dark game == analyze (TODO: unclear) | |
109 | (this.game.vname == "Dark" && this.game.score != "*"); | |
110 | }, | |
a6088c90 | 111 | }, |
4b0384fa BA |
112 | created: function() { |
113 | if (!!this.game.fenStart) | |
114 | this.re_setVariables(); | |
115 | }, | |
cf94b843 | 116 | mounted: function() { |
602d6bef BA |
117 | [document.getElementById("eogDiv"),document.getElementById("adjuster")] |
118 | .forEach(elt => elt.addEventListener("click", processModalClick)); | |
96e9585a BA |
119 | // Take full width on small screens: |
120 | let boardSize = parseInt(localStorage.getItem("boardSize")); | |
121 | if (!boardSize) | |
122 | { | |
123 | boardSize = (window.innerWidth >= 768 | |
124 | ? Math.min(600, 0.5*window.innerWidth) //heuristic... | |
125 | : window.innerWidth); | |
126 | } | |
127 | const movesWidth = (window.innerWidth >= 768 ? 280 : 0); | |
128 | document.getElementById("boardContainer").style.width = boardSize + "px"; | |
129 | let gameContainer = document.getElementById("gameContainer"); | |
130 | gameContainer.style.width = (boardSize + movesWidth) + "px"; | |
602d6bef BA |
131 | // TODO: find the right formula here: |
132 | //document.getElementById("boardSize").value = Math.floor(boardSize / 10); | |
133 | // timeout to avoid calling too many time the adjust method | |
134 | let timeoutLaunched = false; | |
135 | window.addEventListener("resize", (e) => { | |
136 | if (!timeoutLaunched) | |
137 | { | |
138 | timeoutLaunched = true; | |
139 | setTimeout( () => { | |
140 | this.adjustBoard(); | |
141 | timeoutLaunched = false; | |
142 | }, 500); | |
143 | } | |
144 | }); | |
cf94b843 | 145 | }, |
a6088c90 | 146 | methods: { |
9ca1e26b | 147 | focusBg: function() { |
41c80bb6 | 148 | // NOTE: small blue border appears... |
9ca1e26b BA |
149 | document.getElementById("baseGame").focus(); |
150 | }, | |
602d6bef BA |
151 | adjustBoard: function() { |
152 | const boardContainer = document.getElementById("boardContainer"); | |
153 | if (!boardContainer) | |
154 | return; //no board on page | |
155 | const k = document.getElementById("boardSize").value; | |
156 | const movesWidth = (window.innerWidth >= 768 ? 280 : 0); | |
157 | const minBoardWidth = 240; //TODO: these 240 and 280 are arbitrary... | |
158 | // Value of 0 is board min size; 100 is window.width [- movesWidth] | |
159 | const boardSize = minBoardWidth + | |
160 | k * (window.innerWidth - (movesWidth+minBoardWidth)) / 100; | |
161 | localStorage.setItem("boardSize", boardSize); | |
162 | boardContainer.style.width = boardSize + "px"; | |
163 | document.getElementById("gameContainer").style.width = | |
164 | (boardSize + movesWidth) + "px"; | |
165 | }, | |
9ca1e26b | 166 | handleKeys: function(e) { |
5701c228 BA |
167 | if ([32,37,38,39,40].includes(e.keyCode)) |
168 | e.preventDefault(); | |
9ca1e26b BA |
169 | switch (e.keyCode) |
170 | { | |
171 | case 37: | |
172 | this.undo(); | |
173 | break; | |
174 | case 39: | |
175 | this.play(); | |
176 | break; | |
5701c228 | 177 | case 38: |
9ca1e26b BA |
178 | this.gotoBegin(); |
179 | break; | |
180 | case 40: | |
181 | this.gotoEnd(); | |
182 | break; | |
183 | case 32: | |
9ca1e26b BA |
184 | this.flip(); |
185 | break; | |
186 | } | |
187 | }, | |
dcd68c41 | 188 | handleScroll: function(e) { |
4f518610 BA |
189 | // NOTE: since game.mode=="analyze" => no score, next condition is enough |
190 | if (this.game.score != "*") | |
41c80bb6 BA |
191 | { |
192 | e.preventDefault(); | |
193 | if (e.deltaY < 0) | |
194 | this.undo(); | |
195 | else if (e.deltaY > 0) | |
196 | this.play(); | |
197 | } | |
dcd68c41 | 198 | }, |
0e16cb26 BA |
199 | showRules: function() { |
200 | //this.$router.push("/variants/" + this.game.vname); | |
201 | window.open("#/variants/" + this.game.vname, "_blank"); //better | |
202 | }, | |
4b0384fa BA |
203 | re_setVariables: function() { |
204 | this.endgameMessage = ""; | |
205 | this.orientation = this.game.mycolor || "w"; //default orientation for observed games | |
4b0384fa | 206 | this.moves = JSON.parse(JSON.stringify(this.game.moves || [])); |
d4036efe BA |
207 | // Post-processing: decorate each move with color + current FEN: |
208 | // (to be able to jump to any position quickly) | |
27d18a24 | 209 | let vr_tmp = new V(this.game.fenStart); //vr is already at end of game |
5157ce0b BA |
210 | this.firstMoveNumber = |
211 | Math.floor(V.ParseFen(this.game.fenStart).movesCount / 2); | |
d4036efe BA |
212 | this.moves.forEach(move => { |
213 | // NOTE: this is doing manually what play() function below achieve, | |
214 | // but in a lighter "fast-forward" way | |
27d18a24 BA |
215 | move.color = vr_tmp.turn; |
216 | move.notation = vr_tmp.getNotation(move); | |
217 | vr_tmp.play(move); | |
218 | move.fen = vr_tmp.getFen(); | |
d4036efe | 219 | }); |
697ee580 BA |
220 | if (this.game.fenStart.indexOf(" b ") >= 0 || |
221 | (this.moves.length > 0 && this.moves[0].color == "b")) | |
222 | { | |
223 | // 'end' is required for Board component to check lastMove for e.p. | |
224 | this.moves.unshift({color: "w", notation: "...", end: {x:-1,y:-1}}); | |
225 | } | |
4b0384fa BA |
226 | const L = this.moves.length; |
227 | this.cursor = L-1; | |
228 | this.lastMove = (L > 0 ? this.moves[L-1] : null); | |
e01dff1a | 229 | this.incheck = []; |
4b0384fa | 230 | }, |
63ca2b89 | 231 | analyzePosition: function() { |
677fe285 | 232 | const newUrl = "/analyse/" + this.game.vname + |
63ca2b89 | 233 | "/?fen=" + this.vr.getFen().replace(/ /g, "_"); |
0e16cb26 BA |
234 | if (this.game.type == "live") |
235 | this.$router.push(newUrl); //open in same tab: against cheating... | |
236 | else | |
237 | window.open("#" + newUrl); //open in a new tab: more comfortable | |
603b8a8b | 238 | }, |
a6088c90 BA |
239 | download: function() { |
240 | const content = this.getPgn(); | |
241 | // Prepare and trigger download link | |
242 | let downloadAnchor = document.getElementById("download"); | |
243 | downloadAnchor.setAttribute("download", "game.pgn"); | |
244 | downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content); | |
245 | downloadAnchor.click(); | |
246 | }, | |
247 | getPgn: function() { | |
248 | let pgn = ""; | |
249 | pgn += '[Site "vchess.club"]\n'; | |
834c202a | 250 | pgn += '[Variant "' + this.game.vname + '"]\n'; |
a6088c90 | 251 | pgn += '[Date "' + getDate(new Date()) + '"]\n'; |
d4036efe BA |
252 | pgn += '[White "' + this.game.players[0].name + '"]\n'; |
253 | pgn += '[Black "' + this.game.players[1].name + '"]\n'; | |
834c202a | 254 | pgn += '[Fen "' + this.game.fenStart + '"]\n'; |
430a2038 | 255 | pgn += '[Result "' + this.game.score + '"]\n\n'; |
a6088c90 BA |
256 | let counter = 1; |
257 | let i = 0; | |
258 | while (i < this.moves.length) | |
259 | { | |
260 | pgn += (counter++) + "."; | |
261 | for (let color of ["w","b"]) | |
262 | { | |
263 | let move = ""; | |
264 | while (i < this.moves.length && this.moves[i].color == color) | |
d4036efe | 265 | move += this.moves[i++].notation + ","; |
a6088c90 | 266 | move = move.slice(0,-1); //remove last comma |
d4036efe | 267 | pgn += move + (i < this.moves.length ? " " : ""); |
a6088c90 BA |
268 | } |
269 | } | |
270 | return pgn + "\n"; | |
271 | }, | |
b988c726 BA |
272 | showEndgameMsg: function(message) { |
273 | this.endgameMessage = message; | |
4494c17c | 274 | let modalBox = document.getElementById("modalEog"); |
a6088c90 BA |
275 | modalBox.checked = true; |
276 | setTimeout(() => { modalBox.checked = false; }, 2000); | |
277 | }, | |
63ca2b89 | 278 | animateMove: function(move, callback) { |
a6088c90 | 279 | let startSquare = document.getElementById(getSquareId(move.start)); |
a0c41e7e BA |
280 | // TODO: error "flush nextTick callbacks" when observer reloads page: |
281 | // this late check is not a fix! | |
282 | if (!startSquare) | |
283 | return; | |
a6088c90 BA |
284 | let endSquare = document.getElementById(getSquareId(move.end)); |
285 | let rectStart = startSquare.getBoundingClientRect(); | |
286 | let rectEnd = endSquare.getBoundingClientRect(); | |
287 | let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y}; | |
288 | let movingPiece = | |
289 | document.querySelector("#" + getSquareId(move.start) + " > img.piece"); | |
a0c41e7e BA |
290 | if (!movingPiece) //TODO: shouldn't happen |
291 | return; | |
a6088c90 BA |
292 | // HACK for animation (with positive translate, image slides "under background") |
293 | // Possible improvement: just alter squares on the piece's way... | |
294 | const squares = document.getElementsByClassName("board"); | |
295 | for (let i=0; i<squares.length; i++) | |
296 | { | |
297 | let square = squares.item(i); | |
298 | if (square.id != getSquareId(move.start)) | |
299 | square.style.zIndex = "-1"; | |
300 | } | |
301 | movingPiece.style.transform = "translate(" + translation.x + "px," + | |
302 | translation.y + "px)"; | |
303 | movingPiece.style.transitionDuration = "0.2s"; | |
304 | movingPiece.style.zIndex = "3000"; | |
305 | setTimeout( () => { | |
306 | for (let i=0; i<squares.length; i++) | |
307 | squares.item(i).style.zIndex = "auto"; | |
308 | movingPiece.style = {}; //required e.g. for 0-0 with KR swap | |
63ca2b89 | 309 | callback(); |
a6088c90 BA |
310 | }, 250); |
311 | }, | |
63ca2b89 BA |
312 | play: function(move, receive) { |
313 | // NOTE: navigate and receive are mutually exclusive | |
9d54ab89 | 314 | const navigate = !move; |
63ca2b89 BA |
315 | // Forbid playing outside analyze mode, except if move is received. |
316 | // Sufficient condition because Board already knows which turn it is. | |
317 | if (!navigate && this.game.mode!="analyze" && !receive | |
4f518610 | 318 | && (this.game.score != "*" || this.cursor < this.moves.length-1)) |
a6088c90 BA |
319 | { |
320 | return; | |
321 | } | |
63ca2b89 BA |
322 | const doPlayMove = () => { |
323 | if (!!receive && this.cursor < this.moves.length-1) | |
a6088c90 | 324 | this.gotoEnd(); //required to play the move |
63ca2b89 BA |
325 | if (navigate) |
326 | { | |
327 | if (this.cursor == this.moves.length-1) | |
328 | return; //no more moves | |
329 | move = this.moves[this.cursor+1]; | |
330 | } | |
331 | else | |
9d54ab89 | 332 | { |
63ca2b89 BA |
333 | move.color = this.vr.turn; |
334 | move.notation = this.vr.getNotation(move); | |
335 | } | |
336 | this.vr.play(move); | |
337 | this.cursor++; | |
338 | this.lastMove = move; | |
339 | if (this.st.settings.sound == 2) | |
340 | new Audio("/sounds/move.mp3").play().catch(err => {}); | |
341 | if (!navigate) | |
342 | { | |
343 | move.fen = this.vr.getFen(); | |
9d54ab89 BA |
344 | // Stack move on movesList at current cursor |
345 | if (this.cursor == this.moves.length) | |
346 | this.moves.push(move); | |
347 | else | |
348 | this.moves = this.moves.slice(0,this.cursor).concat([move]); | |
349 | } | |
63ca2b89 BA |
350 | // Is opponent in check? |
351 | this.incheck = this.vr.getCheckSquares(this.vr.turn); | |
352 | const score = this.vr.getCurrentScore(); | |
353 | if (score != "*") | |
354 | { | |
77c50966 | 355 | const message = getScoreMessage(score); |
63ca2b89 BA |
356 | if (this.game.mode != "analyze") |
357 | this.$emit("gameover", score, message); | |
358 | else //just show score on screen (allow undo) | |
359 | this.showEndgameMsg(score + " . " + message); | |
360 | } | |
4f518610 BA |
361 | if (!navigate && this.game.mode!="analyze") |
362 | this.$emit("newmove", move); //post-processing (e.g. computer play) | |
63ca2b89 BA |
363 | }; |
364 | if (!!receive && this.game.vname != "Dark") | |
365 | this.animateMove(move, doPlayMove); | |
366 | else | |
367 | doPlayMove(); | |
a6088c90 BA |
368 | }, |
369 | undo: function(move) { | |
9d54ab89 | 370 | const navigate = !move; |
a6088c90 BA |
371 | if (navigate) |
372 | { | |
373 | if (this.cursor < 0) | |
374 | return; //no more moves | |
375 | move = this.moves[this.cursor]; | |
376 | } | |
377 | this.vr.undo(move); | |
378 | this.cursor--; | |
379 | this.lastMove = (this.cursor >= 0 ? this.moves[this.cursor] : undefined); | |
380 | if (this.st.settings.sound == 2) | |
381 | new Audio("/sounds/undo.mp3").play().catch(err => {}); | |
382 | this.incheck = this.vr.getCheckSquares(this.vr.turn); | |
4494c17c | 383 | if (!navigate) |
a6088c90 BA |
384 | this.moves.pop(); |
385 | }, | |
386 | gotoMove: function(index) { | |
37cdcbf3 | 387 | this.vr.re_init(this.moves[index].fen); |
a6088c90 BA |
388 | this.cursor = index; |
389 | this.lastMove = this.moves[index]; | |
390 | }, | |
391 | gotoBegin: function() { | |
5157ce0b BA |
392 | if (this.cursor == -1) |
393 | return; | |
834c202a | 394 | this.vr.re_init(this.game.fenStart); |
5701c228 BA |
395 | if (this.moves.length > 0 && this.moves[0].notation == "...") |
396 | { | |
397 | this.cursor = 0; | |
398 | this.lastMove = this.moves[0]; | |
399 | } | |
400 | else | |
401 | { | |
402 | this.cursor = -1; | |
403 | this.lastMove = null; | |
404 | } | |
a6088c90 BA |
405 | }, |
406 | gotoEnd: function() { | |
5157ce0b BA |
407 | if (this.cursor == this.moves.length - 1) |
408 | return; | |
a6088c90 BA |
409 | this.gotoMove(this.moves.length-1); |
410 | }, | |
411 | flip: function() { | |
0e16cb26 | 412 | this.orientation = V.GetOppCol(this.orientation); |
a6088c90 BA |
413 | }, |
414 | }, | |
415 | }; | |
416 | </script> | |
72ccbd67 | 417 | |
41c80bb6 | 418 | <style lang="sass" scoped> |
9a3049f3 BA |
419 | [type="checkbox"]#modalEog+div .card |
420 | min-height: 45px | |
421 | [type="checkbox"]#modalAdjust+div .card | |
422 | padding: 5px | |
423 | ||
cf94b843 BA |
424 | #baseGame |
425 | width: 100% | |
4f518610 BA |
426 | &:focus |
427 | outline: none | |
cf94b843 BA |
428 | |
429 | #gameContainer | |
72ccbd67 BA |
430 | margin-left: auto |
431 | margin-right: auto | |
cf94b843 | 432 | |
ed06d9e9 BA |
433 | #downloadDiv |
434 | display: inline-block | |
435 | ||
72ccbd67 BA |
436 | #controls |
437 | margin-top: 10px | |
cf94b843 BA |
438 | margin-left: auto |
439 | margin-right: auto | |
72ccbd67 BA |
440 | button |
441 | display: inline-block | |
442 | width: 20% | |
443 | margin: 0 | |
41c80bb6 BA |
444 | @media screen and (min-width: 768px) |
445 | #controls | |
446 | max-width: 400px | |
0e16cb26 BA |
447 | #turnIndicator |
448 | text-align: center | |
cf94b843 BA |
449 | #pgnDiv |
450 | text-align: center | |
451 | margin-left: auto | |
452 | margin-right: auto | |
72ccbd67 | 453 | #boardContainer |
cf94b843 | 454 | float: left |
41c80bb6 BA |
455 | // TODO: later, maybe, allow movesList of variable width |
456 | // or e.g. between 250 and 350px (but more complicated) | |
cf94b843 BA |
457 | #movesList |
458 | width: 280px | |
459 | float: left | |
96e9585a BA |
460 | @media screen and (max-width: 767px) |
461 | #movesList | |
462 | width: 100% | |
463 | float: none | |
464 | clear: both | |
72ccbd67 | 465 | </style> |