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