A few fixes
[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.loadGame();
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 loadGame fails.
312 this.conn.onopen = () => callback();
313 };
314 if (!this.gameRef.rid)
315 // Game stored locally or on server
316 this.loadGame(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.loadGame);
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.loadGame();
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.loadGame(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 const afterRetrieval = async (game) => {
917 const vModule = await import("@/variants/" + game.vname + ".js");
918 window.V = vModule.VariantRules;
919 this.vr = new V(game.fen);
920 const gtype = this.getGameType(game);
921 const tc = extractTime(game.cadence);
922 const myIdx = game.players.findIndex(p => {
923 return p.sid == this.st.user.sid || p.id == this.st.user.id;
924 });
925 const mycolor = [undefined, "w", "b"][myIdx + 1]; //undefined for observers
926 if (!game.chats) game.chats = []; //live games don't have chat history
927 if (gtype == "corr") {
928 // NOTE: clocks in seconds, initime in milliseconds
929 game.moves.sort((m1, m2) => m1.idx - m2.idx); //in case of
930 game.clocks = [tc.mainTime, tc.mainTime];
931 const L = game.moves.length;
932 if (game.score == "*") {
933 // Set clocks + initime
934 game.initime = [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER];
935 if (L >= 1) game.initime[L % 2] = game.moves[L-1].played;
936 // NOTE: game.clocks shouldn't be computed right now:
937 // job will be done in re_setClocks() called soon below.
938 }
939 // Sort chat messages from newest to oldest
940 game.chats.sort((c1, c2) => {
941 return c2.added - c1.added;
942 });
943 if (myIdx >= 0 && game.score == "*" && game.chats.length > 0) {
944 // Did a chat message arrive after my last move?
945 let dtLastMove = 0;
946 if (L == 1 && myIdx == 0)
947 dtLastMove = game.moves[0].played;
948 else if (L >= 2) {
949 if (L % 2 == 0) {
950 // It's now white turn
951 dtLastMove = game.moves[L-1-(1-myIdx)].played;
952 } else {
953 // Black turn:
954 dtLastMove = game.moves[L-1-myIdx].played;
955 }
956 }
957 if (dtLastMove < game.chats[0].added)
958 document.getElementById("chatBtn").classList.add("somethingnew");
959 }
960 // Now that we used idx and played, re-format moves as for live games
961 game.moves = game.moves.map(m => m.squares);
962 }
963 if (gtype == "live" && game.clocks[0] < 0) {
964 // Game is unstarted. clocks and initime are ignored until move 2
965 game.clocks = [tc.mainTime, tc.mainTime];
966 game.initime = [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER];
967 if (myIdx >= 0) {
968 // I play in this live game
969 GameStorage.update(game.id, {
970 clocks: game.clocks,
971 initime: game.initime
972 });
973 }
974 }
975 // TODO: merge next 2 "if" conditions
976 if (!!game.drawOffer) {
977 if (game.drawOffer == "t")
978 // Three repetitions
979 this.drawOffer = "threerep";
980 else {
981 // Draw offered by any of the players:
982 if (myIdx < 0) this.drawOffer = "received";
983 else {
984 // I play in this game:
985 if (
986 (game.drawOffer == "w" && myIdx == 0) ||
987 (game.drawOffer == "b" && myIdx == 1)
988 )
989 this.drawOffer = "sent";
990 else this.drawOffer = "received";
991 }
992 }
993 }
994 if (!!game.rematchOffer) {
995 if (myIdx < 0) this.rematchOffer = "received";
996 else {
997 // I play in this game:
998 if (
999 (game.rematchOffer == "w" && myIdx == 0) ||
1000 (game.rematchOffer == "b" && myIdx == 1)
1001 )
1002 this.rematchOffer = "sent";
1003 else this.rematchOffer = "received";
1004 }
1005 }
1006 this.repeat = {}; //reset: scan past moves' FEN:
1007 let repIdx = 0;
1008 let vr_tmp = new V(game.fenStart);
1009 let curTurn = "n";
1010 game.moves.forEach(m => {
1011 playMove(m, vr_tmp);
1012 const fenIdx = vr_tmp.getFen().replace(/ /g, "_");
1013 this.repeat[fenIdx] = this.repeat[fenIdx]
1014 ? this.repeat[fenIdx] + 1
1015 : 1;
1016 });
1017 if (this.repeat[repIdx] >= 3) this.drawOffer = "threerep";
1018 this.game = Object.assign(
1019 // NOTE: assign mycolor here, since BaseGame could also be VS computer
1020 {
1021 type: gtype,
1022 increment: tc.increment,
1023 mycolor: mycolor,
1024 // opponent sid not strictly required (or available), but easier
1025 // at least oppsid or oppid is available anyway:
1026 oppsid: myIdx < 0 ? undefined : game.players[1 - myIdx].sid,
1027 oppid: myIdx < 0 ? undefined : game.players[1 - myIdx].id
1028 },
1029 game
1030 );
1031 this.$refs["basegame"].re_setVariables(this.game);
1032 if (!this.gameIsLoading) {
1033 // Initial loading:
1034 this.gotMoveIdx = game.moves.length - 1;
1035 // If we arrive here after 'nextGame' action, the board might be hidden
1036 let boardDiv = document.querySelector(".game");
1037 if (!!boardDiv && boardDiv.style.visibility == "hidden")
1038 boardDiv.style.visibility = "visible";
1039 }
1040 this.re_setClocks();
1041 this.$nextTick(() => {
1042 this.game.rendered = true;
1043 // Did lastate arrive before game was rendered?
1044 if (this.lastate) this.processLastate();
1045 });
1046 if (this.lastateAsked) {
1047 this.lastateAsked = false;
1048 this.sendLastate(game.oppsid);
1049 }
1050 if (this.gameIsLoading) {
1051 this.gameIsLoading = false;
1052 if (this.gotMoveIdx >= game.moves.length)
1053 // Some moves arrived meanwhile...
1054 this.askGameAgain();
1055 }
1056 if (!!callback) callback();
1057 };
1058 if (!!game) {
1059 afterRetrieval(game);
1060 return;
1061 }
1062 if (this.gameRef.rid) {
1063 // Remote live game: forgetting about callback func... (TODO: design)
1064 this.send("askfullgame", { target: this.gameRef.rid });
1065 } else {
1066 // Local or corr game on server.
1067 // NOTE: afterRetrieval() is never called if game not found
1068 const gid = this.gameRef.id;
1069 if (Number.isInteger(gid) || !isNaN(parseInt(gid))) {
1070 // corr games identifiers are integers
1071 ajax(
1072 "/games",
1073 "GET",
1074 {
1075 data: { gid: gid },
1076 success: (res) => {
1077 let g = res.game;
1078 g.moves.forEach(m => {
1079 m.squares = JSON.parse(m.squares);
1080 });
1081 afterRetrieval(g);
1082 }
1083 }
1084 );
1085 }
1086 else
1087 // Local game
1088 GameStorage.get(this.gameRef.id, afterRetrieval);
1089 }
1090 },
1091 re_setClocks: function() {
1092 if (this.game.moves.length < 2 || this.game.score != "*") {
1093 // 1st move not completed yet, or game over: freeze time
1094 this.virtualClocks = this.game.clocks.map(s => ppt(s).split(':'));
1095 return;
1096 }
1097 const currentTurn = this.vr.turn;
1098 const currentMovesCount = this.game.moves.length;
1099 const colorIdx = ["w", "b"].indexOf(currentTurn);
1100 let countdown =
1101 this.game.clocks[colorIdx] -
1102 (Date.now() - this.game.initime[colorIdx]) / 1000;
1103 this.virtualClocks = [0, 1].map(i => {
1104 const removeTime =
1105 i == colorIdx ? (Date.now() - this.game.initime[colorIdx]) / 1000 : 0;
1106 return ppt(this.game.clocks[i] - removeTime).split(':');
1107 });
1108 this.clockUpdate = setInterval(
1109 () => {
1110 if (
1111 countdown < 0 ||
1112 this.game.moves.length > currentMovesCount ||
1113 this.game.score != "*"
1114 ) {
1115 clearInterval(this.clockUpdate);
1116 if (countdown < 0)
1117 this.gameOver(
1118 currentTurn == "w" ? "0-1" : "1-0",
1119 "Time"
1120 );
1121 } else
1122 this.$set(
1123 this.virtualClocks,
1124 colorIdx,
1125 ppt(Math.max(0, --countdown)).split(':')
1126 );
1127 },
1128 1000
1129 );
1130 },
1131 // Update variables and storage after a move:
1132 processMove: function(move, data) {
1133 if (!data) data = {};
1134 const moveCol = this.vr.turn;
1135 const doProcessMove = () => {
1136 const colorIdx = ["w", "b"].indexOf(moveCol);
1137 const nextIdx = 1 - colorIdx;
1138 const origMovescount = this.game.moves.length;
1139 let addTime = 0; //for live games
1140 if (moveCol == this.game.mycolor && !data.receiveMyMove) {
1141 if (this.drawOffer == "received")
1142 // I refuse draw
1143 this.drawOffer = "";
1144 if (this.game.type == "live" && origMovescount >= 2) {
1145 const elapsed = Date.now() - this.game.initime[colorIdx];
1146 // elapsed time is measured in milliseconds
1147 addTime = this.game.increment - elapsed / 1000;
1148 }
1149 }
1150 // Update current game object:
1151 playMove(move, this.vr);
1152 // The move is played: stop clock
1153 clearInterval(this.clockUpdate);
1154 if (!data.score) {
1155 // Received move, score has not been computed in BaseGame (!!noemit)
1156 const score = this.vr.getCurrentScore();
1157 if (score != "*") this.gameOver(score);
1158 }
1159 this.game.moves.push(move);
1160 this.game.fen = this.vr.getFen();
1161 if (this.game.type == "live") {
1162 if (!!data.clock) this.game.clocks[colorIdx] = data.clock;
1163 else this.game.clocks[colorIdx] += addTime;
1164 } else {
1165 // In corr games, just reset clock to mainTime:
1166 this.game.clocks[colorIdx] = extractTime(this.game.cadence).mainTime;
1167 }
1168 // NOTE: opponent's initime is reset after "gotmove" is received
1169 if (
1170 !this.game.mycolor ||
1171 moveCol != this.game.mycolor ||
1172 !!data.receiveMyMove
1173 ) {
1174 this.game.initime[nextIdx] = Date.now();
1175 }
1176 // If repetition detected, consider that a draw offer was received:
1177 const fenObj = this.vr.getFenForRepeat();
1178 this.repeat[fenObj] =
1179 !!this.repeat[fenObj]
1180 ? this.repeat[fenObj] + 1
1181 : 1;
1182 if (this.repeat[fenObj] >= 3) this.drawOffer = "threerep";
1183 else if (this.drawOffer == "threerep") this.drawOffer = "";
1184 if (!!this.game.mycolor && !data.receiveMyMove) {
1185 // NOTE: 'var' to see that variable outside this block
1186 var filtered_move = getFilteredMove(move);
1187 }
1188 if (moveCol == this.game.mycolor && !data.receiveMyMove) {
1189 // Notify turn on MyGames page:
1190 this.notifyMyGames(
1191 "turn",
1192 {
1193 gid: this.gameRef.id,
1194 turn: this.vr.turn
1195 }
1196 );
1197 }
1198 // Since corr games are stored at only one location, update should be
1199 // done only by one player for each move:
1200 if (
1201 !!this.game.mycolor &&
1202 !data.receiveMyMove &&
1203 (this.game.type == "live" || moveCol == this.game.mycolor)
1204 ) {
1205 let drawCode = "";
1206 switch (this.drawOffer) {
1207 case "threerep":
1208 drawCode = "t";
1209 break;
1210 case "sent":
1211 drawCode = this.game.mycolor;
1212 break;
1213 case "received":
1214 drawCode = V.GetOppCol(this.game.mycolor);
1215 break;
1216 }
1217 if (this.game.type == "corr") {
1218 // corr: only move, fen and score
1219 this.updateCorrGame({
1220 fen: this.game.fen,
1221 move: {
1222 squares: filtered_move,
1223 idx: origMovescount
1224 },
1225 // Code "n" for "None" to force reset (otherwise it's ignored)
1226 drawOffer: drawCode || "n"
1227 });
1228 }
1229 else {
1230 const updateStorage = () => {
1231 GameStorage.update(this.gameRef.id, {
1232 fen: this.game.fen,
1233 move: filtered_move,
1234 moveIdx: origMovescount,
1235 clocks: this.game.clocks,
1236 initime: this.game.initime,
1237 drawOffer: drawCode
1238 });
1239 };
1240 // The active tab can update storage immediately
1241 if (!document.hidden) updateStorage();
1242 // Small random delay otherwise
1243 else setTimeout(updateStorage, 500 + 1000 * Math.random());
1244 }
1245 }
1246 // Send move ("newmove" event) to people in the room (if our turn)
1247 if (moveCol == this.game.mycolor && !data.receiveMyMove) {
1248 let sendMove = {
1249 move: filtered_move,
1250 index: origMovescount,
1251 // color is required to check if this is my move (if several tabs opened)
1252 color: moveCol,
1253 cancelDrawOffer: this.drawOffer == ""
1254 };
1255 if (this.game.type == "live")
1256 sendMove["clock"] = this.game.clocks[colorIdx];
1257 this.opponentGotMove = false;
1258 this.send("newmove", {data: sendMove});
1259 // If the opponent doesn't reply gotmove soon enough, re-send move:
1260 // Do this at most 2 times, because mpore would mean network issues,
1261 // opponent would then be expected to disconnect/reconnect.
1262 let counter = 1;
1263 const currentUrl = document.location.href;
1264 this.retrySendmove = setInterval(
1265 () => {
1266 if (
1267 counter >= 3 ||
1268 this.opponentGotMove ||
1269 document.location.href != currentUrl //page change
1270 ) {
1271 clearInterval(this.retrySendmove);
1272 return;
1273 }
1274 const oppsid = this.getOppsid();
1275 if (!oppsid)
1276 // Opponent is disconnected: he'll ask last state
1277 clearInterval(this.retrySendmove);
1278 else {
1279 this.send("newmove", { data: sendMove, target: oppsid });
1280 counter++;
1281 }
1282 },
1283 1500
1284 );
1285 }
1286 else
1287 // Not my move or I'm an observer: just start other player's clock
1288 this.re_setClocks();
1289 };
1290 if (
1291 this.game.type == "corr" &&
1292 moveCol == this.game.mycolor &&
1293 !data.receiveMyMove
1294 ) {
1295 let boardDiv = document.querySelector(".game");
1296 const afterSetScore = () => {
1297 doProcessMove();
1298 if (this.st.settings.gotonext && this.nextIds.length > 0)
1299 this.showNextGame();
1300 else {
1301 // The board might have been hidden:
1302 if (boardDiv.style.visibility == "hidden")
1303 boardDiv.style.visibility = "visible";
1304 }
1305 };
1306 let el = document.querySelector("#buttonsConfirm > .acceptBtn");
1307 // We may play several moves in a row: in case of, remove listener:
1308 let elClone = el.cloneNode(true);
1309 el.parentNode.replaceChild(elClone, el);
1310 elClone.addEventListener(
1311 "click",
1312 () => {
1313 document.getElementById("modalConfirm").checked = false;
1314 if (!!data.score && data.score != "*")
1315 // Set score first
1316 this.gameOver(data.score, null, afterSetScore);
1317 else afterSetScore();
1318 }
1319 );
1320 // PlayOnBoard is enough, and more appropriate for Synchrone Chess
1321 V.PlayOnBoard(this.vr.board, move);
1322 const position = this.vr.getBaseFen();
1323 V.UndoOnBoard(this.vr.board, move);
1324 if (["all","byrow"].includes(V.ShowMoves)) {
1325 this.curDiag = getDiagram({
1326 position: position,
1327 orientation: V.CanFlip ? this.game.mycolor : "w"
1328 });
1329 document.querySelector("#confirmDiv > .card").style.width =
1330 boardDiv.offsetWidth + "px";
1331 } else {
1332 // Incomplete information: just ask confirmation
1333 // Hide the board, because otherwise it could reveal infos
1334 boardDiv.style.visibility = "hidden";
1335 this.moveNotation = getFullNotation(move);
1336 }
1337 document.getElementById("modalConfirm").checked = true;
1338 }
1339 else {
1340 // Normal situation
1341 if (!!data.score && data.score != "*")
1342 this.gameOver(data.score, null, doProcessMove);
1343 else doProcessMove();
1344 }
1345 },
1346 cancelMove: function() {
1347 let boardDiv = document.querySelector(".game");
1348 if (boardDiv.style.visibility == "hidden")
1349 boardDiv.style.visibility = "visible";
1350 document.getElementById("modalConfirm").checked = false;
1351 this.$refs["basegame"].cancelLastMove();
1352 },
1353 // In corr games, callback to change page only after score is set:
1354 gameOver: function(score, scoreMsg, callback) {
1355 this.game.score = score;
1356 if (!scoreMsg) scoreMsg = getScoreMessage(score);
1357 this.game.scoreMsg = scoreMsg;
1358 this.$set(this.game, "scoreMsg", scoreMsg);
1359 const myIdx = this.game.players.findIndex(p => {
1360 return p.sid == this.st.user.sid || p.id == this.st.user.id;
1361 });
1362 if (myIdx >= 0) {
1363 // OK, I play in this game
1364 const scoreObj = {
1365 score: score,
1366 scoreMsg: scoreMsg
1367 };
1368 if (this.game.type == "live") {
1369 GameStorage.update(this.gameRef.id, scoreObj);
1370 if (!!callback) callback();
1371 }
1372 else this.updateCorrGame(scoreObj, callback);
1373 // Notify the score to main Hall. TODO: only one player (currently double send)
1374 this.send("result", { gid: this.game.id, score: score });
1375 // Also to MyGames page (TODO: doubled as well...)
1376 this.notifyMyGames(
1377 "score",
1378 {
1379 gid: this.gameRef.id,
1380 score: score
1381 }
1382 );
1383 }
1384 else if (!!callback) callback();
1385 }
1386 }
1387 };
1388 </script>
1389
1390 <style lang="sass" scoped>
1391 #infoDiv > .card
1392 padding: 15px 0
1393 max-width: 430px
1394
1395 .connected
1396 background-color: lightgreen
1397
1398 #participants
1399 margin-left: 5px
1400
1401 .anonymous
1402 color: grey
1403 font-style: italic
1404
1405 #playersInfo > p
1406 margin: 0
1407
1408 @media screen and (min-width: 768px)
1409 #actions
1410 width: 300px
1411 @media screen and (max-width: 767px)
1412 .game
1413 width: 100%
1414
1415 #actions
1416 display: inline-block
1417 margin: 0
1418
1419 button
1420 display: inline-block
1421 margin: 0
1422 display: inline-flex
1423 img
1424 height: 24px
1425 display: flex
1426 @media screen and (max-width: 767px)
1427 height: 18px
1428
1429 @media screen and (max-width: 767px)
1430 #aboveBoard
1431 text-align: center
1432 @media screen and (min-width: 768px)
1433 #aboveBoard
1434 margin-left: 30%
1435
1436 .variant-cadence
1437 padding-right: 10px
1438
1439 .variant-name
1440 font-weight: bold
1441 padding-right: 10px
1442
1443 span#nextGame
1444 background-color: #edda99
1445 cursor: pointer
1446 display: inline-block
1447 margin-right: 10px
1448
1449 span.name
1450 font-size: 1.5rem
1451 padding: 0 3px
1452
1453 span.time
1454 font-size: 2rem
1455 display: inline-block
1456 .time-left
1457 margin-left: 10px
1458 .time-right
1459 margin-left: 5px
1460 .time-separator
1461 margin-left: 5px
1462 position: relative
1463 top: -1px
1464
1465 span.yourturn
1466 color: #831B1B
1467 .time-separator
1468 animation: blink-animation 2s steps(3, start) infinite
1469 @keyframes blink-animation
1470 to
1471 visibility: hidden
1472
1473 .split-names
1474 display: inline-block
1475 margin: 0 15px
1476
1477 #chatWrap > .card
1478 padding-top: 20px
1479 max-width: 767px
1480 border: none
1481
1482 #confirmDiv > .card
1483 max-width: 767px
1484 max-height: 100%
1485
1486 .draw-sent, .draw-sent:hover
1487 background-color: lightyellow
1488
1489 .draw-received, .draw-received:hover
1490 background-color: lightgreen
1491
1492 .draw-threerep, .draw-threerep:hover
1493 background-color: #e4d1fc
1494
1495 .rematch-sent, .rematch-sent:hover
1496 background-color: lightyellow
1497
1498 .rematch-received, .rematch-received:hover
1499 background-color: lightgreen
1500
1501 .somethingnew
1502 background-color: #c5fefe
1503
1504 .diagram
1505 margin: 0 auto
1506 width: 100%
1507
1508 #buttonsConfirm
1509 margin: 0
1510 & > button > span
1511 width: 100%
1512 text-align: center
1513
1514 button.acceptBtn
1515 background-color: lightgreen
1516 button.refuseBtn
1517 background-color: red
1518 </style>