X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHall.vue;h=a98b4c05e3629e55a5cb12b51e6dcb8c1820c1b3;hb=80b38d463c0d5dacac93bc2aeb666bbb19781e1e;hp=d0012fc6ec1cb66f4f64f98466cba4f26069a8b3;hpb=78d60fc852926e9ad643105d706847de49b5237e;p=vchess.git diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index d0012fc6..a98b4c05 100644 --- a/client/src/views/Hall.vue +++ b/client/src/views/Hall.vue @@ -99,7 +99,7 @@ main button(@click="issueNewChallenge()") {{ st.tr["Send challenge"] }} input#modalPeople.modal( type="checkbox" - @click="resetSocialColor()" + @click="toggleSocialColor()" ) div#peopleWrap( role="dialog" @@ -113,7 +113,7 @@ main v-for="sid in Object.keys(people)" v-if="!!people[sid].name" ) - span {{ people[sid].name }} + UserBio.user-bio(:uid="people[sid].id" :uname="people[sid].name") button.player-action( v-if="isGamer(sid)" @click="watchGame(sid)" @@ -135,7 +135,7 @@ main .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 .button-group - button#peopleBtn(@click="openModalPeople()") + button#peopleBtn(onClick="window.doClick('modalPeople')") | {{ st.tr["Who's there?"] }} button(@click="showNewchallengeForm()") | {{ st.tr["New game"] }} @@ -186,13 +186,13 @@ main GameList( v-show="gdisplay=='live'" :games="filterGames('live')" - :showBoth="true" + :show-both="true" @show-game="showGame" ) div(v-show="gdisplay=='corr'") GameList( :games="filterGames('corr')" - :showBoth="true" + :show-both="true" @show-game="showGame" ) button#loadMoreBtn( @@ -212,6 +212,7 @@ import params from "@/parameters"; import { getRandString, shuffle, randInt } from "@/utils/alea"; import { getDiagram } from "@/utils/printDiagram"; import Chat from "@/components/Chat.vue"; +import UserBio from "@/components/UserBio.vue"; import GameList from "@/components/GameList.vue"; import ChallengeList from "@/components/ChallengeList.vue"; import { GameStorage } from "@/utils/gameStorage"; @@ -220,6 +221,7 @@ export default { name: "my-hall", components: { Chat, + UserBio, GameList, ChallengeList }, @@ -241,7 +243,9 @@ export default { vid: parseInt(localStorage.getItem("vid")) || 0, to: "", //name of challenged player (if any) cadence: localStorage.getItem("cadence") || "", - randomness: parseInt(localStorage.getItem("challRandomness")) || 2, + randomness: + // Warning: randomness can be 0, then !!randomness is false + (parseInt(localStorage.getItem("challRandomness"))+1 || 3) - 1, // VariantRules object, stored to not interfere with // diagrams of targetted challenges: V: null, @@ -322,7 +326,13 @@ export default { ); }, mounted: function() { - ["peopleWrap", "infoDiv", "newgameDiv"].forEach(eltName => { + document.getElementById("peopleWrap") + .addEventListener("click", (e) => { + processModalClick(e, () => { + this.toggleSocialColor("close") + }); + }); + ["infoDiv", "newgameDiv"].forEach(eltName => { document.getElementById(eltName) .addEventListener("click", processModalClick); }); @@ -423,10 +433,6 @@ 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 => { @@ -568,18 +574,18 @@ export default { } }); const gid = gids[Math.floor(Math.random() * gids.length)]; - const game = this.games.find(g => g.id == gid); - if (!!game) this.showGame(game); - else this.$router.push("/game/" + gid); //game vs. me + window.open("/#/game/" + gid, "_blank"); }, 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 - this.$router.push("/game/" + g.id); + window.open("/#/game/" + g.id, "_blank"); }, - resetSocialColor: function() { - // TODO: this is called twice, once on opening an once on closing - document.getElementById("peopleBtn").classList.remove("somethingnew"); + toggleSocialColor: function(action) { + if (!action && document.getElementById("modalPeople").checked) + document.getElementById("inputChat").focus(); + else + document.getElementById("peopleBtn").classList.remove("somethingnew"); }, processChat: function(chat) { this.send("newchat", { data: chat }); @@ -677,12 +683,19 @@ export default { this.$delete(this.people, data.from[0]); else this.$forceUpdate(); //TODO: shouldn't be required if (data.code == "disconnect") { - // Remove the live challenges sent by this player: - ArrayFun.remove( - this.challenges, - c => c.type == "live" && c.from.sid == data.from[0], - "all" - ); + // Remove the live challenges sent by this player, if + // he isn't connected on another tab: + if ( + !this.people[data.from[0]] || + Object.values(this.people[data.from[0]].tmpIds) + .every(v => v.page != "/") + ) { + ArrayFun.remove( + this.challenges, + c => c.type == "live" && c.from.sid == data.from[0], + "all" + ); + } } else { // Remove the matching live game if now unreachable const gid = data.page.match(/[a-zA-Z0-9]+$/)[0]; @@ -809,9 +822,13 @@ export default { // 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 + this.games.findIndex(g => g.id == game.id) == -1 && + game.players.every(p => { + return ( + p.sid != this.st.user.sid && + (p.id == 0 || p.id != this.st.user.id) + ); + }) ) { let newGame = game; newGame.type = this.classifyObject(game); @@ -821,6 +838,7 @@ export default { newGame.score = "*"; this.games.push(newGame); if ( + newGame.score == '*' && (newGame.type == "live" && this.gdisplay == "corr") || (newGame.type == "corr" && this.gdisplay == "live") ) { @@ -872,7 +890,8 @@ export default { if ( this.cursor == Number.MAX_SAFE_INTEGER && this.games.length == 0 && - this.gdisplay == "live" + this.gdisplay == "live" && + res.games.some(g => g.score == '*') ) { // First loading: show indicators document @@ -1003,7 +1022,11 @@ export default { let chall = Object.assign({}, this.newchallenge); // Add only if not already issued (not counting target or FEN): if (this.challenges.some(c => - (c.from.sid == this.st.user.sid || c.from.id == this.st.user.id) && + ( + c.from.sid == this.st.user.sid || + (c.from.id > 0 && c.from.id == this.st.user.id) + ) + && c.vid == chall.vid && c.cadence == chall.cadence && c.randomness == chall.randomness @@ -1025,7 +1048,10 @@ export default { const c = this.challenges[i]; if ( c.type == ctype && - (c.from.sid == this.st.user.sid || c.from.id == this.st.user.id) + ( + c.from.sid == this.st.user.sid || + (c.from.id > 0 && c.from.id == this.st.user.id) + ) ) { countMyChalls++; if (c.added < oldestAdded) { @@ -1178,10 +1204,13 @@ export default { // NOTE: when launching game, the challenge is already being deleted launchGame: function(c) { // White player index 0, black player index 1: - const players = + let players = !!c.mycolor ? (c.mycolor == "w" ? [c.seat, c.from] : [c.from, c.seat]) : shuffle([c.from, c.seat]); + players.forEach(p => { + if (!!p["tmpIds"]) delete p["tmpIds"]; + }); // These game informations will be shared let gameInfo = { id: getRandString(), @@ -1261,13 +1290,13 @@ export default { () => { const myIdx = (game.players[0].sid == this.st.user.sid ? 0 : 1); GameStorage.add(game, (err) => { - // If an error occurred, game is not added: a tab already - // added the game. Maybe a focused one, maybe not. - // We know for sure that it emitted the gong start sound. - // ==> Do not play it again. - if (!err && this.st.settings.sound) - new Audio("/sounds/newgame.flac").play().catch(() => {}); + // If an error occurred, game is not added: the focused tab + // already added the game. if (!this.focus) { + if (this.st.settings.sound) + // This will be played several times if several hidden tabs + // on Hall... TODO: fix that (how ?!) + new Audio("/sounds/newgame.flac").play().catch(() => {}); notify( "New live game", { body: "vs " + game.players[1-myIdx].name || "@nonymous" } @@ -1276,7 +1305,7 @@ export default { this.$router.push("/game/" + gameInfo.id); }); }, - this.focus ? 500 + 1000 * Math.random() : 0 + this.focus ? 0 : 500 + 1000 * Math.random() ); } } @@ -1285,7 +1314,7 @@ export default {