2 div#baseGame(tabindex=-1 @click="() => focusBg()" @keydown="handleKeys")
3 input#modalEog.modal(type="checkbox")
4 div(role="dialog" aria-labelledby="eogMessage")
5 .card.smallpad.small-modal.text-center
6 label.modal-close(for="modalEog")
7 h3#eogMessage.section {{ endgameMessage }}
10 Board(:vr="vr" :last-move="lastMove" :analyze="game.mode=='analyze'"
11 :user-color="game.mycolor" :orientation="orientation"
12 :vname="game.vname" @play-move="play")
14 button(@click="gotoBegin") <<
15 button(@click="() => undo()") <
16 button(@click="flip") ⇅
17 button(@click="() => play()") >
18 button(@click="gotoEnd") >>
21 button(@click="download") {{ st.tr["Download PGN"] }}
22 button(v-if="game.mode!='analyze'" @click="analyzePosition")
23 | {{ st.tr["Analyze"] }}
25 MoveList(v-if="showMoves" :score="game.score" :message="game.scoreMsg"
26 :firstNum="firstMoveNumber" :moves="moves" :cursor="cursor"
27 @goto-move="gotoMove")
28 // TODO: clearer required ?!
33 import Board from "@/components/Board.vue";
34 import MoveList from "@/components/MoveList.vue";
35 import { store } from "@/store";
36 import { getSquareId } from "@/utils/squareId";
37 import { getDate } from "@/utils/datetime";
45 // "vr": VariantRules object, describing the game state + rules
50 // NOTE: all following variables must be reset at the beginning of a game
53 score: "*", //'*' means 'unfinished'
55 cursor: -1, //index of the move just played
57 firstMoveNumber: 0, //for printing
61 // game initial FEN changes when a new game starts
62 "game.fenStart": function() {
63 this.re_setVariables();
65 // Received a new move to play:
66 "game.moveToPlay": function(newMove) {
67 if (!!newMove) //if stop + launch new game, get undefined move
68 this.play(newMove, "receive");
72 showMoves: function() {
73 return this.game.vname != "Dark" || this.game.mode=="analyze";
77 if (!!this.game.fenStart)
78 this.re_setVariables();
81 // Take full width on small screens:
82 let boardSize = parseInt(localStorage.getItem("boardSize"));
85 boardSize = (window.innerWidth >= 768
86 ? Math.min(600, 0.5*window.innerWidth) //heuristic...
89 const movesWidth = (window.innerWidth >= 768 ? 280 : 0);
90 document.getElementById("boardContainer").style.width = boardSize + "px";
91 let gameContainer = document.getElementById("gameContainer");
92 gameContainer.style.width = (boardSize + movesWidth) + "px";
98 // TODO: something here........... gameContainer.width increases if from small to larger screen
99 window.onResize = (e) => {
101 //if (window.innerWidth >= 768)
109 focusBg: function() {
110 // TODO: small blue border appears...
111 document.getElementById("baseGame").focus();
113 handleKeys: function(e) {
114 if ([32,37,38,39,40].includes(e.keyCode))
135 re_setVariables: function() {
136 this.endgameMessage = "";
137 this.orientation = this.game.mycolor || "w"; //default orientation for observed games
138 this.moves = JSON.parse(JSON.stringify(this.game.moves || []));
139 // Post-processing: decorate each move with color + current FEN:
140 // (to be able to jump to any position quickly)
141 let vr_tmp = new V(this.game.fenStart); //vr is already at end of game
142 this.firstMoveNumber =
143 Math.floor(V.ParseFen(this.game.fenStart).movesCount / 2);
144 this.moves.forEach(move => {
145 // NOTE: this is doing manually what play() function below achieve,
146 // but in a lighter "fast-forward" way
147 move.color = vr_tmp.turn;
148 move.notation = vr_tmp.getNotation(move);
150 move.fen = vr_tmp.getFen();
152 if (this.game.fenStart.indexOf(" b ") >= 0 ||
153 (this.moves.length > 0 && this.moves[0].color == "b"))
155 // 'end' is required for Board component to check lastMove for e.p.
156 this.moves.unshift({color: "w", notation: "...", end: {x:-1,y:-1}});
158 const L = this.moves.length;
160 this.lastMove = (L > 0 ? this.moves[L-1] : null);
162 analyzePosition: function() {
163 const newUrl = "/analyze/" + this.game.vname +
164 "/?fen=" + this.vr.getFen().replace(/ /g, "_");
165 //window.open("#" + newUrl); //to open in a new tab
166 this.$router.push(newUrl); //better
168 download: function() {
169 const content = this.getPgn();
170 // Prepare and trigger download link
171 let downloadAnchor = document.getElementById("download");
172 downloadAnchor.setAttribute("download", "game.pgn");
173 downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
174 downloadAnchor.click();
178 pgn += '[Site "vchess.club"]\n';
179 pgn += '[Variant "' + this.game.vname + '"]\n';
180 pgn += '[Date "' + getDate(new Date()) + '"]\n';
181 pgn += '[White "' + this.game.players[0].name + '"]\n';
182 pgn += '[Black "' + this.game.players[1].name + '"]\n';
183 pgn += '[Fen "' + this.game.fenStart + '"]\n';
184 pgn += '[Result "' + this.game.score + '"]\n\n';
187 while (i < this.moves.length)
189 pgn += (counter++) + ".";
190 for (let color of ["w","b"])
193 while (i < this.moves.length && this.moves[i].color == color)
194 move += this.moves[i++].notation + ",";
195 move = move.slice(0,-1); //remove last comma
196 pgn += move + (i < this.moves.length ? " " : "");
201 getScoreMessage: function(score) {
202 let eogMessage = "Undefined";
206 eogMessage = this.st.tr["White win"];
209 eogMessage = this.st.tr["Black win"];
212 eogMessage = this.st.tr["Draw"];
215 eogMessage = this.st.tr["Unfinished"];
220 showEndgameMsg: function(message) {
221 this.endgameMessage = message;
222 let modalBox = document.getElementById("modalEog");
223 modalBox.checked = true;
224 setTimeout(() => { modalBox.checked = false; }, 2000);
226 animateMove: function(move, callback) {
227 let startSquare = document.getElementById(getSquareId(move.start));
228 let endSquare = document.getElementById(getSquareId(move.end));
229 let rectStart = startSquare.getBoundingClientRect();
230 let rectEnd = endSquare.getBoundingClientRect();
231 let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y};
233 document.querySelector("#" + getSquareId(move.start) + " > img.piece");
234 // HACK for animation (with positive translate, image slides "under background")
235 // Possible improvement: just alter squares on the piece's way...
236 const squares = document.getElementsByClassName("board");
237 for (let i=0; i<squares.length; i++)
239 let square = squares.item(i);
240 if (square.id != getSquareId(move.start))
241 square.style.zIndex = "-1";
243 movingPiece.style.transform = "translate(" + translation.x + "px," +
244 translation.y + "px)";
245 movingPiece.style.transitionDuration = "0.2s";
246 movingPiece.style.zIndex = "3000";
248 for (let i=0; i<squares.length; i++)
249 squares.item(i).style.zIndex = "auto";
250 movingPiece.style = {}; //required e.g. for 0-0 with KR swap
254 play: function(move, receive) {
255 // NOTE: navigate and receive are mutually exclusive
256 const navigate = !move;
257 // Forbid playing outside analyze mode, except if move is received.
258 // Sufficient condition because Board already knows which turn it is.
259 if (!navigate && this.game.mode!="analyze" && !receive
260 && this.cursor < this.moves.length-1)
264 const doPlayMove = () => {
265 if (!!receive && this.cursor < this.moves.length-1)
266 this.gotoEnd(); //required to play the move
269 if (this.cursor == this.moves.length-1)
270 return; //no more moves
271 move = this.moves[this.cursor+1];
275 move.color = this.vr.turn;
276 move.notation = this.vr.getNotation(move);
280 this.lastMove = move;
281 if (this.st.settings.sound == 2)
282 new Audio("/sounds/move.mp3").play().catch(err => {});
285 move.fen = this.vr.getFen();
286 // Stack move on movesList at current cursor
287 if (this.cursor == this.moves.length)
288 this.moves.push(move);
290 this.moves = this.moves.slice(0,this.cursor).concat([move]);
292 if (!navigate && this.game.mode != "analyze")
293 this.$emit("newmove", move); //post-processing (e.g. computer play)
294 // Is opponent in check?
295 this.incheck = this.vr.getCheckSquares(this.vr.turn);
296 const score = this.vr.getCurrentScore();
299 const message = this.getScoreMessage(score);
300 if (this.game.mode != "analyze")
301 this.$emit("gameover", score, message);
302 else //just show score on screen (allow undo)
303 this.showEndgameMsg(score + " . " + message);
306 if (!!receive && this.game.vname != "Dark")
307 this.animateMove(move, doPlayMove);
311 undo: function(move) {
312 const navigate = !move;
316 return; //no more moves
317 move = this.moves[this.cursor];
321 this.lastMove = (this.cursor >= 0 ? this.moves[this.cursor] : undefined);
322 if (this.st.settings.sound == 2)
323 new Audio("/sounds/undo.mp3").play().catch(err => {});
324 this.incheck = this.vr.getCheckSquares(this.vr.turn);
328 gotoMove: function(index) {
329 this.vr.re_init(this.moves[index].fen);
331 this.lastMove = this.moves[index];
333 gotoBegin: function() {
334 if (this.cursor == -1)
336 this.vr.re_init(this.game.fenStart);
337 if (this.moves.length > 0 && this.moves[0].notation == "...")
340 this.lastMove = this.moves[0];
345 this.lastMove = null;
348 gotoEnd: function() {
349 if (this.cursor == this.moves.length - 1)
351 this.gotoMove(this.moves.length-1);
354 this.orientation = V.GetNextCol(this.orientation);
370 @media screen and (min-width: 768px)
380 display: inline-block
392 @media screen and (max-width: 767px)