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