app.js

   1 let $ = document; //shortcut
   2
   3 ///////////////////
   4 // Initialisations
   5
   6 // https://stackoverflow.com/a/27747377/12660887
   7 function generateId (len) {
   8   const dec2hex = (dec) => dec.toString(16).padStart(2, "0");
   9   let arr = new Uint8Array(len / 2); //len/2 because 2 chars per hex value
  10   window.crypto.getRandomValues(arr); //fill with random integers
  11   return Array.from(arr, dec2hex).join('');
  12 }
  13
  14 // Populate variants dropdown list
  15 let dropdown = $.getElementById("selectVariant");
  16 dropdown[0] = new Option("? ? ?", "_random", true, true);
  17 dropdown[0].title = "Random variant";
  18 for (let i = 0; i < variants.length; i++) {
  19   let newOption = new Option(
  20     variants[i].disp || variants[i].name, variants[i].name, false, false);
  21   newOption.title = variants[i].desc;
  22   dropdown[dropdown.length] = newOption;
  23 }
  24
  25 // Ensure that I have a socket ID and a name
  26 if (!localStorage.getItem("sid"))
  27   localStorage.setItem("sid", generateId(8));
  28 if (!localStorage.getItem("name"))
  29   localStorage.setItem("name", "@non" + generateId(4));
  30 const sid = localStorage.getItem("sid");
  31 $.getElementById("myName").value = localStorage.getItem("name");
  32
  33 // "Material" input field name
  34 let inputName = document.getElementById("myName");
  35 let formField = document.getElementById("ng-name");
  36 const setActive = (active) => {
  37   if (active) formField.classList.add("form-field--is-active");
  38   else {
  39     formField.classList.remove("form-field--is-active");
  40     inputName.value == ''
  41       ? formField.classList.remove("form-field--is-filled")
  42       : formField.classList.add("form-field--is-filled");
  43   }
  44 };
  45 setActive(true);
  46 inputName.onblur = () => setActive(false);
  47 inputName.onfocus = () => setActive(true);
  48
  49 /////////
  50 // Utils
  51
  52 function setName() {
  53   // 'onChange' event on name input text field [HTML]
  54   localStorage.setItem("name", $.getElementById("myName").value);
  55 }
  56
  57 // Turn a "tab" on, and "close" all others
  58 function toggleVisible(element) {
  59   for (elt of document.querySelectorAll("main > div")) {
  60     if (elt.id != element) elt.style.display = "none";
  61     else elt.style.display = "block";
  62   }
  63   if (element == "boardContainer") {
  64     // Avoid smartphone scrolling effects (TODO?)
  65     document.querySelector("html").style.overflow = "hidden";
  66     document.body.style.overflow = "hidden";
  67   }
  68   else {
  69     document.querySelector("html").style.overflow = "visible";
  70     document.body.style.overflow = "visible";
  71     // Workaround "superposed texts" effect:
  72     if (element == "newGame") setActive(false);
  73   }
  74 }
  75
  76 let seek_vname;
  77 function seekGame() {
  78   seek_vname = $.getElementById("selectVariant").value;
  79   if (send("seekgame",
  80            {vname: seek_vname, name: localStorage.getItem("name")})
  81   ) {
  82     toggleVisible("pendingSeek");
  83   }
  84 }
  85 function cancelSeek() {
  86   if (send("cancelseek", {vname: seek_vname})) toggleVisible("newGame");
  87 }
  88
  89 function sendRematch() {
  90   if (send("rematch", {gid: gid})) toggleVisible("pendingRematch");
  91 }
  92 function cancelRematch() {
  93   if (send("norematch", {gid: gid})) toggleVisible("newGame");
  94 }
  95
  96 // Play with a friend (or not ^^)
  97 function showNewGameForm() {
  98   const vname = $.getElementById("selectVariant").value;
  99   if (vname == "_random") alert("Select a variant first");
 100   else {
 101     $.getElementById("gameLink").innerHTML = "";
 102     $.getElementById("selectColor").selectedIndex = 0;
 103     toggleVisible("newGameForm");
 104     import(`/variants/${vname}/class.js`).then(module => {
 105       window.V = module.default;
 106       V.Aliases.forEach(e => window[e.key] = e.val);
 107       prepareOptions();
 108     });
 109   }
 110 }
 111 function backToNormalSeek() {
 112   toggleVisible("newGame");
 113 }
 114
 115 function toggleStyle(event, obj) {
 116   const word = obj.innerHTML;
 117   options[word] = !options[word];
 118   event.target.classList.toggle("highlight-word");
 119 }
 120
 121 let options;
 122 function prepareOptions() {
 123   options = {};
 124   let optHtml = V.Options.select.map(select => { return `
 125       <div class="option-select">
 126         <label for="var_${select.variable}">${select.label}</label>
 127         <div class="select">
 128           <select id="var_${select.variable}" data-numeric="1">` +
 129           select.options.map(option => { return `
 130             <option
 131               value="${option.value}"
 132               ${option.value == select.defaut ? " selected" : ""}
 133             >
 134               ${option.label}
 135             </option>`;
 136           }).join("") + `
 137           </select>
 138           <span class="focus"></span>
 139         </div>
 140       </div>`;
 141   }).join("");
 142   optHtml += V.Options.check.map(check => {
 143     return `
 144       <div class="option-check">
 145         <label class="checkbox">
 146           <input id="var_${check.variable}"
 147                  type="checkbox"${check.defaut ? " checked" : ""}/>
 148           <span class="spacer"></span>
 149           <span>${check.label}</span>
 150         </label>
 151       </div>`;
 152   }).join("");
 153   if (V.Options.styles.length >= 1) {
 154     optHtml += '<div class="words">';
 155     let i = 0;
 156     const stylesLength = V.Options.styles.length;
 157     while (i < stylesLength) {
 158       optHtml += '<div class="row">';
 159       for (let j=i; j<i+4; j++) {
 160         if (j == stylesLength) break;
 161         const style = V.Options.styles[j];
 162         optHtml += `<span onClick="toggleStyle(event, this)">${style}</span>`;
 163       }
 164       optHtml += "</div>";
 165       i += 4;
 166     }
 167     optHtml += "</div>";
 168   }
 169   $.getElementById("gameOptions").innerHTML = optHtml;
 170 }
 171
 172 function getGameLink() {
 173   const vname = $.getElementById("selectVariant").value;
 174   const color = $.getElementById("selectColor").value;
 175   for (const select of $.querySelectorAll("#gameOptions select")) {
 176     let value = select.value;
 177     if (select.attributes["data-numeric"]) value = parseInt(value, 10);
 178     if (value) options[ select.id.split("_")[1] ] = value;
 179   }
 180   for (const check of $.querySelectorAll("#gameOptions input")) {
 181     if (check.checked) options[ check.id.split("_")[1] ] = check.checked;
 182   }
 183   send("creategame", {
 184     vname: vname,
 185     player: {sid: sid, name: localStorage.getItem("name"), color: color},
 186     options: options
 187   });
 188 }
 189
 190 function fillGameInfos(gameInfos, oppIndex) {
 191   fetch(`/variants/${gameInfos.vname}/rules.html`)
 192   .then(res => res.text())
 193   .then(txt => {
 194     let htmlContent = `
 195       <div class="players-info">
 196         <p>
 197           <span class="bold">${gameInfos.vdisp}</span>
 198           <span>vs. ${gameInfos.players[oppIndex].name}</span>
 199         </p>
 200       </div>`;
 201     const options = Object.entries(gameInfos.options);
 202     if (options.length > 0) {
 203       htmlContent += '<div class="options-info">';
 204       let i = 0;
 205       while (i < options.length) {
 206         htmlContent += '<div class="row">';
 207         for (let j=i; j<i+4; j++) {
 208           if (j == options.length) break;
 209           const opt = options[j];
 210           if (!opt[1]) continue;
 211           htmlContent +=
 212             '<span class="option">' +
 213             (opt[1] === true ? opt[0] : `${opt[0]}:${opt[1]}`) + " " +
 214             "</span>";
 215         }
 216         htmlContent += "</div>";
 217         i += 4;
 218       }
 219       htmlContent += "</div>";
 220     }
 221     htmlContent += `
 222       <div class="rules">${txt}</div>
 223       <div class="btn-wrap">
 224         <button onClick="toggleGameInfos()">Back to game</button>
 225       </div>`;
 226     $.getElementById("gameInfos").innerHTML = htmlContent;
 227   });
 228 }
 229
 230 ////////////////
 231 // Communication
 232
 233 let socket, gid, recoAttempt = 0;
 234 const autoReconnectDelay = () => {
 235   return [100, 200, 500, 1000, 3000, 10000, 30000][Math.min(recoAttempt, 6)];
 236 };
 237
 238 function send(code, data, opts) {
 239   opts = opts || {};
 240   const trySend = () => {
 241     if (socket.readyState == 1) {
 242       socket.send(JSON.stringify(Object.assign({code: code}, data)));
 243       if (opts.success) opts.success();
 244       return true;
 245     }
 246     return false;
 247   };
 248   const firstTry = trySend();
 249   if (!firstTry) {
 250     if (opts.retry) {
 251       // Retry for a few seconds (sending move)
 252       let sendAttempt = 1;
 253       const retryLoop = setInterval(
 254         () => {
 255           if (trySend() || ++sendAttempt >= 3) clearInterval(retryLoop);
 256           if (sendAttempt >= 3 && opts.error) opts.error();
 257         },
 258         1000
 259       );
 260     }
 261     else if (opt.error) opts.error();
 262   }
 263   return firstTry;
 264 }
 265
 266 function copyClipboard(msg) {
 267   navigator.clipboard.writeText(msg);
 268 }
 269 function getWhatsApp(msg) {
 270   return `https://api.whatsapp.com/send?text=${encodeURIComponent(msg)}`;
 271 }
 272
 273 const tryResumeGame = () => {
 274   recoAttempt = 0;
 275   // If a game is found, resume it:
 276   if (localStorage.getItem("gid")) {
 277     gid = localStorage.getItem("gid");
 278     send("getgame",
 279          {gid: gid},
 280          {
 281            retry: true,
 282            error: () => alert("Cannot load game: no connection")
 283          });
 284   }
 285   else {
 286     // If URL indicates "play with a friend", start game:
 287     const hashIdx = document.URL.indexOf('#');
 288     if (hashIdx >= 0) {
 289       const urlParts = $.URL.split('#');
 290       gid = urlParts[1];
 291       localStorage.setItem("gid", gid);
 292       history.replaceState(null, '', urlParts[0]); //hide game ID
 293       send("joingame",
 294            {gid: gid, name: localStorage.getItem("name")},
 295            {
 296              retry: true,
 297              error: () => alert("Cannot load game: no connection")
 298            });
 299     }
 300   }
 301 };
 302
 303 const messageCenter = (msg) => {
 304   const obj = JSON.parse(msg.data);
 305   switch (obj.code) {
 306     // Start new game:
 307     case "gamestart": {
 308       if (document.hidden) notifyMe("game");
 309       gid = obj.gid;
 310       initializeGame(obj);
 311       break;
 312     }
 313     // Game vs. friend just created on server: share link now
 314     case "gamecreated": {
 315       const link = `${Params.http_server}/#${obj.gid}`;
 316       $.getElementById("gameLink").innerHTML = `
 317         <p>
 318           <a href="${getWhatsApp(link)}">WhatsApp</a>
 319           /
 320           <span onClick="copyClipboard('${link}')">ToClipboard</span>
 321         </p>
 322         <p>${link}</p>
 323       `;
 324       break;
 325     }
 326     // Game vs. friend joined after 1 minute (try again!)
 327     case "jointoolate":
 328       alert("Game no longer available");
 329       break;
 330     // Get infos of a running game (already launched)
 331     case "gameinfo":
 332       initializeGame(obj);
 333       break;
 334     // Tried to resume a game which is now gone:
 335     case "nogame":
 336       localStorage.removeItem("gid");
 337       break;
 338     // Receive opponent's move:
 339     case "newmove":
 340       // Basic check: was it really opponent's turn?
 341       if (vr.turn == playerColor) break;
 342       if (document.hidden) notifyMe("move");
 343       vr.playReceivedMove(obj.moves, () => {
 344         if (vr.getCurrentScore(obj.moves[obj.moves.length-1]) != "*") {
 345           localStorage.removeItem("gid");
 346           setTimeout( () => toggleVisible("gameStopped"), 2000 );
 347         }
 348         else toggleTurnIndicator(true);
 349       });
 350       break;
 351     // Opponent stopped game (draw, abort, resign...)
 352     case "gameover":
 353       toggleVisible("gameStopped");
 354       localStorage.removeItem("gid");
 355       break;
 356     // Opponent cancelled rematch:
 357     case "closerematch":
 358       toggleVisible("newGame");
 359       break;
 360   }
 361 };
 362
 363 const handleError = (err) => {
 364   if (err.code === "ECONNREFUSED") {
 365     removeAllListeners();
 366     alert("Server refused connection. Please reload page later");
 367   }
 368   socket.close();
 369 };
 370
 371 const handleClose = () => {
 372   setTimeout(() => {
 373     removeAllListeners();
 374     connectToWSS();
 375   }, autoReconnectDelay());
 376 };
 377
 378 function removeAllListeners() {
 379   socket.removeEventListener("open", tryResumeGame);
 380   socket.removeEventListener("message", messageCenter);
 381   socket.removeEventListener("error", handleError);
 382   socket.removeEventListener("close", handleClose);
 383 }
 384
 385 function connectToWSS() {
 386   socket =
 387     new WebSocket(`${Params.socket_server}${Params.socket_path}?sid=${sid}`);
 388   socket.addEventListener("open", tryResumeGame);
 389   socket.addEventListener("message", messageCenter);
 390   socket.addEventListener("error", handleError);
 391   socket.addEventListener("close", handleClose);
 392   recoAttempt++;
 393 }
 394 connectToWSS();
 395
 396 ///////////
 397 // Playing
 398
 399 function toggleTurnIndicator(myTurn) {
 400   let indicator = $.getElementById("chessboard");
 401   if (myTurn) indicator.style.outline = "thick solid green";
 402   else indicator.style.outline = "thick solid lightgrey";
 403 }
 404
 405 function notifyMe(code) {
 406   const doNotify = () => {
 407     // NOTE: empty body (TODO?)
 408     new Notification("New " + code, { vibrate: [200, 100, 200] });
 409     new Audio("/assets/new_" + code + ".mp3").play();
 410   }
 411   if (Notification.permission === "granted") doNotify();
 412   else if (Notification.permission !== "denied") {
 413     Notification.requestPermission().then(permission => {
 414       if (permission === "granted") doNotify();
 415     });
 416   }
 417 }
 418
 419 let curMoves = [],
 420     lastFen;
 421 const afterPlay = (move) => {
 422   const callbackAfterSend = () => {
 423     curMoves = [];
 424     const result = vr.getCurrentScore(move);
 425     if (result != "*") {
 426       setTimeout(() => {
 427         toggleVisible("gameStopped");
 428         send("gameover", {gid: gid});
 429       }, 2000);
 430     }
 431   };
 432   // Pack into one moves array, then send
 433   curMoves.push(move);
 434   if (vr.turn != playerColor) {
 435     toggleTurnIndicator(false);
 436     send("newmove",
 437          {gid: gid, moves: curMoves, fen: vr.getFen()},
 438          {
 439            retry: true,
 440            success: callbackAfterSend,
 441            error: () => alert("Move not sent: reload page")
 442          });
 443   }
 444 };
 445
 446 let vr, playerColor;
 447 function initializeGame(obj) {
 448   const options = obj.options || {};
 449   import(`/variants/${obj.vname}/class.js`).then(module => {
 450     window.V = module.default;
 451     V.Aliases.forEach(e => window[e.key] = e.val);
 452     // Load CSS. Avoid loading twice the same stylesheet:
 453     const allIds = [].slice.call($.styleSheets).map(s => s.id);
 454     const newId = obj.vname + "_css";
 455     if (!allIds.includes(newId)) {
 456       $.getElementsByTagName("head")[0].insertAdjacentHTML(
 457         "beforeend",
 458         `<link id="${newId}" rel="stylesheet"
 459                href="/variants/${obj.vname}/style.css"/>`);
 460     }
 461     playerColor = (sid == obj.players[0].sid ? "w" : "b");
 462     // Init + remove potential extra DOM elements from a previous game:
 463     document.getElementById("boardContainer").innerHTML = `
 464       <div id="upLeftInfos"
 465            onClick="toggleGameInfos()">
 466         <svg version="1.1"
 467              viewBox="0.5 0.5 100 100">
 468           <g>
 469             <path d="M50.5,0.5c-27.614,0-50,22.386-50,50c0,27.614,22.386,50,50,50s50-22.386,50-50C100.5,22.886,78.114,0.5,50.5,0.5z M60.5,85.5h-20v-40h20V85.5z M50.5,35.5c-5.523,0-10-4.477-10-10s4.477-10,10-10c5.522,0,10,4.477,10,10S56.022,35.5,50.5,35.5z"/>
 470           </g>
 471         </svg>
 472       </div>
 473       <div id="upRightStop"
 474            onClick="confirmStopGame()">
 475         <svg version="1.1"
 476              viewBox="0 0 533.333 533.333">
 477           <g>
 478             <path d="M528.468,428.468c-0.002-0.002-0.004-0.004-0.006-0.005L366.667,266.666l161.795-161.797 c0.002-0.002,0.004-0.003,0.006-0.005c1.741-1.742,3.001-3.778,3.809-5.946c2.211-5.925,0.95-12.855-3.814-17.62l-76.431-76.43 c-4.765-4.763-11.694-6.024-17.619-3.812c-2.167,0.807-4.203,2.066-5.946,3.807c0,0.002-0.002,0.003-0.005,0.005L266.667,166.666 L104.87,4.869c-0.002-0.002-0.003-0.003-0.005-0.005c-1.743-1.74-3.778-3-5.945-3.807C92.993-1.156,86.065,0.105,81.3,4.869 L4.869,81.3c-4.764,4.765-6.024,11.694-3.813,17.619c0.808,2.167,2.067,4.205,3.808,5.946c0.002,0.001,0.003,0.003,0.005,0.005 l161.797,161.796L4.869,428.464c-0.001,0.002-0.003,0.003-0.004,0.005c-1.741,1.742-3,3.778-3.809,5.945 c-2.212,5.924-0.951,12.854,3.813,17.619L81.3,528.464c4.766,4.765,11.694,6.025,17.62,3.813c2.167-0.809,4.203-2.068,5.946-3.809 c0.001-0.002,0.003-0.003,0.005-0.005l161.796-161.797l161.795,161.797c0.003,0.001,0.005,0.003,0.007,0.004 c1.743,1.741,3.778,3.001,5.944,3.81c5.927,2.212,12.856,0.951,17.619-3.813l76.43-76.432c4.766-4.765,6.026-11.696,3.815-17.62 C531.469,432.246,530.209,430.21,528.468,428.468z"/>
 479           </g>
 480         </svg>
 481       </div>
 482       <div class="resizeable" id="chessboard"></div>`;
 483     vr = new V({
 484       seed: obj.seed, //may be null if FEN already exists (running game)
 485       fen: obj.fen,
 486       element: "chessboard",
 487       color: playerColor,
 488       afterPlay: afterPlay,
 489       options: options
 490     });
 491     if (!obj.fen) {
 492       // Game creation: both players set FEN, in case of one is offline
 493       send("setfen", {gid: obj.gid, fen: vr.getFen()});
 494       localStorage.setItem("gid", obj.gid);
 495     }
 496     const select = $.getElementById("selectVariant");
 497     obj.vdisp = "";
 498     for (let i=0; i<select.options.length; i++) {
 499       if (select.options[i].value == obj.vname) {
 500         obj.vdisp = select.options[i].text;
 501         break;
 502       }
 503     }
 504     fillGameInfos(obj, playerColor == "w" ? 1 : 0);
 505     if (obj.randvar) toggleVisible("gameInfos");
 506     else toggleVisible("boardContainer");
 507     toggleTurnIndicator(vr.turn == playerColor);
 508   });
 509 }
 510
 511 function confirmStopGame() {
 512   if (confirm("Stop game?") && send("gameover", {gid: gid, relay: true})) {
 513     localStorage.removeItem("gid");
 514     toggleVisible("gameStopped");
 515   }
 516 }
 517
 518 function toggleGameInfos() {
 519   if ($.getElementById("gameInfos").style.display == "none")
 520     toggleVisible("gameInfos");
 521   else toggleVisible("boardContainer");
 522 }
 523
 524 $.body.addEventListener("keydown", (e) => {
 525   if (!localStorage.getItem("gid")) return;
 526   if (e.keyCode == 27) confirmStopGame();
 527   else if (e.keyCode == 32) {
 528     e.preventDefault();
 529     toggleGameInfos();
 530   }
 531 });