Unused code, style (cosmetics)
[vchess.git] / client / src / views / Game.vue
CommitLineData
a6088c90 1<template lang="pug">
7aa548e7 2main
07052665
BA
3 input#modalRules.modal(type="checkbox")
4 div#rulesDiv(
5 role="dialog"
6 data-checkbox="modalRules"
7 )
8 .card
9 label.modal-close(for="modalRules")
1c15969e 10 a#variantNameInGame(:href="'/#/variants/'+game.vname") {{ game.vname }}
07052665 11 div(v-html="rulesContent")
3ca0ef9e
BA
12 input#modalScore.modal(type="checkbox")
13 div#scoreDiv(
c292ebb2 14 role="dialog"
3ca0ef9e 15 data-checkbox="modalScore"
c292ebb2
BA
16 )
17 .card.text-center
3ca0ef9e 18 label.modal-close(for="modalScore")
af34341d 19 p.score-section
3ca0ef9e
BA
20 span.score {{ game.score }}
21 | &nbsp;:&nbsp;
22 span.score-msg {{ st.tr[game.scoreMsg] }}
23 input#modalRematch.modal(type="checkbox")
24 div#rematchDiv(
25 role="dialog"
26 data-checkbox="modalRematch"
27 )
28 .card.text-center
29 label.modal-close(for="modalRematch")
f14572c4
BA
30 a(
31 :href="'#/game/' + rematchId"
3ca0ef9e 32 onClick="document.getElementById('modalRematch').checked=false"
f14572c4
BA
33 )
34 | {{ st.tr["Rematch in progress"] }}
910d631b
BA
35 input#modalChat.modal(
36 type="checkbox"
8be8238c 37 @click="toggleChat()"
910d631b
BA
38 )
39 div#chatWrap(
40 role="dialog"
41 data-checkbox="modalChat"
42 )
5b4de147 43 .card
a1c48034 44 label.modal-close(for="modalChat")
ed06d9e9 45 #participants
afde7666 46 span {{ st.tr["Participant(s):"] }}
910d631b
BA
47 span(
48 v-for="p in Object.values(people)"
964eda04 49 v-if="!!p.name"
910d631b 50 )
ed06d9e9 51 | {{ p.name }}
7ebc0408 52 span.anonymous(v-if="someAnonymousPresent()") + @nonymous
910d631b 53 Chat(
aae89b49 54 ref="chatcomp"
910d631b
BA
55 :players="game.players"
56 :pastChats="game.chats"
910d631b 57 @mychat="processChat"
db1f1f9a 58 @chatcleared="clearChat"
910d631b 59 )
5b4de147
BA
60 input#modalConfirm.modal(type="checkbox")
61 div#confirmDiv(role="dialog")
62 .card
a17ae317
BA
63 .diagram(
64 v-if="!!vr && ['all','byrow'].includes(vr.showMoves)"
65 v-html="curDiag"
66 )
67 p.text-center(v-else)
68 span {{ st.tr["Move played:"] + " " }}
69 span.bold {{ moveNotation }}
70 br
71 span {{ st.tr["Are you sure?"] }}
5b4de147
BA
72 .button-group#buttonsConfirm
73 // onClick for acceptBtn: set dynamically
74 button.acceptBtn
75 span {{ st.tr["Validate"] }}
76 button.refuseBtn(@click="cancelMove()")
77 span {{ st.tr["Cancel"] }}
7aa548e7 78 .row
07052665 79 #aboveBoard.col-sm-12
1ef65040 80 span.variant-cadence(v-if="game.type!='import'") {{ game.cadence }}
2f258c37 81 span.variant-name {{ game.vname }}
feaf1bf7
BA
82 span#nextGame(
83 v-if="nextIds.length > 0"
84 @click="showNextGame()"
85 )
86 | {{ st.tr["Next_g"] }}
1e02d16d
BA
87 button#chatBtn(
88 :class="btnTooltipClass()"
feaf1bf7
BA
89 onClick="window.doClick('modalChat')"
90 aria-label="Chat"
91 )
92 img(src="/images/icons/chat.svg")
f296c3d4 93 #actions(v-if="game.score=='*'")
1e02d16d 94 button(
910d631b 95 @click="clickDraw()"
1e02d16d 96 :class="btnTooltipClass('draw')"
feaf1bf7 97 :aria-label="st.tr['Draw']"
910d631b 98 )
feaf1bf7 99 img(src="/images/icons/draw.svg")
1e02d16d
BA
100 button(
101 v-if="!!game.mycolor"
102 :class="btnTooltipClass()"
910d631b 103 @click="abortGame()"
feaf1bf7 104 :aria-label="st.tr['Abort']"
910d631b 105 )
feaf1bf7 106 img(src="/images/icons/abort.svg")
1e02d16d
BA
107 button(
108 v-if="!!game.mycolor"
109 :class="btnTooltipClass()"
910d631b 110 @click="resign()"
feaf1bf7 111 :aria-label="st.tr['Resign']"
910d631b 112 )
feaf1bf7 113 img(src="/images/icons/resign.svg")
1e02d16d 114 button(
f296c3d4 115 v-else
1e02d16d 116 :class="btnTooltipClass('rematch')"
c292ebb2 117 @click="clickRematch()"
feaf1bf7
BA
118 :aria-label="st.tr['Rematch']"
119 )
120 img(src="/images/icons/rematch.svg")
050ae3b5 121 #playersInfo
847ba842 122 div(v-if="isLargeScreen()")
80b38d46
BA
123 UserBio.user-bio(
124 :class="{connected: isConnected(0)}"
125 :uid="game.players[0].id"
126 :uname="game.players[0].name"
127 )
57eb158f
BA
128 span.time(
129 v-if="game.score=='*'"
130 :class="{yourturn: !!vr && vr.turn == 'w'}"
131 )
132 span.time-left {{ virtualClocks[0][0] }}
133 span.time-separator(v-if="!!virtualClocks[0][1]") :
aae89b49
BA
134 span.time-right(v-if="!!virtualClocks[0][1]")
135 | {{ virtualClocks[0][1] }}
050ae3b5 136 span.split-names -
80b38d46
BA
137 UserBio.user-bio(
138 :class="{connected: isConnected(1)}"
139 :uid="game.players[1].id"
140 :uname="game.players[1].name"
141 )
57eb158f
BA
142 span.time(
143 v-if="game.score=='*'"
144 :class="{yourturn: !!vr && vr.turn == 'b'}"
145 )
146 span.time-left {{ virtualClocks[1][0] }}
147 span.time-separator(v-if="!!virtualClocks[1][1]") :
aae89b49
BA
148 span.time-right(v-if="!!virtualClocks[1][1]")
149 | {{ virtualClocks[1][1] }}
847ba842 150 div(v-else)
80b38d46
BA
151 UserBio.user-bio(
152 :class="{connected: isConnected(0)}"
153 :uid="game.players[0].id"
154 :uname="game.players[0].name"
155 )
49dad261 156 span.split-names -
80b38d46
BA
157 UserBio.user-bio(
158 :class="{connected: isConnected(1)}"
159 :uid="game.players[1].id"
160 :uname="game.players[1].name"
161 )
1e02d16d
BA
162 div(v-if="game.score=='*'")
163 span.time(:class="{yourturn: !!vr && vr.turn == 'w'}")
164 span.time-left {{ virtualClocks[0][0] }}
165 span.time-separator(v-if="!!virtualClocks[0][1]") :
166 span.time-right(v-if="!!virtualClocks[0][1]")
167 | {{ virtualClocks[0][1] }}
168 span.separator
169 span.time(:class="{yourturn: !!vr && vr.turn == 'b'}")
170 span.time-left {{ virtualClocks[1][0] }}
171 span.time-separator(v-if="!!virtualClocks[1][1]") :
172 span.time-right(v-if="!!virtualClocks[1][1]")
173 | {{ virtualClocks[1][1] }}
910d631b 174 BaseGame(
8477e53d 175 ref="basegame"
910d631b 176 :game="game"
910d631b 177 @newmove="processMove"
910d631b 178 )
a6088c90
BA
179</template>
180
181<script>
46284a2f 182import BaseGame from "@/components/BaseGame.vue";
80b38d46 183import UserBio from "@/components/UserBio.vue";
f21cd6d9 184import Chat from "@/components/Chat.vue";
a6088c90 185import { store } from "@/store";
967a2686 186import { GameStorage } from "@/utils/gameStorage";
5f918a27 187import { ImportgameStorage } from "@/utils/importgameStorage";
5b87454c 188import { ppt } from "@/utils/datetime";
f5768809 189import { notify } from "@/utils/notifications";
23ecf008 190import { ajax } from "@/utils/ajax";
66d03f23 191import { extractTime } from "@/utils/timeControl";
51d87b52 192import { getRandString } from "@/utils/alea";
5aa14a21
BA
193import { getScoreMessage } from "@/utils/scoring";
194import { getFullNotation } from "@/utils/notation";
07052665 195import { getDiagram, replaceByDiag } from "@/utils/printDiagram";
dcd68c41 196import { processModalClick } from "@/utils/modalClick";
e71161fb 197import { playMove, getFilteredMove } from "@/utils/playUndo";
1611a25f 198import { ArrayFun } from "@/utils/array";
8418f0d7 199import params from "@/parameters";
a6088c90 200export default {
6808d7a1 201 name: "my-game",
a6088c90
BA
202 components: {
203 BaseGame,
80b38d46
BA
204 Chat,
205 UserBio
a6088c90 206 },
a6088c90
BA
207 data: function() {
208 return {
209 st: store.state,
f54f4c26
BA
210 // gameRef can point to a corr game, local game or remote live game
211 gameRef: "",
feaf1bf7 212 nextIds: [],
aae89b49 213 game: {}, //passed to BaseGame
1a3cfdc0 214 focus: !document.hidden, //will not always work... TODO
aae89b49
BA
215 // virtualClocks will be initialized from true game.clocks
216 virtualClocks: [],
6dd02928 217 vr: null, //"variant rules" object initialized from FEN
07052665 218 rulesContent: "",
dcd68c41 219 drawOffer: "",
585d0955 220 rematchId: "",
c292ebb2 221 rematchOffer: "",
584f81b9 222 lastateAsked: false,
dcd68c41 223 people: {}, //players + observers
760adbce 224 lastate: undefined, //used if opponent send lastate before game is ready
72ccbd67 225 repeat: {}, //detect position repetition
5b4de147 226 curDiag: "", //for corr moves confirmation
8418f0d7 227 conn: null,
f9c36b2d 228 roomInitialized: false,
f9c36b2d
BA
229 // If asklastate got no reply, ask again:
230 gotLastate: false,
e5c1d0fb 231 gotMoveIdx: -1, //last move index received
f9c36b2d
BA
232 // If newmove got no pingback, send again:
233 opponentGotMove: false,
51d87b52 234 connexionString: "",
882ec6fe 235 socketCloseListener: 0,
a17ae317
BA
236 // Incomplete info games: show move played
237 moveNotation: "",
aae89b49 238 // Intervals from setInterval():
aae89b49
BA
239 askLastate: null,
240 retrySendmove: null,
241 clockUpdate: null,
51d87b52 242 // Related to (killing of) self multi-connects:
49dad261 243 newConnect: {}
a6088c90
BA
244 };
245 },
246 watch: {
aae89b49 247 $route: function(to, from) {
7ebc0408 248 if (to.path.length < 6 || to.path.substr(0, 6) != "/game/")
1112f1fd
BA
249 // Page change
250 this.cleanBeforeDestroy();
251 else if (from.params["id"] != to.params["id"]) {
aae89b49
BA
252 // Change everything:
253 this.cleanBeforeDestroy();
5aa14a21
BA
254 let boardDiv = document.querySelector(".game");
255 if (!!boardDiv)
256 // In case of incomplete information variant:
257 boardDiv.style.visibility = "hidden";
aae89b49 258 this.atCreation();
58aedcd1
BA
259 }
260 else
aae89b49 261 // Same game ID
aae89b49 262 this.nextIds = JSON.parse(this.$route.query["next"] || "[]");
6808d7a1 263 }
92a523d1 264 },
71468011 265 // NOTE: some redundant code with Hall.vue (mostly related to people array)
a6088c90 266 created: function() {
aae89b49 267 this.atCreation();
cdb34c93 268 },
dcd68c41 269 mounted: function() {
1ef65040
BA
270 document.getElementById("chatWrap")
271 .addEventListener("click", (e) => {
272 processModalClick(e, () => {
273 this.toggleChat("close")
274 });
275 });
07052665 276 ["rulesDiv", "rematchDiv", "scoreDiv"].forEach(
3ca0ef9e
BA
277 (eltName) => {
278 document.getElementById(eltName)
279 .addEventListener("click", processModalClick);
280 }
281 );
dcd68c41 282 },
8418f0d7 283 beforeDestroy: function() {
aae89b49 284 this.cleanBeforeDestroy();
8418f0d7 285 },
cdb34c93 286 methods: {
1112f1fd 287 cleanBeforeDestroy: function() {
882ec6fe 288 clearInterval(this.socketCloseListener);
1112f1fd 289 document.removeEventListener('visibilitychange', this.visibilityChange);
f5768809
BA
290 window.removeEventListener('focus', this.onFocus);
291 window.removeEventListener('blur', this.onBlur);
7ebc0408
BA
292 if (!!this.askLastate) clearInterval(this.askLastate);
293 if (!!this.retrySendmove) clearInterval(this.retrySendmove);
294 if (!!this.clockUpdate) clearInterval(this.clockUpdate);
68e3aa8c 295 this.conn.removeEventListener("message", this.socketMessageListener);
1112f1fd 296 this.send("disconnect");
68e3aa8c 297 this.conn = null;
1112f1fd 298 },
a041d5d8
BA
299 visibilityChange: function() {
300 // TODO: Use document.hidden? https://webplatform.news/issues/2019-03-27
f5768809 301 this.focus = (document.visibilityState == "visible");
f5768809
BA
302 this.send(this.focus ? "getfocus" : "losefocus");
303 },
304 onFocus: function() {
305 this.focus = true;
306 this.send("getfocus");
307 },
308 onBlur: function() {
309 this.focus = false;
f5768809 310 this.send("losefocus");
a041d5d8 311 },
5d4a9ad4 312 isLargeScreen: function() {
847ba842 313 return window.innerWidth >= 768;
5d4a9ad4 314 },
1e02d16d
BA
315 btnTooltipClass: function(thing) {
316 let append = {};
317 if (!!thing) append = { [thing + "-" + this[thing + "Offer"]]: true };
318 return (
319 Object.assign(
320 { tooltip: !("ontouchstart" in window) },
321 append
322 )
323 );
324 },
7ebc0408
BA
325 someAnonymousPresent: function() {
326 return (
327 Object.values(this.people).some(p =>
328 !p.name && Object.keys(p.tmpIds).some(x => p.tmpIds[x].focus)
329 )
330 );
331 },
aae89b49 332 atCreation: function() {
1112f1fd 333 document.addEventListener('visibilitychange', this.visibilityChange);
f5768809
BA
334 window.addEventListener('focus', this.onFocus);
335 window.addEventListener('blur', this.onBlur);
aae89b49 336 // 0] (Re)Set variables
f54f4c26
BA
337 this.gameRef = this.$route.params["id"];
338 // next = next corr games IDs to navigate faster (if applicable)
aae89b49
BA
339 this.nextIds = JSON.parse(this.$route.query["next"] || "[]");
340 // Always add myself to players' list
341 const my = this.st.user;
7ebc0408 342 const tmpId = getRandString();
a041d5d8
BA
343 this.$set(
344 this.people,
345 my.sid,
346 {
347 id: my.id,
348 name: my.name,
7ebc0408
BA
349 tmpIds: {
350 tmpId: { focus: true }
351 }
a041d5d8
BA
352 }
353 );
aae89b49
BA
354 this.game = {
355 players: [{ name: "" }, { name: "" }],
356 chats: [],
357 rendered: false
358 };
359 let chatComp = this.$refs["chatcomp"];
360 if (!!chatComp) chatComp.chats = [];
361 this.virtualClocks = [[0,0], [0,0]];
362 this.vr = null;
07052665 363 this.rulesContent = "";
aae89b49 364 this.drawOffer = "";
584f81b9 365 this.lastateAsked = false;
c292ebb2 366 this.rematchOffer = "";
aae89b49 367 this.lastate = undefined;
aae89b49 368 this.roomInitialized = false;
aae89b49
BA
369 this.gotLastate = false;
370 this.gotMoveIdx = -1;
371 this.opponentGotMove = false;
aae89b49
BA
372 this.askLastate = null;
373 this.retrySendmove = null;
374 this.clockUpdate = null;
375 this.newConnect = {};
aae89b49
BA
376 // 1] Initialize connection
377 this.connexionString =
378 params.socketUrl +
7ebc0408
BA
379 "/?sid=" + this.st.user.sid +
380 "&id=" + this.st.user.id +
381 "&tmpId=" + tmpId +
aae89b49
BA
382 "&page=" +
383 // Discard potential "/?next=[...]" for page indication:
384 encodeURIComponent(this.$route.path.match(/\/game\/[a-zA-Z0-9]+/)[0]);
385 this.conn = new WebSocket(this.connexionString);
3f22c2c3 386 this.conn.addEventListener("message", this.socketMessageListener);
882ec6fe
BA
387 this.socketCloseListener = setInterval(
388 () => {
389 if (this.conn.readyState == 3) {
2c5d7b20
BA
390 this.conn.removeEventListener(
391 "message", this.socketMessageListener);
882ec6fe
BA
392 this.conn = new WebSocket(this.connexionString);
393 this.conn.addEventListener("message", this.socketMessageListener);
394 }
395 },
396 1000
397 );
aae89b49
BA
398 // Socket init required before loading remote game:
399 const socketInit = callback => {
3f22c2c3 400 if (this.conn.readyState == 1)
aae89b49
BA
401 // 1 == OPEN state
402 callback();
403 else
404 // Socket not ready yet (initial loading)
f54f4c26 405 // NOTE: first arg is Websocket object, unused here:
aae89b49
BA
406 this.conn.onopen = () => callback();
407 };
f54f4c26
BA
408 this.fetchGame((game) => {
409 if (!!game)
410 this.loadVariantThenGame(game, () => socketInit(this.roomInit));
411 else
412 // Live game stored remotely: need socket to retrieve it
2c5d7b20 413 // NOTE: the callback "roomInit" will be lost, so it's not provided.
f54f4c26
BA
414 // --> It will be given when receiving "fullgame" socket event.
415 socketInit(() => { this.send("askfullgame"); });
416 });
aae89b49 417 },
760adbce 418 roomInit: function() {
f9c36b2d
BA
419 if (!this.roomInitialized) {
420 // Notify the room only now that I connected, because
421 // messages might be lost otherwise (if game loading is slow)
422 this.send("connect");
423 this.send("pollclients");
424 // We may ask fullgame several times if some moves are lost,
425 // but room should be init only once:
426 this.roomInitialized = true;
427 }
71468011
BA
428 },
429 send: function(code, obj) {
5a187b07 430 if (!!this.conn && this.conn.readyState == 1)
6808d7a1 431 this.conn.send(JSON.stringify(Object.assign({ code: code }, obj)));
5f131484 432 },
050ae3b5 433 isConnected: function(index) {
29ced362 434 const player = this.game.players[index];
a041d5d8 435 // Is it me ? In this case no need to bother with focus
751d7ca4
BA
436 if (
437 this.st.user.sid == player.sid ||
438 (!!player.name && this.st.user.id == player.id)
439 ) {
0a17525e
BA
440 // Still have to check for name (because of potential multi-accounts
441 // on same browser, although this should be rare...)
442 return (!this.st.user.name || this.st.user.name == player.name);
751d7ca4 443 }
29ced362 444 // Try to find a match in people:
6808d7a1 445 return (
1611a25f 446 (
a041d5d8 447 !!player.sid &&
7ebc0408
BA
448 Object.keys(this.people).some(sid => {
449 return (
450 sid == player.sid &&
451 Object.values(this.people[sid].tmpIds).some(v => v.focus)
452 );
453 })
1611a25f
BA
454 )
455 ||
456 (
751d7ca4 457 player.id > 0 &&
7ebc0408
BA
458 Object.values(this.people).some(p => {
459 return (
460 p.id == player.id &&
461 Object.values(p.tmpIds).some(v => v.focus)
462 );
463 })
1611a25f 464 )
6808d7a1 465 );
050ae3b5 466 },
c292ebb2
BA
467 getOppsid: function() {
468 let oppsid = this.game.oppsid;
469 if (!oppsid) {
470 oppsid = Object.keys(this.people).find(
471 sid => this.people[sid].id == this.game.oppid
472 );
473 }
474 // oppsid is useful only if opponent is online:
475 if (!!oppsid && !!this.people[oppsid]) return oppsid;
476 return null;
477 },
1ef65040
BA
478 // NOTE: action if provided is always a closing action
479 toggleChat: function(action) {
480 if (!action && document.getElementById("modalChat").checked)
8be8238c
BA
481 // Entering chat
482 document.getElementById("inputChat").focus();
1ef65040
BA
483 else {
484 document.getElementById("chatBtn").classList.remove("somethingnew");
485 if (!!this.game.mycolor) {
486 // Update "chatRead" variable either on server or locally
487 if (this.game.type == "corr")
488 this.updateCorrGame({ chatRead: this.game.mycolor });
489 else if (this.game.type == "live")
490 GameStorage.update(this.gameRef, { chatRead: true });
491 }
492 }
db1f1f9a
BA
493 },
494 processChat: function(chat) {
495 this.send("newchat", { data: chat });
496 // NOTE: anonymous chats in corr games are not stored on server (TODO?)
1ef65040
BA
497 if (!!this.game.mycolor) {
498 if (this.game.type == "corr")
499 this.updateCorrGame({ chat: chat });
500 else {
501 // Live game
502 chat.added = Date.now();
503 GameStorage.update(this.gameRef, { chat: chat });
504 }
1a021529 505 }
db1f1f9a
BA
506 },
507 clearChat: function() {
1a021529
BA
508 if (!!this.game.mycolor) {
509 if (this.game.type == "corr") {
e57c4de4
BA
510 ajax(
511 "/chats",
512 "DELETE",
513 { data: { gid: this.game.id } }
514 );
1a021529
BA
515 } else {
516 // Live game
517 GameStorage.update(this.gameRef, { delchat: true });
e57c4de4 518 }
dcff8e82 519 this.$set(this.game, "chats", []);
db1f1f9a
BA
520 }
521 },
584f81b9 522 getGameType: function(game) {
a8ed3182 523 if (!!game.id.toString().match(/^i/)) return "import";
584f81b9
BA
524 return game.cadence.indexOf("d") >= 0 ? "corr" : "live";
525 },
cafe0166
BA
526 // Notify something after a new move (to opponent and me on MyGames page)
527 notifyMyGames: function(thing, data) {
528 this.send(
529 "notify" + thing,
530 {
531 data: data,
532 targets: this.game.players.map(p => {
0234201f 533 return { sid: p.sid, id: p.id };
cafe0166
BA
534 })
535 }
536 );
1611a25f 537 },
feaf1bf7
BA
538 showNextGame: function() {
539 // Did I play in current game? If not, add it to nextIds list
540 if (this.game.score == "*" && this.vr.turn == this.game.mycolor)
541 this.nextIds.unshift(this.game.id);
542 const nextGid = this.nextIds.pop();
543 this.$router.push(
544 "/game/" + nextGid + "/?next=" + JSON.stringify(this.nextIds));
545 },
cdb34c93 546 socketMessageListener: function(msg) {
6808d7a1 547 if (!this.conn) return;
a6088c90 548 const data = JSON.parse(msg.data);
6808d7a1 549 switch (data.code) {
5f131484 550 case "pollclients":
7ebc0408
BA
551 // TODO: shuffling and random filtering on server,
552 // if the room is really crowded.
553 Object.keys(data.sockIds).forEach(sid => {
a041d5d8 554 if (sid != this.st.user.sid) {
6808d7a1 555 this.send("askidentity", { target: sid });
0d5335de 556 this.people[sid] = { tmpIds: data.sockIds[sid] };
3d65195b
BA
557 }
558 else {
0d5335de
BA
559 // Complete my tmpIds:
560 Object.assign(this.people[sid].tmpIds, data.sockIds[sid]);
a041d5d8 561 }
5f131484
BA
562 });
563 break;
71468011 564 case "connect":
7ebc0408
BA
565 if (!this.people[data.from[0]]) {
566 // focus depends on the tmpId (e.g. tab)
567 this.$set(
568 this.people,
569 data.from[0],
570 {
571 tmpIds: {
572 [data.from[1]]: { focus: true }
573 }
574 }
575 );
49dad261
BA
576 // For self multi-connects tests:
577 this.newConnect[data.from[0]] = true;
7ebc0408
BA
578 this.send("askidentity", { target: data.from[0] });
579 } else {
580 this.people[data.from[0]].tmpIds[data.from[1]] = { focus: true };
a2bd587a 581 this.$forceUpdate(); //TODO: shouldn't be required
51d87b52 582 }
71468011
BA
583 break;
584 case "disconnect":
7ebc0408
BA
585 if (!this.people[data.from[0]]) return;
586 delete this.people[data.from[0]].tmpIds[data.from[1]];
587 if (Object.keys(this.people[data.from[0]].tmpIds).length == 0)
588 this.$delete(this.people, data.from[0]);
589 else this.$forceUpdate(); //TODO: shouldn't be required
71468011 590 break;
a041d5d8 591 case "getfocus": {
7ebc0408 592 let player = this.people[data.from[0]];
a041d5d8 593 if (!!player) {
7ebc0408 594 player.tmpIds[data.from[1]].focus = true;
a041d5d8
BA
595 this.$forceUpdate(); //TODO: shouldn't be required
596 }
597 break;
598 }
599 case "losefocus": {
7ebc0408 600 let player = this.people[data.from[0]];
a041d5d8 601 if (!!player) {
7ebc0408 602 player.tmpIds[data.from[1]].focus = false;
a041d5d8
BA
603 this.$forceUpdate(); //TODO: shouldn't be required
604 }
605 break;
606 }
6808d7a1 607 case "askidentity": {
efdfb4c7 608 // Request for identification
51d87b52
BA
609 const me = {
610 // Decompose to avoid revealing email
611 name: this.st.user.name,
612 sid: this.st.user.sid,
6808d7a1 613 id: this.st.user.id
51d87b52 614 };
6808d7a1 615 this.send("identity", { data: me, target: data.from });
5f131484 616 break;
51d87b52 617 }
6808d7a1 618 case "identity": {
71468011 619 const user = data.data;
a041d5d8 620 let player = this.people[user.sid];
7ebc0408 621 // player.tmpIds is already set
a041d5d8
BA
622 player.name = user.name;
623 player.id = user.id;
3d65195b
BA
624 if (this.game.type == "live") {
625 const myGidx =
626 this.game.players.findIndex(p => p.sid == this.st.user.sid);
627 // Sometimes a player name isn't stored yet (TODO: why?)
628 if (
629 myGidx >= 0 &&
630 !this.game.players[1 - myGidx].name &&
631 this.game.players[1 - myGidx].sid == user.sid &&
632 !!user.name
633 ) {
634 this.game.players[1-myGidx].name = user.name;
635 GameStorage.update(
636 this.gameRef,
637 { playerName: { idx: 1 - myGidx, name: user.name } }
638 );
639 }
640 }
a041d5d8 641 this.$forceUpdate(); //TODO: shouldn't be required
f9c36b2d
BA
642 // If I multi-connect, kill current connexion if no mark (I'm older)
643 if (this.newConnect[user.sid]) {
49dad261 644 delete this.newConnect[user.sid];
6808d7a1 645 if (
6808d7a1
BA
646 user.id > 0 &&
647 user.id == this.st.user.id &&
49dad261 648 user.sid != this.st.user.sid
6808d7a1 649 ) {
49dad261
BA
650 this.cleanBeforeDestroy();
651 alert(this.st.tr["New connexion detected: tab now offline"]);
652 break;
51d87b52 653 }
a0c41e7e 654 }
49dad261
BA
655 // Ask potentially missed last state, if opponent and I play
656 if (
657 !this.gotLastate &&
658 !!this.game.mycolor &&
659 this.game.type == "live" &&
49dad261
BA
660 this.game.players.some(p => p.sid == user.sid)
661 ) {
662 this.send("asklastate", { target: user.sid });
663 let counter = 1;
664 this.askLastate = setInterval(
665 () => {
666 // Ask at most 3 times:
667 // if no reply after that there should be a network issue.
668 if (
669 counter < 3 &&
670 !this.gotLastate &&
671 !!this.people[user.sid]
672 ) {
673 this.send("asklastate", { target: user.sid });
674 counter++;
675 } else {
676 clearInterval(this.askLastate);
677 }
678 },
679 1500
680 );
dcff8e82 681 }
a0c41e7e 682 break;
71468011
BA
683 }
684 case "askgame":
1ef65040
BA
685 // Send current (live or import) game,
686 // if not asked by any of the players
6808d7a1 687 if (
1ef65040 688 this.game.type != "corr" &&
6808d7a1
BA
689 this.game.players.every(p => p.sid != data.from[0])
690 ) {
71468011
BA
691 const myGame = {
692 id: this.game.id,
1ef65040 693 // FEN is current position, unused for now
71468011
BA
694 fen: this.game.fen,
695 players: this.game.players,
696 vid: this.game.vid,
697 cadence: this.game.cadence,
f54f4c26 698 score: this.game.score
71468011 699 };
6808d7a1 700 this.send("game", { data: myGame, target: data.from });
71468011
BA
701 }
702 break;
703 case "askfullgame":
e8da204a
BA
704 const gameToSend = Object.keys(this.game)
705 .filter(k =>
706 [
707 "id","fen","players","vid","cadence","fenStart","vname",
3f22c2c3 708 "moves","clocks","score","drawOffer","rematchOffer"
e8da204a
BA
709 ].includes(k))
710 .reduce(
711 (obj, k) => {
712 obj[k] = this.game[k];
713 return obj;
714 },
715 {}
716 );
717 this.send("fullgame", { data: gameToSend, target: data.from });
71468011
BA
718 break;
719 case "fullgame":
c7550017
BA
720 if (!!data.data.empty) {
721 alert(this.st.tr["The game should be in another tab"]);
722 this.$router.go(-1);
723 }
724 else
725 // Callback "roomInit" to poll clients only after game is loaded
726 this.loadVariantThenGame(data.data, this.roomInit);
71468011 727 break;
a0c41e7e 728 case "asklastate":
dcff8e82 729 // Sending informative last state if I played a move or score != "*"
584f81b9 730 // If the game or moves aren't loaded yet, delay the sending:
2c5d7b20 731 // TODO: socket init after game load, so the game is supposedly ready
584f81b9
BA
732 if (!this.game || !this.game.moves) this.lastateAsked = true;
733 else this.sendLastate(data.from);
c6788ecf 734 break;
4f524197
BA
735 // TODO: possible bad scenario: reload page while oppponent sends a
736 // move => get both lastate and newmove, process both, add move twice.
737 // Confirm scenario? Fix?
dcff8e82
BA
738 case "lastate": {
739 // Got opponent infos about last move
740 this.gotLastate = true;
3f22c2c3 741 this.lastate = data.data;
b9ce3d0f
BA
742 if (this.lastate.movesCount - 1 > this.gotMoveIdx)
743 this.gotMoveIdx = this.lastate.movesCount - 1;
3f22c2c3
BA
744 if (this.game.rendered)
745 // Game is rendered (Board component)
746 this.processLastate();
747 // Else: will be processed when game is ready
71468011 748 break;
dcff8e82 749 }
6808d7a1 750 case "newmove": {
a6363ac1
BA
751
752// DEBUG:
753console.log("Receive move");
754console.log(data.data);
755//moveslist not updated when receiving a move? (see in baseGame)
756
dcff8e82
BA
757 const movePlus = data.data;
758 const movesCount = this.game.moves.length;
ad030c7d
BA
759 if (
760 movePlus.index < movesCount ||
761 this.gotMoveIdx >= movePlus.index
762 ) {
763 // Opponent re-send but we already have the move:
764 // (maybe he didn't receive our pingback...)
765 this.send("gotmove", {data: movePlus.index, target: data.from});
d6f08e56
BA
766 }
767 else {
ad030c7d
BA
768 this.gotMoveIdx = movePlus.index;
769 const receiveMyMove = (movePlus.color == this.game.mycolor);
770 const moveColIdx = ["w", "b"].indexOf(movePlus.color);
771 if (!receiveMyMove && !!this.game.mycolor) {
772 // Notify opponent that I got the move:
773 this.send(
774 "gotmove",
775 { data: movePlus.index, target: data.from }
776 );
777 // And myself if I'm elsewhere:
778 if (!this.focus) {
779 notify(
780 "New move",
781 {
782 body:
783 (this.game.players[moveColIdx].name || "@nonymous") +
784 " just played."
785 }
2c5d7b20 786 );
f5768809 787 }
ad030c7d
BA
788 }
789 if (movePlus.cancelDrawOffer) {
790 // Opponent refuses draw
791 this.drawOffer = "";
792 // NOTE for corr games: drawOffer reset by player in turn
793 if (
794 this.game.type == "live" &&
795 !!this.game.mycolor &&
796 !receiveMyMove
797 ) {
798 GameStorage.update(this.gameRef, { drawOffer: "" });
f9c36b2d 799 }
f9c36b2d 800 }
ad030c7d
BA
801 this.$refs["basegame"].play(movePlus.move, "received");
802 // Freeze time while the move is being play
803 // (TODO: a callback would be cleaner here)
804 clearInterval(this.clockUpdate);
805 this.clockUpdate = null;
806 const freezeDuration = ["all", "highlight"].includes(V.ShowMoves)
807 // 250 = length of animation, 500 = delay between sub-moves
808 ? 250 + 750 *
809 (Array.isArray(movePlus.move) ? movePlus.move.length - 1 : 0)
810 // Incomplete information: no move animation
811 : 0;
812 setTimeout(
813 () => {
814 this.game.clocks[moveColIdx] = movePlus.clock;
815 this.processMove(
816 movePlus.move,
817 { receiveMyMove: receiveMyMove }
818 );
819 },
820 freezeDuration
821 );
633959bf 822 }
a6088c90 823 break;
71468011 824 }
f9c36b2d
BA
825 case "gotmove": {
826 this.opponentGotMove = true;
3f22c2c3 827 // Now his clock starts running on my side:
e01e086d 828 const oppIdx = ['w','b'].indexOf(this.vr.turn);
7ebc0408
BA
829 // NOTE: next line to avoid multi-resetClocks when several tabs
830 // on same game, resulting in a faster countdown.
831 if (!!this.clockUpdate) clearInterval(this.clockUpdate);
e01e086d 832 this.re_setClocks();
f9c36b2d
BA
833 break;
834 }
93d1d7a7 835 case "resign":
059228c9
BA
836 const score = (data.data == "b" ? "1-0" : "0-1");
837 const side = (data.data == "w" ? "White" : "Black");
8477e53d 838 this.gameOver(score, side + " surrender");
93d1d7a7 839 break;
93d1d7a7 840 case "abort":
8477e53d 841 this.gameOver("?", "Stop");
93d1d7a7 842 break;
2cc10cdb 843 case "draw":
71468011 844 this.gameOver("1/2", data.data);
2cc10cdb
BA
845 break;
846 case "drawoffer":
41c80bb6
BA
847 // NOTE: observers don't know who offered draw
848 this.drawOffer = "received";
1ef65040 849 if (!!this.game.mycolor && this.game.type == "live") {
f54f4c26
BA
850 GameStorage.update(
851 this.gameRef,
852 { drawOffer: V.GetOppCol(this.game.mycolor) }
853 );
854 }
6d9f4315 855 break;
c292ebb2
BA
856 case "rematchoffer":
857 // NOTE: observers don't know who offered rematch
858 this.rematchOffer = data.data ? "received" : "";
1ef65040 859 if (!!this.game.mycolor && this.game.type == "live") {
f54f4c26
BA
860 GameStorage.update(
861 this.gameRef,
9eccb8aa 862 { rematchOffer: data.data ? V.GetOppCol(this.game.mycolor) : "" }
f54f4c26
BA
863 );
864 }
c292ebb2
BA
865 break;
866 case "newgame": {
867 // A game started, redirect if I'm playing in
868 const gameInfo = data.data;
584f81b9 869 const gameType = this.getGameType(gameInfo);
c292ebb2 870 if (
584f81b9
BA
871 gameType == "live" &&
872 gameInfo.players.some(p => p.sid == this.st.user.sid)
873 ) {
874 this.addAndGotoLiveGame(gameInfo);
875 } else if (
876 gameType == "corr" &&
751d7ca4 877 this.st.user.id > 0 &&
0234201f 878 gameInfo.players.some(p => p.id == this.st.user.id)
c292ebb2
BA
879 ) {
880 this.$router.push("/game/" + gameInfo.id);
881 } else {
f54f4c26 882 this.rematchId = gameInfo.id;
5b18515f
BA
883 document.getElementById("modalRules").checked = false;
884 document.getElementById("modalScore").checked = false;
3ca0ef9e 885 document.getElementById("modalRematch").checked = true;
c292ebb2
BA
886 }
887 break;
888 }
1a021529
BA
889 case "newchat": {
890 let chat = data.data;
891 this.$refs["chatcomp"].newChat(chat);
892 if (this.game.type == "live") {
893 chat.added = Date.now();
1ef65040
BA
894 if (!!this.game.mycolor)
895 GameStorage.update(this.gameRef, { chat: chat });
1a021529 896 }
71468011 897 if (!document.getElementById("modalChat").checked)
2f258c37 898 document.getElementById("chatBtn").classList.add("somethingnew");
a6088c90 899 break;
1a021529 900 }
a6088c90 901 }
cdb34c93 902 },
5aa14a21 903 updateCorrGame: function(obj, callback) {
aae89b49
BA
904 ajax(
905 "/games",
906 "PUT",
907 {
e57c4de4 908 data: {
f54f4c26 909 gid: this.gameRef,
e57c4de4
BA
910 newObj: obj
911 },
912 success: () => {
913 if (!!callback) callback();
914 }
aae89b49
BA
915 }
916 );
917 },
584f81b9 918 sendLastate: function(target) {
3f22c2c3
BA
919 // Send our "last state" informations to opponent
920 const L = this.game.moves.length;
921 const myIdx = ["w", "b"].indexOf(this.game.mycolor);
922 const myLastate = {
923 lastMove:
924 (L > 0 && this.vr.turn != this.game.mycolor)
925 ? this.game.moves[L - 1]
926 : undefined,
927 clock: this.game.clocks[myIdx],
928 // Since we played a move (or abort or resign),
929 // only drawOffer=="sent" is possible
9eccb8aa
BA
930 drawSent: this.drawOffer == "sent" ? true : undefined,
931 rematchSent: this.rematchOffer == "sent" ? true : undefined,
3f22c2c3
BA
932 score: this.game.score != "*" ? this.game.score : undefined,
933 scoreMsg: this.game.score != "*" ? this.game.scoreMsg : undefined,
934 movesCount: L
935 };
936 this.send("lastate", { data: myLastate, target: target });
584f81b9 937 },
760adbce
BA
938 // lastate was received, but maybe game wasn't ready yet:
939 processLastate: function() {
940 const data = this.lastate;
941 this.lastate = undefined; //security...
3f22c2c3 942 if (!!data.score) {
9eccb8aa
BA
943 const oppCol = V.GetOppCol(this.game.mycolor);
944 if (!!data.rematchSent) {
945 if (this.game.rematchOffer != oppCol) {
946 // Opponent sended rematch offer while we were offline:
947 this.rematchOffer = "received";
948 GameStorage.update(
949 this.gameRef,
950 { rematchOffer: oppCol }
951 );
952 }
953 }
954 else {
955 if (this.game.rematchOffer == oppCol) {
956 // Opponent cancelled rematch offer while we were offline:
957 this.rematchOffer = "";
958 GameStorage.update(
959 this.gameRef,
960 { rematchOffer: "" }
961 );
962 }
963 }
964 }
965 else {
966 const L = this.game.moves.length;
967 const oppIdx = 1 - ["w", "b"].indexOf(this.game.mycolor);
968 this.game.clocks[oppIdx] = data.clock;
969 if (data.movesCount > L) {
970 // Just got last move from him
971 this.$refs["basegame"].play(data.lastMove, "received");
972 this.processMove(data.lastMove);
973 } else {
974 if (!!this.clockUpdate) clearInterval(this.clockUpdate);
975 this.re_setClocks();
976 }
977 if (!!data.drawSent) this.drawOffer = "received";
978 if (!!data.score) {
979 this.drawOffer = "";
980 if (this.game.score == "*")
981 this.gameOver(data.score, data.scoreMsg);
982 }
760adbce
BA
983 }
984 },
dcd68c41 985 clickDraw: function() {
1ef65040 986 if (!this.game.mycolor || this.game.type == "import") return;
6808d7a1
BA
987 if (["received", "threerep"].includes(this.drawOffer)) {
988 if (!confirm(this.st.tr["Accept draw?"])) return;
989 const message =
990 this.drawOffer == "received"
991 ? "Mutual agreement"
992 : "Three repetitions";
993 this.send("draw", { data: message });
77c50966 994 this.gameOver("1/2", message);
6808d7a1 995 } else if (this.drawOffer == "") {
e71161fb 996 // No effect if drawOffer == "sent"
9ee2826a 997 if (this.game.mycolor != this.vr.turn) {
6808d7a1 998 alert(this.st.tr["Draw offer only in your turn"]);
6fba6e0c 999 return;
6808d7a1
BA
1000 }
1001 if (!confirm(this.st.tr["Offer draw?"])) return;
760adbce 1002 this.drawOffer = "sent";
71468011 1003 this.send("drawoffer");
aae89b49
BA
1004 if (this.game.type == "live") {
1005 GameStorage.update(
f54f4c26 1006 this.gameRef,
aae89b49
BA
1007 { drawOffer: this.game.mycolor }
1008 );
1009 } else this.updateCorrGame({ drawOffer: this.game.mycolor });
a6088c90
BA
1010 }
1011 },
584f81b9
BA
1012 addAndGotoLiveGame: function(gameInfo, callback) {
1013 const game = Object.assign(
1014 {},
1015 gameInfo,
1016 {
1017 // (other) Game infos: constant
1018 fenStart: gameInfo.fen,
1019 vname: this.game.vname,
1020 created: Date.now(),
1021 // Game state (including FEN): will be updated
1022 moves: [],
1023 clocks: [-1, -1], //-1 = unstarted
978fa11c 1024 chats: [],
584f81b9
BA
1025 score: "*"
1026 }
1027 );
1028 GameStorage.add(game, (err) => {
1029 // No error expected.
1030 if (!err) {
1031 if (this.st.settings.sound)
1032 new Audio("/sounds/newgame.flac").play().catch(() => {});
585d0955 1033 if (!!callback) callback();
584f81b9
BA
1034 this.$router.push("/game/" + gameInfo.id);
1035 }
1036 });
1037 },
c292ebb2 1038 clickRematch: function() {
1ef65040 1039 if (!this.game.mycolor || this.game.type == "import") return;
c292ebb2
BA
1040 if (this.rematchOffer == "received") {
1041 // Start a new game!
1042 let gameInfo = {
1043 id: getRandString(), //ignored if corr
1044 fen: V.GenRandInitFen(this.game.randomness),
b4f2488a 1045 players: [this.game.players[1], this.game.players[0]],
c292ebb2
BA
1046 vid: this.game.vid,
1047 cadence: this.game.cadence
1048 };
584f81b9 1049 const notifyNewGame = () => {
f14572c4 1050 const oppsid = this.getOppsid(); //may be null
584f81b9 1051 this.send("rnewgame", { data: gameInfo, oppsid: oppsid });
f14572c4
BA
1052 // To main Hall if corr game:
1053 if (this.game.type == "corr")
7ebc0408 1054 this.send("newgame", { data: gameInfo, page: "/" });
cafe0166
BA
1055 // Also to MyGames page:
1056 this.notifyMyGames("newgame", gameInfo);
584f81b9
BA
1057 };
1058 if (this.game.type == "live")
1059 this.addAndGotoLiveGame(gameInfo, notifyNewGame);
c292ebb2
BA
1060 else {
1061 // corr game
1062 ajax(
1063 "/games",
1064 "POST",
1065 {
1066 // cid is useful to delete the challenge:
1067 data: { gameInfo: gameInfo },
1068 success: (response) => {
1069 gameInfo.id = response.gameId;
584f81b9 1070 notifyNewGame();
c292ebb2
BA
1071 this.$router.push("/game/" + response.gameId);
1072 }
1073 }
1074 );
1075 }
1076 } else if (this.rematchOffer == "") {
1077 this.rematchOffer = "sent";
1078 this.send("rematchoffer", { data: true });
1079 if (this.game.type == "live") {
1080 GameStorage.update(
f54f4c26 1081 this.gameRef,
c292ebb2
BA
1082 { rematchOffer: this.game.mycolor }
1083 );
1084 } else this.updateCorrGame({ rematchOffer: this.game.mycolor });
1085 } else if (this.rematchOffer == "sent") {
1086 // Toggle rematch offer (on --> off)
1087 this.rematchOffer = "";
1088 this.send("rematchoffer", { data: false });
1089 if (this.game.type == "live") {
1090 GameStorage.update(
f54f4c26 1091 this.gameRef,
c292ebb2
BA
1092 { rematchOffer: '' }
1093 );
1094 } else this.updateCorrGame({ rematchOffer: 'n' });
1095 }
1096 },
7f3484bd 1097 abortGame: function() {
2c5d7b20
BA
1098 if (!this.game.mycolor || !confirm(this.st.tr["Terminate game?"]))
1099 return;
8477e53d 1100 this.gameOver("?", "Stop");
71468011 1101 this.send("abort");
a6088c90 1102 },
6808d7a1 1103 resign: function() {
77c50966 1104 if (!this.game.mycolor || !confirm(this.st.tr["Resign the game?"]))
a6088c90 1105 return;
6808d7a1 1106 this.send("resign", { data: this.game.mycolor });
059228c9
BA
1107 const score = (this.game.mycolor == "w" ? "0-1" : "1-0");
1108 const side = (this.game.mycolor == "w" ? "White" : "Black");
8477e53d 1109 this.gameOver(score, side + " surrender");
a6088c90 1110 },
760adbce 1111 loadGame: function(game, callback) {
1ef65040 1112 const gtype = game.type || this.getGameType(game);
32f6285e
BA
1113 const tc = extractTime(game.cadence);
1114 const myIdx = game.players.findIndex(p => {
751d7ca4
BA
1115 return (
1116 p.sid == this.st.user.sid ||
1117 (!!p.name && p.id == this.st.user.id)
1118 );
32f6285e 1119 });
3d65195b
BA
1120 // Sometimes the name isn't stored yet (TODO: why?)
1121 if (
1122 myIdx >= 0 &&
1123 gtype == "live" &&
1124 !game.players[myIdx].name &&
1125 !!this.st.user.name
1126 ) {
1127 game.players[myIdx].name = this.st.user.name;
1128 GameStorage.update(
1129 game.id,
1130 { playerName: { idx: myIdx, name: this.st.user.name } }
1131 );
1132 }
2c5d7b20
BA
1133 // "mycolor" is undefined for observers
1134 const mycolor = [undefined, "w", "b"][myIdx + 1];
32f6285e 1135 if (gtype == "corr") {
1ef65040
BA
1136 if (mycolor == 'w') game.chatRead = game.chatReadWhite;
1137 else if (mycolor == 'b') game.chatRead = game.chatReadBlack;
3f22c2c3 1138 // NOTE: clocks in seconds
32f6285e
BA
1139 game.moves.sort((m1, m2) => m1.idx - m2.idx); //in case of
1140 game.clocks = [tc.mainTime, tc.mainTime];
1141 const L = game.moves.length;
1142 if (game.score == "*") {
3f22c2c3
BA
1143 // Adjust clocks
1144 if (L >= 2) {
1145 game.clocks[L % 2] -=
1146 (Date.now() - game.moves[L-1].played) / 1000;
1147 }
66d03f23 1148 }
32f6285e
BA
1149 // Now that we used idx and played, re-format moves as for live games
1150 game.moves = game.moves.map(m => m.squares);
1151 }
1ef65040 1152 else if (gtype == "live") {
3f22c2c3
BA
1153 if (game.clocks[0] < 0) {
1154 // Game is unstarted. clock is ignored until move 2
1155 game.clocks = [tc.mainTime, tc.mainTime];
1156 if (myIdx >= 0) {
1157 // I play in this live game
3d65195b
BA
1158 GameStorage.update(
1159 game.id,
1160 { clocks: game.clocks }
1161 );
3f22c2c3
BA
1162 }
1163 } else {
1164 if (!!game.initime)
1165 // It's my turn: clocks not updated yet
1166 game.clocks[myIdx] -= (Date.now() - game.initime) / 1000;
77c50966 1167 }
32f6285e 1168 }
1ef65040
BA
1169 else
1170 // gtype == "import"
1171 game.clocks = [tc.mainTime, tc.mainTime];
1172 // Live games before 26/03/2020 don't have chat history:
1173 if (!game.chats) game.chats = []; //TODO: remove line
1174 // Sort chat messages from newest to oldest
1175 game.chats.sort((c1, c2) => c2.added - c1.added);
1176 if (
1177 myIdx >= 0 &&
1178 game.chats.length > 0 &&
1179 (!game.chatRead || game.chatRead < game.chats[0].added)
1180 ) {
1181 // A chat message arrived since my last reading:
1182 document.getElementById("chatBtn").classList.add("somethingnew");
1183 }
32f6285e
BA
1184 // TODO: merge next 2 "if" conditions
1185 if (!!game.drawOffer) {
1186 if (game.drawOffer == "t")
1187 // Three repetitions
1188 this.drawOffer = "threerep";
1189 else {
1190 // Draw offered by any of the players:
1191 if (myIdx < 0) this.drawOffer = "received";
c292ebb2
BA
1192 else {
1193 // I play in this game:
1194 if (
32f6285e
BA
1195 (game.drawOffer == "w" && myIdx == 0) ||
1196 (game.drawOffer == "b" && myIdx == 1)
c292ebb2 1197 )
32f6285e
BA
1198 this.drawOffer = "sent";
1199 else this.drawOffer = "received";
c292ebb2
BA
1200 }
1201 }
32f6285e
BA
1202 }
1203 if (!!game.rematchOffer) {
1204 if (myIdx < 0) this.rematchOffer = "received";
1205 else {
1206 // I play in this game:
1207 if (
1208 (game.rematchOffer == "w" && myIdx == 0) ||
1209 (game.rematchOffer == "b" && myIdx == 1)
9eccb8aa 1210 ) {
32f6285e 1211 this.rematchOffer = "sent";
9eccb8aa 1212 }
32f6285e 1213 else this.rematchOffer = "received";
5aa14a21 1214 }
32f6285e
BA
1215 }
1216 this.repeat = {}; //reset: scan past moves' FEN:
1217 let repIdx = 0;
1ef65040 1218 this.vr = new V(game.fenStart);
32f6285e
BA
1219 let curTurn = "n";
1220 game.moves.forEach(m => {
1ef65040
BA
1221 playMove(m, this.vr);
1222 const fenIdx = this.vr.getFenForRepeat();
32f6285e
BA
1223 this.repeat[fenIdx] = this.repeat[fenIdx]
1224 ? this.repeat[fenIdx] + 1
1225 : 1;
1226 });
1ef65040
BA
1227 // Imported games don't have current FEN
1228 if (!game.fen) game.fen = this.vr.getFen();
32f6285e
BA
1229 if (this.repeat[repIdx] >= 3) this.drawOffer = "threerep";
1230 this.game = Object.assign(
1231 // NOTE: assign mycolor here, since BaseGame could also be VS computer
1232 {
1233 type: gtype,
1234 increment: tc.increment,
1235 mycolor: mycolor,
1236 // opponent sid not strictly required (or available), but easier
1237 // at least oppsid or oppid is available anyway:
1238 oppsid: myIdx < 0 ? undefined : game.players[1 - myIdx].sid,
1239 oppid: myIdx < 0 ? undefined : game.players[1 - myIdx].id
1240 },
1241 game
1242 );
1243 this.$refs["basegame"].re_setVariables(this.game);
ad030c7d
BA
1244 // Initial loading:
1245 this.gotMoveIdx = game.moves.length - 1;
1246 // If we arrive here after 'nextGame' action, the board might be hidden
1247 let boardDiv = document.querySelector(".game");
1248 if (!!boardDiv && boardDiv.style.visibility == "hidden")
1249 boardDiv.style.visibility = "visible";
32f6285e
BA
1250 this.re_setClocks();
1251 this.$nextTick(() => {
1252 this.game.rendered = true;
1253 // Did lastate arrive before game was rendered?
b9ce3d0f 1254 if (!!this.lastate) this.processLastate();
32f6285e
BA
1255 });
1256 if (this.lastateAsked) {
1257 this.lastateAsked = false;
1258 this.sendLastate(game.oppsid);
1259 }
32f6285e
BA
1260 if (!!callback) callback();
1261 },
f54f4c26
BA
1262 loadVariantThenGame: async function(game, callback) {
1263 await import("@/variants/" + game.vname + ".js")
1264 .then((vModule) => {
1265 window.V = vModule[game.vname + "Rules"];
1266 this.loadGame(game, callback);
1267 });
26d8a01a
BA
1268 // (AJAX) Request to get rules content (plain text, HTML)
1269 this.rulesContent =
1270 require(
1271 "raw-loader!@/translations/rules/" +
1272 game.vname + "/" +
1273 this.st.lang + ".pug"
1274 )
1275 // Next two lines fix a weird issue after last update (2019-11)
1276 .replace(/\\n/g, " ")
1277 .replace(/\\"/g, '"')
1278 .replace('module.exports = "', "")
1279 .replace(/"$/, "")
1280 .replace(/(fen:)([^:]*):/g, replaceByDiag);
f54f4c26
BA
1281 },
1282 // 3 cases for loading a game:
1283 // - from indexedDB (running or completed live game I play)
1284 // - from server (one correspondance game I play[ed] or not)
1285 // - from remote peer (one live game I don't play, finished or not)
1286 fetchGame: function(callback) {
1287 if (Number.isInteger(this.gameRef) || !isNaN(parseInt(this.gameRef))) {
1288 // corr games identifiers are integers
1289 ajax(
1290 "/games",
1291 "GET",
1292 {
1293 data: { gid: this.gameRef },
1294 success: (res) => {
1295 res.game.moves.forEach(m => {
1296 m.squares = JSON.parse(m.squares);
1297 });
1298 callback(res.game);
e57c4de4 1299 }
f54f4c26
BA
1300 }
1301 );
5f918a27 1302 }
1ef65040 1303 else if (!!this.gameRef.match(/^i/))
5f918a27
BA
1304 // Game import (maybe remote)
1305 ImportgameStorage.get(this.gameRef, callback);
1306 else
1307 // Local live game (or remote)
f54f4c26 1308 GameStorage.get(this.gameRef, callback);
a6088c90 1309 },
9ef63965 1310 re_setClocks: function() {
3f22c2c3 1311 this.virtualClocks = this.game.clocks.map(s => ppt(s).split(':'));
dcff8e82 1312 if (this.game.moves.length < 2 || this.game.score != "*") {
9ef63965 1313 // 1st move not completed yet, or game over: freeze time
9ef63965
BA
1314 return;
1315 }
1316 const currentTurn = this.vr.turn;
8477e53d 1317 const currentMovesCount = this.game.moves.length;
6808d7a1 1318 const colorIdx = ["w", "b"].indexOf(currentTurn);
e01e086d
BA
1319 this.clockUpdate = setInterval(
1320 () => {
1321 if (
3f22c2c3 1322 this.game.clocks[colorIdx] < 0 ||
e01e086d
BA
1323 this.game.moves.length > currentMovesCount ||
1324 this.game.score != "*"
1325 ) {
1326 clearInterval(this.clockUpdate);
7ebc0408 1327 this.clockUpdate = null;
3f22c2c3 1328 if (this.game.clocks[colorIdx] < 0)
e01e086d
BA
1329 this.gameOver(
1330 currentTurn == "w" ? "0-1" : "1-0",
1331 "Time"
1332 );
3f22c2c3 1333 } else {
e01e086d
BA
1334 this.$set(
1335 this.virtualClocks,
1336 colorIdx,
3f22c2c3 1337 ppt(Math.max(0, --this.game.clocks[colorIdx])).split(':')
6808d7a1 1338 );
3f22c2c3 1339 }
e01e086d
BA
1340 },
1341 1000
1342 );
9ef63965 1343 },
57eb158f 1344 // Update variables and storage after a move:
e71161fb 1345 processMove: function(move, data) {
1ef65040
BA
1346 if (this.game.type == "import")
1347 // Shouldn't receive any messages in this mode:
1348 return;
e5c1d0fb 1349 if (!data) data = {};
e71161fb 1350 const moveCol = this.vr.turn;
8f16069a
BA
1351 const colorIdx = ["w", "b"].indexOf(moveCol);
1352 const nextIdx = 1 - colorIdx;
e71161fb 1353 const doProcessMove = () => {
dcff8e82 1354 const origMovescount = this.game.moves.length;
3f22c2c3
BA
1355 // The move is (about to be) played: stop clock
1356 clearInterval(this.clockUpdate);
7ebc0408 1357 this.clockUpdate = null;
f9c36b2d 1358 if (moveCol == this.game.mycolor && !data.receiveMyMove) {
e71161fb
BA
1359 if (this.drawOffer == "received")
1360 // I refuse draw
1361 this.drawOffer = "";
dcff8e82 1362 if (this.game.type == "live" && origMovescount >= 2) {
3f22c2c3
BA
1363 this.game.clocks[colorIdx] += this.game.increment;
1364 // For a correct display in casqe of disconnected opponent:
1365 this.$set(
1366 this.virtualClocks,
1367 colorIdx,
1368 ppt(this.game.clocks[colorIdx]).split(':')
1369 );
1370 GameStorage.update(this.gameRef, {
1371 // It's not my turn anymore:
1372 initime: null
1373 });
e71161fb 1374 }
dce792f6 1375 }
dcff8e82 1376 // Update current game object:
e71161fb 1377 playMove(move, this.vr);
f54f4c26
BA
1378 if (!data.score)
1379 // Received move, score is computed in BaseGame, but maybe not yet.
1380 // ==> Compute it here, although this is redundant (TODO)
1381 data.score = this.vr.getCurrentScore();
1382 if (data.score != "*") this.gameOver(data.score);
dcff8e82 1383 this.game.moves.push(move);
e71161fb 1384 this.game.fen = this.vr.getFen();
3f22c2c3 1385 if (this.game.type == "corr") {
8be8238c 1386 // In corr games, just reset clock to mainTime:
e01e086d
BA
1387 this.game.clocks[colorIdx] = extractTime(this.game.cadence).mainTime;
1388 }
e71161fb 1389 // If repetition detected, consider that a draw offer was received:
f9c36b2d 1390 const fenObj = this.vr.getFenForRepeat();
e01e086d
BA
1391 this.repeat[fenObj] =
1392 !!this.repeat[fenObj]
1393 ? this.repeat[fenObj] + 1
1394 : 1;
f9c36b2d 1395 if (this.repeat[fenObj] >= 3) this.drawOffer = "threerep";
e71161fb 1396 else if (this.drawOffer == "threerep") this.drawOffer = "";
dcff8e82
BA
1397 if (!!this.game.mycolor && !data.receiveMyMove) {
1398 // NOTE: 'var' to see that variable outside this block
1399 var filtered_move = getFilteredMove(move);
1400 }
cafe0166
BA
1401 if (moveCol == this.game.mycolor && !data.receiveMyMove) {
1402 // Notify turn on MyGames page:
1403 this.notifyMyGames(
1404 "turn",
1405 {
f54f4c26 1406 gid: this.gameRef,
cafe0166
BA
1407 turn: this.vr.turn
1408 }
1409 );
1410 }
aae89b49
BA
1411 // Since corr games are stored at only one location, update should be
1412 // done only by one player for each move:
3f22c2c3
BA
1413 if (
1414 this.game.type == "live" &&
1415 !!this.game.mycolor &&
1416 moveCol != this.game.mycolor &&
1417 this.game.moves.length >= 2
1418 ) {
1419 // Receive a move: update initime
1420 this.game.initime = Date.now();
1421 GameStorage.update(this.gameRef, {
1422 // It's my turn now!
1423 initime: this.game.initime
1424 });
1425 }
e71161fb 1426 if (
f9c36b2d
BA
1427 !!this.game.mycolor &&
1428 !data.receiveMyMove &&
e71161fb
BA
1429 (this.game.type == "live" || moveCol == this.game.mycolor)
1430 ) {
1431 let drawCode = "";
1432 switch (this.drawOffer) {
1433 case "threerep":
1434 drawCode = "t";
1435 break;
1436 case "sent":
1437 drawCode = this.game.mycolor;
1438 break;
1439 case "received":
1440 drawCode = V.GetOppCol(this.game.mycolor);
1441 break;
1442 }
1443 if (this.game.type == "corr") {
aae89b49
BA
1444 // corr: only move, fen and score
1445 this.updateCorrGame({
e71161fb
BA
1446 fen: this.game.fen,
1447 move: {
1448 squares: filtered_move,
dcff8e82 1449 idx: origMovescount
e71161fb
BA
1450 },
1451 // Code "n" for "None" to force reset (otherwise it's ignored)
1452 drawOffer: drawCode || "n"
1453 });
1454 }
57eb158f
BA
1455 else {
1456 const updateStorage = () => {
f54f4c26 1457 GameStorage.update(this.gameRef, {
57eb158f
BA
1458 fen: this.game.fen,
1459 move: filtered_move,
1460 moveIdx: origMovescount,
1461 clocks: this.game.clocks,
57eb158f
BA
1462 drawOffer: drawCode
1463 });
1464 };
1465 // The active tab can update storage immediately
f5768809 1466 if (this.focus) updateStorage();
57eb158f
BA
1467 // Small random delay otherwise
1468 else setTimeout(updateStorage, 500 + 1000 * Math.random());
e71161fb 1469 }
e69f159d 1470 }
dcff8e82
BA
1471 // Send move ("newmove" event) to people in the room (if our turn)
1472 if (moveCol == this.game.mycolor && !data.receiveMyMove) {
e01e086d 1473 let sendMove = {
dcff8e82
BA
1474 move: filtered_move,
1475 index: origMovescount,
2c5d7b20
BA
1476 // color is required to check if this is my move
1477 // (if several tabs opened)
dcff8e82 1478 color: moveCol,
dcff8e82
BA
1479 cancelDrawOffer: this.drawOffer == ""
1480 };
e01e086d
BA
1481 if (this.game.type == "live")
1482 sendMove["clock"] = this.game.clocks[colorIdx];
8f16069a 1483 // (Live) Clocks will re-start when the opponent pingback arrive
dcff8e82
BA
1484 this.opponentGotMove = false;
1485 this.send("newmove", {data: sendMove});
1486 // If the opponent doesn't reply gotmove soon enough, re-send move:
ad030c7d 1487 // Do this at most 2 times, because more would mean network issues,
e01e086d
BA
1488 // opponent would then be expected to disconnect/reconnect.
1489 let counter = 1;
1490 const currentUrl = document.location.href;
aae89b49 1491 this.retrySendmove = setInterval(
57eb158f 1492 () => {
e01e086d
BA
1493 if (
1494 counter >= 3 ||
1495 this.opponentGotMove ||
1496 document.location.href != currentUrl //page change
1497 ) {
aae89b49 1498 clearInterval(this.retrySendmove);
57eb158f
BA
1499 return;
1500 }
c292ebb2
BA
1501 const oppsid = this.getOppsid();
1502 if (!oppsid)
57eb158f 1503 // Opponent is disconnected: he'll ask last state
aae89b49 1504 clearInterval(this.retrySendmove);
e01e086d
BA
1505 else {
1506 this.send("newmove", { data: sendMove, target: oppsid });
1507 counter++;
1508 }
57eb158f 1509 },
e01e086d 1510 1500
57eb158f 1511 );
dcff8e82 1512 }
e01e086d
BA
1513 else
1514 // Not my move or I'm an observer: just start other player's clock
1515 this.re_setClocks();
e71161fb 1516 };
f9c36b2d
BA
1517 if (
1518 this.game.type == "corr" &&
ad030c7d 1519 V.CorrConfirm &&
f9c36b2d
BA
1520 moveCol == this.game.mycolor &&
1521 !data.receiveMyMove
1522 ) {
a17ae317 1523 let boardDiv = document.querySelector(".game");
5aa14a21
BA
1524 const afterSetScore = () => {
1525 doProcessMove();
1526 if (this.st.settings.gotonext && this.nextIds.length > 0)
1527 this.showNextGame();
1528 else {
5aa14a21 1529 // The board might have been hidden:
5aa14a21
BA
1530 if (boardDiv.style.visibility == "hidden")
1531 boardDiv.style.visibility = "visible";
3f22c2c3 1532 if (data.score == "*") this.re_setClocks();
e71161fb 1533 }
5aa14a21 1534 };
a17ae317
BA
1535 let el = document.querySelector("#buttonsConfirm > .acceptBtn");
1536 // We may play several moves in a row: in case of, remove listener:
1537 let elClone = el.cloneNode(true);
1538 el.parentNode.replaceChild(elClone, el);
1539 elClone.addEventListener(
1540 "click",
1541 () => {
1542 document.getElementById("modalConfirm").checked = false;
1543 if (!!data.score && data.score != "*")
1544 // Set score first
1545 this.gameOver(data.score, null, afterSetScore);
1546 else afterSetScore();
1547 }
1548 );
1549 // PlayOnBoard is enough, and more appropriate for Synchrone Chess
12d38d0f
BA
1550 const arMove = (Array.isArray(move) ? move : [move]);
1551 for (let i = 0; i < arMove.length; i++)
1552 V.PlayOnBoard(this.vr.board, arMove[i]);
a17ae317 1553 const position = this.vr.getBaseFen();
12d38d0f
BA
1554 for (let i = arMove.length - 1; i >= 0; i--)
1555 V.UndoOnBoard(this.vr.board, arMove[i]);
5aa14a21 1556 if (["all","byrow"].includes(V.ShowMoves)) {
5aa14a21
BA
1557 this.curDiag = getDiagram({
1558 position: position,
1559 orientation: V.CanFlip ? this.game.mycolor : "w"
1560 });
f3fe29d8
BA
1561 document.querySelector("#confirmDiv > .card").style.width =
1562 boardDiv.offsetWidth + "px";
ad030c7d
BA
1563 }
1564 else {
5aa14a21 1565 // Incomplete information: just ask confirmation
a17ae317 1566 // Hide the board, because otherwise it could reveal infos
5aa14a21 1567 boardDiv.style.visibility = "hidden";
a17ae317 1568 this.moveNotation = getFullNotation(move);
5aa14a21 1569 }
a17ae317 1570 document.getElementById("modalConfirm").checked = true;
6d68309a 1571 }
aae89b49 1572 else {
5aa14a21 1573 // Normal situation
5aa14a21 1574 if (!!data.score && data.score != "*")
e01e086d
BA
1575 this.gameOver(data.score, null, doProcessMove);
1576 else doProcessMove();
aae89b49 1577 }
b4fb1612 1578 },
5b4de147 1579 cancelMove: function() {
a17ae317
BA
1580 let boardDiv = document.querySelector(".game");
1581 if (boardDiv.style.visibility == "hidden")
1582 boardDiv.style.visibility = "visible";
5b4de147
BA
1583 document.getElementById("modalConfirm").checked = false;
1584 this.$refs["basegame"].cancelLastMove();
1585 },
5aa14a21
BA
1586 // In corr games, callback to change page only after score is set:
1587 gameOver: function(score, scoreMsg, callback) {
430a2038 1588 this.game.score = score;
5aa14a21 1589 if (!scoreMsg) scoreMsg = getScoreMessage(score);
a17ae317 1590 this.game.scoreMsg = scoreMsg;
5b18515f 1591 document.getElementById("modalRules").checked = false;
3ca0ef9e
BA
1592 // Display result in a un-missable way:
1593 document.getElementById("modalScore").checked = true;
5aa14a21 1594 this.$set(this.game, "scoreMsg", scoreMsg);
ab6f48ea 1595 const myIdx = this.game.players.findIndex(p => {
751d7ca4
BA
1596 return (
1597 p.sid == this.st.user.sid ||
1598 (!!p.name && p.id == this.st.user.id)
1599 );
ab6f48ea 1600 });
6808d7a1 1601 if (myIdx >= 0) {
8477e53d 1602 // OK, I play in this game
aae89b49 1603 const scoreObj = {
6808d7a1
BA
1604 score: score,
1605 scoreMsg: scoreMsg
aae89b49 1606 };
5aa14a21 1607 if (this.game.type == "live") {
f54f4c26 1608 GameStorage.update(this.gameRef, scoreObj);
f5768809
BA
1609 // Notify myself locally if I'm elsewhere:
1610 if (!this.focus) {
1611 notify(
1612 "Game over",
1613 { body: score + " : " + scoreMsg }
1614 );
1615 }
5aa14a21
BA
1616 if (!!callback) callback();
1617 }
1618 else this.updateCorrGame(scoreObj, callback);
2c5d7b20
BA
1619 // Notify the score to main Hall.
1620 // TODO: only one player (currently double send)
6808d7a1 1621 this.send("result", { gid: this.game.id, score: score });
cafe0166
BA
1622 // Also to MyGames page (TODO: doubled as well...)
1623 this.notifyMyGames(
1624 "score",
1625 {
f54f4c26 1626 gid: this.gameRef,
cafe0166
BA
1627 score: score
1628 }
1629 );
dcd68c41 1630 }
5aa14a21 1631 else if (!!callback) callback();
6808d7a1
BA
1632 }
1633 }
a6088c90
BA
1634};
1635</script>
7e1a1fe9 1636
41c80bb6 1637<style lang="sass" scoped>
3ca0ef9e 1638#scoreDiv > .card, #rematchDiv > .card
a06fc4ba 1639 padding: 10px 0
c292ebb2
BA
1640 max-width: 430px
1641
07052665
BA
1642#rulesDiv > .card
1643 padding: 5px 0
26d8a01a 1644 max-width: 50%
07052665 1645 max-height: 100%
26d8a01a
BA
1646 @media screen and (max-width: 1500px)
1647 max-width: 67%
07052665
BA
1648 @media screen and (max-width: 1024px)
1649 max-width: 85%
1650 @media screen and (max-width: 767px)
1651 max-width: 100%
1652
af34341d 1653p.score-section
a06fc4ba 1654 margin: 0
af34341d
BA
1655 font-size: 1.3em
1656 span.score
1657 font-weight: bold
3ca0ef9e 1658
72ccbd67 1659.connected
050ae3b5 1660 background-color: lightgreen
72ccbd67 1661
ed06d9e9
BA
1662#participants
1663 margin-left: 5px
1664
1665.anonymous
1666 color: grey
1667 font-style: italic
1668
ec905cbc
BA
1669#playersInfo > p
1670 margin: 0
1671
430a2038
BA
1672@media screen and (max-width: 767px)
1673 .game
1674 width: 100%
72ccbd67 1675
430a2038 1676#actions
cf94b843 1677 display: inline-block
1d6d7b1d 1678 margin: 0
feaf1bf7
BA
1679
1680button
1681 display: inline-block
1682 margin: 0
1683 display: inline-flex
1684 img
54ec15eb 1685 height: 22px
feaf1bf7
BA
1686 display: flex
1687 @media screen and (max-width: 767px)
1688 height: 18px
a1c48034 1689
07052665
BA
1690#aboveBoard
1691 text-align: center
050ae3b5 1692
80b38d46
BA
1693.user-bio
1694 display: inline
1695 font-size: 1.5rem
1696 @media screen and (max-width: 767px)
1697 font-size: 1.2rem
1698 padding: 0 3px
1699
2f258c37
BA
1700.variant-cadence
1701 padding-right: 10px
1702
1703.variant-name
8c5f5390 1704 font-weight: bold
77c50966 1705 padding-right: 10px
77c50966 1706
feaf1bf7
BA
1707span#nextGame
1708 background-color: #edda99
1709 cursor: pointer
1710 display: inline-block
1711 margin-right: 10px
1712
07052665
BA
1713span.separator
1714 display: inline-block
1715 margin: 0
1716 padding: 0
1717 width: 10px
1718
57eb158f 1719span.time
050ae3b5 1720 font-size: 2rem
847ba842
BA
1721 @media screen and (max-width: 767px)
1722 font-size: 1.5rem
050ae3b5 1723 display: inline-block
57eb158f
BA
1724 .time-left
1725 margin-left: 10px
1726 .time-right
1727 margin-left: 5px
1728 .time-separator
1729 margin-left: 5px
1730 position: relative
1731 top: -1px
1732
1733span.yourturn
1734 color: #831B1B
1735 .time-separator
1736 animation: blink-animation 2s steps(3, start) infinite
1737@keyframes blink-animation
1738 to
1739 visibility: hidden
050ae3b5
BA
1740
1741.split-names
1742 display: inline-block
1743 margin: 0 15px
1744
5b4de147 1745#chatWrap > .card
a1c48034 1746 padding-top: 20px
a154d45e 1747 max-width: 767px
5b4de147
BA
1748 border: none
1749
1750#confirmDiv > .card
1751 max-width: 767px
1752 max-height: 100%
cf94b843 1753
dcd68c41
BA
1754.draw-sent, .draw-sent:hover
1755 background-color: lightyellow
1756
1757.draw-received, .draw-received:hover
5b3d4006 1758 background-color: #73C6B6
dcd68c41
BA
1759
1760.draw-threerep, .draw-threerep:hover
659a9bd2 1761 background-color: #D2B4DE
2f258c37 1762
c292ebb2
BA
1763.rematch-sent, .rematch-sent:hover
1764 background-color: lightyellow
1765
1766.rematch-received, .rematch-received:hover
659a9bd2 1767 background-color: #48C9B0
c292ebb2 1768
2f258c37 1769.somethingnew
659a9bd2 1770 background-color: #D2B4DE
5b4de147
BA
1771
1772.diagram
1773 margin: 0 auto
5b4de147
BA
1774 width: 100%
1775
1776#buttonsConfirm
1777 margin: 0
1778 & > button > span
1779 width: 100%
1780 text-align: center
1781
1782button.acceptBtn
1783 background-color: lightgreen
1784button.refuseBtn
1785 background-color: red
07052665 1786
1c15969e
BA
1787a#variantNameInGame
1788 color: var(--card-fore-color)
07052665 1789 text-align: center
07052665 1790 font-weight: bold
1c15969e
BA
1791 font-size: calc(1rem * var(--heading-ratio))
1792 line-height: 1.2
1793 margin: calc(1.5 * var(--universal-margin))
07052665
BA
1794</style>
1795
1796<style lang="sass">
26d8a01a
BA
1797@import "@/styles/_rules.sass"
1798@import "@/styles/_board_squares_img.sass"
7e1a1fe9 1799</style>