client/src/views/Game.vue

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