X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHall.vue;h=d65de3d7e24ba1f74c132d15783019957e9a2f90;hb=9ca1e26b79ec1873aa6ac914013160f8593d52cf;hp=82330ef13afccdb86c52fe0a471291a700481003;hpb=3d55deea9a2011c38d8d0067bd57fc889958bec2;p=vchess.git diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index 82330ef1..d65de3d7 100644 --- a/client/src/views/Hall.vue +++ b/client/src/views/Hall.vue @@ -8,7 +8,7 @@ main p(v-html="infoMessage") input#modalNewgame.modal(type="checkbox") div(role="dialog" aria-labelledby="titleFenedit") - .card.smallpad + .card.smallpad(@keyup.enter="newChallenge") label#closeNewgame.modal-close(for="modalNewgame") fieldset label(for="selectVariant") {{ st.tr["Variant"] }} @@ -26,8 +26,8 @@ main input#inputFen(type="text" v-model="newchallenge.fen") button(@click="newChallenge") {{ st.tr["Send challenge"] }} .row - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - button(onClick="doClick('modalNewgame')") New game + .col-sm-12 + button#newGame(onClick="doClick('modalNewgame')") New game .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 .collapse @@ -54,7 +54,7 @@ main ) | {{ p.name + (!!p.count ? " ("+p.count+")" : "") }} #chat(v-show="pdisplay=='chat'") - h3 Chat (TODO) + Chat(:players="[]") input#gameSection(type="radio" aria-hidden="true" name="accordion") label(for="gameSection" aria-hidden="true") Games div @@ -73,12 +73,14 @@ import { checkChallenge } from "@/data/challengeCheck"; import { ArrayFun } from "@/utils/array"; import { ajax } from "@/utils/ajax"; import { getRandString, shuffle } from "@/utils/alea"; +import Chat from "@/components/Chat.vue"; import GameList from "@/components/GameList.vue"; import ChallengeList from "@/components/ChallengeList.vue"; import { GameStorage } from "@/utils/gameStorage"; export default { name: "my-hall", components: { + Chat, GameList, ChallengeList, }, @@ -90,7 +92,7 @@ export default { gdisplay: "live", games: [], challenges: [], - people: [], //(all) online players + people: [], //people in main hall infoMessage: "", newchallenge: { fen: "", @@ -110,24 +112,28 @@ export default { }); this.games.forEach(g => { if (g.vname == "") - g.vname = this.getVname(g.vid) + g.vname = this.getVname(g.vid); }); }, }, computed: { uniquePlayers: function() { // Show e.g. "@nonymous (5)", and do nothing on click on anonymous - let anonymous = {id:0, name:"@nonymous", count:0}; - let playerList = []; + let anonymous = {name:"@nonymous", count:0}; + let playerList = {}; this.people.forEach(p => { if (p.id > 0) - playerList.push(p); + { + // We don't count registered users connections: either they are here or not. + if (!playerList[p.id]) + playerList[p.id] = {name: p.name, count: 0}; + } else anonymous.count++; }); if (anonymous.count > 0) - playerList.push(anonymous); - return playerList; + playerList[0] = anonymous; + return Object.values(playerList); }, }, created: function() { @@ -217,17 +223,13 @@ export default { // ==> Moves sent by connected remote player(s) if live game let url = "/game/" + g.id; if (g.type == "live") - { - const remotes = g.players.filter(p => this.people.some(pl => pl.sid == p.sid)); - const rIdx = (remotes.length == 1 ? 0 : Math.floor(Math.random()*2)); - url += "?rid=" + remotes[rIdx].sid; - } + url += "?rid=" + g.rid; this.$router.push(url); }, - // TODO: ...filter(...)[0].name, one-line, just remove this function getVname: function(vid) { - const vIdx = this.st.variants.findIndex(v => v.id == vid); - return vIdx >= 0 ? this.st.variants[vIdx].name : ""; + const variant = this.st.variants.find(v => v.id == vid); + // this.st.variants might be uninitialized (variant == null) + return (!!variant ? variant.name : ""); }, getSid: function(pname) { const pIdx = this.people.findIndex(pl => pl.name == pname); @@ -272,6 +274,9 @@ export default { const data = JSON.parse(msg.data); switch (data.code) { + case "duplicate": + alert("Warning: duplicate 'offline' connection"); + break; // 0.2] Receive clients list (just socket IDs) case "pollclients": { @@ -280,8 +285,9 @@ export default { // Ask identity, challenges and game(s) this.st.conn.send(JSON.stringify({code:"askidentity", target:sid})); this.st.conn.send(JSON.stringify({code:"askchallenge", target:sid})); - this.st.conn.send(JSON.stringify({code:"askgame", 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": @@ -317,26 +323,6 @@ export default { } break; } - case "askgame": - { - // Send my current live game (if any) - GameStorage.getCurrent((game) => { - if (!!game) - { - const myGame = - { - // Minimal game informations: - id: game.id, - players: game.players.map(p => p.name), - vid: game.vid, - timeControl: game.timeControl, - }; - this.st.conn.send(JSON.stringify({code:"game", - game:myGame, target:data.from})); - } - }); - break; - } case "identity": { const pIdx = this.people.findIndex(p => p.sid == data.user.sid); @@ -381,8 +367,8 @@ export default { else { this.infoMessage = "New game started: " + - "" + - "/game/" + data.gameInfo.gameId + ""; + "" + + "#/game/" + data.gameInfo.id + ""; let modalBox = document.getElementById("modalInfo"); modalBox.checked = true; setTimeout(() => { modalBox.checked = false; }, 3000); @@ -404,20 +390,20 @@ export default { } case "connect": { - this.people.push({name:"", id:0, sid:data.sid}); - this.st.conn.send(JSON.stringify({code:"askidentity", target:data.sid})); - this.st.conn.send(JSON.stringify({code:"askchallenge", target:data.sid})); - this.st.conn.send(JSON.stringify({code:"askgame", target:data.sid})); + this.people.push({name:"", id:0, sid:data.from}); + 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})); break; } case "disconnect": { - ArrayFun.remove(this.people, p => p.sid == data.sid); + ArrayFun.remove(this.people, p => p.sid == data.from); // Also remove all challenges sent by this player: - ArrayFun.remove(this.challenges, c => c.from.sid == data.sid); + 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.sid + g.type == "live" && (g.players.every(p => p.sid == data.from || !this.people.some(pl => pl.sid == p.sid))), "all"); break; } @@ -452,7 +438,8 @@ export default { chall.vname = vname; chall.from = this.people[0]; //avoid sending email this.challenges.push(chall); - localStorage.setItem("challenge", JSON.stringify(chall)); + if (ctype == "live") + localStorage.setItem("challenge", JSON.stringify(chall)); document.getElementById("modalNewgame").checked = false; }; const cIdx = this.challenges.findIndex( @@ -515,7 +502,6 @@ export default { } else //my challenge { - localStorage.removeItem("challenge"); if (c.type == "corr") { ajax( @@ -524,6 +510,8 @@ export default { {id: c.id} ); } + else //live + localStorage.removeItem("challenge"); } // In (almost) all cases, the challenge is consumed: ArrayFun.remove(this.challenges, ch => ch.id == c.id); @@ -537,10 +525,11 @@ export default { // These game informations will be sent to other players const gameInfo = { - gameId: getRandString(), + id: getRandString(), fen: c.fen || V.GenRandInitFen(), players: shuffle([c.from, c.seat]), //white then black vid: c.vid, + vname: c.vname, //theoretically vid is enough, but much easier with vname timeControl: c.timeControl, }; let target = c.from.sid; //may not be defined if corr + offline opp @@ -550,29 +539,47 @@ export default { if (!!opponent) target = opponent.sid } - if (!!target) //opponent is online - { - this.st.conn.send(JSON.stringify({code:"newgame", - gameInfo:gameInfo, target:target, cid:c.id})); - } + const tryNotifyOpponent = () => { + if (!!target) //opponent is online + { + this.st.conn.send(JSON.stringify({code:"newgame", + gameInfo:gameInfo, target:target, cid:c.id})); + } + }; if (c.type == "live") + { + tryNotifyOpponent(); this.startNewGame(gameInfo); + } else //corr: game only on server { ajax( "/games", "POST", {gameInfo: gameInfo, cid: c.id}, //cid useful to delete challenge - response => { this.$router.push("/game/" + response.gameId); } + response => { + gameInfo.id = response.gameId; + tryNotifyOpponent(); + this.$router.push("/game/" + response.gameId); + } ); } + // Send game info to everyone except opponent (and me) + this.st.conn.send(JSON.stringify({code:"game", + game: { //minimal game info: + id: gameInfo.id, + players: gameInfo.players.map(p => p.name), + vid: gameInfo.vid, + timeControl: gameInfo.timeControl, + }, + oppsid: target})); }, // NOTE: for live games only (corr games start on the server) startNewGame: function(gameInfo) { const game = Object.assign({}, gameInfo, { // (other) Game infos: constant fenStart: gameInfo.fen, - created: Date.now(), + added: Date.now(), // Game state (including FEN): will be updated moves: [], clocks: [-1, -1], //-1 = unstarted @@ -582,12 +589,14 @@ export default { GameStorage.add(game); if (this.st.settings.sound >= 1) new Audio("/sounds/newgame.mp3").play().catch(err => {}); - this.$router.push("/game/" + gameInfo.gameId); + this.$router.push("/game/" + gameInfo.id); }, }, };