'update'
[vchess.git] / client / src / components / BaseGame.vue
1 <template lang="pug">
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 }}
8 .row
9 .col-sm-12.col-md-9
10 #boardContainer
11 Board(:vr="vr" :last-move="lastMove" :analyze="game.mode=='analyze'"
12 :user-color="game.mycolor" :orientation="orientation"
13 :vname="game.vname" @play-move="play")
14 #controls
15 button(@click="gotoBegin") <<
16 button(@click="() => undo()") <
17 button(@click="flip") &#8645;
18 button(@click="() => play()") >
19 button(@click="gotoEnd") >>
20 #pgnDiv
21 a#download(href="#")
22 button(@click="download") {{ st.tr["Download PGN"] }}
23 button(v-if="game.mode!='analyze'" @click="analyzePosition")
24 | {{ st.tr["Analyze"] }}
25 .col-sm-12.col-md-3
26 MoveList(v-if="showMoves" :score="game.score" :message="game.scoreMsg"
27 :firstNum="firstMoveNumber" :moves="moves" :cursor="cursor"
28 @goto-move="gotoMove")
29 </template>
30
31 <script>
32 import Board from "@/components/Board.vue";
33 import MoveList from "@/components/MoveList.vue";
34 import { store } from "@/store";
35 import { getSquareId } from "@/utils/squareId";
36 import { getDate } from "@/utils/datetime";
37
38 export default {
39 name: 'my-base-game',
40 components: {
41 Board,
42 MoveList,
43 },
44 // "vr": VariantRules object, describing the game state + rules
45 props: ["vr","game"],
46 data: function() {
47 return {
48 st: store.state,
49 // NOTE: all following variables must be reset at the beginning of a game
50 endgameMessage: "",
51 orientation: "w",
52 score: "*", //'*' means 'unfinished'
53 moves: [],
54 cursor: -1, //index of the move just played
55 lastMove: null,
56 firstMoveNumber: 0, //for printing
57 };
58 },
59 watch: {
60 // game initial FEN changes when a new game starts
61 "game.fenStart": function() {
62 this.re_setVariables();
63 },
64 // Received a new move to play:
65 "game.moveToPlay": function(newMove) {
66 if (!!newMove) //if stop + launch new game, get undefined move
67 this.play(newMove, "receive");
68 },
69 },
70 computed: {
71 showMoves: function() {
72 return this.game.vname != "Dark" || this.game.mode=="analyze";
73 },
74 },
75 created: function() {
76 if (!!this.game.fenStart)
77 this.re_setVariables();
78 },
79 methods: {
80 focusBg: function() {
81 // TODO: small blue border appears...
82 document.getElementById("baseGame").focus();
83 },
84 handleKeys: function(e) {
85 if ([32,37,38,39,40].includes(e.keyCode))
86 e.preventDefault();
87 switch (e.keyCode)
88 {
89 case 37:
90 this.undo();
91 break;
92 case 39:
93 this.play();
94 break;
95 case 38:
96 this.gotoBegin();
97 break;
98 case 40:
99 this.gotoEnd();
100 break;
101 case 32:
102 this.flip();
103 break;
104 }
105 },
106 re_setVariables: function() {
107 this.endgameMessage = "";
108 this.orientation = this.game.mycolor || "w"; //default orientation for observed games
109 this.moves = JSON.parse(JSON.stringify(this.game.moves || []));
110 // Post-processing: decorate each move with color + current FEN:
111 // (to be able to jump to any position quickly)
112 let vr_tmp = new V(this.game.fenStart); //vr is already at end of game
113 this.firstMoveNumber =
114 Math.floor(V.ParseFen(this.game.fenStart).movesCount / 2);
115 this.moves.forEach(move => {
116 // NOTE: this is doing manually what play() function below achieve,
117 // but in a lighter "fast-forward" way
118 move.color = vr_tmp.turn;
119 move.notation = vr_tmp.getNotation(move);
120 vr_tmp.play(move);
121 move.fen = vr_tmp.getFen();
122 });
123 if (this.game.fenStart.indexOf(" b ") >= 0 ||
124 (this.moves.length > 0 && this.moves[0].color == "b"))
125 {
126 // 'end' is required for Board component to check lastMove for e.p.
127 this.moves.unshift({color: "w", notation: "...", end: {x:-1,y:-1}});
128 }
129 const L = this.moves.length;
130 this.cursor = L-1;
131 this.lastMove = (L > 0 ? this.moves[L-1] : null);
132 },
133 analyzePosition: function() {
134 const newUrl = "/analyze/" + this.game.vname +
135 "/?fen=" + this.vr.getFen().replace(/ /g, "_");
136 //window.open("#" + newUrl); //to open in a new tab
137 this.$router.push(newUrl); //better
138 },
139 download: function() {
140 const content = this.getPgn();
141 // Prepare and trigger download link
142 let downloadAnchor = document.getElementById("download");
143 downloadAnchor.setAttribute("download", "game.pgn");
144 downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
145 downloadAnchor.click();
146 },
147 getPgn: function() {
148 let pgn = "";
149 pgn += '[Site "vchess.club"]\n';
150 pgn += '[Variant "' + this.game.vname + '"]\n';
151 pgn += '[Date "' + getDate(new Date()) + '"]\n';
152 pgn += '[White "' + this.game.players[0].name + '"]\n';
153 pgn += '[Black "' + this.game.players[1].name + '"]\n';
154 pgn += '[Fen "' + this.game.fenStart + '"]\n';
155 pgn += '[Result "' + this.game.score + '"]\n\n';
156 let counter = 1;
157 let i = 0;
158 while (i < this.moves.length)
159 {
160 pgn += (counter++) + ".";
161 for (let color of ["w","b"])
162 {
163 let move = "";
164 while (i < this.moves.length && this.moves[i].color == color)
165 move += this.moves[i++].notation + ",";
166 move = move.slice(0,-1); //remove last comma
167 pgn += move + (i < this.moves.length ? " " : "");
168 }
169 }
170 return pgn + "\n";
171 },
172 getScoreMessage: function(score) {
173 let eogMessage = "Undefined";
174 switch (score)
175 {
176 case "1-0":
177 eogMessage = this.st.tr["White win"];
178 break;
179 case "0-1":
180 eogMessage = this.st.tr["Black win"];
181 break;
182 case "1/2":
183 eogMessage = this.st.tr["Draw"];
184 break;
185 case "?":
186 eogMessage = this.st.tr["Unfinished"];
187 break;
188 }
189 return eogMessage;
190 },
191 showEndgameMsg: function(message) {
192 this.endgameMessage = message;
193 let modalBox = document.getElementById("modalEog");
194 modalBox.checked = true;
195 setTimeout(() => { modalBox.checked = false; }, 2000);
196 },
197 animateMove: function(move, callback) {
198 let startSquare = document.getElementById(getSquareId(move.start));
199 let endSquare = document.getElementById(getSquareId(move.end));
200 let rectStart = startSquare.getBoundingClientRect();
201 let rectEnd = endSquare.getBoundingClientRect();
202 let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y};
203 let movingPiece =
204 document.querySelector("#" + getSquareId(move.start) + " > img.piece");
205 // HACK for animation (with positive translate, image slides "under background")
206 // Possible improvement: just alter squares on the piece's way...
207 const squares = document.getElementsByClassName("board");
208 for (let i=0; i<squares.length; i++)
209 {
210 let square = squares.item(i);
211 if (square.id != getSquareId(move.start))
212 square.style.zIndex = "-1";
213 }
214 movingPiece.style.transform = "translate(" + translation.x + "px," +
215 translation.y + "px)";
216 movingPiece.style.transitionDuration = "0.2s";
217 movingPiece.style.zIndex = "3000";
218 setTimeout( () => {
219 for (let i=0; i<squares.length; i++)
220 squares.item(i).style.zIndex = "auto";
221 movingPiece.style = {}; //required e.g. for 0-0 with KR swap
222 callback();
223 }, 250);
224 },
225 play: function(move, receive) {
226 // NOTE: navigate and receive are mutually exclusive
227 const navigate = !move;
228 // Forbid playing outside analyze mode, except if move is received.
229 // Sufficient condition because Board already knows which turn it is.
230 if (!navigate && this.game.mode!="analyze" && !receive
231 && this.cursor < this.moves.length-1)
232 {
233 return;
234 }
235 const doPlayMove = () => {
236 if (!!receive && this.cursor < this.moves.length-1)
237 this.gotoEnd(); //required to play the move
238 if (navigate)
239 {
240 if (this.cursor == this.moves.length-1)
241 return; //no more moves
242 move = this.moves[this.cursor+1];
243 }
244 else
245 {
246 move.color = this.vr.turn;
247 move.notation = this.vr.getNotation(move);
248 }
249 this.vr.play(move);
250 this.cursor++;
251 this.lastMove = move;
252 if (this.st.settings.sound == 2)
253 new Audio("/sounds/move.mp3").play().catch(err => {});
254 if (!navigate)
255 {
256 move.fen = this.vr.getFen();
257 // Stack move on movesList at current cursor
258 if (this.cursor == this.moves.length)
259 this.moves.push(move);
260 else
261 this.moves = this.moves.slice(0,this.cursor).concat([move]);
262 }
263 if (!navigate && this.game.mode != "analyze")
264 this.$emit("newmove", move); //post-processing (e.g. computer play)
265 // Is opponent in check?
266 this.incheck = this.vr.getCheckSquares(this.vr.turn);
267 const score = this.vr.getCurrentScore();
268 if (score != "*")
269 {
270 const message = this.getScoreMessage(score);
271 if (this.game.mode != "analyze")
272 this.$emit("gameover", score, message);
273 else //just show score on screen (allow undo)
274 this.showEndgameMsg(score + " . " + message);
275 }
276 };
277 if (!!receive && this.game.vname != "Dark")
278 this.animateMove(move, doPlayMove);
279 else
280 doPlayMove();
281 },
282 undo: function(move) {
283 const navigate = !move;
284 if (navigate)
285 {
286 if (this.cursor < 0)
287 return; //no more moves
288 move = this.moves[this.cursor];
289 }
290 this.vr.undo(move);
291 this.cursor--;
292 this.lastMove = (this.cursor >= 0 ? this.moves[this.cursor] : undefined);
293 if (this.st.settings.sound == 2)
294 new Audio("/sounds/undo.mp3").play().catch(err => {});
295 this.incheck = this.vr.getCheckSquares(this.vr.turn);
296 if (!navigate)
297 this.moves.pop();
298 },
299 gotoMove: function(index) {
300 this.vr.re_init(this.moves[index].fen);
301 this.cursor = index;
302 this.lastMove = this.moves[index];
303 },
304 gotoBegin: function() {
305 if (this.cursor == -1)
306 return;
307 this.vr.re_init(this.game.fenStart);
308 if (this.moves.length > 0 && this.moves[0].notation == "...")
309 {
310 this.cursor = 0;
311 this.lastMove = this.moves[0];
312 }
313 else
314 {
315 this.cursor = -1;
316 this.lastMove = null;
317 }
318 },
319 gotoEnd: function() {
320 if (this.cursor == this.moves.length - 1)
321 return;
322 this.gotoMove(this.moves.length-1);
323 },
324 flip: function() {
325 this.orientation = V.GetNextCol(this.orientation);
326 },
327 },
328 };
329 </script>
330
331 <style lang="sass">
332 #modal-eog+div .card
333 overflow: hidden
334 #pgnDiv
335 text-align: center
336 margin-left: auto
337 margin-right: auto
338 @media screen and (min-width: 768px)
339 #controls
340 width: 400px
341 @media screen and (max-width: 767px)
342 .game
343 width: 100%
344 #controls
345 margin-top: 10px
346 button
347 display: inline-block
348 width: 20%
349 margin: 0
350 #boardContainer
351 //margin-top: 5px
352 >div
353 margin-left: auto
354 margin-right: auto
355 </style>