X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHall.vue;h=bbff9b951f14625ad8930facb44bb7134e739d94;hb=29ced362f46ae68e4314985bf836b3adeba23f32;hp=48ad4d3fe048cc7a095df17a52fa82cf644f5cbb;hpb=602d6befd30793111d3fda6e733f73e08d8b7a30;p=vchess.git diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index 48ad4d3f..bbff9b95 100644 --- a/client/src/views/Hall.vue +++ b/client/src/views/Hall.vue @@ -18,7 +18,7 @@ main :selected="newchallenge.vid==v.id") | {{ v.name }} fieldset - label(for="timeControl") {{ st.tr["Time control"] }} * + label(for="timeControl") {{ st.tr["Cadence"] }} * div#predefinedTimeControls button 3+2 button 5+3 @@ -29,7 +29,7 @@ main label(for="selectPlayers") {{ st.tr["Play with?"] }} input#selectPlayers(type="text" v-model="newchallenge.to") fieldset(v-if="st.user.id > 0 && newchallenge.to.length > 0") - label(for="inputFen") {{ FEN }} + label(for="inputFen") FEN input#inputFen(type="text" v-model="newchallenge.fen") button(@click="newChallenge") {{ st.tr["Send challenge"] }} .row @@ -50,16 +50,16 @@ main #people h3.text-center {{ st.tr["Who's there?"] }} #players - p(v-for="p in Object.values(people)" v-if="!!p.name") - span {{ p.name }} + p(v-for="sid in Object.keys(people)" v-if="!!people[sid].name") + span {{ people[sid].name }} button.player-action( - v-if="p.name != st.user.name" - @click="challOrWatch(p,$event)" + v-if="people[sid].name != st.user.name" + @click="challOrWatch(sid, $event)" ) - | {{ whatPlayerDoes(p) }} + | {{ st.tr[!!people[sid].gamer ? 'Playing' : 'Available'] }} p.anonymous @nonymous ({{ anonymousCount }}) #chat - Chat(:players="[]") + Chat(:newChat="newChat" @mychat="processChat") .clearer div .button-group @@ -108,6 +108,7 @@ export default { to: "", //name of challenged player (if any) timeControl: localStorage.getItem("timeControl") || "", }, + newChat: "", }; }, watch: { @@ -162,7 +163,7 @@ export default { })); } ); - // Also ask for corr challenges (open + sent to me) + // Also ask for corr challenges (open + sent by/to me) ajax( "/challenges", "GET", @@ -170,24 +171,44 @@ export default { response => { // Gather all senders names, and then retrieve full identity: // (TODO [perf]: some might be online...) - const uids = response.challenges.map(c => { return c.uid }); - ajax("/users", - "GET", - { ids: uids.join(",") }, - response2 => { - let names = {}; - response2.users.forEach(u => {names[u.id] = u.name}); - this.challenges = this.challenges.concat( - response.challenges.map(c => { - // (just players names in fact) - const from = {name: names[c.uid], id: c.uid}; - const type = this.classifyObject(c); - const vname = this.getVname(c.vid); - return Object.assign({}, c, {type: type, vname: vname, from: from}); - }) - ) - } - ); + let names = {}; + response.challenges.forEach(c => { + if (c.uid != this.st.user.id) + names[c.uid] = ""; //unknwon for now + else if (!!c.target && c.target != this.st.user.id) + names[c.target] = ""; + }); + const addChallenges = (newChalls) => { + names[this.st.user.id] = this.st.user.name; //in case of + this.challenges = this.challenges.concat( + response.challenges.map(c => { + const from = {name: names[c.uid], id: c.uid}; //or just name + const type = this.classifyObject(c); + const vname = this.getVname(c.vid); + return Object.assign({}, + { + type: type, + vname: vname, + from: from, + to: (!!c.target ? names[c.target] : ""), + }, + c); + }) + ); + }; + if (names !== {}) + { + ajax("/users", + "GET", + { ids: Object.keys(names).join(",") }, + response2 => { + response2.users.forEach(u => {names[u.id] = u.name}); + addChallenges(); + } + ); + } + else + addChallenges(); } ); // 0.1] Ask server for room composition: @@ -196,6 +217,7 @@ export default { // after we're sure WebSocket is initialized this.st.conn.send(JSON.stringify({code:"connect"})); this.st.conn.send(JSON.stringify({code:"pollclients"})); + this.st.conn.send(JSON.stringify({code:"pollgamers"})); }; if (!!this.st.conn && this.st.conn.readyState == 1) //1 == OPEN state funcPollClients(); @@ -227,7 +249,6 @@ export default { return this.games.filter(g => g.type == type); }, classifyObject: function(o) { //challenge or game - // Heuristic: should work for most cases... (TODO) return (o.timeControl.indexOf('d') === -1 ? "live" : "corr"); }, showGame: function(g) { @@ -251,13 +272,9 @@ export default { // this.st.variants might be uninitialized (variant == null) return (!!variant ? variant.name : ""); }, - whatPlayerDoes: function(p) { - if (this.games.some(g => g.type == "live" - && g.players.some(pl => pl.sid == p.sid))) - { - return "Playing"; - } - return "Challenge"; //player is available + processChat: function(chat) { + // When received on server, this will trigger a "notifyRoom" + this.st.conn.send(JSON.stringify({code:"newchat", chat: chat})); }, sendSomethingTo: function(to, code, obj, warnDisconnected) { const doSend = (code, obj, sid) => { @@ -267,21 +284,7 @@ export default { {target: sid} ))); }; - if (!!to) - { - // Challenge with targeted players - const targetSid = - Object.keys(this.people).find(sid => this.people[sid].name == to); - if (!targetSid) - { - if (!!warnDisconnected) - alert(this.st.tr["Warning: target is not connected"]); - return false; - } - else - doSend(code, obj, targetSid); - } - else + if (!to || (!to.sid && !to.name)) { // Open challenge: send to all connected players (me excepted) Object.keys(this.people).forEach(sid => { @@ -289,6 +292,27 @@ export default { doSend(code, obj, sid); }); } + else + { + let targetSid = ""; + if (!!to.sid) + targetSid = to.sid; + else + { + if (to.name == this.st.user.name) + return alert(this.st.tr["Cannot challenge self"]); + // Challenge with targeted players + targetSid = + Object.keys(this.people).find(sid => this.people[sid].name == to.name); + if (!targetSid) + { + if (!!warnDisconnected) + alert(this.st.tr["Warning: target is not connected"]); + return false; + } + } + doSend(code, obj, targetSid); + } return true; }, // Messaging center: @@ -301,17 +325,23 @@ export default { break; // 0.2] Receive clients list (just socket IDs) case "pollclients": - { data.sockIds.forEach(sid => { this.$set(this.people, sid, {id:0, name:""}); - // Ask identity, challenges and game(s) + // Ask identity and challenges this.st.conn.send(JSON.stringify({code:"askidentity", target:sid})); this.st.conn.send(JSON.stringify({code:"askchallenge", target:sid})); }); + break; + case "pollgamers": + // NOTE: we could make a difference between people in hall + // and gamers, but is it necessary? + data.sockIds.forEach(sid => { + this.$set(this.people, sid, {id:0, name:"", gamer:true}); + this.st.conn.send(JSON.stringify({code:"askidentity", target:sid})); + }); // Also ask current games to all playing peers (TODO: some design issue) this.st.conn.send(JSON.stringify({code:"askgames"})); break; - } case "askidentity": { // Request for identification: reply if I'm not anonymous @@ -331,7 +361,11 @@ export default { case "identity": { this.$set(this.people, data.user.sid, - {id: data.user.id, name: data.user.name}); + { + id: data.user.id, + name: data.user.name, + gamer: this.people[data.user.sid].gamer, + }); break; } case "askchallenge": @@ -342,14 +376,18 @@ export default { if (cIdx >= 0) { const c = this.challenges[cIdx]; - if (!!c.to) - { - // Only share targeted challenges to the targets: - const toSid = Object.keys(this.people).find(k => - this.people[k].name == c.to); - if (toSid != data.from) - return; - } + // TODO: code below requires "c.to" to have given his identity, + // but it can happen that the identity arrives later, which + // prevent him from receiving the challenge. + // ==> Filter later (when receiving challenge) +// if (!!c.to) +// { +// // Only share targeted challenges to the targets: +// const toSid = Object.keys(this.people).find(k => +// this.people[k].name == c.to); +// if (toSid != data.from) +// return; +// } const myChallenge = { // Minimal challenge informations: (from not required) @@ -358,6 +396,7 @@ export default { fen: c.fen, vid: c.vid, timeControl: c.timeControl, + added: c.added, }; this.st.conn.send(JSON.stringify({code:"challenge", chall:myChallenge, target:data.from})); @@ -367,13 +406,16 @@ export default { case "challenge": { // Receive challenge from some player (+sid) - let newChall = data.chall; - newChall.type = this.classifyObject(data.chall); - newChall.from = - Object.assign({sid:data.from}, this.people[data.from]); - newChall.added = Date.now(); //TODO: this is reception timestamp, not creation - newChall.vname = this.getVname(newChall.vid); - this.challenges.push(newChall); + // NOTE about next condition: see "askchallenge" case. + if (!data.chall.to || data.chall.to == this.st.user.name) + { + let newChall = data.chall; + newChall.type = this.classifyObject(data.chall); + newChall.from = + Object.assign({sid:data.from}, this.people[data.from]); + newChall.vname = this.getVname(newChall.vid); + this.challenges.push(newChall); + } break; } case "game": @@ -382,23 +424,25 @@ export default { // NOTE: it may be correspondance (if newgame while we are connected) // If duplicate found: select rid (remote ID) at random let game = this.games.find(g => g.id == data.game.id); - if (!!game && Math.random() < 0.5) - game.rid = data.from; + if (!!game) + { + if (Math.random() < 0.5) + game.rid = data.from; + } else { let newGame = data.game; newGame.type = this.classifyObject(data.game); newGame.vname = this.getVname(data.game.vid); newGame.rid = data.from; - newGame.score = "*"; + if (!data.game.score) + newGame.score = "*"; this.games.push(newGame); } break; } case "newgame": { - // TODO: next line required ?! - //ArrayFun.remove(this.challenges, c => c.id == data.cid); // New game just started: data contain all information if (this.classifyObject(data.gameInfo) == "live") this.startNewGame(data.gameInfo); @@ -413,6 +457,9 @@ export default { } break; } + case "newchat": + this.newChat = data.chat; + break; case "refusechallenge": { ArrayFun.remove(this.challenges, c => c.id == data.cid); @@ -428,49 +475,58 @@ export default { break; } case "connect": - { - this.$set(this.people, data.from, {name:"", id:0}); + case "gconnect": + this.$set(this.people, data.from, {name:"", id:0, gamer:data.code[0]=='g'}); this.st.conn.send(JSON.stringify({code:"askidentity", target:data.from})); - this.st.conn.send(JSON.stringify({code:"askchallenge", target:data.from})); - this.st.conn.send(JSON.stringify({code:"askgame", target:data.from})); + if (data.code == "connect") + this.st.conn.send(JSON.stringify({code:"askchallenge", target:data.from})); + else + this.st.conn.send(JSON.stringify({code:"askgame", target:data.from})); break; - } case "disconnect": - { + case "gdisconnect": this.$delete(this.people, data.from); - // Also remove all challenges sent by this player: - ArrayFun.remove(this.challenges, c => c.from.sid == data.from); - // And all live games where he plays and no other opponent is online - ArrayFun.remove(this.games, g => - g.type == "live" && (g.players.every(p => p.sid == data.from - || !this.people[p.sid])), "all"); + if (data.code == "disconnect") + { + // Also remove all challenges sent by this player: + ArrayFun.remove(this.challenges, c => c.from.sid == data.from); + } + else + { + // And all live games where he plays and no other opponent is online + ArrayFun.remove(this.games, g => + g.type == "live" && (g.players.every(p => p.sid == data.from + || !this.people[p.sid])), "all"); + } break; - } } }, // Challenge lifecycle: - tryChallenge: function(player) { - if (player.id == 0) + tryChallenge: function(sid) { + if (this.people[sid].id == 0) return; //anonymous players cannot be challenged - this.newchallenge.to = player.name; + // TODO: SID is available, so we could use it instead of searching from name + this.newchallenge.to = this.people[sid].name; doClick("modalNewgame"); }, - challOrWatch: function(p, e) { - switch (e.target.innerHTML) + challOrWatch: function(sid) { + if (!this.people[sid].gamer) { - case "Challenge": - this.tryChallenge(p); - break; - case "Playing": - // NOTE: this search for game was already done for rendering - this.showGame(this.games.find( - g => g.type=="live" && g.players.some(pl => pl.sid == p.sid))); - break; - }; + // Available, in Hall + this.tryChallenge(sid); + } + else + { + // Playing, in Game + this.showGame(this.games.find( + g => g.players.some(pl => pl.sid == sid || pl.uid == this.people[sid].id))); + } }, newChallenge: async function() { if (this.newchallenge.vid == "") return alert(this.st.tr["Please select a variant"]); + if (!!this.newchallenge.to && this.newchallenge.to == this.st.user.name) + return alert(this.st.tr["Self-challenge is forbidden"]); const vname = this.getVname(this.newchallenge.vid); const vModule = await import("@/variants/" + vname + ".js"); window.V = vModule.VariantRules; @@ -487,17 +543,17 @@ export default { const finishAddChallenge = (cid,warnDisconnected) => { chall.id = cid || "c" + getRandString(); // Send challenge to peers (if connected) - const isSent = this.sendSomethingTo(chall.to, "challenge", + const isSent = this.sendSomethingTo({name:chall.to}, "challenge", {chall:chall}, !!warnDisconnected); if (!isSent) return; - // Remove old challenge if any (only one at a time): + // Remove old challenge if any (only one at a time of a given type): const cIdx = this.challenges.findIndex(c => - c.from.sid == this.st.user.sid && c.type == ctype); + (c.from.sid == this.st.user.sid || c.from.id == this.st.user.id) && c.type == ctype); if (cIdx >= 0) { // Delete current challenge (will be replaced now) - this.sendSomethingTo(this.challenges[cIdx].to, + this.sendSomethingTo({name:this.challenges[cIdx].to}, "deletechallenge", {cid:this.challenges[cIdx].id}); if (ctype == "corr") { @@ -571,14 +627,7 @@ export default { code: "refusechallenge", cid: c.id, target: c.from.sid})); } - // TODO: refactor the "sendSomethingTo()" function - if (!c.to) - this.sendSomethingTo(null, "deletechallenge", {cid:c.id}); - else - { - this.st.conn.send(JSON.stringify({ - code:"deletechallenge", target: c.from.sid, cid: c.id})); - } + this.sendSomethingTo(!!c.to ? {sid:c.from.sid} : null, "deletechallenge", {cid:c.id}); } else //my challenge { @@ -592,12 +641,12 @@ export default { } else //live localStorage.removeItem("challenge"); - this.sendSomethingTo(c.to, "deletechallenge", {cid:c.id}); + this.sendSomethingTo({name:c.to}, "deletechallenge", {cid:c.id}); } // In all cases, the challenge is consumed: ArrayFun.remove(this.challenges, ch => ch.id == c.id); }, - // NOTE: when launching game, the challenge is already deleted + // NOTE: when launching game, the challenge is already being deleted launchGame: async function(c) { const vModule = await import("@/variants/" + c.vname + ".js"); window.V = vModule.VariantRules;