5 @keydown="handleKeys($event)"
6 @wheel="handleScroll($event)"
8 input#modalEog.modal(type="checkbox")
11 data-checkbox="modalEog"
14 label.modal-close(for="modalEog")
15 h3.section {{ endgameMessage }}
16 input#modalAdjust.modal(type="checkbox")
19 data-checkbox="modalAdjust"
22 label.modal-close(for="modalAdjust")
23 label(for="boardSize") {{ st.tr["Board size"] }}
24 input#boardSize.slider(
29 @input="adjustBoard()"
36 :analyze="game.mode=='analyze'"
38 :user-color="game.mycolor"
39 :orientation="orientation"
44 #turnIndicator(v-if="showTurn") {{ turn }}
46 button(@click="gotoBegin()") <<
47 button(@click="undo()") <
48 button(v-if="canFlip" @click="flip()") ⇅
49 button(@click="play()") >
50 button(@click="gotoEnd()") >>
52 #downloadDiv(v-if="allowDownloadPGN")
54 button(@click="download()") {{ st.tr["Download"] }} PGN
55 button(onClick="window.doClick('modalAdjust')") ⤢
58 @click="analyzePosition()"
60 | {{ st.tr["Analyse"] }}
61 // NOTE: variants pages already have a "Rules" link on top
63 v-if="!$route.path.match('/variants/')"
66 | {{ st.tr["Rules"] }}
69 v-if="showMoves != 'none'"
72 :message="game.scoreMsg"
73 :firstNum="firstMoveNumber"
82 import Board from "@/components/Board.vue";
83 import MoveList from "@/components/MoveList.vue";
84 import { store } from "@/store";
85 import { getSquareId } from "@/utils/squareId";
86 import { getDate } from "@/utils/datetime";
87 import { processModalClick } from "@/utils/modalClick";
88 import { getScoreMessage } from "@/utils/scoring";
95 // "vr": VariantRules object, describing the game state + rules
96 props: ["vr", "game"],
100 // NOTE: all following variables must be reset at the beginning of a game
103 score: "*", //'*' means 'unfinished'
105 cursor: -1, //index of the move just played
107 firstMoveNumber: 0, //for printing
108 incheck: [] //for Board
112 // game initial FEN changes when a new game starts
113 "game.fenStart": function() {
114 this.re_setVariables();
118 showMoves: function() {
119 return this.game.score != "*"
121 : (this.vr ? this.vr.showMoves : "none");
123 showTurn: function() {
125 this.game.score == '*' &&
127 (this.vr.showMoves != "all" || !this.vr.canFlip)
133 if (this.vr.showMoves != "all")
134 return this.st.tr[(this.vr.turn == 'w' ? "White" : "Black") + " to move"]
135 // Cannot flip: racing king or circular chess
136 return this.vr.movesCount == 0 && this.game.mycolor == "w"
137 ? this.st.tr["It's your turn!"]
140 canAnalyze: function() {
141 return this.game.mode != "analyze" && this.vr && this.vr.canAnalyze;
143 canFlip: function() {
144 return this.vr && this.vr.canFlip;
146 allowDownloadPGN: function() {
147 return this.game.score != "*" || (this.vr && this.vr.showMoves == "all");
150 created: function() {
151 if (this.game.fenStart) this.re_setVariables();
153 mounted: function() {
155 document.getElementById("eogDiv"),
156 document.getElementById("adjuster")
157 ].forEach(elt => elt.addEventListener("click", processModalClick));
158 // Take full width on small screens:
159 let boardSize = parseInt(localStorage.getItem("boardSize"));
162 window.innerWidth >= 768
163 ? 0.75 * Math.min(window.innerWidth, window.innerHeight)
166 const movesWidth = window.innerWidth >= 768 ? 280 : 0;
167 document.getElementById("boardContainer").style.width = boardSize + "px";
168 let gameContainer = document.getElementById("gameContainer");
169 gameContainer.style.width = boardSize + movesWidth + "px";
170 document.getElementById("boardSize").value =
171 (boardSize * 100) / (window.innerWidth - movesWidth);
172 // timeout to avoid calling too many time the adjust method
173 let timeoutLaunched = false;
174 window.addEventListener("resize", () => {
175 if (!timeoutLaunched) {
176 timeoutLaunched = true;
179 timeoutLaunched = false;
185 focusBg: function() {
186 document.getElementById("baseGame").focus();
188 adjustBoard: function() {
189 const boardContainer = document.getElementById("boardContainer");
190 if (!boardContainer) return; //no board on page
191 const k = document.getElementById("boardSize").value;
192 const movesWidth = window.innerWidth >= 768 ? 280 : 0;
193 const minBoardWidth = 240; //TODO: these 240 and 280 are arbitrary...
194 // Value of 0 is board min size; 100 is window.width [- movesWidth]
197 (k * (window.innerWidth - (movesWidth + minBoardWidth))) / 100;
198 localStorage.setItem("boardSize", boardSize);
199 boardContainer.style.width = boardSize + "px";
200 document.getElementById("gameContainer").style.width =
201 boardSize + movesWidth + "px";
203 handleKeys: function(e) {
204 if ([32, 37, 38, 39, 40].includes(e.keyCode)) e.preventDefault();
223 handleScroll: function(e) {
224 // NOTE: since game.mode=="analyze" => no score, next condition is enough
225 if (this.game.score != "*") {
227 if (e.deltaY < 0) this.undo();
228 else if (e.deltaY > 0) this.play();
231 showRules: function() {
232 //this.$router.push("/variants/" + this.game.vname);
233 window.open("#/variants/" + this.game.vname, "_blank"); //better
235 re_setVariables: function() {
236 this.endgameMessage = "";
237 // "w": default orientation for observed games
238 this.orientation = this.game.mycolor || "w";
239 this.moves = JSON.parse(JSON.stringify(this.game.moves || []));
240 // Post-processing: decorate each move with color, notation and FEN
241 let vr_tmp = new V(this.game.fenStart);
242 const parsedFen = V.ParseFen(this.game.fenStart);
243 const firstMoveColor = parsedFen.turn;
244 this.firstMoveNumber = Math.floor(parsedFen.movesCount / 2);
245 this.moves.forEach(move => {
246 move.color = vr_tmp.turn;
247 move.notation = vr_tmp.getNotation(move);
249 move.fen = vr_tmp.getFen();
251 if (firstMoveColor == "b") {
252 // 'end' is required for Board component to check lastMove for e.p.
256 end: { x: -1, y: -1 }
259 const L = this.moves.length;
261 this.lastMove = L > 0 ? this.moves[L - 1] : null;
262 this.incheck = this.vr.getCheckSquares(this.vr.turn);
264 analyzePosition: function() {
269 this.vr.getFen().replace(/ /g, "_");
270 // Open in same tab in live games (against cheating)
271 if (this.game.type == "live") this.$router.push(newUrl);
272 else window.open("#" + newUrl);
274 download: function() {
275 const content = this.getPgn();
276 // Prepare and trigger download link
277 let downloadAnchor = document.getElementById("download");
278 downloadAnchor.setAttribute("download", "game.pgn");
279 downloadAnchor.href =
280 "data:text/plain;charset=utf-8," + encodeURIComponent(content);
281 downloadAnchor.click();
285 pgn += '[Site "vchess.club"]\n';
286 pgn += '[Variant "' + this.game.vname + '"]\n';
287 pgn += '[Date "' + getDate(new Date()) + '"]\n';
288 pgn += '[White "' + this.game.players[0].name + '"]\n';
289 pgn += '[Black "' + this.game.players[1].name + '"]\n';
290 pgn += '[Fen "' + this.game.fenStart + '"]\n';
291 pgn += '[Result "' + this.game.score + '"]\n\n';
294 while (i < this.moves.length) {
295 pgn += counter++ + ".";
296 for (let color of ["w", "b"]) {
298 while (i < this.moves.length && this.moves[i].color == color)
299 move += this.moves[i++].notation + ",";
300 move = move.slice(0, -1); //remove last comma
301 pgn += move + (i < this.moves.length ? " " : "");
306 showEndgameMsg: function(message) {
307 this.endgameMessage = message;
308 let modalBox = document.getElementById("modalEog");
309 modalBox.checked = true;
311 modalBox.checked = false;
314 animateMove: function(move, callback) {
315 let startSquare = document.getElementById(getSquareId(move.start));
316 let endSquare = document.getElementById(getSquareId(move.end));
317 let rectStart = startSquare.getBoundingClientRect();
318 let rectEnd = endSquare.getBoundingClientRect();
320 x: rectEnd.x - rectStart.x,
321 y: rectEnd.y - rectStart.y
323 let movingPiece = document.querySelector(
324 "#" + getSquareId(move.start) + " > img.piece"
326 // HACK for animation (with positive translate, image slides "under background")
327 // Possible improvement: just alter squares on the piece's way...
328 const squares = document.getElementsByClassName("board");
329 for (let i = 0; i < squares.length; i++) {
330 let square = squares.item(i);
331 if (square.id != getSquareId(move.start)) square.style.zIndex = "-1";
333 movingPiece.style.transform =
334 "translate(" + translation.x + "px," + translation.y + "px)";
335 movingPiece.style.transitionDuration = "0.25s";
336 movingPiece.style.zIndex = "3000";
338 for (let i = 0; i < squares.length; i++)
339 squares.item(i).style.zIndex = "auto";
340 movingPiece.style = {}; //required e.g. for 0-0 with KR swap
344 play: function(move, receive) {
345 // NOTE: navigate and receive are mutually exclusive
346 const navigate = !move;
347 // Forbid playing outside analyze mode, except if move is received.
348 // Sufficient condition because Board already knows which turn it is.
351 this.game.mode != "analyze" &&
353 (this.game.score != "*" || this.cursor < this.moves.length - 1)
357 const doPlayMove = () => {
358 // To play a move, cursor must be at the end of the game:
359 if (!!receive && this.cursor < this.moves.length - 1) this.gotoEnd();
361 if (this.cursor == this.moves.length - 1) return; //no more moves
362 move = this.moves[this.cursor + 1];
364 move.color = this.vr.turn;
365 move.notation = this.vr.getNotation(move);
369 this.lastMove = move;
370 if (this.st.settings.sound == 2)
371 new Audio("/sounds/move.mp3").play().catch(() => {});
373 move.fen = this.vr.getFen();
374 // Stack move on movesList at current cursor
375 if (this.cursor == this.moves.length) this.moves.push(move);
376 else this.moves = this.moves.slice(0, this.cursor).concat([move]);
378 // Is opponent in check?
379 this.incheck = this.vr.getCheckSquares(this.vr.turn);
380 const score = this.vr.getCurrentScore();
382 const message = getScoreMessage(score);
383 if (this.game.mode != "analyze")
384 this.$emit("gameover", score, message);
385 //just show score on screen (allow undo)
386 else this.showEndgameMsg(score + " . " + message);
388 if (!navigate && this.game.mode != "analyze")
389 this.$emit("newmove", move); //post-processing (e.g. computer play)
391 if (!!receive && V.ShowMoves == "all")
392 this.animateMove(move, doPlayMove);
395 undo: function(move) {
396 const navigate = !move;
398 if (this.cursor < 0) return; //no more moves
399 move = this.moves[this.cursor];
403 this.lastMove = this.cursor >= 0 ? this.moves[this.cursor] : undefined;
404 if (this.st.settings.sound == 2)
405 new Audio("/sounds/undo.mp3").play().catch(() => {});
406 this.incheck = this.vr.getCheckSquares(this.vr.turn);
407 if (!navigate) this.moves.pop();
409 gotoMove: function(index) {
410 this.vr.re_init(this.moves[index].fen);
412 this.lastMove = this.moves[index];
413 this.incheck = this.vr.getCheckSquares(this.vr.turn);
415 gotoBegin: function() {
416 if (this.cursor == -1) return;
417 this.vr.re_init(this.game.fenStart);
418 if (this.moves.length > 0 && this.moves[0].notation == "...") {
420 this.lastMove = this.moves[0];
423 this.lastMove = null;
425 this.incheck = this.vr.getCheckSquares(this.vr.turn);
427 gotoEnd: function() {
428 if (this.cursor == this.moves.length - 1) return;
429 this.gotoMove(this.moves.length - 1);
432 this.orientation = V.GetOppCol(this.orientation);
438 <style lang="sass" scoped>
439 [type="checkbox"]#modalEog+div .card
442 [type="checkbox"]#modalAdjust+div .card
455 display: inline-block
461 display: inline-block
470 border-top: 1px solid #2f4f4f
478 border-left: 1px solid #2f4f4f
483 // TODO: later, maybe, allow movesList of variable width
484 // or e.g. between 250 and 350px (but more complicated)
490 @media screen and (max-width: 767px)