client/src/views/Hall.vue

   1 <template lang="pug">
   2 main
   3   input#modalInfo.modal(type="checkbox")
   4   div#infoDiv(role="dialog" data-checkbox="modalInfo")
   5     .card.text-center
   6       label.modal-close(for="modalInfo")
   7       p(v-html="infoMessage")
   8   input#modalNewgame.modal(type="checkbox")
   9   div#newgameDiv(role="dialog" data-checkbox="modalNewgame")
  10     .card(@keyup.enter="newChallenge()")
  11       label#closeNewgame.modal-close(for="modalNewgame")
  12       fieldset
  13         label(for="selectVariant") {{ st.tr["Variant"] }} *
  14         select#selectVariant(v-model="newchallenge.vid")
  15           option(v-for="v in st.variants" :value="v.id"
  16               :selected="newchallenge.vid==v.id")
  17             | {{ v.name }}
  18       fieldset
  19         label(for="cadence") {{ st.tr["Cadence"] }} *
  20         div#predefinedCadences
  21           button 3+2
  22           button 5+3
  23           button 15+5
  24         input#cadence(type="text" v-model="newchallenge.cadence"
  25           placeholder="5+0, 1h+30s, 7d+1d ...")
  26       fieldset(v-if="st.user.id > 0")
  27         label(for="selectPlayers") {{ st.tr["Play with?"] }}
  28         input#selectPlayers(type="text" v-model="newchallenge.to")
  29       fieldset(v-if="st.user.id > 0 && newchallenge.to.length > 0")
  30         label(for="inputFen") FEN
  31         input#inputFen(type="text" v-model="newchallenge.fen")
  32       button(@click="newChallenge()") {{ st.tr["Send challenge"] }}
  33   .row
  34     .col-sm-12
  35       button#newGame(onClick="doClick('modalNewgame')") {{ st.tr["New game"] }}
  36   .row
  37     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  38       div
  39         .button-group
  40           button#btnClive(@click="setDisplay('c','live',$event)" class="active")
  41             | {{ st.tr["Live challenges"] }}
  42           button#btnCcorr(@click="setDisplay('c','corr',$event)")
  43             | {{ st.tr["Correspondance challenges"] }}
  44         ChallengeList(v-show="cdisplay=='live'"
  45           :challenges="filterChallenges('live')" @click-challenge="clickChallenge")
  46         ChallengeList(v-show="cdisplay=='corr'"
  47           :challenges="filterChallenges('corr')" @click-challenge="clickChallenge")
  48       #people
  49         h3.text-center {{ st.tr["Who's there?"] }}
  50         #players
  51           p(v-for="sid in Object.keys(people)" v-if="!!people[sid].name")
  52             span {{ people[sid].name }}
  53             button.player-action(v-if="sid!=st.user.sid || isGamer(sid)" @click="challOrWatch(sid)")
  54               | {{ getActionLabel(sid) }}
  55           p.anonymous @nonymous ({{ anonymousCount }})
  56         #chat
  57           Chat(:newChat="newChat" @mychat="processChat" :pastChats="[]")
  58         .clearer
  59       div
  60         .button-group
  61           button#btnGlive(@click="setDisplay('g','live',$event)" class="active")
  62             | {{ st.tr["Live games"] }}
  63           button#btnGcorr(@click="setDisplay('g','corr',$event)")
  64             | {{ st.tr["Correspondance games"] }}
  65         GameList(v-show="gdisplay=='live'" :games="filterGames('live')"
  66           @show-game="showGame")
  67         GameList(v-show="gdisplay=='corr'" :games="filterGames('corr')"
  68           @show-game="showGame")
  69 </template>
  70
  71 <script>
  72 import { store } from "@/store";
  73 import { checkChallenge } from "@/data/challengeCheck";
  74 import { ArrayFun } from "@/utils/array";
  75 import { ajax } from "@/utils/ajax";
  76 import params from "@/parameters";
  77 import { getRandString, shuffle } from "@/utils/alea";
  78 import Chat from "@/components/Chat.vue";
  79 import GameList from "@/components/GameList.vue";
  80 import ChallengeList from "@/components/ChallengeList.vue";
  81 import { GameStorage } from "@/utils/gameStorage";
  82 import { processModalClick } from "@/utils/modalClick";
  83 export default {
  84   name: "my-hall",
  85   components: {
  86     Chat,
  87     GameList,
  88     ChallengeList,
  89   },
  90   data: function () {
  91     return {
  92       st: store.state,
  93       cdisplay: "live", //or corr
  94       gdisplay: "live",
  95       games: [],
  96       challenges: [],
  97       people: {},
  98       infoMessage: "",
  99       newchallenge: {
 100         fen: "",
 101         vid: localStorage.getItem("vid") || "",
 102         to: "", //name of challenged player (if any)
 103         cadence: localStorage.getItem("cadence") || "",
 104       },
 105       newChat: "",
 106       conn: null,
 107       connexionString: "",
 108       // Related to (killing of) self multi-connects:
 109       newConnect: {},
 110       killed: {},
 111     };
 112   },
 113   watch: {
 114     // st.variants changes only once, at loading from [] to [...]
 115     "st.variants": function(variantArray) {
 116       // Set potential challenges and games variant names:
 117       this.challenges.concat(this.games).forEach(o => {
 118         if (o.vname == "")
 119           o.vname = this.getVname(o.vid);
 120       });
 121     },
 122   },
 123   computed: {
 124     anonymousCount: function() {
 125       let count = 0;
 126       Object.values(this.people).forEach(p => { count += (!p.name ? 1 : 0); });
 127       return count;
 128     },
 129   },
 130   created: function() {
 131     const my = this.st.user;
 132     this.$set(this.people, my.sid, {id:my.id, name:my.name, pages:["/"]});
 133     // Ask server for current corr games (all but mines)
 134     ajax(
 135       "/games",
 136       "GET",
 137       {uid: this.st.user.id, excluded: true},
 138       response => {
 139         // Show corr tab with timeout, to let enough time for (socket) polling
 140         setTimeout(
 141           () => {
 142             if (response.games.length > 0 &&
 143               this.games.length == response.games.length)
 144             {
 145               this.setDisplay('g', "corr");
 146             }
 147           },
 148           1000
 149         );
 150         this.games = this.games.concat(response.games.map(g => {
 151           const type = this.classifyObject(g);
 152           const vname = this.getVname(g.vid);
 153           return Object.assign({}, g, {type: type, vname: vname});
 154         }));
 155       }
 156     );
 157     // Also ask for corr challenges (open + sent by/to me)
 158     ajax(
 159       "/challenges",
 160       "GET",
 161       {uid: this.st.user.id},
 162       response => {
 163         setTimeout(
 164           () => {
 165             if (response.challenges.length > 0 &&
 166               this.challenges.length == response.challenges.length)
 167             {
 168               this.setDisplay('c', "corr");
 169             }
 170           },
 171           1000
 172         );
 173         // Gather all senders names, and then retrieve full identity:
 174         // (TODO [perf]: some might be online...)
 175         let names = {};
 176         response.challenges.forEach(c => {
 177           if (c.uid != this.st.user.id)
 178             names[c.uid] = ""; //unknwon for now
 179           else if (!!c.target && c.target != this.st.user.id)
 180             names[c.target] = "";
 181         });
 182         const addChallenges = (newChalls) => {
 183           names[this.st.user.id] = this.st.user.name; //in case of
 184           this.challenges = this.challenges.concat(
 185             response.challenges.map(c => {
 186               const from = {name: names[c.uid], id: c.uid}; //or just name
 187               const type = this.classifyObject(c);
 188               const vname = this.getVname(c.vid);
 189               return Object.assign({},
 190                 {
 191                   type: type,
 192                   vname: vname,
 193                   from: from,
 194                   to: (!!c.target ? names[c.target] : ""),
 195                 },
 196                 c);
 197             })
 198           );
 199         };
 200         if (names !== {})
 201         {
 202           ajax("/users",
 203             "GET",
 204             { ids: Object.keys(names).join(",") },
 205             response2 => {
 206               response2.users.forEach(u => {names[u.id] = u.name});
 207               addChallenges();
 208             }
 209           );
 210         }
 211         else
 212           addChallenges();
 213       }
 214     );
 215     const connectAndPoll = () => {
 216       this.send("connect");
 217       this.send("pollclientsandgamers");
 218     };
 219     // Initialize connection
 220     this.connexionString = params.socketUrl +
 221       "/?sid=" + this.st.user.sid +
 222       "&tmpId=" + getRandString() +
 223       "&page=" + encodeURIComponent(this.$route.path);
 224     this.conn = new WebSocket(this.connexionString);
 225     this.conn.onopen = connectAndPoll;
 226     this.conn.onmessage = this.socketMessageListener;
 227     this.conn.onclose = this.socketCloseListener;
 228   },
 229   mounted: function() {
 230     [document.getElementById("infoDiv"),document.getElementById("newgameDiv")]
 231       .forEach(elt => elt.addEventListener("click", processModalClick));
 232     document.querySelectorAll("#predefinedCadences > button").forEach(
 233       (b) => { b.addEventListener("click",
 234         () => { this.newchallenge.cadence = b.innerHTML; }
 235       )}
 236     );
 237   },
 238   beforeDestroy: function() {
 239     this.send("disconnect");
 240   },
 241   methods: {
 242     // Helpers:
 243     send: function(code, obj) {
 244       if (!!this.conn)
 245       {
 246         this.conn.send(JSON.stringify(
 247           Object.assign(
 248             {code: code},
 249             obj,
 250           )
 251         ));
 252       }
 253     },
 254     getVname: function(vid) {
 255       const variant = this.st.variants.find(v => v.id == vid);
 256       // this.st.variants might be uninitialized (variant == null)
 257       return (!!variant ? variant.name : "");
 258     },
 259     filterChallenges: function(type) {
 260       return this.challenges.filter(c => c.type == type);
 261     },
 262     filterGames: function(type) {
 263       return this.games.filter(g => g.type == type);
 264     },
 265     classifyObject: function(o) { //challenge or game
 266       return (o.cadence.indexOf('d') === -1 ? "live" : "corr");
 267     },
 268     setDisplay: function(letter, type, e) {
 269       this[letter + "display"] = type;
 270       let elt = !!e
 271         ? e.target
 272         : document.getElementById("btn" + letter.toUpperCase() + type);
 273       elt.classList.add("active");
 274       if (!!elt.previousElementSibling)
 275         elt.previousElementSibling.classList.remove("active");
 276       else
 277         elt.nextElementSibling.classList.remove("active");
 278     },
 279     isGamer: function(sid) {
 280       return this.people[sid].pages.some(p => p.indexOf("/game/") >= 0);
 281     },
 282     getActionLabel: function(sid) {
 283       return this.people[sid].pages.some(p => p == "/")
 284         ? "Challenge"
 285         : "Observe";
 286     },
 287     challOrWatch: function(sid) {
 288       if (this.people[sid].pages.some(p => p == "/"))
 289       {
 290         // Available, in Hall
 291         this.newchallenge.to = this.people[sid].name;
 292         doClick("modalNewgame");
 293       }
 294       else
 295       {
 296         // In some game, maybe playing maybe not: show a random one
 297         let gids = [];
 298         this.people[sid].pages.forEach(p => {
 299           const matchGid = p.match(/[a-zA-Z0-9]+$/);
 300           if (!!matchGid)
 301             gids.push(matchGid[0]);
 302         });
 303         const gid = gids[Math.floor(Math.random() * gids.length)];
 304         this.showGame(this.games.find(g => g.id == gid));
 305       }
 306     },
 307     showGame: function(g) {
 308       // NOTE: we are an observer, since only games I don't play are shown here
 309       // ==> Moves sent by connected remote player(s) if live game
 310       let url = "/game/" + g.id;
 311       if (g.type == "live")
 312         url += "?rid=" + g.rids[Math.floor(Math.random() * g.rids.length)];
 313       this.$router.push(url);
 314     },
 315     processChat: function(chat) {
 316       this.send("newchat", {data:chat});
 317     },
 318     // Messaging center:
 319     socketMessageListener: function(msg) {
 320       if (!this.conn)
 321         return;
 322       const data = JSON.parse(msg.data);
 323       switch (data.code)
 324       {
 325         case "pollclientsandgamers":
 326         {
 327           // Since people can be both in Hall and Game,
 328           // need to track "askIdentity" requests:
 329           let identityAsked = {};
 330           data.sockIds.forEach(s => {
 331             const page = s.page || "/";
 332             if (s.sid != this.st.user.sid && !identityAsked[s.sid])
 333             {
 334               identityAsked[s.sid] = true;
 335               this.send("askidentity", {target:s.sid, page:page});
 336             }
 337             if (!this.people[s.sid])
 338               this.$set(this.people, s.sid, {id:0, name:"", pages:[page]});
 339             else if (this.people[s.sid].pages.indexOf(page) < 0)
 340               this.people[s.sid].pages.push(page);
 341             if (!s.page) //peer is in Hall
 342               this.send("askchallenge", {target:s.sid});
 343             else //peer is in Game
 344               this.send("askgame", {target:s.sid, page:page});
 345           });
 346           break;
 347         }
 348         case "connect":
 349         case "gconnect":
 350         {
 351           const page = data.page || "/";
 352           // NOTE: player could have been polled earlier, but might have logged in then
 353           // So it's a good idea to ask identity if he was anonymous.
 354           // But only ask game / challenge if currently disconnected.
 355           if (!this.people[data.from])
 356           {
 357             this.$set(this.people, data.from, {name:"", id:0, pages:[page]});
 358             if (data.code == "connect")
 359               this.send("askchallenge", {target:data.from});
 360             else
 361               this.send("askgame", {target:data.from, page:page});
 362           }
 363           else
 364           {
 365             // append page if not already in list
 366             if (this.people[data.from].pages.indexOf(page) < 0)
 367               this.people[data.from].pages.push(page);
 368           }
 369           if (this.people[data.from].id == 0)
 370           {
 371             this.newConnect[data.from] = true; //for self multi-connects tests
 372             this.send("askidentity", {target:data.from, page:page});
 373           }
 374           break;
 375         }
 376         case "disconnect":
 377         case "gdisconnect":
 378           // If the user reloads the page twice very quickly (experienced with Firefox),
 379           // the first reload won't have time to connect but will trigger a "close" event anyway.
 380           // ==> Next check is required.
 381           if (!this.people[data.from])
 382             return;
 383           // Disconnect means no more tmpIds:
 384           if (data.code == "disconnect")
 385           {
 386             // Remove the live challenge sent by this player:
 387             ArrayFun.remove(this.challenges, c => c.from.sid == data.from);
 388           }
 389           else
 390           {
 391             // Remove the matching live game if now unreachable
 392             const gid = data.page.match(/[a-zA-Z0-9]+$/)[0];
 393             const gidx = this.games.findIndex(g => g.id == gid);
 394             if (gidx >= 0)
 395             {
 396               const game = this.games[gidx];
 397               if (game.type == "live" &&
 398                 game.rids.length == 1 && game.rids[0] == data.from)
 399               {
 400                 this.games.splice(gidx, 1);
 401               }
 402             }
 403           }
 404           const page = data.page || "/";
 405           ArrayFun.remove(this.people[data.from].pages, p => p == page);
 406           if (this.people[data.from].pages.length == 0)
 407             this.$delete(this.people, data.from);
 408           break;
 409         case "killed":
 410           // I logged in elsewhere:
 411           alert(this.st.tr["New connexion detected: tab now offline"]);
 412           // TODO: this fails. See https://github.com/websockets/ws/issues/489
 413           //this.conn.removeEventListener("message", this.socketMessageListener);
 414           //this.conn.removeEventListener("close", this.socketCloseListener);
 415           //this.conn.close();
 416           this.conn = null;
 417           break;
 418         case "askidentity":
 419         {
 420           // Request for identification (TODO: anonymous shouldn't need to reply)
 421           const me = {
 422             // Decompose to avoid revealing email
 423             name: this.st.user.name,
 424             sid: this.st.user.sid,
 425             id: this.st.user.id,
 426           };
 427           this.send("identity", {data:me, target:data.from});
 428           break;
 429         }
 430         case "identity":
 431         {
 432           const user = data.data;
 433           if (!!user.name) //otherwise anonymous
 434           {
 435             // If I multi-connect, kill current connexion if no mark (I'm older)
 436             if (this.newConnect[user.sid] && user.id > 0
 437               && user.id == this.st.user.id && user.sid != this.st.user.sid)
 438             {
 439               if (!this.killed[this.st.user.sid])
 440               {
 441                 this.send("killme", {sid:this.st.user.sid});
 442                 this.killed[this.st.user.sid] = true;
 443               }
 444             }
 445             if (user.sid != this.st.user.sid) //I already know my identity...
 446             {
 447               this.$set(this.people, user.sid,
 448                 {
 449                   id: user.id,
 450                   name: user.name,
 451                   pages: this.people[user.sid].pages,
 452                 });
 453             }
 454           }
 455           delete this.newConnect[user.sid];
 456           break;
 457         }
 458         case "askchallenge":
 459         {
 460           // Send my current live challenge (if any)
 461           const cIdx = this.challenges.findIndex(c =>
 462             c.from.sid == this.st.user.sid && c.type == "live");
 463           if (cIdx >= 0)
 464           {
 465             const c = this.challenges[cIdx];
 466             // NOTE: in principle, should only send targeted challenge to the target.
 467             // But we may not know yet the identity of the target (just name),
 468             // so cannot decide if data.from is the target or not.
 469             const myChallenge =
 470             {
 471               id: c.id,
 472               from: this.st.user.sid,
 473               to: c.to,
 474               fen: c.fen,
 475               vid: c.vid,
 476               cadence: c.cadence,
 477               added: c.added,
 478             };
 479             this.send("challenge", {data:myChallenge, target:data.from});
 480           }
 481           break;
 482         }
 483         case "challenge": //after "askchallenge"
 484         case "newchallenge":
 485         {
 486           // NOTE about next condition: see "askchallenge" case.
 487           const chall = data.data;
 488           if (!chall.to || (this.people[chall.from].id > 0 &&
 489             (chall.from == this.st.user.sid || chall.to == this.st.user.name)))
 490           {
 491             let newChall = Object.assign({}, chall);
 492             newChall.type = this.classifyObject(chall);
 493             newChall.added = Date.now();
 494             let fromValues = Object.assign({}, this.people[chall.from]);
 495             delete fromValues["pages"]; //irrelevant in this context
 496             newChall.from = Object.assign({sid:chall.from}, fromValues);
 497             newChall.vname = this.getVname(newChall.vid);
 498             this.challenges.push(newChall);
 499             // Adjust visual:
 500             if (newChall.type == "live" && this.cdisplay == "corr" && !this.challenges.some(c => c.type == "corr"))
 501               this.setDisplay('c', "live");
 502             else if (newChall.type == "corr" && this.cdisplay == "live" && !this.challenges.some(c => c.type == "live"))
 503               this.setDisplay('c', "corr");
 504           }
 505           break;
 506         }
 507         case "refusechallenge":
 508         {
 509           const cid = data.data;
 510           ArrayFun.remove(this.challenges, c => c.id == cid);
 511           alert(this.st.tr["Challenge declined"]);
 512           break;
 513         }
 514         case "deletechallenge":
 515         {
 516           // NOTE: the challenge may be already removed
 517           const cid = data.data;
 518           ArrayFun.remove(this.challenges, c => c.id == cid);
 519           break;
 520         }
 521         case "game": //individual request
 522         case "newgame":
 523         {
 524           // NOTE: it may be live or correspondance
 525           const game = data.data;
 526           let locGame = this.games.find(g => g.id == game.id);
 527           if (!locGame)
 528           {
 529             let newGame = game;
 530             newGame.type = this.classifyObject(game);
 531             newGame.vname = this.getVname(game.vid);
 532             if (!game.score) //if new game from Hall
 533               newGame.score = "*";
 534             newGame.rids = [game.rid];
 535             delete newGame["rid"];
 536             this.games.push(newGame);
 537             // Adjust visual:
 538             if (newGame.type == "live" && this.gdisplay == "corr" && !this.games.some(g => g.type == "corr"))
 539               this.setDisplay('g', "live");
 540             else if (newGame.type == "live" && this.gdisplay == "live" && !this.games.some(g => g.type == "live"))
 541               this.setDisplay('g', "corr");
 542           }
 543           else
 544           {
 545             // Append rid (if not already in list)
 546             if (!locGame.rids.includes(game.rid))
 547               locGame.rids.push(game.rid);
 548           }
 549           break;
 550         }
 551         case "startgame":
 552         {
 553           // New game just started: data contain all information
 554           const gameInfo = data.data;
 555           if (this.classifyObject(gameInfo) == "live")
 556             this.startNewGame(gameInfo);
 557           else
 558           {
 559             this.infoMessage = this.st.tr["New correspondance game:"] +
 560               " <a href='#/game/" + gameInfo.id + "'>" +
 561               "#/game/" + gameInfo.id + "</a>";
 562             let modalBox = document.getElementById("modalInfo");
 563             modalBox.checked = true;
 564           }
 565           break;
 566         }
 567         case "newchat":
 568           this.newChat = data.data;
 569           break;
 570       }
 571     },
 572     socketCloseListener: function() {
 573       if (!this.conn)
 574         return;
 575       this.conn = new WebSocket(this.connexionString);
 576       this.conn.addEventListener("message", this.socketMessageListener);
 577       this.conn.addEventListener("close", this.socketCloseListener);
 578     },
 579     // Challenge lifecycle:
 580     newChallenge: async function() {
 581       if (this.newchallenge.vid == "")
 582         return alert(this.st.tr["Please select a variant"]);
 583       if (!!this.newchallenge.to && this.newchallenge.to == this.st.user.name)
 584         return alert(this.st.tr["Self-challenge is forbidden"]);
 585       const vname = this.getVname(this.newchallenge.vid);
 586       const vModule = await import("@/variants/" + vname + ".js");
 587       window.V = vModule.VariantRules;
 588       if (!!this.newchallenge.cadence.match(/^[0-9]+$/))
 589         this.newchallenge.cadence += "+0"; //assume minutes, no increment
 590       const error = checkChallenge(this.newchallenge);
 591       if (!!error)
 592         return alert(error);
 593       const ctype = this.classifyObject(this.newchallenge);
 594       if (ctype == "corr" && this.st.user.id <= 0)
 595         return alert(this.st.tr["Please log in to play correspondance games"]);
 596       // NOTE: "from" information is not required here
 597       let chall = Object.assign({}, this.newchallenge);
 598       const finishAddChallenge = (cid) => {
 599         chall.id = cid || "c" + getRandString();
 600         // Remove old challenge if any (only one at a time of a given type):
 601         const cIdx = this.challenges.findIndex(c =>
 602           (c.from.sid == this.st.user.sid || c.from.id == this.st.user.id) && c.type == ctype);
 603         if (cIdx >= 0)
 604         {
 605           // Delete current challenge (will be replaced now)
 606           this.send("deletechallenge", {data:this.challenges[cIdx].id});
 607           if (ctype == "corr")
 608           {
 609             ajax(
 610               "/challenges",
 611               "DELETE",
 612               {id: this.challenges[cIdx].id}
 613             );
 614           }
 615           this.challenges.splice(cIdx, 1);
 616         }
 617         this.send("newchallenge", {data:Object.assign({from:this.st.user.sid}, chall)});
 618         // Add new challenge:
 619         chall.from = { //decompose to avoid revealing email
 620           sid: this.st.user.sid,
 621           id: this.st.user.id,
 622           name: this.st.user.name,
 623         };
 624         chall.added = Date.now();
 625         // NOTE: vname and type are redundant (can be deduced from cadence + vid)
 626         chall.type = ctype;
 627         chall.vname = vname;
 628         this.challenges.push(chall);
 629         // Remember cadence  + vid for quicker further challenges:
 630         localStorage.setItem("cadence", chall.cadence);
 631         localStorage.setItem("vid", chall.vid);
 632         document.getElementById("modalNewgame").checked = false;
 633       };
 634       if (ctype == "live")
 635       {
 636         // Live challenges have a random ID
 637         finishAddChallenge(null);
 638       }
 639       else
 640       {
 641         // Correspondance game: send challenge to server
 642         ajax(
 643           "/challenges",
 644           "POST",
 645           { chall: chall },
 646           response => { finishAddChallenge(response.cid); }
 647         );
 648       }
 649     },
 650     clickChallenge: function(c) {
 651       const myChallenge = (c.from.sid == this.st.user.sid //live
 652         || (this.st.user.id > 0 && c.from.id == this.st.user.id)); //corr
 653       if (!myChallenge)
 654       {
 655         if (c.type == "corr" && this.st.user.id <= 0)
 656           return alert(this.st.tr["Please log in to accept corr challenges"]);
 657         c.accepted = true;
 658         if (!!c.to) //c.to == this.st.user.name (connected)
 659         {
 660           // TODO: if special FEN, show diagram after loading variant
 661           c.accepted = confirm("Accept challenge?");
 662         }
 663         if (c.accepted)
 664         {
 665           c.seat = { //again, avoid c.seat = st.user to not reveal email
 666             sid: this.st.user.sid,
 667             id: this.st.user.id,
 668             name: this.st.user.name,
 669           };
 670           this.launchGame(c);
 671         }
 672         else
 673         {
 674           this.send("refusechallenge", {data:c.id, target:c.from.sid});
 675         }
 676         this.send("deletechallenge", {data:c.id});
 677       }
 678       else //my challenge
 679       {
 680         if (c.type == "corr")
 681         {
 682           ajax(
 683             "/challenges",
 684             "DELETE",
 685             {id: c.id}
 686           );
 687         }
 688         this.send("deletechallenge", {data:c.id});
 689       }
 690       // In all cases, the challenge is consumed:
 691       ArrayFun.remove(this.challenges, ch => ch.id == c.id);
 692     },
 693     // NOTE: when launching game, the challenge is already being deleted
 694     launchGame: async function(c) {
 695       const vModule = await import("@/variants/" + c.vname + ".js");
 696       window.V = vModule.VariantRules;
 697       // These game informations will be shared
 698       let gameInfo =
 699       {
 700         id: getRandString(),
 701         fen: c.fen || V.GenRandInitFen(),
 702         players: shuffle([c.from, c.seat]), //white then black
 703         vid: c.vid,
 704         cadence: c.cadence,
 705       };
 706       let oppsid = c.from.sid; //may not be defined if corr + offline opp
 707       if (!oppsid)
 708       {
 709         oppsid = Object.keys(this.people).find(sid =>
 710           this.people[sid].id == c.from.id);
 711       }
 712       const notifyNewgame = () => {
 713         if (!!oppsid) //opponent is online
 714           this.send("startgame", {data:gameInfo, target:oppsid});
 715         // Send game info (only if live) to everyone except me in this tab
 716         this.send("newgame", {data:gameInfo});
 717       };
 718       if (c.type == "live")
 719       {
 720         notifyNewgame();
 721         this.startNewGame(gameInfo);
 722       }
 723       else //corr: game only on server
 724       {
 725         ajax(
 726           "/games",
 727           "POST",
 728           {gameInfo: gameInfo, cid: c.id}, //cid useful to delete challenge
 729           response => {
 730             gameInfo.id = response.gameId;
 731             notifyNewgame();
 732             this.$router.push("/game/" + response.gameId);
 733           }
 734         );
 735       }
 736     },
 737     // NOTE: for live games only (corr games start on the server)
 738     startNewGame: function(gameInfo) {
 739       const game = Object.assign({}, gameInfo, {
 740         // (other) Game infos: constant
 741         fenStart: gameInfo.fen,
 742         vname: this.getVname(gameInfo.vid),
 743         created: Date.now(),
 744         // Game state (including FEN): will be updated
 745         moves: [],
 746         clocks: [-1, -1], //-1 = unstarted
 747         initime: [0, 0], //initialized later
 748         score: "*",
 749       });
 750       GameStorage.add(game);
 751       if (this.st.settings.sound >= 1)
 752         new Audio("/sounds/newgame.mp3").play().catch(err => {});
 753       this.$router.push("/game/" + gameInfo.id);
 754     },
 755   },
 756 };
 757 </script>
 758
 759 <style lang="sass" scoped>
 760 .active
 761   color: #42a983
 762 #newGame
 763   display: block
 764   margin: 10px auto 5px auto
 765
 766 #infoDiv > .card
 767   padding: 15px 0
 768   max-width: 430px
 769
 770 #newgameDiv > .card
 771   max-width: 767px
 772   max-height: 100%
 773
 774 #people
 775   width: 100%
 776 #players
 777   width: 50%
 778   position: relative
 779   float: left
 780 #chat
 781   width: 50%
 782   float: left
 783   position: relative
 784 @media screen and (max-width: 767px)
 785   #players, #chats
 786     width: 100%
 787 #chat > .card
 788   max-width: 100%
 789   margin: 0;
 790   border: none;
 791 #players > p
 792   margin-left: 5px
 793 .anonymous
 794   font-style: italic
 795 button.player-action
 796   margin-left: 32px
 797 </style>