public/javascripts/components/game.js

   1 // Game logic on a variant page
   2 Vue.component('my-game', {
   3     data: function() {
   4         return {
   5             vr: null, //object to check moves, store them, FEN..
   6             mycolor: "w",
   7             possibleMoves: [], //filled after each valid click/dragstart
   8             choices: [], //promotion pieces, or checkered captures... (as moves)
   9             start: {}, //pixels coordinates + id of starting square (click or drag)
  10             selectedPiece: null, //moving piece (or clicked piece)
  11             conn: null, //socket connection
  12             score: "*", //'*' means 'unfinished'
  13             mode: "idle", //human, friend, computer or idle (when not playing)
  14             oppid: "", //opponent ID in case of HH game
  15             oppConnected: false,
  16             seek: false,
  17             fenStart: "",
  18             incheck: [],
  19             pgnTxt: "",
  20             expert: (getCookie("expert") === "1" ? true : false),
  21             gameId: "", //used to limit computer moves' time
  22         };
  23     },
  24     render(h) {
  25         const [sizeX,sizeY] = VariantRules.size;
  26         const smallScreen = (screen.width <= 420);
  27         // Precompute hints squares to facilitate rendering
  28         let hintSquares = doubleArray(sizeX, sizeY, false);
  29         this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
  30         // Also precompute in-check squares
  31         let incheckSq = doubleArray(sizeX, sizeY, false);
  32         this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
  33         let elementArray = [];
  34         let actionArray = [];
  35         actionArray.push(
  36             h('button',
  37             {
  38                 on: { click: this.clickGameSeek },
  39                 attrs: { "aria-label": 'New online game' },
  40                 'class': {
  41                     "tooltip": true,
  42                     "bottom": true, //display below
  43                     "seek": this.seek,
  44                     "playing": this.mode == "human",
  45                     "small": smallScreen,
  46                 },
  47             },
  48             [h('i', { 'class': { "material-icons": true } }, "accessibility")])
  49         );
  50         if (["idle","computer"].includes(this.mode))
  51         {
  52             actionArray.push(
  53                 h('button',
  54                 {
  55                     on: { click: this.clickComputerGame },
  56                     attrs: { "aria-label": 'New game VS computer' },
  57                     'class': {
  58                         "tooltip":true,
  59                         "bottom": true,
  60                         "playing": this.mode == "computer",
  61                         "small": smallScreen,
  62                     },
  63                 },
  64                 [h('i', { 'class': { "material-icons": true } }, "computer")])
  65             );
  66         }
  67         if (["idle","friend"].includes(this.mode))
  68         {
  69             actionArray.push(
  70                 h('button',
  71                 {
  72                     on: { click: this.clickFriendGame },
  73                     attrs: { "aria-label": 'New IRL game' },
  74                     'class': {
  75                         "tooltip":true,
  76                         "bottom": true,
  77                         "playing": this.mode == "friend",
  78                         "small": smallScreen,
  79                     },
  80                 },
  81                 [h('i', { 'class': { "material-icons": true } }, "people")])
  82             );
  83         }
  84         if (!!this.vr)
  85         {
  86             const square00 = document.getElementById("sq-0-0");
  87             const squareWidth = !!square00
  88                 ? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
  89                 : 0;
  90             const indicWidth = (squareWidth>0 ? squareWidth/2 : 20);
  91             if (this.mode == "human")
  92             {
  93                 let connectedIndic = h(
  94                     'div',
  95                     {
  96                         "class": {
  97                             "topindicator": true,
  98                             "indic-left": true,
  99                             "connected": this.oppConnected,
 100                             "disconnected": !this.oppConnected,
 101                         },
 102                         style: {
 103                             "width": indicWidth + "px",
 104                             "height": indicWidth + "px",
 105                         },
 106                     }
 107                 );
 108                 elementArray.push(connectedIndic);
 109             }
 110             let turnIndic = h(
 111                 'div',
 112                 {
 113                     "class": {
 114                         "topindicator": true,
 115                         "indic-right": true,
 116                         "white-turn": this.vr.turn=="w",
 117                         "black-turn": this.vr.turn=="b",
 118                     },
 119                     style: {
 120                         "width": indicWidth + "px",
 121                         "height": indicWidth + "px",
 122                     },
 123                 }
 124             );
 125             elementArray.push(turnIndic);
 126             let expertSwitch = h(
 127                 'button',
 128                 {
 129                     on: { click: this.toggleExpertMode },
 130                     attrs: { "aria-label": 'Toggle expert mode' },
 131                     'class': {
 132                         "tooltip":true,
 133                         "topindicator": true,
 134                         "indic-right": true,
 135                         "expert-switch": true,
 136                         "expert-mode": this.expert,
 137                         "small": smallScreen,
 138                     },
 139                 },
 140                 [h('i', { 'class': { "material-icons": true } }, "visibility_off")]
 141             );
 142             elementArray.push(expertSwitch);
 143             let choices = h('div',
 144                 {
 145                     attrs: { "id": "choices" },
 146                     'class': { 'row': true },
 147                     style: {
 148                         "display": this.choices.length>0?"block":"none",
 149                         "top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
 150                         "width": (this.choices.length * squareWidth) + "px",
 151                         "height": squareWidth + "px",
 152                     },
 153                 },
 154                 this.choices.map( m => { //a "choice" is a move
 155                     return h('div',
 156                         {
 157                             'class': {
 158                                 'board': true,
 159                                 ['board'+sizeY]: true,
 160                             },
 161                             style: {
 162                                 'width': (100/this.choices.length) + "%",
 163                                 'padding-bottom': (100/this.choices.length) + "%",
 164                             },
 165                         },
 166                         [h('img',
 167                             {
 168                                 attrs: { "src": '/images/pieces/' +
 169                                     VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
 170                                 'class': { 'choice-piece': true },
 171                                 on: { "click": e => { this.play(m); this.choices=[]; } },
 172                             })
 173                         ]
 174                     );
 175                 })
 176             );
 177             // Create board element (+ reserves if needed by variant or mode)
 178             let gameDiv = h('div',
 179                 {
 180                     'class': { 'game': true },
 181                 },
 182                 [_.range(sizeX).map(i => {
 183                     let ci = this.mycolor=='w' ? i : sizeX-i-1;
 184                     return h(
 185                         'div',
 186                         {
 187                             'class': {
 188                                 'row': true,
 189                             },
 190                             style: { 'opacity': this.choices.length>0?"0.5":"1" },
 191                         },
 192                         _.range(sizeY).map(j => {
 193                             let cj = this.mycolor=='w' ? j : sizeY-j-1;
 194                             let elems = [];
 195                             if (this.vr.board[ci][cj] != VariantRules.EMPTY)
 196                             {
 197                                 elems.push(
 198                                     h(
 199                                         'img',
 200                                         {
 201                                             'class': {
 202                                                 'piece': true,
 203                                                 'ghost': !!this.selectedPiece
 204                                                     && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
 205                                             },
 206                                             attrs: {
 207                                                 src: "/images/pieces/" +
 208                                                     VariantRules.getPpath(this.vr.board[ci][cj]) + ".svg",
 209                                             },
 210                                         }
 211                                     )
 212                                 );
 213                             }
 214                             if (!this.expert && hintSquares[ci][cj])
 215                             {
 216                                 elems.push(
 217                                     h(
 218                                         'img',
 219                                         {
 220                                             'class': {
 221                                                 'mark-square': true,
 222                                             },
 223                                             attrs: {
 224                                                 src: "/images/mark.svg",
 225                                             },
 226                                         }
 227                                     )
 228                                 );
 229                             }
 230                             const lm = this.vr.lastMove;
 231                             const showLight = !this.expert &&
 232                                 (this.mode!="idle" || this.cursor==this.vr.moves.length);
 233                             return h(
 234                                 'div',
 235                                 {
 236                                     'class': {
 237                                         'board': true,
 238                                         ['board'+sizeY]: true,
 239                                         'light-square': (i+j)%2==0,
 240                                         'dark-square': (i+j)%2==1,
 241                                         'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
 242                                         'incheck': showLight && incheckSq[ci][cj],
 243                                     },
 244                                     attrs: {
 245                                         id: this.getSquareId({x:ci,y:cj}),
 246                                     },
 247                                 },
 248                                 elems
 249                             );
 250                         })
 251                     );
 252                 }), choices]
 253             );
 254             if (this.mode != "idle")
 255             {
 256                 actionArray.push(
 257                     h('button',
 258                         {
 259                             on: { click: this.resign },
 260                             attrs: { "aria-label": 'Resign' },
 261                             'class': {
 262                                 "tooltip":true,
 263                                 "bottom": true,
 264                                 "small": smallScreen,
 265                             },
 266                         },
 267                         [h('i', { 'class': { "material-icons": true } }, "flag")])
 268                 );
 269             }
 270             else if (this.vr.moves.length > 0)
 271             {
 272                 // A game finished, and another is not started yet: allow navigation
 273                 actionArray = actionArray.concat([
 274                     h('button',
 275                         {
 276                             on: { click: e => this.undo() },
 277                             attrs: { "aria-label": 'Undo' },
 278                             "class": {
 279                                 "small": smallScreen,
 280                                 "marginleft": true,
 281                             },
 282                         },
 283                         [h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
 284                     h('button',
 285                         {
 286                             on: { click: e => this.play() },
 287                             attrs: { "aria-label": 'Play' },
 288                             "class": { "small": smallScreen },
 289                         },
 290                         [h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
 291                     ]
 292                 );
 293             }
 294             if (this.mode == "friend")
 295             {
 296                 actionArray = actionArray.concat(
 297                 [
 298                     h('button',
 299                         {
 300                             on: { click: this.undoInGame },
 301                             attrs: { "aria-label": 'Undo' },
 302                             "class": {
 303                                 "small": smallScreen,
 304                                 "marginleft": true,
 305                             },
 306                         },
 307                         [h('i', { 'class': { "material-icons": true } }, "undo")]
 308                     ),
 309                     h('button',
 310                         {
 311                             on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } },
 312                             attrs: { "aria-label": 'Flip' },
 313                             "class": { "small": smallScreen },
 314                         },
 315                         [h('i', { 'class': { "material-icons": true } }, "cached")]
 316                     ),
 317                 ]);
 318             }
 319             elementArray.push(gameDiv);
 320             if (!!this.vr.reserve)
 321             {
 322                 const shiftIdx = (this.mycolor=="w" ? 0 : 1);
 323                 let myReservePiecesArray = [];
 324                 for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
 325                 {
 326                     myReservePiecesArray.push(h('div',
 327                     {
 328                         'class': {'board':true, ['board'+sizeY]:true},
 329                         attrs: { id: this.getSquareId({x:sizeX+shiftIdx,y:i}) }
 330                     },
 331                     [
 332                         h('img',
 333                         {
 334                             'class': {"piece":true},
 335                             attrs: {
 336                                 "src": "/images/pieces/" +
 337                                     this.vr.getReservePpath(this.mycolor,i) + ".svg",
 338                             }
 339                         }),
 340                         h('sup',
 341                             {"class": { "reserve-count": true } },
 342                             [ this.vr.reserve[this.mycolor][VariantRules.RESERVE_PIECES[i]] ]
 343                         )
 344                     ]));
 345                 }
 346                 let oppReservePiecesArray = [];
 347                 const oppCol = this.vr.getOppCol(this.mycolor);
 348                 for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
 349                 {
 350                     oppReservePiecesArray.push(h('div',
 351                     {
 352                         'class': {'board':true, ['board'+sizeY]:true},
 353                         attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
 354                     },
 355                     [
 356                         h('img',
 357                         {
 358                             'class': {"piece":true},
 359                             attrs: {
 360                                 "src": "/images/pieces/" +
 361                                     this.vr.getReservePpath(oppCol,i) + ".svg",
 362                             }
 363                         }),
 364                         h('sup',
 365                             {"class": { "reserve-count": true } },
 366                             [ this.vr.reserve[oppCol][VariantRules.RESERVE_PIECES[i]] ]
 367                         )
 368                     ]));
 369                 }
 370                 let reserves = h('div',
 371                     {
 372                         'class':{
 373                             'game': true,
 374                             "reserve-div": true,
 375                         },
 376                     },
 377                     [
 378                         h('div',
 379                             {
 380                                 'class': {
 381                                     'row': true,
 382                                     "reserve-row-1": true,
 383                                 },
 384                             },
 385                             myReservePiecesArray
 386                         ),
 387                         h('div',
 388                             { 'class': { 'row': true }},
 389                             oppReservePiecesArray
 390                         )
 391                     ]
 392                 );
 393                 elementArray.push(reserves);
 394             }
 395             const eogMessage = this.getEndgameMessage(this.score);
 396             const modalEog = [
 397                 h('input',
 398                     {
 399                         attrs: { "id": "modal-eog", type: "checkbox" },
 400                         "class": { "modal": true },
 401                     }),
 402                 h('div',
 403                     {
 404                         attrs: { "role": "dialog", "aria-labelledby": "modal-eog" },
 405                     },
 406                     [
 407                         h('div',
 408                             {
 409                                 "class": { "card": true, "smallpad": true },
 410                             },
 411                             [
 412                                 h('label',
 413                                     {
 414                                         attrs: { "for": "modal-eog" },
 415                                         "class": { "modal-close": true },
 416                                     }
 417                                 ),
 418                                 h('h3',
 419                                     {
 420                                         "class": { "section": true },
 421                                         domProps: { innerHTML: eogMessage },
 422                                     }
 423                                 )
 424                             ]
 425                         )
 426                     ]
 427                 )
 428             ];
 429             elementArray = elementArray.concat(modalEog);
 430         }
 431         const modalNewgame = [
 432             h('input',
 433                 {
 434                     attrs: { "id": "modal-newgame", type: "checkbox" },
 435                     "class": { "modal": true },
 436                 }),
 437             h('div',
 438                 {
 439                     attrs: { "role": "dialog", "aria-labelledby": "modal-newgame" },
 440                 },
 441                 [
 442                     h('div',
 443                         {
 444                             "class": { "card": true, "smallpad": true },
 445                         },
 446                         [
 447                             h('label',
 448                                 {
 449                                     attrs: { "id": "close-newgame", "for": "modal-newgame" },
 450                                     "class": { "modal-close": true },
 451                                 }
 452                             ),
 453                             h('h3',
 454                                 {
 455                                     "class": { "section": true },
 456                                     domProps: { innerHTML: "New game" },
 457                                 }
 458                             ),
 459                             h('p',
 460                                 {
 461                                     "class": { "section": true },
 462                                     domProps: { innerHTML: "Waiting for opponent..." },
 463                                 }
 464                             )
 465                         ]
 466                     )
 467                 ]
 468             )
 469         ];
 470         elementArray = elementArray.concat(modalNewgame);
 471         const modalFenEdit = [
 472             h('input',
 473                 {
 474                     attrs: { "id": "modal-fenedit", type: "checkbox" },
 475                     "class": { "modal": true },
 476                 }),
 477             h('div',
 478                 {
 479                     attrs: { "role": "dialog", "aria-labelledby": "modal-fenedit" },
 480                 },
 481                 [
 482                     h('div',
 483                         {
 484                             "class": { "card": true, "smallpad": true },
 485                         },
 486                         [
 487                             h('label',
 488                                 {
 489                                     attrs: { "id": "close-fenedit", "for": "modal-fenedit" },
 490                                     "class": { "modal-close": true },
 491                                 }
 492                             ),
 493                             h('h3',
 494                                 {
 495                                     "class": { "section": true },
 496                                     domProps: { innerHTML: "Position + flags (FEN):" },
 497                                 }
 498                             ),
 499                             h('input',
 500                                 {
 501                                     attrs: {
 502                                         "id": "input-fen",
 503                                         type: "text",
 504                                         value: VariantRules.GenRandInitFen(),
 505                                     },
 506                                 }
 507                             ),
 508                             h('button',
 509                                 {
 510                                     on: { click:
 511                                         () => {
 512                                             const fen = document.getElementById("input-fen").value;
 513                                             document.getElementById("modal-fenedit").checked = false;
 514                                             this.newGame("friend", fen);
 515                                         }
 516                                     },
 517                                     domProps: { innerHTML: "Ok" },
 518                                 }
 519                             ),
 520                             h('button',
 521                                 {
 522                                     on: { click:
 523                                         () => {
 524                                             document.getElementById("input-fen").value =
 525                                                 VariantRules.GenRandInitFen();
 526                                         }
 527                                     },
 528                                     domProps: { innerHTML: "Random" },
 529                                 }
 530                             ),
 531                         ]
 532                     )
 533                 ]
 534             )
 535         ];
 536         elementArray = elementArray.concat(modalFenEdit);
 537         const actions = h('div',
 538             {
 539                 attrs: { "id": "actions" },
 540                 'class': { 'text-center': true },
 541             },
 542             actionArray
 543         );
 544         elementArray.push(actions);
 545         if (this.score != "*")
 546         {
 547             elementArray.push(
 548                 h('div',
 549                     { attrs: { id: "pgn-div" } },
 550                     [
 551                         h('a',
 552                             {
 553                                 attrs: {
 554                                     id: "download",
 555                                     href: "#",
 556                                 }
 557                             }
 558                         ),
 559                         h('p',
 560                             {
 561                                 attrs: { id: "pgn-game" },
 562                                 on: { click: this.download },
 563                                 domProps: { innerHTML: this.pgnTxt }
 564                             }
 565                         )
 566                     ]
 567                 )
 568             );
 569         }
 570         else if (this.mode != "idle")
 571         {
 572             // Show current FEN
 573             elementArray.push(
 574                 h('div',
 575                     { attrs: { id: "fen-div" } },
 576                     [
 577                         h('p',
 578                             {
 579                                 attrs: { id: "fen-string" },
 580                                 domProps: { innerHTML: this.vr.getFen() }
 581                             }
 582                         )
 583                     ]
 584                 )
 585             );
 586         }
 587         return h(
 588             'div',
 589             {
 590                 'class': {
 591                     "col-sm-12":true,
 592                     "col-md-8":true,
 593                     "col-md-offset-2":true,
 594                     "col-lg-6":true,
 595                     "col-lg-offset-3":true,
 596                 },
 597                 // NOTE: click = mousedown + mouseup
 598                 on: {
 599                     mousedown: this.mousedown,
 600                     mousemove: this.mousemove,
 601                     mouseup: this.mouseup,
 602                     touchstart: this.mousedown,
 603                     touchmove: this.mousemove,
 604                     touchend: this.mouseup,
 605                 },
 606             },
 607             elementArray
 608         );
 609     },
 610     created: function() {
 611         const url = socketUrl;
 612         const continuation = (localStorage.getItem("variant") === variant);
 613         this.myid = continuation ? localStorage.getItem("myid") : getRandString();
 614         if (!continuation)
 615         {
 616             // HACK: play a small silent sound to allow "new game" sound later
 617             // if tab not focused (TODO: does it really work ?!)
 618             new Audio("/sounds/silent.mp3").play().then(() => {}).catch(err => {});
 619         }
 620         this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
 621         const socketOpenListener = () => {
 622             if (continuation)
 623             {
 624                 const fen = localStorage.getItem("fen");
 625                 const mycolor = localStorage.getItem("mycolor");
 626                 const oppid = localStorage.getItem("oppid");
 627                 const moves = JSON.parse(localStorage.getItem("moves"));
 628                 this.newGame("human", fen, mycolor, oppid, moves, true);
 629                 // Send ping to server (answer pong if opponent is connected)
 630                 this.conn.send(JSON.stringify({code:"ping",oppid:this.oppid}));
 631             }
 632             else if (localStorage.getItem("newgame") === variant)
 633             {
 634                 // New game request has been cancelled on disconnect
 635                 this.newGame("human", undefined, undefined, undefined, undefined, "reconnect");
 636             }
 637         };
 638         const socketMessageListener = msg => {
 639             const data = JSON.parse(msg.data);
 640             switch (data.code)
 641             {
 642                 case "newgame": //opponent found
 643                     // oppid: opponent socket ID
 644                     this.newGame("human", data.fen, data.color, data.oppid);
 645                     break;
 646                 case "newmove": //..he played!
 647                     this.play(data.move, "animate");
 648                     break;
 649                 case "pong": //received if we sent a ping (game still alive on our side)
 650                     this.oppConnected = true;
 651                     const L = this.vr.moves.length;
 652                     // Send our "last state" informations to opponent
 653                     this.conn.send(JSON.stringify({
 654                         code:"lastate",
 655                         oppid:this.oppid,
 656                         lastMove:L>0?this.vr.moves[L-1]:undefined,
 657                         movesCount:L,
 658                     }));
 659                     break;
 660                 case "lastate": //got opponent infos about last move (we might have resigned)
 661                     if (this.mode!="human" || this.oppid!=data.oppid)
 662                     {
 663                         // OK, we resigned
 664                         this.conn.send(JSON.stringify({
 665                             code:"lastate",
 666                             oppid:this.oppid,
 667                             lastMove:undefined,
 668                             movesCount:-1,
 669                         }));
 670                     }
 671                     else if (data.movesCount < 0)
 672                     {
 673                         // OK, he resigned
 674                         this.endGame(this.mycolor=="w"?"1-0":"0-1");
 675                     }
 676                     else if (data.movesCount < this.vr.moves.length)
 677                     {
 678                         // We must tell last move to opponent
 679                         const L = this.vr.moves.length;
 680                         this.conn.send(JSON.stringify({
 681                             code:"lastate",
 682                             oppid:this.oppid,
 683                             lastMove:this.vr.moves[L-1],
 684                             movesCount:L,
 685                         }));
 686                     }
 687                     else if (data.movesCount > this.vr.moves.length) //just got last move from him
 688                         this.play(data.lastMove, "animate");
 689                     break;
 690                 case "resign": //..you won!
 691                     this.endGame(this.mycolor=="w"?"1-0":"0-1");
 692                     break;
 693                 // TODO: also use (dis)connect info to count online players?
 694                 case "connect":
 695                 case "disconnect":
 696                     if (this.mode == "human" && this.oppid == data.id)
 697                         this.oppConnected = (data.code == "connect");
 698                     break;
 699             }
 700         };
 701         const socketCloseListener = () => {
 702             this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
 703             this.conn.addEventListener('open', socketOpenListener);
 704             this.conn.addEventListener('message', socketMessageListener);
 705             this.conn.addEventListener('close', socketCloseListener);
 706         };
 707         this.conn.onopen = socketOpenListener;
 708         this.conn.onmessage = socketMessageListener;
 709         this.conn.onclose = socketCloseListener;
 710         // Listen to keyboard left/right to navigate in game
 711         document.onkeydown = event => {
 712             if (this.mode == "idle" && !!this.vr && this.vr.moves.length > 0
 713                 && [37,39].includes(event.keyCode))
 714             {
 715                 event.preventDefault();
 716                 if (event.keyCode == 37) //Back
 717                     this.undo();
 718                 else //Forward (39)
 719                     this.play();
 720             }
 721         };
 722     },
 723     methods: {
 724         download: function() {
 725             let content = document.getElementById("pgn-game").innerHTML;
 726             content = content.replace(/<br>/g, "\n");
 727             // Prepare and trigger download link
 728             let downloadAnchor = document.getElementById("download");
 729             downloadAnchor.setAttribute("download", "game.pgn");
 730             downloadAnchor.href = "data:text/plain;charset=utf-8," +
 731                 encodeURIComponent(content);
 732             downloadAnchor.click();
 733         },
 734         endGame: function(score) {
 735             this.score = score;
 736             let modalBox = document.getElementById("modal-eog");
 737             modalBox.checked = true;
 738             // Variants may have special PGN structure (so next function isn't defined here)
 739             this.pgnTxt = this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode);
 740             setTimeout(() => { modalBox.checked = false; }, 2000);
 741             if (this.mode == "human")
 742                 this.clearStorage();
 743             this.mode = "idle";
 744             this.cursor = this.vr.moves.length; //to navigate in finished game
 745             this.oppid = "";
 746         },
 747         getEndgameMessage: function(score) {
 748             let eogMessage = "Unfinished";
 749             switch (this.score)
 750             {
 751                 case "1-0":
 752                     eogMessage = "White win";
 753                     break;
 754                 case "0-1":
 755                     eogMessage = "Black win";
 756                     break;
 757                 case "1/2":
 758                     eogMessage = "Draw";
 759                     break;
 760             }
 761             return eogMessage;
 762         },
 763         setStorage: function() {
 764             localStorage.setItem("myid", this.myid);
 765             localStorage.setItem("variant", variant);
 766             localStorage.setItem("mycolor", this.mycolor);
 767             localStorage.setItem("oppid", this.oppid);
 768             localStorage.setItem("fenStart", this.fenStart);
 769             localStorage.setItem("moves", JSON.stringify(this.vr.moves));
 770             localStorage.setItem("fen", this.vr.getFen());
 771         },
 772         updateStorage: function() {
 773             localStorage.setItem("moves", JSON.stringify(this.vr.moves));
 774             localStorage.setItem("fen", this.vr.getFen());
 775         },
 776         clearStorage: function() {
 777             delete localStorage["variant"];
 778             delete localStorage["myid"];
 779             delete localStorage["mycolor"];
 780             delete localStorage["oppid"];
 781             delete localStorage["fenStart"];
 782             delete localStorage["fen"];
 783             delete localStorage["moves"];
 784         },
 785         // HACK because mini-css tooltips are persistent after click...
 786         getRidOfTooltip: function(elt) {
 787             elt.style.visibility = "hidden";
 788             setTimeout(() => { elt.style.visibility="visible"; }, 100);
 789         },
 790         clickGameSeek: function(e) {
 791             this.getRidOfTooltip(e.currentTarget);
 792             if (this.mode == "human")
 793                 return; //no newgame while playing
 794             if (this.seek)
 795             {
 796                 this.conn.send(JSON.stringify({code:"cancelnewgame"}));
 797                 delete localStorage["newgame"]; //cancel game seek
 798                 this.seek = false;
 799             }
 800             else
 801                 this.newGame("human");
 802         },
 803         clickComputerGame: function(e) {
 804             this.getRidOfTooltip(e.currentTarget);
 805             if (this.mode == "human")
 806                 return; //no newgame while playing
 807             this.newGame("computer");
 808         },
 809         clickFriendGame: function(e) {
 810             this.getRidOfTooltip(e.currentTarget);
 811             document.getElementById("modal-fenedit").checked = true;
 812         },
 813         toggleExpertMode: function(e) {
 814             this.getRidOfTooltip(e.currentTarget);
 815             this.expert = !this.expert;
 816             setCookie("expert", this.expert ? "1" : "0");
 817         },
 818         resign: function(e) {
 819             this.getRidOfTooltip(e.currentTarget);
 820             if (this.mode == "human" && this.oppConnected)
 821             {
 822                 try {
 823                     this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
 824                 } catch (INVALID_STATE_ERR) {
 825                     return; //socket is not ready (and not yet reconnected)
 826                 }
 827             }
 828             this.endGame(this.mycolor=="w"?"0-1":"1-0");
 829         },
 830         newGame: function(mode, fenInit, color, oppId, moves, continuation) {
 831             const fen = fenInit || VariantRules.GenRandInitFen();
 832             console.log(fen); //DEBUG
 833             if (mode=="human" && !oppId)
 834             {
 835                 const storageVariant = localStorage.getItem("variant");
 836                 if (!!storageVariant && storageVariant !== variant)
 837                 {
 838                     alert("Finish your " + storageVariant + " game first!");
 839                     return;
 840                 }
 841                 // Send game request and wait..
 842                 localStorage["newgame"] = variant;
 843                 this.seek = true;
 844                 this.clearStorage(); //in case of
 845                 try {
 846                     this.conn.send(JSON.stringify({code:"newgame", fen:fen}));
 847                 } catch (INVALID_STATE_ERR) {
 848                     return; //nothing achieved
 849                 }
 850                 if (continuation !== "reconnect") //TODO: bad HACK...
 851                 {
 852                     let modalBox = document.getElementById("modal-newgame");
 853                     modalBox.checked = true;
 854                     setTimeout(() => { modalBox.checked = false; }, 2000);
 855                 }
 856                 return;
 857             }
 858             this.gameId = getRandString();
 859             this.vr = new VariantRules(fen, moves || []);
 860             this.score = "*";
 861             this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
 862             this.mode = mode;
 863             this.incheck = []; //in case of
 864             this.fenStart = (continuation ? localStorage.getItem("fenStart") : fen);
 865             if (mode=="human")
 866             {
 867                 // Opponent found!
 868                 if (!continuation)
 869                 {
 870                     // Not playing sound on game continuation:
 871                     new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {});
 872                     document.getElementById("modal-newgame").checked = false;
 873                 }
 874                 this.oppid = oppId;
 875                 this.oppConnected = true;
 876                 this.mycolor = color;
 877                 this.seek = false;
 878                 if (!!moves && moves.length > 0) //imply continuation
 879                 {
 880                     const lastMove = moves[moves.length-1];
 881                     this.vr.undo(lastMove);
 882                     this.incheck = this.vr.getCheckSquares(lastMove);
 883                     this.vr.play(lastMove, "ingame");
 884                 }
 885                 delete localStorage["newgame"];
 886                 this.setStorage(); //in case of interruptions
 887             }
 888             else if (mode == "computer")
 889             {
 890                 this.mycolor = Math.random() < 0.5 ? 'w' : 'b';
 891                 if (this.mycolor == 'b')
 892                     setTimeout(this.playComputerMove, 500);
 893             }
 894             //else: against a (IRL) friend: nothing more to do
 895         },
 896         playComputerMove: function() {
 897             const timeStart = Date.now();
 898             // We use moves' count to know if search finished:
 899             const nbMoves = this.vr.moves.length;
 900             const gameId = this.gameId; //to know if game was reset before timer end
 901             setTimeout(
 902                 () => {
 903                     if (gameId != this.gameId)
 904                         return; //game stopped
 905                     const L = this.vr.moves.length;
 906                     if (nbMoves == L || !this.vr.moves[L-1].notation) //move search didn't finish
 907                         this.vr.shouldReturn = true;
 908                 }, 5000);
 909             const compMove = this.vr.getComputerMove();
 910             // (first move) HACK: avoid selecting elements before they appear on page:
 911             const delay = Math.max(500-(Date.now()-timeStart), 0);
 912             setTimeout(() => this.play(compMove, "animate"), delay);
 913         },
 914         // Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
 915         getSquareId: function(o) {
 916             // NOTE: a separator is required to allow any size of board
 917             return  "sq-" + o.x + "-" + o.y;
 918         },
 919         // Inverse function
 920         getSquareFromId: function(id) {
 921             let idParts = id.split('-');
 922             return [parseInt(idParts[1]), parseInt(idParts[2])];
 923         },
 924         mousedown: function(e) {
 925             e = e || window.event;
 926             let ingame = false;
 927             let elem = e.target;
 928             while (!ingame && elem !== null)
 929             {
 930                 if (elem.classList.contains("game"))
 931                 {
 932                     ingame = true;
 933                     break;
 934                 }
 935                 elem = elem.parentElement;
 936             }
 937             if (!ingame) //let default behavior (click on button...)
 938                 return;
 939             e.preventDefault(); //disable native drag & drop
 940             if (!this.selectedPiece && e.target.classList.contains("piece"))
 941             {
 942                 // Next few lines to center the piece on mouse cursor
 943                 let rect = e.target.parentNode.getBoundingClientRect();
 944                 this.start = {
 945                     x: rect.x + rect.width/2,
 946                     y: rect.y + rect.width/2,
 947                     id: e.target.parentNode.id
 948                 };
 949                 this.selectedPiece = e.target.cloneNode();
 950                 this.selectedPiece.style.position = "absolute";
 951                 this.selectedPiece.style.top = 0;
 952                 this.selectedPiece.style.display = "inline-block";
 953                 this.selectedPiece.style.zIndex = 3000;
 954                 let startSquare = this.getSquareFromId(e.target.parentNode.id);
 955                 const iCanPlay = this.mode!="idle"
 956                     && (this.mode=="friend" || this.vr.canIplay(this.mycolor,startSquare));
 957                 this.possibleMoves = iCanPlay ? this.vr.getPossibleMovesFrom(startSquare) : [];
 958                 // Next line add moving piece just after current image
 959                 // (required for Crazyhouse reserve)
 960                 e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
 961             }
 962         },
 963         mousemove: function(e) {
 964             if (!this.selectedPiece)
 965                 return;
 966             e = e || window.event;
 967             // If there is an active element, move it around
 968             if (!!this.selectedPiece)
 969             {
 970                 const [offsetX,offsetY] = !!e.clientX
 971                     ? [e.clientX,e.clientY] //desktop browser
 972                     : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone
 973                 this.selectedPiece.style.left = (offsetX-this.start.x) + "px";
 974                 this.selectedPiece.style.top = (offsetY-this.start.y) + "px";
 975             }
 976         },
 977         mouseup: function(e) {
 978             if (!this.selectedPiece)
 979                 return;
 980             e = e || window.event;
 981             // Read drop target (or parentElement, parentNode... if type == "img")
 982             this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords
 983             const [offsetX,offsetY] = !!e.clientX
 984                 ? [e.clientX,e.clientY]
 985                 : [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
 986             let landing = document.elementFromPoint(offsetX, offsetY);
 987             this.selectedPiece.style.zIndex = 3000;
 988             // Next condition: classList.contains(piece) fails because of marks
 989             while (landing.tagName == "IMG")
 990                 landing = landing.parentNode;
 991             if (this.start.id == landing.id)
 992             {
 993                 // A click: selectedPiece and possibleMoves are already filled
 994                 return;
 995             }
 996             // OK: process move attempt
 997             let endSquare = this.getSquareFromId(landing.id);
 998             let moves = this.findMatchingMoves(endSquare);
 999             this.possibleMoves = [];
1000             if (moves.length > 1)
1001                 this.choices = moves;
1002             else if (moves.length==1)
1003                 this.play(moves[0]);
1004             // Else: impossible move
1005             this.selectedPiece.parentNode.removeChild(this.selectedPiece);
1006             delete this.selectedPiece;
1007             this.selectedPiece = null;
1008         },
1009         findMatchingMoves: function(endSquare) {
1010             // Run through moves list and return the matching set (if promotions...)
1011             let moves = [];
1012             this.possibleMoves.forEach(function(m) {
1013                 if (endSquare[0] == m.end.x && endSquare[1] == m.end.y)
1014                     moves.push(m);
1015             });
1016             return moves;
1017         },
1018         animateMove: function(move) {
1019             let startSquare = document.getElementById(this.getSquareId(move.start));
1020             let endSquare = document.getElementById(this.getSquareId(move.end));
1021             let rectStart = startSquare.getBoundingClientRect();
1022             let rectEnd = endSquare.getBoundingClientRect();
1023             let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y};
1024             let movingPiece =
1025                 document.querySelector("#" + this.getSquareId(move.start) + " > img.piece");
1026             // HACK for animation (with positive translate, image slides "under background")
1027             // Possible improvement: just alter squares on the piece's way...
1028             squares = document.getElementsByClassName("board");
1029             for (let i=0; i<squares.length; i++)
1030             {
1031                 let square = squares.item(i);
1032                 if (square.id != this.getSquareId(move.start))
1033                     square.style.zIndex = "-1";
1034             }
1035             movingPiece.style.transform = "translate(" + translation.x + "px," +
1036                 translation.y + "px)";
1037             movingPiece.style.transitionDuration = "0.2s";
1038             movingPiece.style.zIndex = "3000";
1039             setTimeout( () => {
1040                 for (let i=0; i<squares.length; i++)
1041                     squares.item(i).style.zIndex = "auto";
1042                 movingPiece.style = {}; //required e.g. for 0-0 with KR swap
1043                 this.play(move);
1044             }, 200);
1045         },
1046         play: function(move, programmatic) {
1047             if (!move)
1048             {
1049                 // Navigate after game is over
1050                 if (this.cursor >= this.vr.moves.length)
1051                     return; //already at the end
1052                 move = this.vr.moves[this.cursor++];
1053             }
1054             if (!!programmatic) //computer or human opponent
1055             {
1056                 this.animateMove(move);
1057                 return;
1058             }
1059             // Not programmatic, or animation is over
1060             if (this.mode == "human" && this.vr.turn == this.mycolor)
1061                 this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
1062             new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
1063             if (this.mode != "idle")
1064             {
1065                 this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
1066                 this.vr.play(move, "ingame");
1067             }
1068             else
1069             {
1070                 VariantRules.PlayOnBoard(this.vr.board, move);
1071                 this.$forceUpdate(); //TODO: ?!
1072             }
1073             if (this.mode == "human")
1074                 this.updateStorage(); //after our moves and opponent moves
1075             if (this.mode != "idle")
1076             {
1077                 const eog = this.vr.checkGameOver();
1078                 if (eog != "*")
1079                     this.endGame(eog);
1080             }
1081             if (this.mode == "computer" && this.vr.turn != this.mycolor)
1082                 setTimeout(this.playComputerMove, 500);
1083         },
1084         undo: function() {
1085             // Navigate after game is over
1086             if (this.cursor == 0)
1087                 return; //already at the beginning
1088             if (this.cursor == this.vr.moves.length)
1089                 this.incheck = []; //in case of...
1090             const move = this.vr.moves[--this.cursor];
1091             VariantRules.UndoOnBoard(this.vr.board, move);
1092             this.$forceUpdate(); //TODO: ?!
1093         },
1094         undoInGame: function() {
1095             const lm = this.vr.lastMove;
1096             if (!!lm)
1097                 this.vr.undo(lm);
1098         },
1099     },
1100 })