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