2 div#baseGame(tabindex=-1 @click="() => focusBg()"
3 @keydown="handleKeys" @wheel="handleScroll")
4 input#modalEog.modal(type="checkbox")
5 div#eogDiv(role="dialog" data-checkbox="modalEog" aria-labelledby="eogMessage")
6 .card.smallpad.small-modal.text-center
7 label.modal-close(for="modalEog")
8 h3#eogMessage.section {{ endgameMessage }}
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"
18 Board(:vr="vr" :last-move="lastMove" :analyze="analyze"
19 :user-color="game.mycolor" :orientation="orientation"
20 :vname="game.vname" @play-move="play")
21 #turnIndicator(v-if="game.vname=='Dark' && game.score=='*'")
24 button(@click="gotoBegin") <<
25 button(@click="() => undo()") <
26 button(@click="flip") ⇅
27 button(@click="() => play()") >
28 button(@click="gotoEnd") >>
30 #downloadDiv(v-if="game.vname!='Dark' || game.score!='*'")
32 button(@click="download") {{ st.tr["Download PGN"] }}
33 button(onClick="doClick('modalAdjust')") ⤢
34 button(v-if="game.vname!='Dark' && game.mode!='analyze'"
35 @click="analyzePosition")
36 | {{ st.tr["Analyze"] }}
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"] }}
41 MoveList(v-if="showMoves" :score="game.score" :message="game.scoreMsg"
42 :firstNum="firstMoveNumber" :moves="moves" :cursor="cursor"
43 @goto-move="gotoMove")
48 import Board from "@/components/Board.vue";
49 import MoveList from "@/components/MoveList.vue";
50 import { store } from "@/store";
51 import { getSquareId } from "@/utils/squareId";
52 import { getDate } from "@/utils/datetime";
53 import { processModalClick } from "@/utils/modalClick";
61 // "vr": VariantRules object, describing the game state + rules
66 // NOTE: all following variables must be reset at the beginning of a game
69 score: "*", //'*' means 'unfinished'
71 cursor: -1, //index of the move just played
73 firstMoveNumber: 0, //for printing
77 // game initial FEN changes when a new game starts
78 "game.fenStart": function() {
79 this.re_setVariables();
81 // Received a new move to play:
82 "game.moveToPlay": function(newMove) {
83 if (!!newMove) //if stop + launch new game, get undefined move
84 this.play(newMove, "receive");
88 showMoves: function() {
89 return this.game.vname != "Dark" || this.game.score != "*";
93 const L = this.moves.length;
94 if (L == 0 || this.moves[L-1].color == "b")
96 else //if (this.moves[L-1].color == "w")
98 return this.st.tr[color + " to move"];
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 != "*");
106 created: function() {
107 if (!!this.game.fenStart)
108 this.re_setVariables();
110 mounted: function() {
111 [document.getElementById("eogDiv"),document.getElementById("adjuster")]
112 .forEach(elt => elt.addEventListener("click", processModalClick));
113 // Take full width on small screens:
114 let boardSize = parseInt(localStorage.getItem("boardSize"));
117 boardSize = (window.innerWidth >= 768
118 ? Math.min(600, 0.5*window.innerWidth) //heuristic...
119 : window.innerWidth);
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";
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)
132 timeoutLaunched = true;
135 timeoutLaunched = false;
141 focusBg: function() {
142 // NOTE: small blue border appears...
143 document.getElementById("baseGame").focus();
145 adjustBoard: function() {
146 const boardContainer = document.getElementById("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";
160 handleKeys: function(e) {
161 if ([32,37,38,39,40].includes(e.keyCode))
182 handleScroll: function(e) {
183 // NOTE: since game.mode=="analyze" => no score, next condition is enough
184 if (this.game.score != "*")
189 else if (e.deltaY > 0)
193 showRules: function() {
194 //this.$router.push("/variants/" + this.game.vname);
195 window.open("#/variants/" + this.game.vname, "_blank"); //better
197 re_setVariables: function() {
198 this.endgameMessage = "";
199 this.orientation = this.game.mycolor || "w"; //default orientation for observed games
200 this.moves = JSON.parse(JSON.stringify(this.game.moves || []));
201 // Post-processing: decorate each move with color + current FEN:
202 // (to be able to jump to any position quickly)
203 let vr_tmp = new V(this.game.fenStart); //vr is already at end of game
204 this.firstMoveNumber =
205 Math.floor(V.ParseFen(this.game.fenStart).movesCount / 2);
206 this.moves.forEach(move => {
207 // NOTE: this is doing manually what play() function below achieve,
208 // but in a lighter "fast-forward" way
209 move.color = vr_tmp.turn;
210 move.notation = vr_tmp.getNotation(move);
212 move.fen = vr_tmp.getFen();
214 if (this.game.fenStart.indexOf(" b ") >= 0 ||
215 (this.moves.length > 0 && this.moves[0].color == "b"))
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}});
220 const L = this.moves.length;
222 this.lastMove = (L > 0 ? this.moves[L-1] : null);
224 analyzePosition: function() {
225 const newUrl = "/analyze/" + this.game.vname +
226 "/?fen=" + this.vr.getFen().replace(/ /g, "_");
227 if (this.game.type == "live")
228 this.$router.push(newUrl); //open in same tab: against cheating...
230 window.open("#" + newUrl); //open in a new tab: more comfortable
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();
242 pgn += '[Site "vchess.club"]\n';
243 pgn += '[Variant "' + this.game.vname + '"]\n';
244 pgn += '[Date "' + getDate(new Date()) + '"]\n';
245 pgn += '[White "' + this.game.players[0].name + '"]\n';
246 pgn += '[Black "' + this.game.players[1].name + '"]\n';
247 pgn += '[Fen "' + this.game.fenStart + '"]\n';
248 pgn += '[Result "' + this.game.score + '"]\n\n';
251 while (i < this.moves.length)
253 pgn += (counter++) + ".";
254 for (let color of ["w","b"])
257 while (i < this.moves.length && this.moves[i].color == color)
258 move += this.moves[i++].notation + ",";
259 move = move.slice(0,-1); //remove last comma
260 pgn += move + (i < this.moves.length ? " " : "");
265 getScoreMessage: function(score) {
266 let eogMessage = "Undefined"; //not translated: unused
270 eogMessage = this.st.tr["White win"];
273 eogMessage = this.st.tr["Black win"];
276 eogMessage = this.st.tr["Draw"];
279 eogMessage = this.st.tr["Unknown"];
284 showEndgameMsg: function(message) {
285 this.endgameMessage = message;
286 let modalBox = document.getElementById("modalEog");
287 modalBox.checked = true;
288 setTimeout(() => { modalBox.checked = false; }, 2000);
290 animateMove: function(move, callback) {
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};
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++)
303 let square = squares.item(i);
304 if (square.id != getSquareId(move.start))
305 square.style.zIndex = "-1";
307 movingPiece.style.transform = "translate(" + translation.x + "px," +
308 translation.y + "px)";
309 movingPiece.style.transitionDuration = "0.2s";
310 movingPiece.style.zIndex = "3000";
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
318 play: function(move, receive) {
319 // NOTE: navigate and receive are mutually exclusive
320 const navigate = !move;
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
324 && (this.game.score != "*" || this.cursor < this.moves.length-1))
328 const doPlayMove = () => {
329 if (!!receive && this.cursor < this.moves.length-1)
330 this.gotoEnd(); //required to play the move
333 if (this.cursor == this.moves.length-1)
334 return; //no more moves
335 move = this.moves[this.cursor+1];
339 move.color = this.vr.turn;
340 move.notation = this.vr.getNotation(move);
344 this.lastMove = move;
345 if (this.st.settings.sound == 2)
346 new Audio("/sounds/move.mp3").play().catch(err => {});
349 move.fen = this.vr.getFen();
350 // Stack move on movesList at current cursor
351 if (this.cursor == this.moves.length)
352 this.moves.push(move);
354 this.moves = this.moves.slice(0,this.cursor).concat([move]);
356 // Is opponent in check?
357 this.incheck = this.vr.getCheckSquares(this.vr.turn);
358 const score = this.vr.getCurrentScore();
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);
367 if (!navigate && this.game.mode!="analyze")
368 this.$emit("newmove", move); //post-processing (e.g. computer play)
370 if (!!receive && this.game.vname != "Dark")
371 this.animateMove(move, doPlayMove);
375 undo: function(move) {
376 const navigate = !move;
380 return; //no more moves
381 move = this.moves[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);
392 gotoMove: function(index) {
393 this.vr.re_init(this.moves[index].fen);
395 this.lastMove = this.moves[index];
397 gotoBegin: function() {
398 if (this.cursor == -1)
400 this.vr.re_init(this.game.fenStart);
401 if (this.moves.length > 0 && this.moves[0].notation == "...")
404 this.lastMove = this.moves[0];
409 this.lastMove = null;
412 gotoEnd: function() {
413 if (this.cursor == this.moves.length - 1)
415 this.gotoMove(this.moves.length-1);
418 this.orientation = V.GetOppCol(this.orientation);
424 <style lang="sass" scoped>
435 display: inline-block
444 display: inline-block
447 @media screen and (min-width: 768px)
458 // TODO: later, maybe, allow movesList of variable width
459 // or e.g. between 250 and 350px (but more complicated)
463 @media screen and (max-width: 767px)