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