client/src/views/Game.vue

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