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