X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHall.vue;h=ac2e26ecf8c8f6e68f13ca9ae28703b4f7e639f0;hb=584f81b93154313a3856112400b7df98e0eb2632;hp=1b8681fd8e291ebcb79c2d2c9994b7409c66006c;hpb=26f70eee84024ee170c6142e62fa08b1616ef6e3;p=vchess.git diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index 1b8681fd..ac2e26ec 100644 --- a/client/src/views/Hall.vue +++ b/client/src/views/Hall.vue @@ -8,17 +8,39 @@ main .card.text-center label.modal-close(for="modalInfo") p(v-html="infoMessage") - input#modalNewgame.modal(type="checkbox") + input#modalAccept.modal(type="checkbox") + div#acceptDiv(role="dialog") + .card + p.text-center + span.variantName {{ curChallToAccept.vname }} + span {{ curChallToAccept.cadence }} + span {{ st.tr["with"] + " " + curChallToAccept.from.name }} + .diagram( + v-if="!!curChallToAccept.fen" + v-html="tchallDiag" + ) + .button-group#buttonsTchall(:style="tchallButtonsMargin()") + button.acceptBtn(@click="decisionChallenge(true)") + span {{ st.tr["Accept challenge?"] }} + button.refuseBtn(@click="decisionChallenge(false)") + span {{ st.tr["Refuse"] }} + input#modalNewgame.modal( + type="checkbox" + @change="cadenceFocusIfOpened($event)" + ) div#newgameDiv( role="dialog" data-checkbox="modalNewgame" ) .card label#closeNewgame.modal-close(for="modalNewgame") - form(@submit.prevent="newChallenge()" @keyup.enter="newChallenge()") + div(@keyup.enter="newChallenge()") fieldset label(for="selectVariant") {{ st.tr["Variant"] }} * - select#selectVariant(v-model="newchallenge.vid") + select#selectVariant( + @change="loadNewchallVariant(trySetNewchallDiag)" + v-model="newchallenge.vid" + ) option( v-for="v in st.variants" :value="v.id" @@ -28,14 +50,21 @@ main fieldset label(for="cadence") {{ st.tr["Cadence"] }} * div#predefinedCadences - button 3+2 - button 5+3 - button 15+5 + button(type="button") 15+5 + button(type="button") 45+30 + button(type="button") 3d + button(type="button") 7d input#cadence( type="text" v-model="newchallenge.cadence" - placeholder="5+0, 1h+30s, 7d+1d ..." + placeholder="5+0, 1h+30s, 5d ..." ) + fieldset + label(for="selectRandomLevel") {{ st.tr["Randomness"] }} * + select#selectRandomLevel(v-model="newchallenge.randomness") + option(value="0") {{ st.tr["Deterministic"] }} + option(value="1") {{ st.tr["Symmetric random"] }} + option(value="2") {{ st.tr["Asymmetric random"] }} fieldset(v-if="st.user.id > 0") label(for="selectPlayers") {{ st.tr["Play with?"] }} input#selectPlayers( @@ -43,15 +72,17 @@ main v-model="newchallenge.to" ) fieldset(v-if="st.user.id > 0 && newchallenge.to.length > 0") - label(for="inputFen") FEN input#inputFen( + placeholder="FEN" + @input="trySetNewchallDiag()" type="text" v-model="newchallenge.fen" ) + .diagram(v-html="newchallenge.diag") button(@click="newChallenge()") {{ st.tr["Send challenge"] }} input#modalPeople.modal( type="checkbox" - @click="resetChatColor()" + @click="resetSocialColor()" ) div#peopleWrap( role="dialog" @@ -67,10 +98,15 @@ main ) span {{ people[sid].name }} button.player-action( - v-if="sid!=st.user.sid || isGamer(sid)" - @click="challOrWatch(sid)" + v-if="isGamer(sid)" + @click="watchGame(sid)" ) - | {{ getActionLabel(sid) }} + | {{ st.tr["Observe"] }} + button.player-action( + v-else-if="isFocusedOnHall(sid)" + @click="challenge(sid)" + ) + | {{ st.tr["Challenge"] }} p.anonymous @nonymous ({{ anonymousCount }}) #chat Chat( @@ -83,8 +119,8 @@ main .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')") - | {{ st.tr["Social"] }} - button(onClick="window.doClick('modalNewgame')") + | {{ st.tr["Who's there?"] }} + button(@click="showNewchallengeForm()") | {{ st.tr["New game"] }} .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 @@ -131,6 +167,7 @@ import { ArrayFun } from "@/utils/array"; import { ajax } from "@/utils/ajax"; import params from "@/parameters"; import { getRandString, shuffle } from "@/utils/alea"; +import { getDiagram } from "@/utils/printDiagram"; import Chat from "@/components/Chat.vue"; import GameList from "@/components/GameList.vue"; import ChallengeList from "@/components/ChallengeList.vue"; @@ -154,10 +191,18 @@ export default { infoMessage: "", newchallenge: { fen: "", - vid: localStorage.getItem("vid") || "", + vid: parseInt(localStorage.getItem("vid")) || 0, to: "", //name of challenged player (if any) - cadence: localStorage.getItem("cadence") || "" + cadence: localStorage.getItem("cadence") || "", + randomness: parseInt(localStorage.getItem("randomness")) || 2, + // VariantRules object, stored to not interfere with + // diagrams of targetted challenges: + V: null, + vname: "", + diag: "" //visualizing FEN }, + tchallDiag: "", + curChallToAccept: {from: {}}, newChat: "", conn: null, connexionString: "", @@ -171,82 +216,105 @@ export default { "st.variants": function() { // Set potential challenges and games variant names: this.challenges.concat(this.games).forEach(o => { - if (o.vname == "") o.vname = this.getVname(o.vid); + if (!o.vname) o.vname = this.getVname(o.vid); }); + if (!this.newchallenge.V && this.newchallenge.vid > 0) + this.loadNewchallVariant(); } }, computed: { anonymousCount: function() { let count = 0; Object.values(this.people).forEach(p => { - count += !p.name ? 1 : 0; + // Do not cound people who did not send their identity yet: + count += (!p.name && p.id === 0) ? 1 : 0; }); return count; } }, created: function() { + if (this.st.variants.length > 0 && this.newchallenge.vid > 0) + this.loadNewchallVariant(); const my = this.st.user; - this.$set(this.people, my.sid, { id: my.id, name: my.name, pages: ["/"] }); + this.$set( + this.people, + my.sid, + { + id: my.id, + name: my.name, + pages: [{ path: "/", focus: true }] + } + ); // Ask server for current corr games (all but mines) ajax( "/games", "GET", - { uid: this.st.user.id, excluded: true }, - response => { - this.games = this.games.concat( - response.games.map(g => { - const type = this.classifyObject(g); - const vname = this.getVname(g.vid); - return Object.assign({}, g, { type: type, vname: vname }); - }) - ); + { + data: { uid: this.st.user.id, excluded: true }, + success: (response) => { + this.games = this.games.concat( + response.games.map(g => { + const type = this.classifyObject(g); + const vname = this.getVname(g.vid); + return Object.assign({}, g, { type: type, vname: vname }); + }) + ); + } } ); // Also ask for corr challenges (open + sent by/to me) - ajax("/challenges", "GET", { uid: this.st.user.id }, response => { - // Gather all senders names, and then retrieve full identity: - // (TODO [perf]: some might be online...) - 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 = () => { - 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( - {}, + ajax( + "/challenges", + "GET", + { + data: { uid: this.st.user.id }, + success: (response) => { + // Gather all senders names, and then retrieve full identity: + // (TODO [perf]: some might be online...) + let names = {}; + response.challenges.forEach(c => { + if (c.uid != this.st.user.id) names[c.uid] = ""; + else if (!!c.target && c.target != this.st.user.id) + names[c.target] = ""; + }); + const addChallenges = () => { + 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 (Object.keys(names).length > 0) { + ajax( + "/users", + "GET", { - type: type, - vname: vname, - from: from, - to: c.target ? names[c.target] : "" - }, - c + data: { ids: Object.keys(names).join(",") }, + success: (response2) => { + response2.users.forEach(u => { + names[u.id] = u.name; + }); + addChallenges(); + } + } ); - }) - ); - }; - if (Object.keys(names).length > 0) { - ajax( - "/users", - "GET", - { ids: Object.keys(names).join(",") }, - response2 => { - response2.users.forEach(u => { - names[u.id] = u.name; - }); - addChallenges(); - } - ); - } else addChallenges(); - }); + } else addChallenges(); + } + } + ); const connectAndPoll = () => { this.send("connect"); this.send("pollclientsandgamers"); @@ -259,6 +327,7 @@ export default { "&tmpId=" + getRandString() + "&page=" + + // Hall: path is "/" (could be hard-coded as well) encodeURIComponent(this.$route.path); this.conn = new WebSocket(this.connexionString); this.conn.onopen = connectAndPoll; @@ -266,6 +335,7 @@ export default { this.conn.onclose = this.socketCloseListener; }, mounted: function() { + document.addEventListener('visibilitychange', this.visibilityChange); ["peopleWrap", "infoDiv", "newgameDiv"].forEach(eltName => { let elt = document.getElementById(eltName); elt.addEventListener("click", processModalClick); @@ -275,18 +345,47 @@ export default { this.newchallenge.cadence = b.innerHTML; }); }); - const showCtype = localStorage.getItem("type-challenges") || "live"; - const showGtype = localStorage.getItem("type-games") || "live"; + const dispCorr = this.$route.query["disp"]; + const showCtype = + dispCorr || localStorage.getItem("type-challenges") || "live"; + const showGtype = + dispCorr || localStorage.getItem("type-games") || "live"; this.setDisplay("c", showCtype); this.setDisplay("g", showGtype); }, beforeDestroy: function() { + document.removeEventListener('visibilitychange', this.visibilityChange); this.send("disconnect"); }, methods: { - // Helpers: + visibilityChange: function() { + // TODO: Use document.hidden? https://webplatform.news/issues/2019-03-27 + this.send( + document.visibilityState == "visible" + ? "getfocus" + : "losefocus" + ); + }, + partialResetNewchallenge: function() { + // Reset potential target and custom FEN: + this.newchallenge.to = ""; + this.newchallenge.fen = ""; + this.newchallenge.diag = ""; + }, + showNewchallengeForm: function() { + this.partialResetNewchallenge(); + window.doClick("modalNewgame"); + }, + tchallButtonsMargin: function() { + if (!!this.curChallToAccept.fen) return { "margin-top": "10px" }; + return {}; + }, + cadenceFocusIfOpened: function() { + if (event.target.checked) + document.getElementById("cadence").focus(); + }, send: function(code, obj) { - if (this.conn) { + if (!!this.conn) { this.conn.send(JSON.stringify(Object.assign({ code: code }, obj))); } }, @@ -316,36 +415,42 @@ export default { : document.getElementById("btn" + letter.toUpperCase() + type); elt.classList.add("active"); elt.classList.remove("somethingnew"); //in case of - if (elt.previousElementSibling) + if (!!elt.previousElementSibling) elt.previousElementSibling.classList.remove("active"); else elt.nextElementSibling.classList.remove("active"); }, isGamer: function(sid) { - return this.people[sid].pages.some(p => p.indexOf("/game/") >= 0); + return this.people[sid].pages + .some(p => p.focus && p.path.indexOf("/game/") >= 0); }, - getActionLabel: function(sid) { - return this.people[sid].pages.some(p => p == "/") - ? "Challenge" - : "Observe"; + isFocusedOnHall: function(sid) { + return ( + // This is meant to challenge people, thus the next 2 conditions: + this.st.user.id > 0 && + sid != this.st.user.sid && + this.people[sid].pages.some(p => p.path == "/" && p.focus) + ); }, - challOrWatch: function(sid) { - if (this.people[sid].pages.some(p => p == "/")) { - // Available, in Hall - this.newchallenge.to = this.people[sid].name; - document.getElementById("modalPeople").checked = false; - window.doClick("modalNewgame"); - } else { - // In some game, maybe playing maybe not: show a random one - let gids = []; - this.people[sid].pages.forEach(p => { - const matchGid = p.match(/[a-zA-Z0-9]+$/); - if (matchGid) gids.push(matchGid[0]); - }); - 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 - } + challenge: function(sid) { + this.partialResetNewchallenge(); + // Available, in Hall + this.newchallenge.to = this.people[sid].name; + document.getElementById("modalPeople").checked = false; + window.doClick("modalNewgame"); + }, + watchGame: function(sid) { + // In some game, maybe playing maybe not: show a random one + let gids = []; + this.people[sid].pages.forEach(p => { + if (p.focus) { + const matchGid = p.path.match(/[a-zA-Z0-9]+$/); + if (!!matchGid) gids.push(matchGid[0]); + } + }); + 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 }, showGame: function(g) { // NOTE: we are an observer, since only games I don't play are shown here @@ -355,13 +460,22 @@ export default { url += "?rid=" + g.rids[Math.floor(Math.random() * g.rids.length)]; this.$router.push(url); }, - resetChatColor: function() { + resetSocialColor: function() { // TODO: this is called twice, once on opening an once on closing document.getElementById("peopleBtn").classList.remove("somethingnew"); }, processChat: function(chat) { this.send("newchat", { data: chat }); }, + getOppsid: function(c) { + let oppsid = c.from.sid; //may not be defined if corr + offline opp + if (!oppsid) { + oppsid = Object.keys(this.people).find( + sid => this.people[sid].id == c.from.id + ); + } + return oppsid; + }, // Messaging center: socketMessageListener: function(msg) { if (!this.conn) return; @@ -374,17 +488,19 @@ export default { data.sockIds.forEach(s => { const page = s.page || "/"; if (s.sid != this.st.user.sid && !identityAsked[s.sid]) { - identityAsked[s.sid] = true; this.send("askidentity", { target: s.sid, page: page }); + identityAsked[s.sid] = true; + } + if (!this.people[s.sid]) { + // Do not set name or id: identity unknown yet + this.people[s.sid] = { pages: [{path: page, focus: true}] }; } - if (!this.people[s.sid]) - this.$set(this.people, s.sid, { id: 0, name: "", pages: [page] }); - else if (this.people[s.sid].pages.indexOf(page) < 0) - this.people[s.sid].pages.push(page); + else if (!(this.people[s.sid].pages.find(p => p.path == page))) + this.people[s.sid].pages.push({ path: page, focus: true }); if (!s.page) - //peer is in Hall + // Peer is in Hall this.send("askchallenge", { target: s.sid }); - //peer is in Game + // Peer is in Game else this.send("askgame", { target: s.sid, page: page }); }); break; @@ -392,24 +508,19 @@ export default { case "connect": case "gconnect": { const page = data.page || "/"; - // NOTE: player could have been polled earlier, but might have logged in then - // So it's a good idea to ask identity if he was anonymous. - // But only ask game / challenge if currently disconnected. + // Only ask game / challenge if first connexion: if (!this.people[data.from]) { - this.$set(this.people, data.from, { - name: "", - id: 0, - pages: [page] - }); + this.people[data.from] = { pages: [{ path: page, focus: true }] }; if (data.code == "connect") this.send("askchallenge", { target: data.from }); else this.send("askgame", { target: data.from, page: page }); } else { - // append page if not already in list - if (this.people[data.from].pages.indexOf(page) < 0) - this.people[data.from].pages.push(page); + // 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 }); } - if (this.people[data.from].id == 0) { + if (!this.people[data.from].name && this.people[data.from].id !== 0) { + // Identity not known yet this.newConnect[data.from] = true; //for self multi-connects tests this.send("askidentity", { target: data.from, page: page }); } @@ -424,7 +535,10 @@ export default { // Disconnect means no more tmpIds: if (data.code == "disconnect") { // Remove the live challenge sent by this player: - ArrayFun.remove(this.challenges, c => c.from.sid == data.from); + ArrayFun.remove( + this.challenges, + c => c.type == "live" && c.from.sid == data.from + ); } else { // Remove the matching live game if now unreachable const gid = data.page.match(/[a-zA-Z0-9]+$/)[0]; @@ -441,19 +555,30 @@ export default { } } const page = data.page || "/"; - ArrayFun.remove(this.people[data.from].pages, p => p == 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": + // If user reload a page, focus may arrive earlier than connect + if (!!this.people[data.from]) { + this.people[data.from].pages + .find(p => p.path == data.page).focus = true; + this.$forceUpdate(); //TODO: shouldn't be required + } + break; + case "losefocus": + if (!!this.people[data.from]) { + this.people[data.from].pages + .find(p => p.path == data.page).focus = false; + this.$forceUpdate(); //TODO: shouldn't be required + } + break; case "killed": // I logged in elsewhere: - alert(this.st.tr["New connexion detected: tab now offline"]); - // TODO: this fails. See https://github.com/websockets/ws/issues/489 - //this.conn.removeEventListener("message", this.socketMessageListener); - //this.conn.removeEventListener("close", this.socketCloseListener); - //this.conn.close(); this.conn = null; + alert(this.st.tr["New connexion detected: tab now offline"]); break; case "askidentity": { // Request for identification (TODO: anonymous shouldn't need to reply) @@ -468,29 +593,26 @@ export default { } case "identity": { const user = data.data; - if (user.name) { - // If I multi-connect, kill current connexion if no mark (I'm older) + let player = this.people[user.sid]; + // player.pages is already set + player.id = user.id; + player.name = user.name; + // TODO: this.$set(people, ...) fails. So forceUpdate. + // But this shouldn't be like that! + this.$forceUpdate(); + // If I multi-connect, kill current connexion if no mark (I'm older) + if (this.newConnect[user.sid]) { if ( - this.newConnect[user.sid] && user.id > 0 && user.id == this.st.user.id && - user.sid != this.st.user.sid + user.sid != this.st.user.sid && + !this.killed[this.st.user.sid] ) { - if (!this.killed[this.st.user.sid]) { this.send("killme", { sid: this.st.user.sid }); this.killed[this.st.user.sid] = true; - } - } - if (user.sid != this.st.user.sid) { - //I already know my identity... - this.$set(this.people, user.sid, { - id: user.id, - name: user.name, - pages: this.people[user.sid].pages - }); } + delete this.newConnect[user.sid]; } - delete this.newConnect[user.sid]; break; } case "askchallenge": { @@ -507,6 +629,7 @@ export default { id: c.id, from: this.st.user.sid, to: c.to, + randomness: c.randomness, fen: c.fen, vid: c.vid, cadence: c.cadence, @@ -527,6 +650,7 @@ export default { ) { let newChall = Object.assign({}, chall); newChall.type = this.classifyObject(chall); + newChall.randomness = chall.randomness; newChall.added = Date.now(); let fromValues = Object.assign({}, this.people[chall.from]); delete fromValues["pages"]; //irrelevant in this context @@ -558,40 +682,44 @@ export default { } case "game": //individual request case "newgame": { - // NOTE: it may be live or correspondance const game = data.data; - 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) - //if 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"); + // Ignore games where I play (will go in MyGames page) + if (game.players.every(p => + p.sid != this.st.user.sid || p.uid != 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) + //if 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); } - } else { - // Append rid (if not already in list) - if (!locGame.rids.includes(game.rid)) locGame.rids.push(game.rid); } break; } case "result": { let g = this.games.find(g => g.id == data.gid); - if (g) g.score = data.score; + if (!!g) g.score = data.score; break; } case "startgame": { - // New game just started: data contain all information + // New game just started, I'm involved const gameInfo = data.data; if (this.classifyObject(gameInfo) == "live") this.startNewGame(gameInfo); @@ -604,8 +732,7 @@ export default { "#/game/" + gameInfo.id + ""; - let modalBox = document.getElementById("modalInfo"); - modalBox.checked = true; + document.getElementById("modalInfo").checked = true; } break; } @@ -623,31 +750,66 @@ export default { this.conn.addEventListener("close", this.socketCloseListener); }, // Challenge lifecycle: + loadNewchallVariant: async function(cb) { + const vname = this.getVname(this.newchallenge.vid); + const vModule = await import("@/variants/" + vname + ".js"); + this.newchallenge.V = vModule.VariantRules; + this.newchallenge.vname = vname; + if (!!cb) + cb(); + }, + trySetNewchallDiag: function() { + if (!this.newchallenge.fen) { + this.newchallenge.diag = ""; + return; + } + // If vid > 0 then the variant is loaded (function above): + window.V = this.newchallenge.V; + if ( + this.newchallenge.vid > 0 && + !!this.newchallenge.fen && + V.IsGoodFen(this.newchallenge.fen) + ) { + const parsedFen = V.ParseFen(this.newchallenge.fen); + this.newchallenge.diag = getDiagram({ + position: parsedFen.position, + orientation: parsedFen.turn + }); + } + }, newChallenge: async function() { + if (!!(this.newchallenge.cadence.match(/^[0-9]+$/))) + this.newchallenge.cadence += "+0"; //assume minutes, no increment + const ctype = this.classifyObject(this.newchallenge); + // TODO: cadence still unchecked so ctype could be wrong... let error = ""; - if (this.newchallenge.vid == "") + if (!this.newchallenge.vid) error = this.st.tr["Please select a variant"]; - else if (!!this.newchallenge.to && this.newchallenge.to == this.st.user.name) - error = this.st.tr["Self-challenge is forbidden"]; + else if (ctype == "corr" && this.st.user.id <= 0) + error = this.st.tr["Please log in to play correspondance games"]; + else if (!!this.newchallenge.to) { + if (this.newchallenge.to == this.st.user.name) + error = this.st.tr["Self-challenge is forbidden"]; + else if ( + ctype == "live" && + Object.values(this.people).every(p => p.name != this.newchallenge.to) + ) + error = this.newchallenge.to + " " + this.st.tr["is not online"]; + } if (error) { alert(error); return; } - const vname = this.getVname(this.newchallenge.vid); - const vModule = await import("@/variants/" + vname + ".js"); - window.V = vModule.VariantRules; - if (this.newchallenge.cadence.match(/^[0-9]+$/)) - this.newchallenge.cadence += "+0"; //assume minutes, no increment - const ctype = this.classifyObject(this.newchallenge); + window.V = this.newchallenge.V; error = checkChallenge(this.newchallenge); - if (!error && ctype == "corr" && this.st.user.id <= 0) - error = this.st.tr["Please log in to play correspondance games"]; if (error) { alert(error); return; } // NOTE: "from" information is not required here let chall = Object.assign({}, this.newchallenge); + delete chall["V"]; + delete chall["diag"]; const finishAddChallenge = cid => { chall.id = cid || "c" + getRandString(); // Remove old challenge if any (only one at a time of a given type): @@ -660,7 +822,11 @@ export default { // Delete current challenge (will be replaced now) this.send("deletechallenge", { data: this.challenges[cIdx].id }); if (ctype == "corr") { - ajax("/challenges", "DELETE", { id: this.challenges[cIdx].id }); + ajax( + "/challenges", + "DELETE", + { data: { id: this.challenges[cIdx].id } } + ); } this.challenges.splice(cIdx, 1); } @@ -669,7 +835,7 @@ export default { }); // Add new challenge: chall.from = { - //decompose to avoid revealing email + // Decompose to avoid revealing email sid: this.st.user.sid, id: this.st.user.id, name: this.st.user.name @@ -677,24 +843,69 @@ export default { chall.added = Date.now(); // NOTE: vname and type are redundant (can be deduced from cadence + vid) chall.type = ctype; - chall.vname = vname; + chall.vname = this.newchallenge.vname; this.challenges.push(chall); // Remember cadence + vid for quicker further challenges: localStorage.setItem("cadence", chall.cadence); localStorage.setItem("vid", chall.vid); + localStorage.setItem("randomness", chall.randomness); document.getElementById("modalNewgame").checked = false; + // Show the challenge if not on current display + if ( + (ctype == "live" && this.cdisplay == "corr") || + (ctype == "corr" && this.cdisplay == "live") + ) { + this.setDisplay('c', ctype); + } }; if (ctype == "live") { // Live challenges have a random ID finishAddChallenge(null); } else { // Correspondance game: send challenge to server - ajax("/challenges", "POST", { chall: chall }, response => { - finishAddChallenge(response.cid); - }); + ajax( + "/challenges", + "POST", + { + data: { chall: chall }, + success: (response) => { + finishAddChallenge(response.cid); + } + } + ); + } + }, + // Callback function after a diagram was showed to accept + // or refuse targetted challenge: + decisionChallenge: function(accepted) { + this.curChallToAccept.accepted = accepted; + this.finishProcessingChallenge(this.curChallToAccept); + document.getElementById("modalAccept").checked = false; + }, + finishProcessingChallenge: function(c) { + if (c.accepted) { + c.seat = { + // Again, avoid c.seat = st.user to not reveal email + sid: this.st.user.sid, + id: this.st.user.id, + name: this.st.user.name + }; + this.launchGame(c); + } else { + const oppsid = this.getOppsid(c); + if (!!oppsid) + this.send("refusechallenge", { data: c.id, target: oppsid }); + if (c.type == "corr") { + ajax( + "/challenges", + "DELETE", + { data: { id: c.id } } + ); + } } + this.send("deletechallenge", { data: c.id }); }, - clickChallenge: function(c) { + clickChallenge: async function(c) { const myChallenge = c.from.sid == this.st.user.sid || //live (this.st.user.id > 0 && c.from.id == this.st.user.id); //corr @@ -704,27 +915,31 @@ export default { return; } c.accepted = true; - if (c.to) { - //c.to == this.st.user.name (connected) - // TODO: if special FEN, show diagram after loading variant - c.accepted = confirm("Accept challenge?"); - } - if (c.accepted) { - c.seat = { - //again, avoid c.seat = st.user to not reveal email - sid: this.st.user.sid, - id: this.st.user.id, - name: this.st.user.name - }; - this.launchGame(c); - } else { - this.send("refusechallenge", { data: c.id, target: c.from.sid }); + const vModule = await import("@/variants/" + c.vname + ".js"); + window.V = vModule.VariantRules; + if (!!c.to) { + // c.to == this.st.user.name (connected) + if (!!c.fen) { + const parsedFen = V.ParseFen(c.fen); + c.mycolor = V.GetOppCol(parsedFen.turn); + this.tchallDiag = getDiagram({ + position: parsedFen.position, + orientation: c.mycolor + }); + } + this.curChallToAccept = c; + document.getElementById("modalAccept").checked = true; } - this.send("deletechallenge", { data: c.id }); - } //my challenge + else this.finishProcessingChallenge(c); + } else { + // My challenge if (c.type == "corr") { - ajax("/challenges", "DELETE", { id: c.id }); + ajax( + "/challenges", + "DELETE", + { data: { id: c.id } } + ); } this.send("deletechallenge", { data: c.id }); } @@ -732,64 +947,89 @@ export default { ArrayFun.remove(this.challenges, ch => ch.id == c.id); }, // 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; + launchGame: function(c) { + let players = + !!c.mycolor + ? (c.mycolor == "w" ? [c.seat, c.from] : [c.from, c.seat]) + : shuffle([c.from, c.seat]); + // Convention for players IDs in stored games is 'uid' + players.forEach(p => { + let pWithUid = p; + pWithUid["uid"] = p.id; + delete pWithUid["id"]; + }); // These game informations will be shared let gameInfo = { id: getRandString(), - fen: c.fen || V.GenRandInitFen(), - players: shuffle([c.from, c.seat]), //white then black + fen: c.fen || V.GenRandInitFen(c.randomness), + // White player index 0, black player index 1: + players: c.mycolor + ? (c.mycolor == "w" ? [c.seat, c.from] : [c.from, c.seat]) + : shuffle([c.from, c.seat]), vid: c.vid, cadence: c.cadence }; - let oppsid = c.from.sid; //may not be defined if corr + offline opp - if (!oppsid) { - oppsid = Object.keys(this.people).find( - sid => this.people[sid].id == c.from.id - ); - } const notifyNewgame = () => { - if (oppsid) - //opponent is online + const oppsid = this.getOppsid(c); + if (!!oppsid) + // Opponent is online this.send("startgame", { data: gameInfo, target: oppsid }); - // Send game info (only if live) to everyone except me in this tab - this.send("newgame", { data: gameInfo }); + // Send game info (only if live) to everyone except me and opponent + // TODO: this double message send could be avoided. + this.send("newgame", { data: gameInfo, oppsid: oppsid }); }; if (c.type == "live") { notifyNewgame(); this.startNewGame(gameInfo); - } //corr: game only on server - else { + } else { + // corr: game only on server ajax( "/games", "POST", - { gameInfo: gameInfo, cid: c.id }, //cid useful to delete challenge - response => { - gameInfo.id = response.gameId; - notifyNewgame(); - this.$router.push("/game/" + response.gameId); + { + // cid is useful to delete the challenge: + data: { gameInfo: gameInfo, cid: c.id }, + success: (response) => { + gameInfo.id = response.gameId; + notifyNewgame(); + this.$router.push("/game/" + response.gameId); + } } ); } }, // 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, - vname: this.getVname(gameInfo.vid), - created: Date.now(), - // Game state (including FEN): will be updated - moves: [], - clocks: [-1, -1], //-1 = unstarted - initime: [0, 0], //initialized later - score: "*" - }); - GameStorage.add(game); - if (this.st.settings.sound >= 1) - new Audio("/sounds/newgame.mp3").play().catch(() => {}); - this.$router.push("/game/" + gameInfo.id); + const game = Object.assign( + {}, + gameInfo, + { + // (other) Game infos: constant + fenStart: gameInfo.fen, + vname: this.getVname(gameInfo.vid), + created: Date.now(), + // Game state (including FEN): will be updated + moves: [], + clocks: [-1, -1], //-1 = unstarted + initime: [0, 0], //initialized later + score: "*" + } + ); + setTimeout( + () => { + GameStorage.add(game, (err) => { + // If an error occurred, game is not added: a tab already + // added the game and (if focused) is redirected toward it. + // If no error and the tab is hidden: do not show anything. + if (!err && !document.hidden) { + if (this.st.settings.sound) + new Audio("/sounds/newgame.flac").play().catch(() => {}); + this.$router.push("/game/" + gameInfo.id); + } + }); + }, + document.hidden ? 500 + 1000 * Math.random() : 0 + ); } } }; @@ -803,7 +1043,7 @@ export default { padding: 15px 0 max-width: 430px -#newgameDiv > .card +#newgameDiv > .card, #acceptDiv > .card max-width: 767px max-height: 100% @@ -856,6 +1096,29 @@ button.player-action .tabbtn background-color: #f9faee +button.acceptBtn + background-color: lightgreen +button.refuseBtn + background-color: red + +#buttonsTchall + // margin-top set dynamically (depends if diagram showed or not) + & > button > span + width: 100% + text-align: center + +.variantName + font-weight: bold + +.diagram + margin: 0 auto + max-width: 400px + // width: 100% required for Firefox + width: 100% + +#inputFen + width: 100% + #div2, #div3 margin-top: 15px @media screen and (max-width: 767px)