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")
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")
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")
21 label(for="timeControl") {{ st.tr["Cadence"] }} *
22 div#predefinedTimeControls
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"] }}
37 button#newGame(onClick="doClick('modalNewgame')") {{ st.tr["New game"] }}
39 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
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")
51 h3.text-center {{ st.tr["Who's there?"] }}
53 p(v-for="sid in Object.keys(people)" v-if="!!people[sid].name")
54 span {{ people[sid].name }}
56 v-if="people[sid].name != st.user.name"
57 @click="challOrWatch(sid, $event)"
59 | {{ st.tr[!!people[sid].gamer ? 'Playing' : 'Available'] }}
60 p.anonymous @nonymous ({{ anonymousCount }})
62 Chat(:newChat="newChat" @mychat="processChat")
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")
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 { getRandString, shuffle } from "@/utils/alea";
82 import Chat from "@/components/Chat.vue";
83 import GameList from "@/components/GameList.vue";
84 import ChallengeList from "@/components/ChallengeList.vue";
85 import { GameStorage } from "@/utils/gameStorage";
86 import { processModalClick } from "@/utils/modalClick";
98 cdisplay: "live", //or corr
99 pdisplay: "players", //or chat
103 people: {}, //people in main hall
107 vid: localStorage.getItem("vid") || "",
108 to: "", //name of challenged player (if any)
109 timeControl: localStorage.getItem("timeControl") || "",
115 // st.variants changes only once, at loading from [] to [...]
116 "st.variants": function(variantArray) {
117 // Set potential challenges and games variant names:
118 this.challenges.forEach(c => {
120 c.vname = this.getVname(c.vid);
122 this.games.forEach(g => {
124 g.vname = this.getVname(g.vid);
129 anonymousCount: function() {
131 Object.values(this.people).forEach(p => { count += (!p.name ? 1 : 0); });
135 created: function() {
136 // Always add myself to players' list
137 const my = this.st.user;
138 this.$set(this.people, my.sid, {id:my.id, name:my.name});
139 // Retrieve live challenge (not older than 30 minute) if any:
140 const chall = JSON.parse(localStorage.getItem("challenge") || "false");
143 // NOTE: a challenge survives 3 minutes, for potential connection issues
144 if ((Date.now() - chall.added)/1000 <= 3*60)
146 chall.added = Date.now(); //update added time, for next disconnect...
147 this.challenges.push(chall);
148 localStorage.setItem("challenge", JSON.stringify(chall));
151 localStorage.removeItem("challenge");
153 // Ask server for current corr games (all but mines)
157 {uid: this.st.user.id, excluded: true},
159 this.games = this.games.concat(response.games.map(g => {
160 const type = this.classifyObject(g);
161 const vname = this.getVname(g.vid);
162 return Object.assign({}, g, {type: type, vname: vname});
166 // Also ask for corr challenges (open + sent by/to me)
170 {uid: this.st.user.id},
172 // Gather all senders names, and then retrieve full identity:
173 // (TODO [perf]: some might be online...)
175 response.challenges.forEach(c => {
176 if (c.uid != this.st.user.id)
177 names[c.uid] = ""; //unknwon for now
178 else if (!!c.target && c.target != this.st.user.id)
179 names[c.target] = "";
181 const addChallenges = (newChalls) => {
182 names[this.st.user.id] = this.st.user.name; //in case of
183 this.challenges = this.challenges.concat(
184 response.challenges.map(c => {
185 const from = {name: names[c.uid], id: c.uid}; //or just name
186 const type = this.classifyObject(c);
187 const vname = this.getVname(c.vid);
188 return Object.assign({},
193 to: (!!c.target ? names[c.target] : ""),
203 { ids: Object.keys(names).join(",") },
205 response2.users.forEach(u => {names[u.id] = u.name});
214 // 0.1] Ask server for room composition:
215 const funcPollClients = () => {
216 // Same strategy as in Game.vue: send connection
217 // after we're sure WebSocket is initialized
218 this.st.conn.send(JSON.stringify({code:"connect"}));
219 this.st.conn.send(JSON.stringify({code:"pollclients"}));
220 this.st.conn.send(JSON.stringify({code:"pollgamers"}));
222 if (!!this.st.conn && this.st.conn.readyState == 1) //1 == OPEN state
224 else //socket not ready yet (initial loading)
225 this.st.conn.onopen = funcPollClients;
226 this.st.conn.onmessage = this.socketMessageListener;
227 const socketCloseListener = () => {
228 store.socketCloseListener(); //reinitialize connexion (in store.js)
229 this.st.conn.addEventListener('message', this.socketMessageListener);
230 this.st.conn.addEventListener('close', socketCloseListener);
232 this.st.conn.onclose = socketCloseListener;
234 mounted: function() {
235 [document.getElementById("infoDiv"),document.getElementById("newgameDiv")]
236 .forEach(elt => elt.addEventListener("click", processModalClick));
237 document.querySelectorAll("#predefinedTimeControls > button").forEach(
238 (b) => { b.addEventListener("click",
239 () => { this.newchallenge.timeControl = b.innerHTML; }
245 filterChallenges: function(type) {
246 return this.challenges.filter(c => c.type == type);
248 filterGames: function(type) {
249 return this.games.filter(g => g.type == type);
251 classifyObject: function(o) { //challenge or game
252 return (o.timeControl.indexOf('d') === -1 ? "live" : "corr");
254 showGame: function(g) {
255 // NOTE: we are an observer, since only games I don't play are shown here
256 // ==> Moves sent by connected remote player(s) if live game
257 let url = "/game/" + g.id;
258 if (g.type == "live")
259 url += "?rid=" + g.rid;
260 this.$router.push(url);
262 setDisplay: function(letter, type, e) {
263 this[letter + "display"] = type;
264 e.target.classList.add("active");
265 if (!!e.target.previousElementSibling)
266 e.target.previousElementSibling.classList.remove("active");
268 e.target.nextElementSibling.classList.remove("active");
270 getVname: function(vid) {
271 const variant = this.st.variants.find(v => v.id == vid);
272 // this.st.variants might be uninitialized (variant == null)
273 return (!!variant ? variant.name : "");
275 processChat: function(chat) {
276 // When received on server, this will trigger a "notifyRoom"
277 this.st.conn.send(JSON.stringify({code:"newchat", chat: chat}));
279 sendSomethingTo: function(to, code, obj, warnDisconnected) {
280 const doSend = (code, obj, sid) => {
281 this.st.conn.send(JSON.stringify(Object.assign(
287 if (!to || (!to.sid && !to.name))
289 // Open challenge: send to all connected players (me excepted)
290 Object.keys(this.people).forEach(sid => {
291 if (sid != this.st.user.sid)
292 doSend(code, obj, sid);
302 if (to.name == this.st.user.name)
303 return alert(this.st.tr["Cannot challenge self"]);
304 // Challenge with targeted players
306 Object.keys(this.people).find(sid => this.people[sid].name == to.name);
309 if (!!warnDisconnected)
310 alert(this.st.tr["Warning: target is not connected"]);
314 doSend(code, obj, targetSid);
319 socketMessageListener: function(msg) {
320 const data = JSON.parse(msg.data);
324 alert(this.st.tr["Warning: multi-tabs not supported"]);
326 // 0.2] Receive clients list (just socket IDs)
328 data.sockIds.forEach(sid => {
329 this.$set(this.people, sid, {id:0, name:""});
330 // Ask identity and challenges
331 this.st.conn.send(JSON.stringify({code:"askidentity", target:sid}));
332 this.st.conn.send(JSON.stringify({code:"askchallenge", target:sid}));
336 // NOTE: we could make a difference between people in hall
337 // and gamers, but is it necessary?
338 data.sockIds.forEach(sid => {
339 this.$set(this.people, sid, {id:0, name:"", gamer:true});
340 this.st.conn.send(JSON.stringify({code:"askidentity", target:sid}));
342 // Also ask current games to all playing peers (TODO: some design issue)
343 this.st.conn.send(JSON.stringify({code:"askgames"}));
347 // Request for identification: reply if I'm not anonymous
348 if (this.st.user.id > 0)
350 this.st.conn.send(JSON.stringify({code:"identity",
352 // NOTE: decompose to avoid revealing email
353 name: this.st.user.name,
354 sid: this.st.user.sid,
363 this.$set(this.people, data.user.sid,
366 name: data.user.name,
367 gamer: this.people[data.user.sid].gamer,
373 // Send my current live challenge (if any)
374 const cIdx = this.challenges.findIndex(c =>
375 c.from.sid == this.st.user.sid && c.type == "live");
378 const c = this.challenges[cIdx];
379 // TODO: code below requires "c.to" to have given his identity,
380 // but it can happen that the identity arrives later, which
381 // prevent him from receiving the challenge.
382 // ==> Filter later (when receiving challenge)
385 // // Only share targeted challenges to the targets:
386 // const toSid = Object.keys(this.people).find(k =>
387 // this.people[k].name == c.to);
388 // if (toSid != data.from)
393 // Minimal challenge informations: (from not required)
398 timeControl: c.timeControl,
401 this.st.conn.send(JSON.stringify({code:"challenge",
402 chall:myChallenge, target:data.from}));
408 // Receive challenge from some player (+sid)
409 // NOTE about next condition: see "askchallenge" case.
410 if (!data.chall.to || data.chall.to == this.st.user.name)
412 let newChall = data.chall;
413 newChall.type = this.classifyObject(data.chall);
415 Object.assign({sid:data.from}, this.people[data.from]);
416 newChall.vname = this.getVname(newChall.vid);
417 this.challenges.push(newChall);
423 // Receive game from some player (+sid)
424 // NOTE: it may be correspondance (if newgame while we are connected)
425 // If duplicate found: select rid (remote ID) at random
426 let game = this.games.find(g => g.id == data.game.id);
429 if (Math.random() < 0.5)
430 game.rid = data.from;
434 let newGame = data.game;
435 newGame.type = this.classifyObject(data.game);
436 newGame.vname = this.getVname(data.game.vid);
437 newGame.rid = data.from;
438 if (!data.game.score)
440 this.games.push(newGame);
446 // New game just started: data contain all information
447 if (this.classifyObject(data.gameInfo) == "live")
448 this.startNewGame(data.gameInfo);
451 this.infoMessage = "New game started: " +
452 "<a href='#/game/" + data.gameInfo.id + "'>" +
453 "#/game/" + data.gameInfo.id + "</a>";
454 let modalBox = document.getElementById("modalInfo");
455 modalBox.checked = true;
456 setTimeout(() => { modalBox.checked = false; }, 3000);
461 this.newChat = data.chat;
463 case "refusechallenge":
465 ArrayFun.remove(this.challenges, c => c.id == data.cid);
466 localStorage.removeItem("challenge");
467 alert(this.st.tr["Challenge declined"]);
470 case "deletechallenge":
472 // NOTE: the challenge may be already removed
473 ArrayFun.remove(this.challenges, c => c.id == data.cid);
474 localStorage.removeItem("challenge"); //in case of
479 this.$set(this.people, data.from, {name:"", id:0, gamer:data.code[0]=='g'});
480 this.st.conn.send(JSON.stringify({code:"askidentity", target:data.from}));
481 if (data.code == "connect")
482 this.st.conn.send(JSON.stringify({code:"askchallenge", target:data.from}));
484 this.st.conn.send(JSON.stringify({code:"askgame", target:data.from}));
488 this.$delete(this.people, data.from);
489 if (data.code == "disconnect")
491 // Also remove all challenges sent by this player:
492 ArrayFun.remove(this.challenges, c => c.from.sid == data.from);
496 // And all live games where he plays and no other opponent is online
497 ArrayFun.remove(this.games, g =>
498 g.type == "live" && (g.players.every(p => p.sid == data.from
499 || !this.people[p.sid])), "all");
504 // Challenge lifecycle:
505 tryChallenge: function(sid) {
506 if (this.people[sid].id == 0)
507 return; //anonymous players cannot be challenged
508 // TODO: SID is available, so we could use it instead of searching from name
509 this.newchallenge.to = this.people[sid].name;
510 doClick("modalNewgame");
512 challOrWatch: function(sid) {
513 if (!this.people[sid].gamer)
515 // Available, in Hall
516 this.tryChallenge(sid);
521 this.showGame(this.games.find(
522 g => g.players.some(pl => pl.sid == sid || pl.uid == this.people[sid].id)));
525 newChallenge: async function() {
526 if (this.newchallenge.vid == "")
527 return alert(this.st.tr["Please select a variant"]);
528 if (!!this.newchallenge.to && this.newchallenge.to == this.st.user.name)
529 return alert(this.st.tr["Self-challenge is forbidden"]);
530 const vname = this.getVname(this.newchallenge.vid);
531 const vModule = await import("@/variants/" + vname + ".js");
532 window.V = vModule.VariantRules;
533 if (!!this.newchallenge.timeControl.match(/^[0-9]+$/))
534 this.newchallenge.timeControl += "+0"; //assume minutes, no increment
535 const error = checkChallenge(this.newchallenge);
538 const ctype = this.classifyObject(this.newchallenge);
539 if (ctype == "corr" && this.st.user.id <= 0)
540 return alert(this.st.tr["Please log in to play correspondance games"]);
541 // NOTE: "from" information is not required here
542 let chall = Object.assign({}, this.newchallenge);
543 const finishAddChallenge = (cid,warnDisconnected) => {
544 chall.id = cid || "c" + getRandString();
545 // Send challenge to peers (if connected)
546 const isSent = this.sendSomethingTo({name:chall.to}, "challenge",
547 {chall:chall}, !!warnDisconnected);
550 // Remove old challenge if any (only one at a time of a given type):
551 const cIdx = this.challenges.findIndex(c =>
552 (c.from.sid == this.st.user.sid || c.from.id == this.st.user.id) && c.type == ctype);
555 // Delete current challenge (will be replaced now)
556 this.sendSomethingTo({name:this.challenges[cIdx].to},
557 "deletechallenge", {cid:this.challenges[cIdx].id});
563 {id: this.challenges[cIdx].id}
566 this.challenges.splice(cIdx, 1);
568 // Add new challenge:
569 chall.added = Date.now();
570 // NOTE: vname and type are redundant (can be deduced from timeControl + vid)
573 chall.from = { //decompose to avoid revealing email
574 sid: this.st.user.sid,
576 name: this.st.user.name,
578 this.challenges.push(chall);
580 localStorage.setItem("challenge", JSON.stringify(chall));
581 // Also remember timeControl + vid for quicker further challenges:
582 localStorage.setItem("timeControl", chall.timeControl);
583 localStorage.setItem("vid", chall.vid);
584 document.getElementById("modalNewgame").checked = false;
588 // Live challenges have a random ID
589 finishAddChallenge(null, "warnDisconnected");
593 // Correspondance game: send challenge to server
598 response => { finishAddChallenge(response.cid); }
602 clickChallenge: function(c) {
603 const myChallenge = (c.from.sid == this.st.user.sid //live
604 || (this.st.user.id > 0 && c.from.id == this.st.user.id)); //corr
607 if (c.type == "corr" && this.st.user.id <= 0)
608 return alert(this.st.tr["Please log in to accept corr challenges"]);
610 if (!!c.to) //c.to == this.st.user.name (connected)
612 // TODO: if special FEN, show diagram after loading variant
613 c.accepted = confirm("Accept challenge?");
617 c.seat = { //again, avoid c.seat = st.user to not reveal email
618 sid: this.st.user.sid,
620 name: this.st.user.name,
626 this.st.conn.send(JSON.stringify({
627 code: "refusechallenge",
628 cid: c.id, target: c.from.sid}));
630 this.sendSomethingTo(!!c.to ? {sid:c.from.sid} : null, "deletechallenge", {cid:c.id});
634 if (c.type == "corr")
643 localStorage.removeItem("challenge");
644 this.sendSomethingTo({name:c.to}, "deletechallenge", {cid:c.id});
646 // In all cases, the challenge is consumed:
647 ArrayFun.remove(this.challenges, ch => ch.id == c.id);
649 // NOTE: when launching game, the challenge is already being deleted
650 launchGame: async function(c) {
651 const vModule = await import("@/variants/" + c.vname + ".js");
652 window.V = vModule.VariantRules;
653 // These game informations will be sent to other players
657 fen: c.fen || V.GenRandInitFen(),
658 players: shuffle([c.from, c.seat]), //white then black
660 vname: c.vname, //theoretically vid is enough, but much easier with vname
661 timeControl: c.timeControl,
663 let oppsid = c.from.sid; //may not be defined if corr + offline opp
666 oppsid = Object.keys(this.people).find(sid =>
667 this.people[sid].id == c.from.id);
669 const tryNotifyOpponent = () => {
670 if (!!oppsid) //opponent is online
672 this.st.conn.send(JSON.stringify({code:"newgame",
673 gameInfo:gameInfo, target:oppsid, cid:c.id}));
676 if (c.type == "live")
678 // NOTE: in this case we are sure opponent is online
680 this.startNewGame(gameInfo);
682 else //corr: game only on server
687 {gameInfo: gameInfo, cid: c.id}, //cid useful to delete challenge
689 gameInfo.id = response.gameId;
691 this.$router.push("/game/" + response.gameId);
695 // Send game info to everyone except opponent (and me)
696 Object.keys(this.people).forEach(sid => {
697 if (![this.st.user.sid,oppsid].includes(sid))
699 this.st.conn.send(JSON.stringify({code:"game",
700 game: { //minimal game info:
702 players: gameInfo.players,
704 timeControl: gameInfo.timeControl,
710 // NOTE: for live games only (corr games start on the server)
711 startNewGame: function(gameInfo) {
712 const game = Object.assign({}, gameInfo, {
713 // (other) Game infos: constant
714 fenStart: gameInfo.fen,
716 // Game state (including FEN): will be updated
718 clocks: [-1, -1], //-1 = unstarted
719 initime: [0, 0], //initialized later
722 GameStorage.add(game);
723 if (this.st.settings.sound >= 1)
724 new Audio("/sounds/newgame.mp3").play().catch(err => {});
725 this.$router.push("/game/" + gameInfo.id);
731 <style lang="sass" scoped>
736 margin: 10px auto 5px auto
747 @media screen and (max-width: 767px)