Fix initial display on Hall. Understand the 'double close event bug'
[vchess.git] / 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>