X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHall.vue;h=d0cabb46d8099789751b8f323ff4352f12453496;hb=3f22c2c3939dfd6bd66da26e6d6d9848c6da86d2;hp=47a86975c135b3c0587472472e3af9980c99f8cb;hpb=7617c334b43d2f5fff40cbec72127ed30e5867c0;p=vchess.git diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index 47a86975..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 => { @@ -682,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; @@ -824,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; @@ -836,7 +809,7 @@ export default { this.conn.addEventListener("message", this.socketMessageListener); this.conn.addEventListener("close", this.socketCloseListener); }, - loadMore: function() { + loadMoreCorr: function() { ajax( "/observedgames", "GET", @@ -848,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); @@ -1209,7 +1192,6 @@ export default { // Game state (including FEN): will be updated moves: [], clocks: [-1, -1], //-1 = unstarted - initime: [0, 0], //initialized later score: "*" } );