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     #chat.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         :players="game.players"
  24         :pastChats="game.chats"
  25         :newChat="newChat"
  26         @mychat="processChat"
  27         @chatcleared="clearChat"
  28       )
  29   .row
  30     #aboveBoard.col-sm-12.col-md-9.col-md-offset-3.col-lg-10.col-lg-offset-2
  31       span.variant-cadence {{ game.cadence }}
  32       span.variant-name {{ game.vname }}
  33       button#chatBtn(onClick="window.doClick('modalChat')") Chat
  34       #actions(v-if="game.score=='*'")
  35         button(
  36           @click="clickDraw()"
  37           :class="{['draw-' + drawOffer]: true}"
  38         )
  39           | {{ st.tr["Draw"] }}
  40         button(
  41           v-if="!!game.mycolor"
  42           @click="abortGame()"
  43         )
  44           | {{ st.tr["Abort"] }}
  45         button(
  46           v-if="!!game.mycolor"
  47           @click="resign()"
  48         )
  49           | {{ st.tr["Resign"] }}
  50       #playersInfo
  51         p
  52           span.name(:class="{connected: isConnected(0)}")
  53             | {{ game.players[0].name || "@nonymous" }}
  54           span.time(v-if="game.score=='*'") {{ virtualClocks[0] }}
  55           span.split-names -
  56           span.name(:class="{connected: isConnected(1)}")
  57             | {{ game.players[1].name || "@nonymous" }}
  58           span.time(v-if="game.score=='*'") {{ virtualClocks[1] }}
  59   BaseGame(
  60     ref="basegame"
  61     :game="game"
  62     @newmove="processMove"
  63     @gameover="gameOver"
  64   )
  65 </template>
  66
  67 <script>
  68 import BaseGame from "@/components/BaseGame.vue";
  69 import Chat from "@/components/Chat.vue";
  70 import { store } from "@/store";
  71 import { GameStorage } from "@/utils/gameStorage";
  72 import { ppt } from "@/utils/datetime";
  73 import { ajax } from "@/utils/ajax";
  74 import { extractTime } from "@/utils/timeControl";
  75 import { getRandString } from "@/utils/alea";
  76 import { processModalClick } from "@/utils/modalClick";
  77 import { getFullNotation } from "@/utils/notation";
  78 import { playMove, getFilteredMove } from "@/utils/playUndo";
  79 import { getScoreMessage } from "@/utils/scoring";
  80 import { ArrayFun } from "@/utils/array";
  81 import params from "@/parameters";
  82 export default {
  83   name: "my-game",
  84   components: {
  85     BaseGame,
  86     Chat
  87   },
  88   // gameRef: to find the game in (potentially remote) storage
  89   data: function() {
  90     return {
  91       st: store.state,
  92       gameRef: {
  93         // rid = remote (socket) ID
  94         id: "",
  95         rid: ""
  96       },
  97       game: {
  98         // Passed to BaseGame
  99         players: [{ name: "" }, { name: "" }],
 100         chats: [],
 101         rendered: false
 102       },
 103       virtualClocks: [0, 0], //initialized with true game.clocks
 104       vr: null, //"variant rules" object initialized from FEN
 105       drawOffer: "",
 106       people: {}, //players + observers
 107       onMygames: [], //opponents (or me) on "MyGames" page
 108       lastate: undefined, //used if opponent send lastate before game is ready
 109       repeat: {}, //detect position repetition
 110       newChat: "",
 111       conn: null,
 112       roomInitialized: false,
 113       // If newmove has wrong index: ask fullgame again:
 114       gameIsLoading: false,
 115       // If asklastate got no reply, ask again:
 116       gotLastate: false,
 117       gotMoveIdx: -1, //last move index received
 118       // If newmove got no pingback, send again:
 119       opponentGotMove: false,
 120       connexionString: "",
 121       // Related to (killing of) self multi-connects:
 122       newConnect: {},
 123       killed: {}
 124     };
 125   },
 126   watch: {
 127     $route: function(to) {
 128       this.gameRef.id = to.params["id"];
 129       this.gameRef.rid = to.query["rid"];
 130       this.loadGame();
 131     }
 132   },
 133   // NOTE: some redundant code with Hall.vue (mostly related to people array)
 134   created: function() {
 135     // Always add myself to players' list
 136     const my = this.st.user;
 137     this.$set(this.people, my.sid, { id: my.id, name: my.name });
 138     this.gameRef.id = this.$route.params["id"];
 139     this.gameRef.rid = this.$route.query["rid"]; //may be undefined
 140     // Initialize connection
 141     this.connexionString =
 142       params.socketUrl +
 143       "/?sid=" +
 144       this.st.user.sid +
 145       "&tmpId=" +
 146       getRandString() +
 147       "&page=" +
 148       encodeURIComponent(this.$route.path);
 149     this.conn = new WebSocket(this.connexionString);
 150     this.conn.onmessage = this.socketMessageListener;
 151     this.conn.onclose = this.socketCloseListener;
 152     // Socket init required before loading remote game:
 153     const socketInit = callback => {
 154       if (!!this.conn && this.conn.readyState == 1)
 155         // 1 == OPEN state
 156         callback();
 157       else
 158         // Socket not ready yet (initial loading)
 159         // NOTE: it's important to call callback without arguments,
 160         // otherwise first arg is Websocket object and loadGame fails.
 161         this.conn.onopen = () => callback();
 162     };
 163     if (!this.gameRef.rid)
 164       // Game stored locally or on server
 165       this.loadGame(null, () => socketInit(this.roomInit));
 166     else
 167       // Game stored remotely: need socket to retrieve it
 168       // NOTE: the callback "roomInit" will be lost, so we don't provide it.
 169       // --> It will be given when receiving "fullgame" socket event.
 170       socketInit(this.loadGame);
 171   },
 172   mounted: function() {
 173     document
 174       .getElementById("chatWrap")
 175       .addEventListener("click", processModalClick);
 176   },
 177   beforeDestroy: function() {
 178     this.send("disconnect");
 179   },
 180   methods: {
 181     roomInit: function() {
 182       if (!this.roomInitialized) {
 183         // Notify the room only now that I connected, because
 184         // messages might be lost otherwise (if game loading is slow)
 185         this.send("connect");
 186         this.send("pollclients");
 187         // We may ask fullgame several times if some moves are lost,
 188         // but room should be init only once:
 189         this.roomInitialized = true;
 190       }
 191     },
 192     send: function(code, obj) {
 193       if (!!this.conn)
 194         this.conn.send(JSON.stringify(Object.assign({ code: code }, obj)));
 195     },
 196     isConnected: function(index) {
 197       const player = this.game.players[index];
 198       // Is it me ?
 199       if (this.st.user.sid == player.sid || this.st.user.id == player.uid)
 200         return true;
 201       // Try to find a match in people:
 202       return (
 203         (
 204           player.sid &&
 205           Object.keys(this.people).some(sid => sid == player.sid)
 206         )
 207         ||
 208         (
 209           player.uid &&
 210           Object.values(this.people).some(p => p.id == player.uid)
 211         )
 212       );
 213     },
 214     resetChatColor: function() {
 215       // TODO: this is called twice, once on opening an once on closing
 216       document.getElementById("chatBtn").classList.remove("somethingnew");
 217     },
 218     processChat: function(chat) {
 219       this.send("newchat", { data: chat });
 220       // NOTE: anonymous chats in corr games are not stored on server (TODO?)
 221       if (this.game.type == "corr" && this.st.user.id > 0)
 222         GameStorage.update(this.gameRef.id, { chat: chat });
 223     },
 224     clearChat: function() {
 225       // Nothing more to do if game is live (chats not recorded)
 226       if (this.game.type == "corr") {
 227         if (!!this.game.mycolor)
 228           ajax("/chats", "DELETE", {gid: this.game.id});
 229         this.$set(this.game, "chats", []);
 230       }
 231     },
 232     // Notify turn after a new move (to opponent and me on MyGames page)
 233     notifyTurn: function(sid) {
 234       const player = this.people[sid];
 235       const colorIdx = this.game.players.findIndex(
 236         p => p.sid == sid || p.id == player.id);
 237       const color = ["w","b"][colorIdx];
 238       const movesCount = this.game.moves.length;
 239       const yourTurn =
 240         (color == "w" && movesCount % 2 == 0) ||
 241         (color == "b" && movesCount % 2 == 1);
 242       this.send("turnchange", { target: sid, yourTurn: yourTurn });
 243     },
 244     socketMessageListener: function(msg) {
 245       if (!this.conn) return;
 246       const data = JSON.parse(msg.data);
 247       switch (data.code) {
 248         case "pollclients":
 249           data.sockIds.forEach(sid => {
 250             if (sid != this.st.user.sid)
 251               this.send("askidentity", { target: sid });
 252           });
 253           break;
 254         case "connect":
 255           if (!this.people[data.from]) {
 256             this.newConnect[data.from] = true; //for self multi-connects tests
 257             this.send("askidentity", { target: data.from });
 258           }
 259           break;
 260         case "disconnect":
 261           this.$delete(this.people, data.from);
 262           break;
 263         case "mconnect": {
 264           // TODO: from MyGames page : send mconnect message with the list of gid (live and corr)
 265           // Either me (another tab) or opponent
 266           const sid = data.from;
 267           if (!this.onMygames.some(s => s == sid))
 268           {
 269             this.onMygames.push(sid);
 270             this.notifyTurn(sid); //TODO: this may require server ID (so, notify after receiving identity)
 271           }
 272           break;
 273           if (!this.people[sid])
 274             this.send("askidentity", { target: sid });
 275         }
 276         case "mdisconnect":
 277           ArrayFun.remove(this.onMygames, sid => sid == data.from);
 278           break;
 279         case "killed":
 280           // I logged in elsewhere:
 281           this.conn = null;
 282           alert(this.st.tr["New connexion detected: tab now offline"]);
 283           break;
 284         case "askidentity": {
 285           // Request for identification
 286           const me = {
 287             // Decompose to avoid revealing email
 288             name: this.st.user.name,
 289             sid: this.st.user.sid,
 290             id: this.st.user.id
 291           };
 292           this.send("identity", { data: me, target: data.from });
 293           break;
 294         }
 295         case "identity": {
 296           const user = data.data;
 297           this.$set(this.people, user.sid, { name: user.name, id: user.id });
 298           // If I multi-connect, kill current connexion if no mark (I'm older)
 299           if (this.newConnect[user.sid]) {
 300             if (
 301               user.id > 0 &&
 302               user.id == this.st.user.id &&
 303               user.sid != this.st.user.sid &&
 304               !this.killed[this.st.user.sid]
 305             ) {
 306                 this.send("killme", { sid: this.st.user.sid });
 307                 this.killed[this.st.user.sid] = true;
 308             }
 309             delete this.newConnect[user.sid];
 310           }
 311           if (!this.killed[this.st.user.sid]) {
 312             // Ask potentially missed last state, if opponent and I play
 313             if (
 314               !!this.game.mycolor &&
 315               this.game.type == "live" &&
 316               this.game.score == "*" &&
 317               this.game.players.some(p => p.sid == user.sid)
 318             ) {
 319               let self = this;
 320               (function askLastate() {
 321                 self.send("asklastate", { target: user.sid });
 322                 setTimeout(
 323                   () => {
 324                     // Ask until we got a reply (or opponent disconnect):
 325                     if (!self.gotLastate && !!self.people[user.sid])
 326                       askLastate();
 327                   },
 328                   750
 329                 );
 330               })();
 331             }
 332           }
 333           break;
 334         }
 335         case "askgame":
 336           // Send current (live) game if not asked by any of the players
 337           if (
 338             this.game.type == "live" &&
 339             this.game.players.every(p => p.sid != data.from[0])
 340           ) {
 341             const myGame = {
 342               id: this.game.id,
 343               fen: this.game.fen,
 344               players: this.game.players,
 345               vid: this.game.vid,
 346               cadence: this.game.cadence,
 347               score: this.game.score,
 348               rid: this.st.user.sid //useful in Hall if I'm an observer
 349             };
 350             this.send("game", { data: myGame, target: data.from });
 351           }
 352           break;
 353         case "askfullgame":
 354           this.send("fullgame", { data: this.game, target: data.from });
 355           break;
 356         case "fullgame":
 357           // Callback "roomInit" to poll clients only after game is loaded
 358           this.loadGame(data.data, this.roomInit);
 359           break;
 360         case "asklastate":
 361           // Sending informative last state if I played a move or score != "*"
 362           if (
 363             (this.game.moves.length > 0 && this.vr.turn != this.game.mycolor) ||
 364             this.game.score != "*" ||
 365             this.drawOffer == "sent"
 366           ) {
 367             // Send our "last state" informations to opponent
 368             const L = this.game.moves.length;
 369             const myIdx = ["w", "b"].indexOf(this.game.mycolor);
 370             const myLastate = {
 371               lastMove: L > 0 ? this.game.moves[L - 1] : undefined,
 372               addTime: L > 0 ? this.game.addTimes[L - 1] : undefined,
 373               // Since we played a move (or abort or resign),
 374               // only drawOffer=="sent" is possible
 375               drawSent: this.drawOffer == "sent",
 376               score: this.game.score,
 377               movesCount: L,
 378               initime: this.game.initime[1 - myIdx] //relevant only if I played
 379             };
 380             this.send("lastate", { data: myLastate, target: data.from });
 381           } else {
 382             this.send("lastate", { data: {nothing: true}, target: data.from });
 383           }
 384           break;
 385         case "lastate": {
 386           // Got opponent infos about last move
 387           this.gotLastate = true;
 388           if (!data.data.nothing) {
 389             this.lastate = data.data;
 390             if (this.game.rendered)
 391               // Game is rendered (Board component)
 392               this.processLastate();
 393             // Else: will be processed when game is ready
 394           }
 395           break;
 396         }
 397         case "newmove": {
 398           const movePlus = data.data;
 399           const movesCount = this.game.moves.length;
 400           if (movePlus.index > movesCount) {
 401             // This can only happen if I'm an observer and missed a move.
 402             if (!this.gameIsLoading) {
 403               this.gameIsLoading = true;
 404               if (!this.gameRef.rid)
 405                 // This is my game: just reload.
 406                 this.loadGame();
 407               else {
 408                 // Just ask fullgame again (once!), this is much simpler.
 409                 // If this fails, the user could just reload page :/
 410                 let self = this;
 411                 (function askIfPeerConnected() {
 412                   if (!!self.people[self.gameRef.rid])
 413                     self.send("askfullgame", { target: self.gameRef.rid });
 414                   else setTimeout(askIfPeerConnected, 1000);
 415                 })();
 416               }
 417             }
 418           } else {
 419             if (
 420               movePlus.index < movesCount ||
 421               this.gotMoveIdx >= movePlus.index
 422             ) {
 423               // Opponent re-send but we already have the move:
 424               // (maybe he didn't receive our pingback...)
 425               this.send("gotmove", {data: movePlus.index, target: data.from});
 426             } else {
 427               this.gotMoveIdx = movePlus.index;
 428               const receiveMyMove = (movePlus.color == this.game.mycolor);
 429               if (!receiveMyMove && !!this.game.mycolor)
 430                 // Notify opponent that I got the move:
 431                 this.send("gotmove", {data: movePlus.index, target: data.from});
 432               if (movePlus.cancelDrawOffer) {
 433                 // Opponent refuses draw
 434                 this.drawOffer = "";
 435                 // NOTE for corr games: drawOffer reset by player in turn
 436                 if (
 437                   this.game.type == "live" &&
 438                   !!this.game.mycolor &&
 439                   !receiveMyMove
 440                 ) {
 441                   GameStorage.update(this.gameRef.id, { drawOffer: "" });
 442                 }
 443               }
 444               this.$refs["basegame"].play(
 445                 movePlus.move,
 446                 "received",
 447                 null,
 448                 {
 449                   addTime: movePlus.addTime,
 450                   receiveMyMove: receiveMyMove
 451                 }
 452               );
 453             }
 454           }
 455           break;
 456         }
 457         case "gotmove": {
 458           this.opponentGotMove = true;
 459           break;
 460         }
 461         case "resign":
 462           const score = data.side == "b" ? "1-0" : "0-1";
 463           const side = data.side == "w" ? "White" : "Black";
 464           this.gameOver(score, side + " surrender");
 465           break;
 466         case "abort":
 467           this.gameOver("?", "Stop");
 468           break;
 469         case "draw":
 470           this.gameOver("1/2", data.data);
 471           break;
 472         case "drawoffer":
 473           // NOTE: observers don't know who offered draw
 474           this.drawOffer = "received";
 475           break;
 476         case "newchat":
 477           this.newChat = data.data;
 478           if (!document.getElementById("modalChat").checked)
 479             document.getElementById("chatBtn").classList.add("somethingnew");
 480           break;
 481       }
 482     },
 483     socketCloseListener: function() {
 484       this.conn = new WebSocket(this.connexionString);
 485       this.conn.addEventListener("message", this.socketMessageListener);
 486       this.conn.addEventListener("close", this.socketCloseListener);
 487     },
 488     // lastate was received, but maybe game wasn't ready yet:
 489     processLastate: function() {
 490       const data = this.lastate;
 491       this.lastate = undefined; //security...
 492       const L = this.game.moves.length;
 493       if (data.movesCount > L) {
 494         // Just got last move from him
 495         this.$refs["basegame"].play(
 496           data.lastMove,
 497           "received",
 498           null,
 499           {addTime: data.addTime, initime: data.initime}
 500         );
 501       }
 502       if (data.drawSent) this.drawOffer = "received";
 503       if (data.score != "*") {
 504         this.drawOffer = "";
 505         if (this.game.score == "*") this.gameOver(data.score);
 506       }
 507     },
 508     clickDraw: function() {
 509       if (!this.game.mycolor) return; //I'm just spectator
 510       if (["received", "threerep"].includes(this.drawOffer)) {
 511         if (!confirm(this.st.tr["Accept draw?"])) return;
 512         const message =
 513           this.drawOffer == "received"
 514             ? "Mutual agreement"
 515             : "Three repetitions";
 516         this.send("draw", { data: message });
 517         this.gameOver("1/2", message);
 518       } else if (this.drawOffer == "") {
 519         // No effect if drawOffer == "sent"
 520         if (!!this.game.mycolor != this.vr.turn) {
 521           alert(this.st.tr["Draw offer only in your turn"]);
 522           return;
 523         }
 524         if (!confirm(this.st.tr["Offer draw?"])) return;
 525         this.drawOffer = "sent";
 526         this.send("drawoffer");
 527         GameStorage.update(this.gameRef.id, { drawOffer: this.game.mycolor });
 528       }
 529     },
 530     abortGame: function() {
 531       if (!this.game.mycolor || !confirm(this.st.tr["Terminate game?"])) return;
 532       this.gameOver("?", "Stop");
 533       this.send("abort");
 534     },
 535     resign: function() {
 536       if (!this.game.mycolor || !confirm(this.st.tr["Resign the game?"]))
 537         return;
 538       this.send("resign", { data: this.game.mycolor });
 539       const score = this.game.mycolor == "w" ? "0-1" : "1-0";
 540       const side = this.game.mycolor == "w" ? "White" : "Black";
 541       this.gameOver(score, side + " surrender");
 542     },
 543     // 3 cases for loading a game:
 544     //  - from indexedDB (running or completed live game I play)
 545     //  - from server (one correspondance game I play[ed] or not)
 546     //  - from remote peer (one live game I don't play, finished or not)
 547     loadGame: function(game, callback) {
 548       const afterRetrieval = async game => {
 549         const vModule = await import("@/variants/" + game.vname + ".js");
 550         window.V = vModule.VariantRules;
 551         this.vr = new V(game.fen);
 552         const gtype = game.cadence.indexOf("d") >= 0 ? "corr" : "live";
 553         const tc = extractTime(game.cadence);
 554         const myIdx = game.players.findIndex(p => {
 555           return p.sid == this.st.user.sid || p.uid == this.st.user.id;
 556         });
 557         const mycolor = [undefined, "w", "b"][myIdx + 1]; //undefined for observers
 558         if (!game.chats) game.chats = []; //live games don't have chat history
 559         if (gtype == "corr") {
 560           if (game.players[0].color == "b") {
 561             // Adopt the same convention for live and corr games: [0] = white
 562             [game.players[0], game.players[1]] = [
 563               game.players[1],
 564               game.players[0]
 565             ];
 566           }
 567           // NOTE: clocks in seconds, initime in milliseconds
 568           game.moves.sort((m1, m2) => m1.idx - m2.idx); //in case of
 569           const L = game.moves.length;
 570           if (game.score == "*") {
 571             // Set clocks + initime
 572             game.clocks = [tc.mainTime, tc.mainTime];
 573             game.initime = [0, 0];
 574             if (L >= 1) {
 575               const gameLastupdate = game.moves[L-1].played;
 576               game.initime[L % 2] = gameLastupdate;
 577               if (L >= 2) {
 578                 game.clocks[L % 2] =
 579                   tc.mainTime - (Date.now() - gameLastupdate) / 1000;
 580               }
 581             }
 582           }
 583           // Sort chat messages from newest to oldest
 584           game.chats.sort((c1, c2) => {
 585             return c2.added - c1.added;
 586           });
 587           if (myIdx >= 0 && game.score == "*" && game.chats.length > 0) {
 588             // Did a chat message arrive after my last move?
 589             let dtLastMove = 0;
 590             if (L == 1 && myIdx == 0)
 591               dtLastMove = game.moves[0].played;
 592             else if (L >= 2) {
 593               if (L % 2 == 0) {
 594                 // It's now white turn
 595                 dtLastMove = game.moves[L-1-(1-myIdx)].played;
 596               } else {
 597                 // Black turn:
 598                 dtLastMove = game.moves[L-1-myIdx].played;
 599               }
 600             }
 601             if (dtLastMove < game.chats[0].added)
 602               document.getElementById("chatBtn").classList.add("somethingnew");
 603           }
 604           // Now that we used idx and played, re-format moves as for live games
 605           game.moves = game.moves.map(m => m.squares);
 606         }
 607         if (gtype == "live" && game.clocks[0] < 0) {
 608           // Game is unstarted
 609           game.clocks = [tc.mainTime, tc.mainTime];
 610           if (game.score == "*") {
 611             game.initime[0] = Date.now();
 612             if (myIdx >= 0) {
 613               // I play in this live game; corr games don't have clocks+initime
 614               GameStorage.update(game.id, {
 615                 clocks: game.clocks,
 616                 initime: game.initime
 617               });
 618             }
 619           }
 620         }
 621         if (game.drawOffer) {
 622           if (game.drawOffer == "t")
 623             // Three repetitions
 624             this.drawOffer = "threerep";
 625           else {
 626             // Draw offered by any of the players:
 627             if (myIdx < 0) this.drawOffer = "received";
 628             else {
 629               // I play in this game:
 630               if (
 631                 (game.drawOffer == "w" && myIdx == 0) ||
 632                 (game.drawOffer == "b" && myIdx == 1)
 633               )
 634                 this.drawOffer = "sent";
 635               else this.drawOffer = "received";
 636             }
 637           }
 638         }
 639         this.repeat = {}; //reset: scan past moves' FEN:
 640         let repIdx = 0;
 641         let vr_tmp = new V(game.fenStart);
 642         let curTurn = "n";
 643         game.moves.forEach(m => {
 644           playMove(m, vr_tmp);
 645           const fenIdx = vr_tmp.getFen().replace(/ /g, "_");
 646           this.repeat[fenIdx] = this.repeat[fenIdx]
 647             ? this.repeat[fenIdx] + 1
 648             : 1;
 649         });
 650         if (this.repeat[repIdx] >= 3) this.drawOffer = "threerep";
 651         this.game = Object.assign(
 652           // NOTE: assign mycolor here, since BaseGame could also be VS computer
 653           {
 654             type: gtype,
 655             increment: tc.increment,
 656             mycolor: mycolor,
 657             // opponent sid not strictly required (or available), but easier
 658             // at least oppsid or oppid is available anyway:
 659             oppsid: myIdx < 0 ? undefined : game.players[1 - myIdx].sid,
 660             oppid: myIdx < 0 ? undefined : game.players[1 - myIdx].uid,
 661             addTimes: [], //used for live games
 662           },
 663           game,
 664         );
 665         if (this.gameIsLoading)
 666           // Re-load game because we missed some moves:
 667           // artificially reset BaseGame (required if moves arrive too quickly)
 668           this.$refs["basegame"].re_setVariables();
 669         this.re_setClocks();
 670         this.$nextTick(() => {
 671           this.game.rendered = true;
 672           // Did lastate arrive before game was rendered?
 673           if (this.lastate) this.processLastate();
 674         });
 675         this.gameIsLoading = false;
 676         if (!!callback) callback();
 677       };
 678       if (!!game) {
 679         afterRetrieval(game);
 680         return;
 681       }
 682       if (this.gameRef.rid) {
 683         // Remote live game: forgetting about callback func... (TODO: design)
 684         this.send("askfullgame", { target: this.gameRef.rid });
 685       } else {
 686         // Local or corr game
 687         // NOTE: afterRetrieval() is never called if game not found
 688         GameStorage.get(this.gameRef.id, afterRetrieval);
 689       }
 690     },
 691     re_setClocks: function() {
 692       if (this.game.moves.length < 2 || this.game.score != "*") {
 693         // 1st move not completed yet, or game over: freeze time
 694         this.virtualClocks = this.game.clocks.map(s => ppt(s));
 695         return;
 696       }
 697       const currentTurn = this.vr.turn;
 698       const currentMovesCount = this.game.moves.length;
 699       const colorIdx = ["w", "b"].indexOf(currentTurn);
 700       let countdown =
 701         this.game.clocks[colorIdx] -
 702         (Date.now() - this.game.initime[colorIdx]) / 1000;
 703       this.virtualClocks = [0, 1].map(i => {
 704         const removeTime =
 705           i == colorIdx ? (Date.now() - this.game.initime[colorIdx]) / 1000 : 0;
 706         return ppt(this.game.clocks[i] - removeTime);
 707       });
 708       let clockUpdate = setInterval(() => {
 709         if (
 710           countdown < 0 ||
 711           this.game.moves.length > currentMovesCount ||
 712           this.game.score != "*"
 713         ) {
 714           clearInterval(clockUpdate);
 715           if (countdown < 0)
 716             this.gameOver(
 717               currentTurn == "w" ? "0-1" : "1-0",
 718               "Time"
 719             );
 720         } else
 721           this.$set(
 722             this.virtualClocks,
 723             colorIdx,
 724             ppt(Math.max(0, --countdown))
 725           );
 726       }, 1000);
 727     },
 728     // Post-process a (potentially partial) move (which was just played in BaseGame)
 729     processMove: function(move, data) {
 730       if (!data) data = {};
 731       const moveCol = this.vr.turn;
 732       const doProcessMove = () => {
 733         const colorIdx = ["w", "b"].indexOf(moveCol);
 734         const nextIdx = 1 - colorIdx;
 735         const origMovescount = this.game.moves.length;
 736         let addTime =
 737           this.game.type == "live"
 738             ? (data.addTime || 0)
 739             : undefined;
 740         if (moveCol == this.game.mycolor && !data.receiveMyMove) {
 741           if (this.drawOffer == "received")
 742             // I refuse draw
 743             this.drawOffer = "";
 744           if (this.game.type == "live" && origMovescount >= 2) {
 745             const elapsed = Date.now() - this.game.initime[colorIdx];
 746             // elapsed time is measured in milliseconds
 747             addTime = this.game.increment - elapsed / 1000;
 748           }
 749         }
 750         // Update current game object:
 751         playMove(move, this.vr);
 752 // TODO: notifyTurn: "changeturn" message
 753         this.game.moves.push(move);
 754         // (add)Time indication: useful in case of lastate infos requested
 755         if (this.game.type == "live")
 756           this.game.addTimes.push(addTime);
 757         this.game.fen = this.vr.getFen();
 758         if (this.game.type == "live") this.game.clocks[colorIdx] += addTime;
 759         // In corr games, just reset clock to mainTime:
 760         else this.game.clocks[colorIdx] = extractTime(this.game.cadence).mainTime;
 761         // data.initime is set only when I receive a "lastate" move from opponent
 762         this.game.initime[nextIdx] = data.initime || Date.now();
 763         this.re_setClocks();
 764         // If repetition detected, consider that a draw offer was received:
 765         const fenObj = this.vr.getFenForRepeat();
 766         this.repeat[fenObj] = this.repeat[fenObj] ? this.repeat[fenObj] + 1 : 1;
 767         if (this.repeat[fenObj] >= 3) this.drawOffer = "threerep";
 768         else if (this.drawOffer == "threerep") this.drawOffer = "";
 769         // Since corr games are stored at only one location, update should be
 770         // done only by one player for each move:
 771         if (!!this.game.mycolor && !data.receiveMyMove) {
 772           // NOTE: 'var' to see that variable outside this block
 773           var filtered_move = getFilteredMove(move);
 774         }
 775         if (
 776           !!this.game.mycolor &&
 777           !data.receiveMyMove &&
 778           (this.game.type == "live" || moveCol == this.game.mycolor)
 779         ) {
 780           let drawCode = "";
 781           switch (this.drawOffer) {
 782             case "threerep":
 783               drawCode = "t";
 784               break;
 785             case "sent":
 786               drawCode = this.game.mycolor;
 787               break;
 788             case "received":
 789               drawCode = V.GetOppCol(this.game.mycolor);
 790               break;
 791           }
 792           if (this.game.type == "corr") {
 793             GameStorage.update(this.gameRef.id, {
 794               fen: this.game.fen,
 795               move: {
 796                 squares: filtered_move,
 797                 played: Date.now(),
 798                 idx: origMovescount
 799               },
 800               // Code "n" for "None" to force reset (otherwise it's ignored)
 801               drawOffer: drawCode || "n"
 802             });
 803           }
 804           else if (!document.hidden) {
 805             // Live game: consider only the active tab
 806             GameStorage.update(this.gameRef.id, {
 807               fen: this.game.fen,
 808               move: filtered_move,
 809               clocks: this.game.clocks,
 810               initime: this.game.initime,
 811               drawOffer: drawCode
 812             });
 813           }
 814         }
 815         // Send move ("newmove" event) to people in the room (if our turn)
 816         if (moveCol == this.game.mycolor && !data.receiveMyMove) {
 817           const sendMove = {
 818             move: filtered_move,
 819             index: origMovescount,
 820             // color is required to check if this is my move (if several tabs opened)
 821             color: moveCol,
 822             addTime: addTime, //undefined for corr games
 823             cancelDrawOffer: this.drawOffer == ""
 824           };
 825           this.opponentGotMove = false;
 826           this.send("newmove", {data: sendMove});
 827           // If the opponent doesn't reply gotmove soon enough, re-send move:
 828           let retrySendmove = setInterval( () => {
 829             if (this.opponentGotMove) {
 830               clearInterval(retrySendmove);
 831               return;
 832             }
 833             let oppsid = this.game.players[nextIdx].sid;
 834             if (!oppsid) {
 835               oppsid = Object.keys(this.people).find(
 836                 sid => this.people[sid].id == this.game.players[nextIdx].uid
 837               );
 838             }
 839             if (!oppsid || !this.people[oppsid])
 840               // Opponent is disconnected: he'll ask last state
 841               clearInterval(retrySendmove);
 842             else this.send("newmove", {data: sendMove, target: oppsid});
 843           }, 750);
 844         }
 845       };
 846       if (
 847         this.game.type == "corr" &&
 848         moveCol == this.game.mycolor &&
 849         !data.receiveMyMove
 850       ) {
 851         setTimeout(() => {
 852           // TODO: remplacer cette confirm box par qqch de plus discret
 853           // (et de même pour challenge accepté / refusé)
 854           if (
 855             !confirm(
 856               this.st.tr["Move played:"] +
 857                 " " +
 858                 getFullNotation(move) +
 859                 "\n" +
 860                 this.st.tr["Are you sure?"]
 861             )
 862           ) {
 863             this.$refs["basegame"].cancelLastMove();
 864             return;
 865           }
 866           doProcessMove();
 867         // Let small time to finish drawing current move attempt:
 868         }, 500);
 869       }
 870       else doProcessMove();
 871     },
 872     gameOver: function(score, scoreMsg) {
 873       this.game.score = score;
 874       this.$set(this.game, "scoreMsg", scoreMsg || getScoreMessage(score));
 875       const myIdx = this.game.players.findIndex(p => {
 876         return p.sid == this.st.user.sid || p.uid == this.st.user.id;
 877       });
 878       if (myIdx >= 0) {
 879         // OK, I play in this game
 880         GameStorage.update(this.gameRef.id, {
 881           score: score,
 882           scoreMsg: scoreMsg
 883         });
 884         // Notify the score to main Hall. TODO: only one player (currently double send)
 885         this.send("result", { gid: this.game.id, score: score });
 886       }
 887     }
 888   }
 889 };
 890 </script>
 891
 892 <style lang="sass" scoped>
 893 .connected
 894   background-color: lightgreen
 895
 896 #participants
 897   margin-left: 5px
 898
 899 .anonymous
 900   color: grey
 901   font-style: italic
 902
 903 #playersInfo > p
 904   margin: 0
 905
 906 @media screen and (min-width: 768px)
 907   #actions
 908     width: 300px
 909 @media screen and (max-width: 767px)
 910   .game
 911     width: 100%
 912
 913 #actions
 914   display: inline-block
 915   margin: 0
 916   button
 917     display: inline-block
 918     margin: 0
 919
 920 @media screen and (max-width: 767px)
 921   #aboveBoard
 922     text-align: center
 923 @media screen and (min-width: 768px)
 924   #aboveBoard
 925     margin-left: 30%
 926
 927 .variant-cadence
 928   padding-right: 10px
 929
 930 .variant-name
 931   font-weight: bold
 932   padding-right: 10px
 933
 934 .name
 935   font-size: 1.5rem
 936   padding: 1px
 937
 938 .time
 939   font-size: 2rem
 940   display: inline-block
 941   margin-left: 10px
 942
 943 .split-names
 944   display: inline-block
 945   margin: 0 15px
 946
 947 #chat
 948   padding-top: 20px
 949   max-width: 767px
 950   border: none;
 951
 952 #chatBtn
 953   margin: 0 10px 0 0
 954
 955 .draw-sent, .draw-sent:hover
 956   background-color: lightyellow
 957
 958 .draw-received, .draw-received:hover
 959   background-color: lightgreen
 960
 961 .draw-threerep, .draw-threerep:hover
 962   background-color: #e4d1fc
 963
 964 .somethingnew
 965   background-color: #c5fefe
 966 </style>