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