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