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