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