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["Time control"] }} *
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 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...)
174 const uids = response.challenges.map(c => { return c.uid });
177 { ids: uids.join(",") },
180 response2.users.forEach(u => {names[u.id] = u.name});
181 this.challenges = this.challenges.concat(
182 response.challenges.map(c => {
183 // (just players names in fact)
184 const from = {name: names[c.uid], id: c.uid};
185 const type = this.classifyObject(c);
186 const vname = this.getVname(c.vid);
187 return Object.assign({}, c, {type: type, vname: vname, from: from});
194 // 0.1] Ask server for room composition:
195 const funcPollClients = () => {
196 // Same strategy as in Game.vue: send connection
197 // after we're sure WebSocket is initialized
198 this.st.conn.send(JSON.stringify({code:"connect"}));
199 this.st.conn.send(JSON.stringify({code:"pollclients"}));
200 this.st.conn.send(JSON.stringify({code:"pollgamers"}));
202 if (!!this.st.conn && this.st.conn.readyState == 1) //1 == OPEN state
204 else //socket not ready yet (initial loading)
205 this.st.conn.onopen = funcPollClients;
206 this.st.conn.onmessage = this.socketMessageListener;
207 const socketCloseListener = () => {
208 store.socketCloseListener(); //reinitialize connexion (in store.js)
209 this.st.conn.addEventListener('message', this.socketMessageListener);
210 this.st.conn.addEventListener('close', socketCloseListener);
212 this.st.conn.onclose = socketCloseListener;
214 mounted: function() {
215 [document.getElementById("infoDiv"),document.getElementById("newgameDiv")]
216 .forEach(elt => elt.addEventListener("click", processModalClick));
217 document.querySelectorAll("#predefinedTimeControls > button").forEach(
218 (b) => { b.addEventListener("click",
219 () => { this.newchallenge.timeControl = b.innerHTML; }
225 filterChallenges: function(type) {
226 return this.challenges.filter(c => c.type == type);
228 filterGames: function(type) {
229 return this.games.filter(g => g.type == type);
231 classifyObject: function(o) { //challenge or game
232 return (o.timeControl.indexOf('d') === -1 ? "live" : "corr");
234 showGame: function(g) {
235 // NOTE: we are an observer, since only games I don't play are shown here
236 // ==> Moves sent by connected remote player(s) if live game
237 let url = "/game/" + g.id;
238 if (g.type == "live")
239 url += "?rid=" + g.rid;
240 this.$router.push(url);
242 setDisplay: function(letter, type, e) {
243 this[letter + "display"] = type;
244 e.target.classList.add("active");
245 if (!!e.target.previousElementSibling)
246 e.target.previousElementSibling.classList.remove("active");
248 e.target.nextElementSibling.classList.remove("active");
250 getVname: function(vid) {
251 const variant = this.st.variants.find(v => v.id == vid);
252 // this.st.variants might be uninitialized (variant == null)
253 return (!!variant ? variant.name : "");
255 processChat: function(chat) {
256 // When received on server, this will trigger a "notifyRoom"
257 this.st.conn.send(JSON.stringify({code:"newchat", chat: chat}));
259 sendSomethingTo: function(to, code, obj, warnDisconnected) {
260 const doSend = (code, obj, sid) => {
261 this.st.conn.send(JSON.stringify(Object.assign(
267 if (!to || (!to.sid && !to.name))
269 // Open challenge: send to all connected players (me excepted)
270 Object.keys(this.people).forEach(sid => {
271 if (sid != this.st.user.sid)
272 doSend(code, obj, sid);
282 if (to.name == this.st.user.name)
283 return alert(this.st.tr["Cannot challenge self"]);
284 // Challenge with targeted players
286 Object.keys(this.people).find(sid => this.people[sid].name == to.name);
289 if (!!warnDisconnected)
290 alert(this.st.tr["Warning: target is not connected"]);
294 doSend(code, obj, targetSid);
299 socketMessageListener: function(msg) {
300 const data = JSON.parse(msg.data);
304 alert(this.st.tr["Warning: multi-tabs not supported"]);
306 // 0.2] Receive clients list (just socket IDs)
308 data.sockIds.forEach(sid => {
309 this.$set(this.people, sid, {id:0, name:""});
310 // Ask identity and challenges
311 this.st.conn.send(JSON.stringify({code:"askidentity", target:sid}));
312 this.st.conn.send(JSON.stringify({code:"askchallenge", target:sid}));
316 // NOTE: we could make a difference between people in hall
317 // and gamers, but is it necessary?
318 data.sockIds.forEach(sid => {
319 this.$set(this.people, sid, {id:0, name:"", gamer:true});
320 this.st.conn.send(JSON.stringify({code:"askidentity", target:sid}));
322 // Also ask current games to all playing peers (TODO: some design issue)
323 this.st.conn.send(JSON.stringify({code:"askgames"}));
327 // Request for identification: reply if I'm not anonymous
328 if (this.st.user.id > 0)
330 this.st.conn.send(JSON.stringify({code:"identity",
332 // NOTE: decompose to avoid revealing email
333 name: this.st.user.name,
334 sid: this.st.user.sid,
343 this.$set(this.people, data.user.sid,
346 name: data.user.name,
347 gamer: this.people[data.user.sid].gamer,
353 // Send my current live challenge (if any)
354 const cIdx = this.challenges.findIndex(c =>
355 c.from.sid == this.st.user.sid && c.type == "live");
358 const c = this.challenges[cIdx];
359 // TODO: code below requires "c.to" to have given his identity,
360 // but it can happen that the identity arrives later, which
361 // prevent him from receiving the challenge.
362 // ==> Filter later (when receiving challenge)
365 // // Only share targeted challenges to the targets:
366 // const toSid = Object.keys(this.people).find(k =>
367 // this.people[k].name == c.to);
368 // if (toSid != data.from)
373 // Minimal challenge informations: (from not required)
378 timeControl: c.timeControl,
381 this.st.conn.send(JSON.stringify({code:"challenge",
382 chall:myChallenge, target:data.from}));
388 // Receive challenge from some player (+sid)
389 // NOTE about next condition: see "askchallenge" case.
390 if (!data.chall.to || data.chall.to == this.st.user.name)
392 let newChall = data.chall;
393 newChall.type = this.classifyObject(data.chall);
395 Object.assign({sid:data.from}, this.people[data.from]);
396 newChall.vname = this.getVname(newChall.vid);
397 this.challenges.push(newChall);
403 // Receive game from some player (+sid)
404 // NOTE: it may be correspondance (if newgame while we are connected)
405 // If duplicate found: select rid (remote ID) at random
406 let game = this.games.find(g => g.id == data.game.id);
409 if (Math.random() < 0.5)
410 game.rid = data.from;
414 let newGame = data.game;
415 newGame.type = this.classifyObject(data.game);
416 newGame.vname = this.getVname(data.game.vid);
417 newGame.rid = data.from;
418 if (!data.game.score)
420 this.games.push(newGame);
426 // New game just started: data contain all information
427 if (this.classifyObject(data.gameInfo) == "live")
428 this.startNewGame(data.gameInfo);
431 this.infoMessage = "New game started: " +
432 "<a href='#/game/" + data.gameInfo.id + "'>" +
433 "#/game/" + data.gameInfo.id + "</a>";
434 let modalBox = document.getElementById("modalInfo");
435 modalBox.checked = true;
436 setTimeout(() => { modalBox.checked = false; }, 3000);
441 this.newChat = data.chat;
443 case "refusechallenge":
445 ArrayFun.remove(this.challenges, c => c.id == data.cid);
446 localStorage.removeItem("challenge");
447 alert(this.st.tr["Challenge declined"]);
450 case "deletechallenge":
452 // NOTE: the challenge may be already removed
453 ArrayFun.remove(this.challenges, c => c.id == data.cid);
454 localStorage.removeItem("challenge"); //in case of
459 this.$set(this.people, data.from, {name:"", id:0, gamer:data.code[0]=='g'});
460 this.st.conn.send(JSON.stringify({code:"askidentity", target:data.from}));
461 if (data.code == "connect")
462 this.st.conn.send(JSON.stringify({code:"askchallenge", target:data.from}));
464 this.st.conn.send(JSON.stringify({code:"askgame", target:data.from}));
468 this.$delete(this.people, data.from);
469 if (data.code == "disconnect")
471 // Also remove all challenges sent by this player:
472 ArrayFun.remove(this.challenges, c => c.from.sid == data.from);
476 // And all live games where he plays and no other opponent is online
477 ArrayFun.remove(this.games, g =>
478 g.type == "live" && (g.players.every(p => p.sid == data.from
479 || !this.people[p.sid])), "all");
484 // Challenge lifecycle:
485 tryChallenge: function(sid) {
486 if (this.people[sid].id == 0)
487 return; //anonymous players cannot be challenged
488 // TODO: SID is available, so we could use it instead of searching from name
489 this.newchallenge.to = this.people[sid].name;
490 doClick("modalNewgame");
492 challOrWatch: function(sid, e) {
493 switch (e.target.innerHTML)
496 this.tryChallenge(sid);
499 this.showGame(this.games.find(
500 g => g.players.some(pl => pl.sid == sid || pl.uid == this.people[sid].id)));
504 newChallenge: async function() {
505 if (this.newchallenge.vid == "")
506 return alert(this.st.tr["Please select a variant"]);
507 if (!!this.newchallenge.to && this.newchallenge.to == this.st.user.name)
508 return alert(this.st.tr["Self-challenge is forbidden"]);
509 const vname = this.getVname(this.newchallenge.vid);
510 const vModule = await import("@/variants/" + vname + ".js");
511 window.V = vModule.VariantRules;
512 if (!!this.newchallenge.timeControl.match(/^[0-9]+$/))
513 this.newchallenge.timeControl += "+0"; //assume minutes, no increment
514 const error = checkChallenge(this.newchallenge);
517 const ctype = this.classifyObject(this.newchallenge);
518 if (ctype == "corr" && this.st.user.id <= 0)
519 return alert(this.st.tr["Please log in to play correspondance games"]);
520 // NOTE: "from" information is not required here
521 let chall = Object.assign({}, this.newchallenge);
522 const finishAddChallenge = (cid,warnDisconnected) => {
523 chall.id = cid || "c" + getRandString();
524 // Send challenge to peers (if connected)
525 const isSent = this.sendSomethingTo({name:chall.to}, "challenge",
526 {chall:chall}, !!warnDisconnected);
529 // Remove old challenge if any (only one at a time):
530 const cIdx = this.challenges.findIndex(c =>
531 c.from.sid == this.st.user.sid && c.type == ctype);
534 // Delete current challenge (will be replaced now)
535 this.sendSomethingTo({name:this.challenges[cIdx].to},
536 "deletechallenge", {cid:this.challenges[cIdx].id});
542 {id: this.challenges[cIdx].id}
545 this.challenges.splice(cIdx, 1);
547 // Add new challenge:
548 chall.added = Date.now();
549 // NOTE: vname and type are redundant (can be deduced from timeControl + vid)
552 chall.from = { //decompose to avoid revealing email
553 sid: this.st.user.sid,
555 name: this.st.user.name,
557 this.challenges.push(chall);
559 localStorage.setItem("challenge", JSON.stringify(chall));
560 // Also remember timeControl + vid for quicker further challenges:
561 localStorage.setItem("timeControl", chall.timeControl);
562 localStorage.setItem("vid", chall.vid);
563 document.getElementById("modalNewgame").checked = false;
567 // Live challenges have a random ID
568 finishAddChallenge(null, "warnDisconnected");
572 // Correspondance game: send challenge to server
577 response => { finishAddChallenge(response.cid); }
581 clickChallenge: function(c) {
582 const myChallenge = (c.from.sid == this.st.user.sid //live
583 || (this.st.user.id > 0 && c.from.id == this.st.user.id)); //corr
586 if (c.type == "corr" && this.st.user.id <= 0)
587 return alert(this.st.tr["Please log in to accept corr challenges"]);
589 if (!!c.to) //c.to == this.st.user.name (connected)
591 // TODO: if special FEN, show diagram after loading variant
592 c.accepted = confirm("Accept challenge?");
596 c.seat = { //again, avoid c.seat = st.user to not reveal email
597 sid: this.st.user.sid,
599 name: this.st.user.name,
605 this.st.conn.send(JSON.stringify({
606 code: "refusechallenge",
607 cid: c.id, target: c.from.sid}));
609 this.sendSomethingTo(!!c.to ? {sid:c.from.sid} : null, "deletechallenge", {cid:c.id});
613 if (c.type == "corr")
622 localStorage.removeItem("challenge");
623 this.sendSomethingTo({name:c.to}, "deletechallenge", {cid:c.id});
625 // In all cases, the challenge is consumed:
626 ArrayFun.remove(this.challenges, ch => ch.id == c.id);
628 // NOTE: when launching game, the challenge is already being deleted
629 launchGame: async function(c) {
630 const vModule = await import("@/variants/" + c.vname + ".js");
631 window.V = vModule.VariantRules;
632 // These game informations will be sent to other players
636 fen: c.fen || V.GenRandInitFen(),
637 players: shuffle([c.from, c.seat]), //white then black
639 vname: c.vname, //theoretically vid is enough, but much easier with vname
640 timeControl: c.timeControl,
642 let oppsid = c.from.sid; //may not be defined if corr + offline opp
645 oppsid = Object.keys(this.people).find(sid =>
646 this.people[sid].id == c.from.id);
648 const tryNotifyOpponent = () => {
649 if (!!oppsid) //opponent is online
651 this.st.conn.send(JSON.stringify({code:"newgame",
652 gameInfo:gameInfo, target:oppsid, cid:c.id}));
655 if (c.type == "live")
657 // NOTE: in this case we are sure opponent is online
659 this.startNewGame(gameInfo);
661 else //corr: game only on server
666 {gameInfo: gameInfo, cid: c.id}, //cid useful to delete challenge
668 gameInfo.id = response.gameId;
670 this.$router.push("/game/" + response.gameId);
674 // Send game info to everyone except opponent (and me)
675 Object.keys(this.people).forEach(sid => {
676 if (![this.st.user.sid,oppsid].includes(sid))
678 this.st.conn.send(JSON.stringify({code:"game",
679 game: { //minimal game info:
681 players: gameInfo.players,
683 timeControl: gameInfo.timeControl,
689 // NOTE: for live games only (corr games start on the server)
690 startNewGame: function(gameInfo) {
691 const game = Object.assign({}, gameInfo, {
692 // (other) Game infos: constant
693 fenStart: gameInfo.fen,
695 // Game state (including FEN): will be updated
697 clocks: [-1, -1], //-1 = unstarted
698 initime: [0, 0], //initialized later
701 GameStorage.add(game);
702 if (this.st.settings.sound >= 1)
703 new Audio("/sounds/newgame.mp3").play().catch(err => {});
704 this.$router.push("/game/" + gameInfo.id);
710 <style lang="sass" scoped>
715 margin: 10px auto 5px auto
726 @media screen and (max-width: 767px)