Fix mistake in Game.js
[vchess.git] / client / src / views / Game.vue
1 <template lang="pug">
2 main
3 input#modalInfo.modal(type="checkbox")
4 div#infoDiv(
5 role="dialog"
6 data-checkbox="modalInfo"
7 )
8 .card.text-center
9 label.modal-close(for="modalInfo")
10 a(
11 :href="'#/game/' + rematchId"
12 onClick="document.getElementById('modalInfo').checked=false"
13 )
14 | {{ st.tr["Rematch in progress"] }}
15 input#modalChat.modal(
16 type="checkbox"
17 @click="toggleChat()"
18 )
19 div#chatWrap(
20 role="dialog"
21 data-checkbox="modalChat"
22 )
23 .card
24 label.modal-close(for="modalChat")
25 #participants
26 span {{ st.tr["Participant(s):"] }}
27 span(
28 v-for="p in Object.values(people)"
29 v-if="p.focus && !!p.name"
30 )
31 | {{ p.name }}
32 span.anonymous(
33 v-if="Object.values(people).some(p => p.focus && !p.name)"
34 )
35 | + @nonymous
36 Chat(
37 ref="chatcomp"
38 :players="game.players"
39 :pastChats="game.chats"
40 @mychat="processChat"
41 @chatcleared="clearChat"
42 )
43 input#modalConfirm.modal(type="checkbox")
44 div#confirmDiv(role="dialog")
45 .card
46 .diagram(
47 v-if="!!vr && ['all','byrow'].includes(vr.showMoves)"
48 v-html="curDiag"
49 )
50 p.text-center(v-else)
51 span {{ st.tr["Move played:"] + " " }}
52 span.bold {{ moveNotation }}
53 br
54 span {{ st.tr["Are you sure?"] }}
55 .button-group#buttonsConfirm
56 // onClick for acceptBtn: set dynamically
57 button.acceptBtn
58 span {{ st.tr["Validate"] }}
59 button.refuseBtn(@click="cancelMove()")
60 span {{ st.tr["Cancel"] }}
61 .row
62 #aboveBoard.col-sm-12.col-md-9.col-md-offset-3.col-lg-10.col-lg-offset-2
63 span.variant-cadence {{ game.cadence }}
64 span.variant-name {{ game.vname }}
65 span#nextGame(
66 v-if="nextIds.length > 0"
67 @click="showNextGame()"
68 )
69 | {{ st.tr["Next_g"] }}
70 button#chatBtn.tooltip(
71 onClick="window.doClick('modalChat')"
72 aria-label="Chat"
73 )
74 img(src="/images/icons/chat.svg")
75 #actions(v-if="game.score=='*'")
76 button.tooltip(
77 @click="clickDraw()"
78 :class="{['draw-' + drawOffer]: true}"
79 :aria-label="st.tr['Draw']"
80 )
81 img(src="/images/icons/draw.svg")
82 button.tooltip(
83 v-if="!!game.mycolor"
84 @click="abortGame()"
85 :aria-label="st.tr['Abort']"
86 )
87 img(src="/images/icons/abort.svg")
88 button.tooltip(
89 v-if="!!game.mycolor"
90 @click="resign()"
91 :aria-label="st.tr['Resign']"
92 )
93 img(src="/images/icons/resign.svg")
94 button.tooltip(
95 v-else
96 @click="clickRematch()"
97 :class="{['rematch-' + rematchOffer]: true}"
98 :aria-label="st.tr['Rematch']"
99 )
100 img(src="/images/icons/rematch.svg")
101 #playersInfo
102 p
103 span.name(:class="{connected: isConnected(0)}")
104 | {{ game.players[0].name || "@nonymous" }}
105 span.time(
106 v-if="game.score=='*'"
107 :class="{yourturn: !!vr && vr.turn == 'w'}"
108 )
109 span.time-left {{ virtualClocks[0][0] }}
110 span.time-separator(v-if="!!virtualClocks[0][1]") :
111 span.time-right(v-if="!!virtualClocks[0][1]")
112 | {{ virtualClocks[0][1] }}
113 span.split-names -
114 span.name(:class="{connected: isConnected(1)}")
115 | {{ game.players[1].name || "@nonymous" }}
116 span.time(
117 v-if="game.score=='*'"
118 :class="{yourturn: !!vr && vr.turn == 'b'}"
119 )
120 span.time-left {{ virtualClocks[1][0] }}
121 span.time-separator(v-if="!!virtualClocks[1][1]") :
122 span.time-right(v-if="!!virtualClocks[1][1]")
123 | {{ virtualClocks[1][1] }}
124 BaseGame(
125 ref="basegame"
126 :game="game"
127 @newmove="processMove"
128 )
129 </template>
130
131 <script>
132 import BaseGame from "@/components/BaseGame.vue";
133 import Chat from "@/components/Chat.vue";
134 import { store } from "@/store";
135 import { GameStorage } from "@/utils/gameStorage";
136 import { ppt } from "@/utils/datetime";
137 import { ajax } from "@/utils/ajax";
138 import { extractTime } from "@/utils/timeControl";
139 import { getRandString } from "@/utils/alea";
140 import { getScoreMessage } from "@/utils/scoring";
141 import { getFullNotation } from "@/utils/notation";
142 import { getDiagram } from "@/utils/printDiagram";
143 import { processModalClick } from "@/utils/modalClick";
144 import { playMove, getFilteredMove } from "@/utils/playUndo";
145 import { ArrayFun } from "@/utils/array";
146 import params from "@/parameters";
147 export default {
148 name: "my-game",
149 components: {
150 BaseGame,
151 Chat
152 },
153 data: function() {
154 return {
155 st: store.state,
156 gameRef: {
157 // rid = remote (socket) ID
158 id: "",
159 rid: ""
160 },
161 nextIds: [],
162 game: {}, //passed to BaseGame
163 // virtualClocks will be initialized from true game.clocks
164 virtualClocks: [],
165 vr: null, //"variant rules" object initialized from FEN
166 drawOffer: "",
167 rematchId: "",
168 rematchOffer: "",
169 lastateAsked: false,
170 people: {}, //players + observers
171 lastate: undefined, //used if opponent send lastate before game is ready
172 repeat: {}, //detect position repetition
173 curDiag: "", //for corr moves confirmation
174 conn: null,
175 roomInitialized: false,
176 // If newmove has wrong index: ask fullgame again:
177 askGameTime: 0,
178 gameIsLoading: false,
179 // If asklastate got no reply, ask again:
180 gotLastate: false,
181 gotMoveIdx: -1, //last move index received
182 // If newmove got no pingback, send again:
183 opponentGotMove: false,
184 connexionString: "",
185 // Incomplete info games: show move played
186 moveNotation: "",
187 // Intervals from setInterval():
188 askLastate: null,
189 retrySendmove: null,
190 clockUpdate: null,
191 // Related to (killing of) self multi-connects:
192 newConnect: {},
193 killed: {}
194 };
195 },
196 watch: {
197 $route: function(to, from) {
198 if (from.params["id"] != to.params["id"]) {
199 // Change everything:
200 this.cleanBeforeDestroy();
201 let boardDiv = document.querySelector(".game");
202 if (!!boardDiv)
203 // In case of incomplete information variant:
204 boardDiv.style.visibility = "hidden";
205 this.atCreation();
206 } else {
207 // Same game ID
208 this.gameRef.id = to.params["id"];
209 this.gameRef.rid = to.query["rid"];
210 this.nextIds = JSON.parse(this.$route.query["next"] || "[]");
211 this.fetchGame();
212 }
213 }
214 },
215 // NOTE: some redundant code with Hall.vue (mostly related to people array)
216 created: function() {
217 this.atCreation();
218 },
219 mounted: function() {
220 document.addEventListener('visibilitychange', this.visibilityChange);
221 ["chatWrap", "infoDiv"].forEach(eltName => {
222 document.getElementById(eltName)
223 .addEventListener("click", processModalClick);
224 });
225 if ("ontouchstart" in window) {
226 // Disable tooltips on smartphones:
227 document.querySelectorAll("#aboveBoard .tooltip").forEach(elt => {
228 elt.classList.remove("tooltip");
229 });
230 }
231 },
232 beforeDestroy: function() {
233 document.removeEventListener('visibilitychange', this.visibilityChange);
234 this.cleanBeforeDestroy();
235 },
236 methods: {
237 visibilityChange: function() {
238 // TODO: Use document.hidden? https://webplatform.news/issues/2019-03-27
239 this.send(
240 document.visibilityState == "visible"
241 ? "getfocus"
242 : "losefocus"
243 );
244 },
245 atCreation: function() {
246 // 0] (Re)Set variables
247 this.gameRef.id = this.$route.params["id"];
248 // rid = remote ID to find an observed live game,
249 // next = next corr games IDs to navigate faster
250 // (Both might be undefined)
251 this.gameRef.rid = this.$route.query["rid"];
252 this.nextIds = JSON.parse(this.$route.query["next"] || "[]");
253 // Always add myself to players' list
254 const my = this.st.user;
255 this.$set(
256 this.people,
257 my.sid,
258 {
259 id: my.id,
260 name: my.name,
261 focus: true
262 }
263 );
264 this.game = {
265 players: [{ name: "" }, { name: "" }],
266 chats: [],
267 rendered: false
268 };
269 let chatComp = this.$refs["chatcomp"];
270 if (!!chatComp) chatComp.chats = [];
271 this.virtualClocks = [[0,0], [0,0]];
272 this.vr = null;
273 this.drawOffer = "";
274 this.lastateAsked = false;
275 this.rematchOffer = "";
276 this.lastate = undefined;
277 this.roomInitialized = false;
278 this.askGameTime = 0;
279 this.gameIsLoading = false;
280 this.gotLastate = false;
281 this.gotMoveIdx = -1;
282 this.opponentGotMove = false;
283 this.askLastate = null;
284 this.retrySendmove = null;
285 this.clockUpdate = null;
286 this.newConnect = {};
287 this.killed = {};
288 // 1] Initialize connection
289 this.connexionString =
290 params.socketUrl +
291 "/?sid=" +
292 this.st.user.sid +
293 "&id=" +
294 this.st.user.id +
295 "&tmpId=" +
296 getRandString() +
297 "&page=" +
298 // Discard potential "/?next=[...]" for page indication:
299 encodeURIComponent(this.$route.path.match(/\/game\/[a-zA-Z0-9]+/)[0]);
300 this.conn = new WebSocket(this.connexionString);
301 this.conn.onmessage = this.socketMessageListener;
302 this.conn.onclose = this.socketCloseListener;
303 // Socket init required before loading remote game:
304 const socketInit = callback => {
305 if (!!this.conn && this.conn.readyState == 1)
306 // 1 == OPEN state
307 callback();
308 else
309 // Socket not ready yet (initial loading)
310 // NOTE: it's important to call callback without arguments,
311 // otherwise first arg is Websocket object and fetchGame fails.
312 this.conn.onopen = () => callback();
313 };
314 if (!this.gameRef.rid)
315 // Game stored locally or on server
316 this.fetchGame(null, () => socketInit(this.roomInit));
317 else
318 // Game stored remotely: need socket to retrieve it
319 // NOTE: the callback "roomInit" will be lost, so we don't provide it.
320 // --> It will be given when receiving "fullgame" socket event.
321 socketInit(this.fetchGame);
322 },
323 cleanBeforeDestroy: function() {
324 if (!!this.askLastate)
325 clearInterval(this.askLastate);
326 if (!!this.retrySendmove)
327 clearInterval(this.retrySendmove);
328 if (!!this.clockUpdate)
329 clearInterval(this.clockUpdate);
330 this.send("disconnect");
331 },
332 roomInit: function() {
333 if (!this.roomInitialized) {
334 // Notify the room only now that I connected, because
335 // messages might be lost otherwise (if game loading is slow)
336 this.send("connect");
337 this.send("pollclients");
338 // We may ask fullgame several times if some moves are lost,
339 // but room should be init only once:
340 this.roomInitialized = true;
341 }
342 },
343 send: function(code, obj) {
344 if (!!this.conn)
345 this.conn.send(JSON.stringify(Object.assign({ code: code }, obj)));
346 },
347 isConnected: function(index) {
348 const player = this.game.players[index];
349 // Is it me ? In this case no need to bother with focus
350 if (this.st.user.sid == player.sid || this.st.user.id == player.id)
351 // Still have to check for name (because of potential multi-accounts
352 // on same browser, although this should be rare...)
353 return (!this.st.user.name || this.st.user.name == player.name);
354 // Try to find a match in people:
355 return (
356 (
357 !!player.sid &&
358 Object.keys(this.people).some(sid =>
359 sid == player.sid && this.people[sid].focus)
360 )
361 ||
362 (
363 !!player.id &&
364 Object.values(this.people).some(p =>
365 p.id == player.id && p.focus)
366 )
367 );
368 },
369 getOppsid: function() {
370 let oppsid = this.game.oppsid;
371 if (!oppsid) {
372 oppsid = Object.keys(this.people).find(
373 sid => this.people[sid].id == this.game.oppid
374 );
375 }
376 // oppsid is useful only if opponent is online:
377 if (!!oppsid && !!this.people[oppsid]) return oppsid;
378 return null;
379 },
380 toggleChat: function() {
381 if (document.getElementById("modalChat").checked)
382 // Entering chat
383 document.getElementById("inputChat").focus();
384 // TODO: next line is only required when exiting chat,
385 // but the event for now isn't well detected.
386 document.getElementById("chatBtn").classList.remove("somethingnew");
387 },
388 processChat: function(chat) {
389 this.send("newchat", { data: chat });
390 // NOTE: anonymous chats in corr games are not stored on server (TODO?)
391 if (this.game.type == "corr" && this.st.user.id > 0)
392 this.updateCorrGame({ chat: chat });
393 },
394 clearChat: function() {
395 // Nothing more to do if game is live (chats not recorded)
396 if (this.game.type == "corr") {
397 if (!!this.game.mycolor) {
398 ajax(
399 "/chats",
400 "DELETE",
401 { data: { gid: this.game.id } }
402 );
403 }
404 this.$set(this.game, "chats", []);
405 }
406 },
407 getGameType: function(game) {
408 return game.cadence.indexOf("d") >= 0 ? "corr" : "live";
409 },
410 // Notify something after a new move (to opponent and me on MyGames page)
411 notifyMyGames: function(thing, data) {
412 this.send(
413 "notify" + thing,
414 {
415 data: data,
416 targets: this.game.players.map(p => {
417 return { sid: p.sid, id: p.id };
418 })
419 }
420 );
421 },
422 showNextGame: function() {
423 // Did I play in current game? If not, add it to nextIds list
424 if (this.game.score == "*" && this.vr.turn == this.game.mycolor)
425 this.nextIds.unshift(this.game.id);
426 const nextGid = this.nextIds.pop();
427 this.$router.push(
428 "/game/" + nextGid + "/?next=" + JSON.stringify(this.nextIds));
429 },
430 askGameAgain: function() {
431 this.gameIsLoading = true;
432 const currentUrl = document.location.href;
433 const doAskGame = () => {
434 if (document.location.href != currentUrl) return; //page change
435 if (!this.gameRef.rid)
436 // This is my game: just reload.
437 this.fetchGame();
438 else
439 // Just ask fullgame again (once!), this is much simpler.
440 // If this fails, the user could just reload page :/
441 this.send("askfullgame", { target: this.gameRef.rid });
442 };
443 // Delay of at least 2s between two game requests
444 const now = Date.now();
445 const delay = Math.max(2000 - (now - this.askGameTime), 0);
446 this.askGameTime = now;
447 setTimeout(doAskGame, delay);
448 },
449 socketMessageListener: function(msg) {
450 if (!this.conn) return;
451 const data = JSON.parse(msg.data);
452 switch (data.code) {
453 case "pollclients":
454 data.sockIds.forEach(sid => {
455 if (sid != this.st.user.sid) {
456 this.people[sid] = { focus: true };
457 this.send("askidentity", { target: sid });
458 }
459 });
460 break;
461 case "connect":
462 if (!this.people[data.from]) {
463 this.people[data.from] = { focus: true };
464 this.newConnect[data.from] = true; //for self multi-connects tests
465 this.send("askidentity", { target: data.from });
466 }
467 break;
468 case "disconnect":
469 this.$delete(this.people, data.from);
470 break;
471 case "getfocus": {
472 let player = this.people[data.from];
473 if (!!player) {
474 player.focus = true;
475 this.$forceUpdate(); //TODO: shouldn't be required
476 }
477 break;
478 }
479 case "losefocus": {
480 let player = this.people[data.from];
481 if (!!player) {
482 player.focus = false;
483 this.$forceUpdate(); //TODO: shouldn't be required
484 }
485 break;
486 }
487 case "killed":
488 // I logged in elsewhere:
489 this.conn = null;
490 alert(this.st.tr["New connexion detected: tab now offline"]);
491 break;
492 case "askidentity": {
493 // Request for identification
494 const me = {
495 // Decompose to avoid revealing email
496 name: this.st.user.name,
497 sid: this.st.user.sid,
498 id: this.st.user.id
499 };
500 this.send("identity", { data: me, target: data.from });
501 break;
502 }
503 case "identity": {
504 const user = data.data;
505 let player = this.people[user.sid];
506 // player.focus is already set
507 player.name = user.name;
508 player.id = user.id;
509 this.$forceUpdate(); //TODO: shouldn't be required
510 // If I multi-connect, kill current connexion if no mark (I'm older)
511 if (this.newConnect[user.sid]) {
512 if (
513 user.id > 0 &&
514 user.id == this.st.user.id &&
515 user.sid != this.st.user.sid &&
516 !this.killed[this.st.user.sid]
517 ) {
518 this.send("killme", { sid: this.st.user.sid });
519 this.killed[this.st.user.sid] = true;
520 }
521 delete this.newConnect[user.sid];
522 }
523 if (!this.killed[this.st.user.sid]) {
524 // Ask potentially missed last state, if opponent and I play
525 if (
526 !!this.game.mycolor &&
527 this.game.type == "live" &&
528 this.game.score == "*" &&
529 this.game.players.some(p => p.sid == user.sid)
530 ) {
531 this.send("asklastate", { target: user.sid });
532 let counter = 1;
533 this.askLastate = setInterval(
534 () => {
535 // Ask at most 3 times:
536 // if no reply after that there should be a network issue.
537 if (
538 counter < 3 &&
539 !this.gotLastate &&
540 !!this.people[user.sid]
541 ) {
542 this.send("asklastate", { target: user.sid });
543 counter++;
544 } else {
545 clearInterval(this.askLastate);
546 }
547 },
548 1500
549 );
550 }
551 }
552 break;
553 }
554 case "askgame":
555 // Send current (live) game if not asked by any of the players
556 if (
557 this.game.type == "live" &&
558 this.game.players.every(p => p.sid != data.from[0])
559 ) {
560 const myGame = {
561 id: this.game.id,
562 fen: this.game.fen,
563 players: this.game.players,
564 vid: this.game.vid,
565 cadence: this.game.cadence,
566 score: this.game.score,
567 rid: this.st.user.sid //useful in Hall if I'm an observer
568 };
569 this.send("game", { data: myGame, target: data.from });
570 }
571 break;
572 case "askfullgame":
573 const gameToSend = Object.keys(this.game)
574 .filter(k =>
575 [
576 "id","fen","players","vid","cadence","fenStart","vname",
577 "moves","clocks","initime","score","drawOffer","rematchOffer"
578 ].includes(k))
579 .reduce(
580 (obj, k) => {
581 obj[k] = this.game[k];
582 return obj;
583 },
584 {}
585 );
586 this.send("fullgame", { data: gameToSend, target: data.from });
587 break;
588 case "fullgame":
589 // Callback "roomInit" to poll clients only after game is loaded
590 this.fetchGame(data.data, this.roomInit);
591 break;
592 case "asklastate":
593 // Sending informative last state if I played a move or score != "*"
594 // If the game or moves aren't loaded yet, delay the sending:
595 if (!this.game || !this.game.moves) this.lastateAsked = true;
596 else this.sendLastate(data.from);
597 break;
598 case "lastate": {
599 // Got opponent infos about last move
600 this.gotLastate = true;
601 if (!data.data.nothing) {
602 this.lastate = data.data;
603 if (this.game.rendered)
604 // Game is rendered (Board component)
605 this.processLastate();
606 // Else: will be processed when game is ready
607 }
608 break;
609 }
610 case "newmove": {
611 const movePlus = data.data;
612 const movesCount = this.game.moves.length;
613 if (movePlus.index > movesCount) {
614 // This can only happen if I'm an observer and missed a move.
615 if (this.gotMoveIdx < movePlus.index)
616 this.gotMoveIdx = movePlus.index;
617 if (!this.gameIsLoading) this.askGameAgain();
618 }
619 else {
620 if (
621 movePlus.index < movesCount ||
622 this.gotMoveIdx >= movePlus.index
623 ) {
624 // Opponent re-send but we already have the move:
625 // (maybe he didn't receive our pingback...)
626 this.send("gotmove", {data: movePlus.index, target: data.from});
627 } else {
628 this.gotMoveIdx = movePlus.index;
629 const receiveMyMove = (movePlus.color == this.game.mycolor);
630 if (!receiveMyMove && !!this.game.mycolor)
631 // Notify opponent that I got the move:
632 this.send("gotmove", {data: movePlus.index, target: data.from});
633 if (movePlus.cancelDrawOffer) {
634 // Opponent refuses draw
635 this.drawOffer = "";
636 // NOTE for corr games: drawOffer reset by player in turn
637 if (
638 this.game.type == "live" &&
639 !!this.game.mycolor &&
640 !receiveMyMove
641 ) {
642 GameStorage.update(this.gameRef.id, { drawOffer: "" });
643 }
644 }
645 this.$refs["basegame"].play(movePlus.move, "received", null, true);
646 this.processMove(
647 movePlus.move,
648 {
649 clock: movePlus.clock,
650 receiveMyMove: receiveMyMove
651 }
652 );
653 }
654 }
655 break;
656 }
657 case "gotmove": {
658 this.opponentGotMove = true;
659 // Now his clock starts running:
660 const oppIdx = ['w','b'].indexOf(this.vr.turn);
661 this.game.initime[oppIdx] = Date.now();
662 this.re_setClocks();
663 break;
664 }
665 case "resign":
666 const score = data.side == "b" ? "1-0" : "0-1";
667 const side = data.side == "w" ? "White" : "Black";
668 this.gameOver(score, side + " surrender");
669 break;
670 case "abort":
671 this.gameOver("?", "Stop");
672 break;
673 case "draw":
674 this.gameOver("1/2", data.data);
675 break;
676 case "drawoffer":
677 // NOTE: observers don't know who offered draw
678 this.drawOffer = "received";
679 break;
680 case "rematchoffer":
681 // NOTE: observers don't know who offered rematch
682 this.rematchOffer = data.data ? "received" : "";
683 break;
684 case "newgame": {
685 // A game started, redirect if I'm playing in
686 const gameInfo = data.data;
687 const gameType = this.getGameType(gameInfo);
688 if (
689 gameType == "live" &&
690 gameInfo.players.some(p => p.sid == this.st.user.sid)
691 ) {
692 this.addAndGotoLiveGame(gameInfo);
693 } else if (
694 gameType == "corr" &&
695 gameInfo.players.some(p => p.id == this.st.user.id)
696 ) {
697 this.$router.push("/game/" + gameInfo.id);
698 } else {
699 let urlRid = "";
700 if (gameInfo.cadence.indexOf('d') === -1) {
701 urlRid = "/?rid=";
702 // Select sid of any of the online players:
703 let onlineSid = [];
704 gameInfo.players.forEach(p => {
705 if (!!this.people[p.sid]) onlineSid.push(p.sid);
706 });
707 urlRid += onlineSid[Math.floor(Math.random() * onlineSid.length)];
708 }
709 this.rematchId = gameInfo.id + urlRid;
710 document.getElementById("modalInfo").checked = true;
711 }
712 break;
713 }
714 case "newchat":
715 this.$refs["chatcomp"].newChat(data.data);
716 if (!document.getElementById("modalChat").checked)
717 document.getElementById("chatBtn").classList.add("somethingnew");
718 break;
719 }
720 },
721 socketCloseListener: function() {
722 this.conn = new WebSocket(this.connexionString);
723 this.conn.addEventListener("message", this.socketMessageListener);
724 this.conn.addEventListener("close", this.socketCloseListener);
725 },
726 updateCorrGame: function(obj, callback) {
727 ajax(
728 "/games",
729 "PUT",
730 {
731 data: {
732 gid: this.gameRef.id,
733 newObj: obj
734 },
735 success: () => {
736 if (!!callback) callback();
737 }
738 }
739 );
740 },
741 sendLastate: function(target) {
742 if (
743 (this.game.moves.length > 0 && this.vr.turn != this.game.mycolor) ||
744 this.game.score != "*" ||
745 this.drawOffer == "sent" ||
746 this.rematchOffer == "sent"
747 ) {
748 // Send our "last state" informations to opponent
749 const L = this.game.moves.length;
750 const myIdx = ["w", "b"].indexOf(this.game.mycolor);
751 const myLastate = {
752 lastMove: L > 0 ? this.game.moves[L - 1] : undefined,
753 clock: this.game.clocks[myIdx],
754 // Since we played a move (or abort or resign),
755 // only drawOffer=="sent" is possible
756 drawSent: this.drawOffer == "sent",
757 rematchSent: this.rematchOffer == "sent",
758 score: this.game.score,
759 scoreMsg: this.game.scoreMsg,
760 movesCount: L,
761 initime: this.game.initime[1 - myIdx] //relevant only if I played
762 };
763 this.send("lastate", { data: myLastate, target: target });
764 } else {
765 this.send("lastate", { data: {nothing: true}, target: target });
766 }
767 },
768 // lastate was received, but maybe game wasn't ready yet:
769 processLastate: function() {
770 const data = this.lastate;
771 this.lastate = undefined; //security...
772 const L = this.game.moves.length;
773 if (data.movesCount > L) {
774 // Just got last move from him
775 this.$refs["basegame"].play(data.lastMove, "received", null, true);
776 this.processMove(data.lastMove, { clock: data.clock });
777 }
778 if (data.drawSent) this.drawOffer = "received";
779 if (data.rematchSent) this.rematchOffer = "received";
780 if (data.score != "*") {
781 this.drawOffer = "";
782 if (this.game.score == "*")
783 this.gameOver(data.score, data.scoreMsg);
784 }
785 },
786 clickDraw: function() {
787 if (!this.game.mycolor) return; //I'm just spectator
788 if (["received", "threerep"].includes(this.drawOffer)) {
789 if (!confirm(this.st.tr["Accept draw?"])) return;
790 const message =
791 this.drawOffer == "received"
792 ? "Mutual agreement"
793 : "Three repetitions";
794 this.send("draw", { data: message });
795 this.gameOver("1/2", message);
796 } else if (this.drawOffer == "") {
797 // No effect if drawOffer == "sent"
798 if (this.game.mycolor != this.vr.turn) {
799 alert(this.st.tr["Draw offer only in your turn"]);
800 return;
801 }
802 if (!confirm(this.st.tr["Offer draw?"])) return;
803 this.drawOffer = "sent";
804 this.send("drawoffer");
805 if (this.game.type == "live") {
806 GameStorage.update(
807 this.gameRef.id,
808 { drawOffer: this.game.mycolor }
809 );
810 } else this.updateCorrGame({ drawOffer: this.game.mycolor });
811 }
812 },
813 addAndGotoLiveGame: function(gameInfo, callback) {
814 const game = Object.assign(
815 {},
816 gameInfo,
817 {
818 // (other) Game infos: constant
819 fenStart: gameInfo.fen,
820 vname: this.game.vname,
821 created: Date.now(),
822 // Game state (including FEN): will be updated
823 moves: [],
824 clocks: [-1, -1], //-1 = unstarted
825 initime: [0, 0], //initialized later
826 score: "*"
827 }
828 );
829 GameStorage.add(game, (err) => {
830 // No error expected.
831 if (!err) {
832 if (this.st.settings.sound)
833 new Audio("/sounds/newgame.flac").play().catch(() => {});
834 if (!!callback) callback();
835 this.$router.push("/game/" + gameInfo.id);
836 }
837 });
838 },
839 clickRematch: function() {
840 if (!this.game.mycolor) return; //I'm just spectator
841 if (this.rematchOffer == "received") {
842 // Start a new game!
843 let gameInfo = {
844 id: getRandString(), //ignored if corr
845 fen: V.GenRandInitFen(this.game.randomness),
846 players: this.game.players.reverse(),
847 vid: this.game.vid,
848 cadence: this.game.cadence
849 };
850 const notifyNewGame = () => {
851 const oppsid = this.getOppsid(); //may be null
852 this.send("rnewgame", { data: gameInfo, oppsid: oppsid });
853 // To main Hall if corr game:
854 if (this.game.type == "corr")
855 this.send("newgame", { data: gameInfo });
856 // Also to MyGames page:
857 this.notifyMyGames("newgame", gameInfo);
858 };
859 if (this.game.type == "live")
860 this.addAndGotoLiveGame(gameInfo, notifyNewGame);
861 else {
862 // corr game
863 ajax(
864 "/games",
865 "POST",
866 {
867 // cid is useful to delete the challenge:
868 data: { gameInfo: gameInfo },
869 success: (response) => {
870 gameInfo.id = response.gameId;
871 notifyNewGame();
872 this.$router.push("/game/" + response.gameId);
873 }
874 }
875 );
876 }
877 } else if (this.rematchOffer == "") {
878 this.rematchOffer = "sent";
879 this.send("rematchoffer", { data: true });
880 if (this.game.type == "live") {
881 GameStorage.update(
882 this.gameRef.id,
883 { rematchOffer: this.game.mycolor }
884 );
885 } else this.updateCorrGame({ rematchOffer: this.game.mycolor });
886 } else if (this.rematchOffer == "sent") {
887 // Toggle rematch offer (on --> off)
888 this.rematchOffer = "";
889 this.send("rematchoffer", { data: false });
890 if (this.game.type == "live") {
891 GameStorage.update(
892 this.gameRef.id,
893 { rematchOffer: '' }
894 );
895 } else this.updateCorrGame({ rematchOffer: 'n' });
896 }
897 },
898 abortGame: function() {
899 if (!this.game.mycolor || !confirm(this.st.tr["Terminate game?"])) return;
900 this.gameOver("?", "Stop");
901 this.send("abort");
902 },
903 resign: function() {
904 if (!this.game.mycolor || !confirm(this.st.tr["Resign the game?"]))
905 return;
906 this.send("resign", { data: this.game.mycolor });
907 const score = this.game.mycolor == "w" ? "0-1" : "1-0";
908 const side = this.game.mycolor == "w" ? "White" : "Black";
909 this.gameOver(score, side + " surrender");
910 },
911 // 3 cases for loading a game:
912 // - from indexedDB (running or completed live game I play)
913 // - from server (one correspondance game I play[ed] or not)
914 // - from remote peer (one live game I don't play, finished or not)
915 loadGame: function(game, callback) {
916 this.vr = new V(game.fen);
917 const gtype = this.getGameType(game);
918 const tc = extractTime(game.cadence);
919 const myIdx = game.players.findIndex(p => {
920 return p.sid == this.st.user.sid || p.id == this.st.user.id;
921 });
922 const mycolor = [undefined, "w", "b"][myIdx + 1]; //undefined for observers
923 if (!game.chats) game.chats = []; //live games don't have chat history
924 if (gtype == "corr") {
925 // NOTE: clocks in seconds, initime in milliseconds
926 game.moves.sort((m1, m2) => m1.idx - m2.idx); //in case of
927 game.clocks = [tc.mainTime, tc.mainTime];
928 const L = game.moves.length;
929 if (game.score == "*") {
930 // Set clocks + initime
931 game.initime = [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER];
932 if (L >= 1) game.initime[L % 2] = game.moves[L-1].played;
933 // NOTE: game.clocks shouldn't be computed right now:
934 // job will be done in re_setClocks() called soon below.
935 }
936 // Sort chat messages from newest to oldest
937 game.chats.sort((c1, c2) => {
938 return c2.added - c1.added;
939 });
940 if (myIdx >= 0 && game.score == "*" && game.chats.length > 0) {
941 // Did a chat message arrive after my last move?
942 let dtLastMove = 0;
943 if (L == 1 && myIdx == 0)
944 dtLastMove = game.moves[0].played;
945 else if (L >= 2) {
946 if (L % 2 == 0) {
947 // It's now white turn
948 dtLastMove = game.moves[L-1-(1-myIdx)].played;
949 } else {
950 // Black turn:
951 dtLastMove = game.moves[L-1-myIdx].played;
952 }
953 }
954 if (dtLastMove < game.chats[0].added)
955 document.getElementById("chatBtn").classList.add("somethingnew");
956 }
957 // Now that we used idx and played, re-format moves as for live games
958 game.moves = game.moves.map(m => m.squares);
959 }
960 if (gtype == "live" && game.clocks[0] < 0) {
961 // Game is unstarted. clocks and initime are ignored until move 2
962 game.clocks = [tc.mainTime, tc.mainTime];
963 game.initime = [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER];
964 if (myIdx >= 0) {
965 // I play in this live game
966 GameStorage.update(game.id, {
967 clocks: game.clocks,
968 initime: game.initime
969 });
970 }
971 }
972 // TODO: merge next 2 "if" conditions
973 if (!!game.drawOffer) {
974 if (game.drawOffer == "t")
975 // Three repetitions
976 this.drawOffer = "threerep";
977 else {
978 // Draw offered by any of the players:
979 if (myIdx < 0) this.drawOffer = "received";
980 else {
981 // I play in this game:
982 if (
983 (game.drawOffer == "w" && myIdx == 0) ||
984 (game.drawOffer == "b" && myIdx == 1)
985 )
986 this.drawOffer = "sent";
987 else this.drawOffer = "received";
988 }
989 }
990 }
991 if (!!game.rematchOffer) {
992 if (myIdx < 0) this.rematchOffer = "received";
993 else {
994 // I play in this game:
995 if (
996 (game.rematchOffer == "w" && myIdx == 0) ||
997 (game.rematchOffer == "b" && myIdx == 1)
998 )
999 this.rematchOffer = "sent";
1000 else this.rematchOffer = "received";
1001 }
1002 }
1003 this.repeat = {}; //reset: scan past moves' FEN:
1004 let repIdx = 0;
1005 let vr_tmp = new V(game.fenStart);
1006 let curTurn = "n";
1007 game.moves.forEach(m => {
1008 playMove(m, vr_tmp);
1009 const fenIdx = vr_tmp.getFen().replace(/ /g, "_");
1010 this.repeat[fenIdx] = this.repeat[fenIdx]
1011 ? this.repeat[fenIdx] + 1
1012 : 1;
1013 });
1014 if (this.repeat[repIdx] >= 3) this.drawOffer = "threerep";
1015 this.game = Object.assign(
1016 // NOTE: assign mycolor here, since BaseGame could also be VS computer
1017 {
1018 type: gtype,
1019 increment: tc.increment,
1020 mycolor: mycolor,
1021 // opponent sid not strictly required (or available), but easier
1022 // at least oppsid or oppid is available anyway:
1023 oppsid: myIdx < 0 ? undefined : game.players[1 - myIdx].sid,
1024 oppid: myIdx < 0 ? undefined : game.players[1 - myIdx].id
1025 },
1026 game
1027 );
1028 this.$refs["basegame"].re_setVariables(this.game);
1029 if (!this.gameIsLoading) {
1030 // Initial loading:
1031 this.gotMoveIdx = game.moves.length - 1;
1032 // If we arrive here after 'nextGame' action, the board might be hidden
1033 let boardDiv = document.querySelector(".game");
1034 if (!!boardDiv && boardDiv.style.visibility == "hidden")
1035 boardDiv.style.visibility = "visible";
1036 }
1037 this.re_setClocks();
1038 this.$nextTick(() => {
1039 this.game.rendered = true;
1040 // Did lastate arrive before game was rendered?
1041 if (this.lastate) this.processLastate();
1042 });
1043 if (this.lastateAsked) {
1044 this.lastateAsked = false;
1045 this.sendLastate(game.oppsid);
1046 }
1047 if (this.gameIsLoading) {
1048 this.gameIsLoading = false;
1049 if (this.gotMoveIdx >= game.moves.length)
1050 // Some moves arrived meanwhile...
1051 this.askGameAgain();
1052 }
1053 if (!!callback) callback();
1054 },
1055 fetchGame: function(game, callback) {
1056 const afterRetrieval = async (game) => {
1057 await import("@/variants/" + game.vname + ".js")
1058 .then((vModule) => {
1059 window.V = vModule[game.vname + "Rules"];
1060 this.loadGame(game, callback);
1061 });
1062 };
1063 if (!!game) {
1064 afterRetrieval(game);
1065 return;
1066 }
1067 if (this.gameRef.rid)
1068 // Remote live game: forgetting about callback func... (TODO: design)
1069 this.send("askfullgame", { target: this.gameRef.rid });
1070 else {
1071 // Local or corr game on server.
1072 // NOTE: afterRetrieval() is never called if game not found
1073 const gid = this.gameRef.id;
1074 if (Number.isInteger(gid) || !isNaN(parseInt(gid))) {
1075 // corr games identifiers are integers
1076 ajax(
1077 "/games",
1078 "GET",
1079 {
1080 data: { gid: gid },
1081 success: (res) => {
1082 res.game.moves.forEach(m => {
1083 m.squares = JSON.parse(m.squares);
1084 });
1085 afterRetrieval(res.game);
1086 }
1087 }
1088 );
1089 }
1090 else
1091 // Local game
1092 GameStorage.get(this.gameRef.id, afterRetrieval);
1093 }
1094 },
1095 re_setClocks: function() {
1096 if (this.game.moves.length < 2 || this.game.score != "*") {
1097 // 1st move not completed yet, or game over: freeze time
1098 this.virtualClocks = this.game.clocks.map(s => ppt(s).split(':'));
1099 return;
1100 }
1101 const currentTurn = this.vr.turn;
1102 const currentMovesCount = this.game.moves.length;
1103 const colorIdx = ["w", "b"].indexOf(currentTurn);
1104 let countdown =
1105 this.game.clocks[colorIdx] -
1106 (Date.now() - this.game.initime[colorIdx]) / 1000;
1107 this.virtualClocks = [0, 1].map(i => {
1108 const removeTime =
1109 i == colorIdx ? (Date.now() - this.game.initime[colorIdx]) / 1000 : 0;
1110 return ppt(this.game.clocks[i] - removeTime).split(':');
1111 });
1112 this.clockUpdate = setInterval(
1113 () => {
1114 if (
1115 countdown < 0 ||
1116 this.game.moves.length > currentMovesCount ||
1117 this.game.score != "*"
1118 ) {
1119 clearInterval(this.clockUpdate);
1120 if (countdown < 0)
1121 this.gameOver(
1122 currentTurn == "w" ? "0-1" : "1-0",
1123 "Time"
1124 );
1125 } else
1126 this.$set(
1127 this.virtualClocks,
1128 colorIdx,
1129 ppt(Math.max(0, --countdown)).split(':')
1130 );
1131 },
1132 1000
1133 );
1134 },
1135 // Update variables and storage after a move:
1136 processMove: function(move, data) {
1137 if (!data) data = {};
1138 const moveCol = this.vr.turn;
1139 const doProcessMove = () => {
1140 const colorIdx = ["w", "b"].indexOf(moveCol);
1141 const nextIdx = 1 - colorIdx;
1142 const origMovescount = this.game.moves.length;
1143 let addTime = 0; //for live games
1144 if (moveCol == this.game.mycolor && !data.receiveMyMove) {
1145 if (this.drawOffer == "received")
1146 // I refuse draw
1147 this.drawOffer = "";
1148 if (this.game.type == "live" && origMovescount >= 2) {
1149 const elapsed = Date.now() - this.game.initime[colorIdx];
1150 // elapsed time is measured in milliseconds
1151 addTime = this.game.increment - elapsed / 1000;
1152 }
1153 }
1154 // Update current game object:
1155 playMove(move, this.vr);
1156 // The move is played: stop clock
1157 clearInterval(this.clockUpdate);
1158 if (!data.score) {
1159 // Received move, score has not been computed in BaseGame (!!noemit)
1160 const score = this.vr.getCurrentScore();
1161 if (score != "*") this.gameOver(score);
1162 }
1163 this.game.moves.push(move);
1164 this.game.fen = this.vr.getFen();
1165 if (this.game.type == "live") {
1166 if (!!data.clock) this.game.clocks[colorIdx] = data.clock;
1167 else this.game.clocks[colorIdx] += addTime;
1168 } else {
1169 // In corr games, just reset clock to mainTime:
1170 this.game.clocks[colorIdx] = extractTime(this.game.cadence).mainTime;
1171 }
1172 // NOTE: opponent's initime is reset after "gotmove" is received
1173 if (
1174 !this.game.mycolor ||
1175 moveCol != this.game.mycolor ||
1176 !!data.receiveMyMove
1177 ) {
1178 this.game.initime[nextIdx] = Date.now();
1179 }
1180 // If repetition detected, consider that a draw offer was received:
1181 const fenObj = this.vr.getFenForRepeat();
1182 this.repeat[fenObj] =
1183 !!this.repeat[fenObj]
1184 ? this.repeat[fenObj] + 1
1185 : 1;
1186 if (this.repeat[fenObj] >= 3) this.drawOffer = "threerep";
1187 else if (this.drawOffer == "threerep") this.drawOffer = "";
1188 if (!!this.game.mycolor && !data.receiveMyMove) {
1189 // NOTE: 'var' to see that variable outside this block
1190 var filtered_move = getFilteredMove(move);
1191 }
1192 if (moveCol == this.game.mycolor && !data.receiveMyMove) {
1193 // Notify turn on MyGames page:
1194 this.notifyMyGames(
1195 "turn",
1196 {
1197 gid: this.gameRef.id,
1198 turn: this.vr.turn
1199 }
1200 );
1201 }
1202 // Since corr games are stored at only one location, update should be
1203 // done only by one player for each move:
1204 if (
1205 !!this.game.mycolor &&
1206 !data.receiveMyMove &&
1207 (this.game.type == "live" || moveCol == this.game.mycolor)
1208 ) {
1209 let drawCode = "";
1210 switch (this.drawOffer) {
1211 case "threerep":
1212 drawCode = "t";
1213 break;
1214 case "sent":
1215 drawCode = this.game.mycolor;
1216 break;
1217 case "received":
1218 drawCode = V.GetOppCol(this.game.mycolor);
1219 break;
1220 }
1221 if (this.game.type == "corr") {
1222 // corr: only move, fen and score
1223 this.updateCorrGame({
1224 fen: this.game.fen,
1225 move: {
1226 squares: filtered_move,
1227 idx: origMovescount
1228 },
1229 // Code "n" for "None" to force reset (otherwise it's ignored)
1230 drawOffer: drawCode || "n"
1231 });
1232 }
1233 else {
1234 const updateStorage = () => {
1235 GameStorage.update(this.gameRef.id, {
1236 fen: this.game.fen,
1237 move: filtered_move,
1238 moveIdx: origMovescount,
1239 clocks: this.game.clocks,
1240 initime: this.game.initime,
1241 drawOffer: drawCode
1242 });
1243 };
1244 // The active tab can update storage immediately
1245 if (!document.hidden) updateStorage();
1246 // Small random delay otherwise
1247 else setTimeout(updateStorage, 500 + 1000 * Math.random());
1248 }
1249 }
1250 // Send move ("newmove" event) to people in the room (if our turn)
1251 if (moveCol == this.game.mycolor && !data.receiveMyMove) {
1252 let sendMove = {
1253 move: filtered_move,
1254 index: origMovescount,
1255 // color is required to check if this is my move (if several tabs opened)
1256 color: moveCol,
1257 cancelDrawOffer: this.drawOffer == ""
1258 };
1259 if (this.game.type == "live")
1260 sendMove["clock"] = this.game.clocks[colorIdx];
1261 this.opponentGotMove = false;
1262 this.send("newmove", {data: sendMove});
1263 // If the opponent doesn't reply gotmove soon enough, re-send move:
1264 // Do this at most 2 times, because mpore would mean network issues,
1265 // opponent would then be expected to disconnect/reconnect.
1266 let counter = 1;
1267 const currentUrl = document.location.href;
1268 this.retrySendmove = setInterval(
1269 () => {
1270 if (
1271 counter >= 3 ||
1272 this.opponentGotMove ||
1273 document.location.href != currentUrl //page change
1274 ) {
1275 clearInterval(this.retrySendmove);
1276 return;
1277 }
1278 const oppsid = this.getOppsid();
1279 if (!oppsid)
1280 // Opponent is disconnected: he'll ask last state
1281 clearInterval(this.retrySendmove);
1282 else {
1283 this.send("newmove", { data: sendMove, target: oppsid });
1284 counter++;
1285 }
1286 },
1287 1500
1288 );
1289 }
1290 else
1291 // Not my move or I'm an observer: just start other player's clock
1292 this.re_setClocks();
1293 };
1294 if (
1295 this.game.type == "corr" &&
1296 moveCol == this.game.mycolor &&
1297 !data.receiveMyMove
1298 ) {
1299 let boardDiv = document.querySelector(".game");
1300 const afterSetScore = () => {
1301 doProcessMove();
1302 if (this.st.settings.gotonext && this.nextIds.length > 0)
1303 this.showNextGame();
1304 else {
1305 // The board might have been hidden:
1306 if (boardDiv.style.visibility == "hidden")
1307 boardDiv.style.visibility = "visible";
1308 }
1309 };
1310 let el = document.querySelector("#buttonsConfirm > .acceptBtn");
1311 // We may play several moves in a row: in case of, remove listener:
1312 let elClone = el.cloneNode(true);
1313 el.parentNode.replaceChild(elClone, el);
1314 elClone.addEventListener(
1315 "click",
1316 () => {
1317 document.getElementById("modalConfirm").checked = false;
1318 if (!!data.score && data.score != "*")
1319 // Set score first
1320 this.gameOver(data.score, null, afterSetScore);
1321 else afterSetScore();
1322 }
1323 );
1324 // PlayOnBoard is enough, and more appropriate for Synchrone Chess
1325 V.PlayOnBoard(this.vr.board, move);
1326 const position = this.vr.getBaseFen();
1327 V.UndoOnBoard(this.vr.board, move);
1328 if (["all","byrow"].includes(V.ShowMoves)) {
1329 this.curDiag = getDiagram({
1330 position: position,
1331 orientation: V.CanFlip ? this.game.mycolor : "w"
1332 });
1333 document.querySelector("#confirmDiv > .card").style.width =
1334 boardDiv.offsetWidth + "px";
1335 } else {
1336 // Incomplete information: just ask confirmation
1337 // Hide the board, because otherwise it could reveal infos
1338 boardDiv.style.visibility = "hidden";
1339 this.moveNotation = getFullNotation(move);
1340 }
1341 document.getElementById("modalConfirm").checked = true;
1342 }
1343 else {
1344 // Normal situation
1345 if (!!data.score && data.score != "*")
1346 this.gameOver(data.score, null, doProcessMove);
1347 else doProcessMove();
1348 }
1349 },
1350 cancelMove: function() {
1351 let boardDiv = document.querySelector(".game");
1352 if (boardDiv.style.visibility == "hidden")
1353 boardDiv.style.visibility = "visible";
1354 document.getElementById("modalConfirm").checked = false;
1355 this.$refs["basegame"].cancelLastMove();
1356 },
1357 // In corr games, callback to change page only after score is set:
1358 gameOver: function(score, scoreMsg, callback) {
1359 this.game.score = score;
1360 if (!scoreMsg) scoreMsg = getScoreMessage(score);
1361 this.game.scoreMsg = scoreMsg;
1362 this.$set(this.game, "scoreMsg", scoreMsg);
1363 const myIdx = this.game.players.findIndex(p => {
1364 return p.sid == this.st.user.sid || p.id == this.st.user.id;
1365 });
1366 if (myIdx >= 0) {
1367 // OK, I play in this game
1368 const scoreObj = {
1369 score: score,
1370 scoreMsg: scoreMsg
1371 };
1372 if (this.game.type == "live") {
1373 GameStorage.update(this.gameRef.id, scoreObj);
1374 if (!!callback) callback();
1375 }
1376 else this.updateCorrGame(scoreObj, callback);
1377 // Notify the score to main Hall. TODO: only one player (currently double send)
1378 this.send("result", { gid: this.game.id, score: score });
1379 // Also to MyGames page (TODO: doubled as well...)
1380 this.notifyMyGames(
1381 "score",
1382 {
1383 gid: this.gameRef.id,
1384 score: score
1385 }
1386 );
1387 }
1388 else if (!!callback) callback();
1389 }
1390 }
1391 };
1392 </script>
1393
1394 <style lang="sass" scoped>
1395 #infoDiv > .card
1396 padding: 15px 0
1397 max-width: 430px
1398
1399 .connected
1400 background-color: lightgreen
1401
1402 #participants
1403 margin-left: 5px
1404
1405 .anonymous
1406 color: grey
1407 font-style: italic
1408
1409 #playersInfo > p
1410 margin: 0
1411
1412 @media screen and (min-width: 768px)
1413 #actions
1414 width: 300px
1415 @media screen and (max-width: 767px)
1416 .game
1417 width: 100%
1418
1419 #actions
1420 display: inline-block
1421 margin: 0
1422
1423 button
1424 display: inline-block
1425 margin: 0
1426 display: inline-flex
1427 img
1428 height: 24px
1429 display: flex
1430 @media screen and (max-width: 767px)
1431 height: 18px
1432
1433 @media screen and (max-width: 767px)
1434 #aboveBoard
1435 text-align: center
1436 @media screen and (min-width: 768px)
1437 #aboveBoard
1438 margin-left: 30%
1439
1440 .variant-cadence
1441 padding-right: 10px
1442
1443 .variant-name
1444 font-weight: bold
1445 padding-right: 10px
1446
1447 span#nextGame
1448 background-color: #edda99
1449 cursor: pointer
1450 display: inline-block
1451 margin-right: 10px
1452
1453 span.name
1454 font-size: 1.5rem
1455 padding: 0 3px
1456
1457 span.time
1458 font-size: 2rem
1459 display: inline-block
1460 .time-left
1461 margin-left: 10px
1462 .time-right
1463 margin-left: 5px
1464 .time-separator
1465 margin-left: 5px
1466 position: relative
1467 top: -1px
1468
1469 span.yourturn
1470 color: #831B1B
1471 .time-separator
1472 animation: blink-animation 2s steps(3, start) infinite
1473 @keyframes blink-animation
1474 to
1475 visibility: hidden
1476
1477 .split-names
1478 display: inline-block
1479 margin: 0 15px
1480
1481 #chatWrap > .card
1482 padding-top: 20px
1483 max-width: 767px
1484 border: none
1485
1486 #confirmDiv > .card
1487 max-width: 767px
1488 max-height: 100%
1489
1490 .draw-sent, .draw-sent:hover
1491 background-color: lightyellow
1492
1493 .draw-received, .draw-received:hover
1494 background-color: lightgreen
1495
1496 .draw-threerep, .draw-threerep:hover
1497 background-color: #e4d1fc
1498
1499 .rematch-sent, .rematch-sent:hover
1500 background-color: lightyellow
1501
1502 .rematch-received, .rematch-received:hover
1503 background-color: lightgreen
1504
1505 .somethingnew
1506 background-color: #c5fefe
1507
1508 .diagram
1509 margin: 0 auto
1510 width: 100%
1511
1512 #buttonsConfirm
1513 margin: 0
1514 & > button > span
1515 width: 100%
1516 text-align: center
1517
1518 button.acceptBtn
1519 background-color: lightgreen
1520 button.refuseBtn
1521 background-color: red
1522 </style>