X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHall.vue;h=d0cabb46d8099789751b8f323ff4352f12453496;hb=3f22c2c3939dfd6bd66da26e6d6d9848c6da86d2;hp=0840cd91f50fb0c3d0fea4805a6c85b4c4ebda42;hpb=32f6285ee325a14286562a53baefc647201df2af;p=vchess.git diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index 0840cd91..d0cabb46 100644 --- a/client/src/views/Hall.vue +++ b/client/src/views/Hall.vue @@ -123,7 +123,7 @@ main p.anonymous @nonymous ({{ anonymousCount() }}) #chat Chat( - :newChat="newChat" + ref="chatcomp" @mychat="processChat" :pastChats="[]" ) @@ -131,7 +131,7 @@ main .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 .button-group - button#peopleBtn(onClick="window.doClick('modalPeople')") + button#peopleBtn(@click="openModalPeople()") | {{ st.tr["Who's there?"] }} button(@click="showNewchallengeForm()") | {{ st.tr["New game"] }} @@ -193,7 +193,7 @@ main ) button#loadMoreBtn( v-if="hasMore" - @click="loadMore()" + @click="loadMoreCorr()" ) | {{ st.tr["Load more"] }} @@ -247,7 +247,6 @@ export default { tchallDiag: "", curChallToAccept: {from: {}}, presetChalls: JSON.parse(localStorage.getItem("presetChalls") || "[]"), - newChat: "", conn: null, connexionString: "", // Related to (killing of) self multi-connects: @@ -297,8 +296,8 @@ export default { encodeURIComponent(this.$route.path); this.conn = new WebSocket(this.connexionString); this.conn.onopen = connectAndPoll; - this.conn.onmessage = this.socketMessageListener; - this.conn.onclose = this.socketCloseListener; + this.conn.addEventListener("message", this.socketMessageListener); + this.conn.addEventListener("close", this.socketCloseListener); }, mounted: function() { document.addEventListener('visibilitychange', this.visibilityChange); @@ -319,41 +318,9 @@ export default { this.setDisplay('c', showCtype); this.setDisplay('g', showGtype); // Ask server for current corr games (all but mines) - ajax( - "/observedgames", - "GET", - { - data: { - uid: this.st.user.id, - cursor: this.cursor - }, - success: (response) => { - const L = response.games.length; - if (L > 0) { - this.cursor = response.games[L - 1].created; - if (this.games.length == 0 && this.gdisplay == "live") { - document - .getElementById("btnGcorr") - .classList.add("somethingnew"); - } - } - this.games = this.games.concat( - response.games.map(g => { - const vname = this.getVname(g.vid); - return Object.assign( - {}, - g, - { - type: "corr", - vname: vname - } - ); - }) - ); - } - } - ); + this.loadMoreCorr(); // Also ask for corr challenges (open + sent by/to me) + // List them all, because they are not supposed to be that many (TODO?) ajax( "/challenges", "GET", @@ -426,6 +393,10 @@ export default { ["random-" + pc.randomness]: true }; }, + openModalPeople: function() { + window.doClick("modalPeople"); + document.getElementById("inputChat").focus(); + }, anonymousCount: function() { let count = 0; Object.values(this.people).forEach(p => { @@ -558,10 +529,7 @@ export default { showGame: function(g) { // NOTE: we are an observer, since only games I don't play are shown here // ==> Moves sent by connected remote player(s) if live game - let url = "/game/" + g.id; - if (g.type == "live") - url += "?rid=" + g.rids[Math.floor(Math.random() * g.rids.length)]; - this.$router.push(url); + this.$router.push("/game/" + g.id); }, resetSocialColor: function() { // TODO: this is called twice, once on opening an once on closing @@ -588,6 +556,8 @@ export default { // Since people can be both in Hall and Game, // need to track "askIdentity" requests: let identityAsked = {}; + // TODO: shuffling and random filtering on server, if + // the room is really crowded. data.sockIds.forEach(s => { const page = s.page || "/"; if (s.sid != this.st.user.sid && !identityAsked[s.sid]) { @@ -612,15 +582,17 @@ export default { case "connect": case "gconnect": { const page = data.page || "/"; - // Only ask game / challenges if first connexion: - if (!this.people[data.from]) { - this.people[data.from] = { pages: [{ path: page, focus: true }] }; - if (data.code == "connect") + if (data.code == "connect") { + // Ask challenges only on first connexion: + if (!this.people[data.from]) this.send("askchallenges", { target: data.from }); - // Ask game only if live: - else if (!page.match(/\/[0-9]+$/)) - this.send("askgame", { target: data.from, page: page }); - } else { + } + // Ask game only if live: + else if (!page.match(/\/[0-9]+$/)) + this.send("askgame", { target: data.from, page: page }); + if (!this.people[data.from]) + this.people[data.from] = { pages: [{ path: page, focus: true }] }; + else { // Append page if not already in list if (!(this.people[data.from].pages.find(p => p.path == page))) this.people[data.from].pages.push({ path: page, focus: true }); @@ -638,6 +610,10 @@ export default { // the first reload won't have time to connect but will trigger a "close" event anyway. // ==> Next check is required. if (!this.people[data.from]) return; + const page = data.page || "/"; + ArrayFun.remove(this.people[data.from].pages, p => p.path == page); + if (this.people[data.from].pages.length == 0) + this.$delete(this.people, data.from); // Disconnect means no more tmpIds: if (data.code == "disconnect") { // Remove the live challenges sent by this player: @@ -648,22 +624,16 @@ export default { ); } else { // Remove the matching live game if now unreachable - const gid = data.page.match(/[a-zA-Z0-9]+$/)[0]; + const gid = page.match(/[a-zA-Z0-9]+$/)[0]; // Corr games are always reachable: if (!gid.match(/^[0-9]+$/)) { - const gidx = this.games.findIndex(g => g.id == gid); - // NOTE: gidx should always be >= 0 (TODO?) - if (gidx >= 0) { - const game = this.games[gidx]; - ArrayFun.remove(game.rids, rid => rid == data.from); - if (game.rids.length == 0) this.games.splice(gidx, 1); + // Live games are reachable as long as someone is on the game page + if (Object.values(this.people).every(p => + p.pages.every(pg => pg.path != page))) { + ArrayFun.remove(this.games, g => g.id == gid); } } } - const page = data.page || "/"; - ArrayFun.remove(this.people[data.from].pages, p => p.path == page); - if (this.people[data.from].pages.length == 0) - this.$delete(this.people, data.from); break; } case "getfocus": @@ -683,6 +653,8 @@ export default { break; case "killed": // I logged in elsewhere: + this.conn.removeEventListener("message", this.socketMessageListener); + this.conn.removeEventListener("close", this.socketCloseListener); this.conn = null; alert(this.st.tr["New connexion detected: tab now offline"]); break; @@ -776,32 +748,27 @@ export default { case "game": // Individual request case "newgame": { const game = data.data; - // Ignore games where I play (will go in MyGames page) - if (game.players.every(p => - p.sid != this.st.user.sid && p.id != this.st.user.id)) - { - let locGame = this.games.find(g => g.id == game.id); - if (!locGame) { - let newGame = game; - newGame.type = this.classifyObject(game); - newGame.vname = this.getVname(game.vid); - if (!game.score) - // New game from Hall - newGame.score = "*"; - newGame.rids = [game.rid]; - delete newGame["rid"]; - this.games.push(newGame); - if ( - (newGame.type == "live" && this.gdisplay == "corr") || - (newGame.type == "corr" && this.gdisplay == "live") - ) { - document - .getElementById("btnG" + newGame.type) - .classList.add("somethingnew"); - } - } else { - // Append rid (if not already in list) - if (!locGame.rids.includes(game.rid)) locGame.rids.push(game.rid); + // Ignore games where I play (will go in MyGames page), + // and also games that I already received. + if ( + game.players.every(p => + p.sid != this.st.user.sid && p.id != this.st.user.id) && + this.games.findIndex(g => g.id == game.id) == -1 + ) { + let newGame = game; + newGame.type = this.classifyObject(game); + newGame.vname = this.getVname(game.vid); + if (!game.score) + // New game from Hall + newGame.score = "*"; + this.games.push(newGame); + if ( + (newGame.type == "live" && this.gdisplay == "corr") || + (newGame.type == "corr" && this.gdisplay == "live") + ) { + document + .getElementById("btnG" + newGame.type) + .classList.add("somethingnew"); } } break; @@ -830,7 +797,7 @@ export default { break; } case "newchat": - this.newChat = data.data; + this.$refs["chatcomp"].newChat(data.data); if (!document.getElementById("modalPeople").checked) document.getElementById("peopleBtn").classList.add("somethingnew"); break; @@ -842,7 +809,7 @@ export default { this.conn.addEventListener("message", this.socketMessageListener); this.conn.addEventListener("close", this.socketCloseListener); }, - loadMore: function() { + loadMoreCorr: function() { ajax( "/observedgames", "GET", @@ -854,6 +821,16 @@ export default { success: (res) => { const L = res.games.length; if (L > 0) { + if ( + this.cursor == Number.MAX_SAFE_INTEGER && + this.games.length == 0 && + this.gdisplay == "live" + ) { + // First loading: show indicators + document + .getElementById("btnGcorr") + .classList.add("somethingnew"); + } this.cursor = res.games[L - 1].created; let moreGames = res.games.map(g => { const vname = this.getVname(g.vid); @@ -1215,7 +1192,6 @@ export default { // Game state (including FEN): will be updated moves: [], clocks: [-1, -1], //-1 = unstarted - initime: [0, 0], //initialized later score: "*" } );