X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHall.vue;h=4f27f794a14765a49a0899b999f3db0aa2037ce0;hb=16d06164d56332bd00fb22acc5b2b2997b942d73;hp=c9a15eaa4430a38c552cd4021d46aefa6e7a0dc6;hpb=3d9745ae10ba867e4c1ec6e848db29c5e293420b;p=vchess.git diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index c9a15eaa..4f27f794 100644 --- a/client/src/views/Hall.vue +++ b/client/src/views/Hall.vue @@ -52,8 +52,8 @@ main ) | {{ v.display }} // Variant-specific options (often at least randomness) - fieldset(v-if="!!newchallenge.V") - div(v-for="select of newchallenge.V.Options.select") + fieldset(v-if="!!newchallenge.V && newchallenge.V.Options") + div(v-for="select of newchallenge.V.Options.select || []") label(:for="select.variable + '_opt'") {{ st.tr[select.label] }} * select(:id="select.variable + '_opt'") option( @@ -62,7 +62,7 @@ main :selected="o.value == select.defaut" ) | {{ st.tr[o.label] }} - div(v-for="check of newchallenge.V.Options.check") + div(v-for="check of newchallenge.V.Options.check || []") label(:for="check.variable + '_opt'") {{ st.tr[check.label] }} * input( :id="check.variable + '_opt'" @@ -172,9 +172,11 @@ main th {{ st.tr["Options"] }} th tbody + // TODO: remove the check !!pc.options tr( v-for="pc in presetChalls" @click="newChallFromPreset(pc)" + v-if="!!pc.options" ) td {{ pc.vname }} td {{ pc.cadence }} @@ -280,7 +282,8 @@ export default { presetChalls: JSON.parse(localStorage.getItem("presetChalls") || "[]"), conn: null, connexionString: "", - socketCloseListener: 0, + reopenTimeout: 0, + reconnectTimeout: 0, // Related to (killing of) self multi-connects: newConnect: {} }; @@ -300,10 +303,6 @@ export default { } }, created: function() { - // TODO: remove this patch soon: - this.presetChalls.forEach(pc => { - if (!pc.options) pc.options = { randomness: pc.randomness }; - }); document.addEventListener('visibilitychange', this.visibilityChange); window.addEventListener('focus', this.onFocus); window.addEventListener('blur', this.onBlur); @@ -319,39 +318,35 @@ export default { id: my.id, name: my.name, tmpIds: { - tmpId: { page: "/", focus: true } + [tmpId]: { page: "/", focus: true } } } ); - const connectAndPoll = () => { - this.send("connect"); - this.send("pollclientsandgamers"); - if (!!this.$route.query["challenge"]) { - // Automatic challenge sending, for tournaments - this.loadNewchallVariant( - () => { - Object.assign( - this.newchallenge, - { - fen: "", - vid: - this.st.variants - .find(v => v.name == this.$route.query["variant"]) - .id, - to: this.$route.query["challenge"], - color: this.$route.query["color"] || '', - cadence: this.$route.query["cadence"], - options: {}, - memorize: false - } - ); - window.doClick("modalNewgame"); - }, - this.$route.query["variant"] - ); - } - }; - // Initialize connection + if (!!this.$route.query["challenge"]) { + // Automatic challenge sending, for tournaments + this.loadNewchallVariant( + () => { + Object.assign( + this.newchallenge, + { + fen: "", + vid: + this.st.variants + .find(v => v.name == this.$route.query["variant"]) + .id, + to: this.$route.query["challenge"], + color: this.$route.query["color"] || '', + cadence: this.$route.query["cadence"], + options: {}, + memorize: false + } + ); + window.doClick("modalNewgame"); + }, + this.$route.query["variant"] + ); + } + // Connexion string won't change if disconnect/reconnect this.connexionString = params.socketUrl + "/?sid=" + this.st.user.sid + @@ -360,19 +355,7 @@ export default { "&page=" + // Hall: path is "/" (TODO: could be hard-coded as well) encodeURIComponent(this.$route.path); - this.conn = new WebSocket(this.connexionString); - this.conn.onopen = connectAndPoll; - this.conn.addEventListener("message", this.socketMessageListener); - this.socketCloseListener = setInterval( - () => { - if (this.conn.readyState == 3) { - this.conn.removeEventListener("message", this.socketMessageListener); - this.conn = new WebSocket(this.connexionString); - this.conn.addEventListener("message", this.socketMessageListener); - } - }, - 1000 - ); + this.openConnection(); }, mounted: function() { document.getElementById("peopleWrap") @@ -468,21 +451,46 @@ export default { this.cleanBeforeDestroy(); }, methods: { + openConnection: function() { + const connectAndPoll = () => { + this.send("connect"); + this.send("pollclientsandgamers"); + }; + // Initialize connection + this.conn = new WebSocket(this.connexionString); + this.conn.onopen = () => { + this.reconnectTimeout = 250; + connectAndPoll(); + }; + this.conn.onmessage = this.socketMessageListener; + const closeConnection = () => { + this.reopenTimeout = setTimeout( + () => { + this.openConnection(); + this.reconnectTimeout = Math.min(2*this.reconnectTimeout, 30000); + }, + this.reconnectTimeout + ); + }; + this.conn.onerror = closeConnection; + this.conn.onclose = closeConnection; + }, cleanBeforeDestroy: function() { - clearInterval(this.socketCloseListener); document.removeEventListener('visibilitychange', this.visibilityChange); window.removeEventListener('focus', this.onFocus); window.removeEventListener('blur', this.onBlur); window.removeEventListener("beforeunload", this.cleanBeforeDestroy); - this.conn.removeEventListener("message", this.socketMessageListener); + clearTimeout(this.reopenTimeout); this.send("disconnect"); this.conn = null; }, getRandomnessClass: function(pc) { - if (!pc.options.randomness) return {}; - return { - ["random-" + pc.options.randomness]: true - }; + const opts = pc.options; + if (opts.randomness === undefined && opts.random === undefined) + return {}; + if (opts.randomness !== undefined) + return { ["random-" + opts.randomness]: true }; + return { ["random-" + (opts.random ? 2 : 0)]: true }; }, anonymousCount: function() { let count = 0; @@ -507,7 +515,7 @@ export default { }, invColor: function(c) { if (c == 'w') return this.st.tr["Black"]; - return this.tr.tr["White"]; + return this.st.tr["White"]; }, partialResetNewchallenge: function() { // Reset potential target and custom FEN: @@ -850,7 +858,7 @@ export default { id: c.id, from: this.st.user.sid, to: c.to, - options: c.options, + options: JSON.stringify(c.options), fen: c.fen, vid: c.vid, cadence: c.cadence, @@ -909,6 +917,8 @@ export default { if (!game.score) // New game from Hall newGame.score = "*"; + // TODO: remove patch on next line (options || "{}") + newGame.options = JSON.parse(newGame.options || "{}"); this.games.push(newGame); if ( newGame.score == '*' && @@ -929,9 +939,12 @@ export default { } case "startgame": { // New game just started, I'm involved - const gameInfo = data.data; - if (this.classifyObject(gameInfo) == "live") + let gameInfo = data.data; + if (this.classifyObject(gameInfo) == "live") { + // TODO: remove patch on next line (+ const gameInfo) + if (!gameInfo.options) gameInfo.options = "{}"; this.startNewGame(gameInfo); + } else { this.infoMessage = this.st.tr["New correspondence game:"] + " " + @@ -975,6 +988,7 @@ export default { let moreGames = res.games.map(g => { this.setVname(g); g.type = "corr"; + g.options = JSON.parse(g.options); return g; }); this.games = this.games.concat(moreGames); @@ -994,7 +1008,8 @@ export default { ) { let newChall = Object.assign({}, chall); newChall.type = this.classifyObject(chall); - newChall.options = chall.options; + // TODO: remove patch on next line (options || "{}") + newChall.options = JSON.parse(chall.options || "{}"); newChall.added = Date.now(); let fromValues = Object.assign({}, this.people[chall.from]); delete fromValues["pages"]; //irrelevant in this context @@ -1054,6 +1069,7 @@ export default { this.newchallenge.vid = pchall.vid; this.newchallenge.cadence = pchall.cadence; this.newchallenge.options = pchall.options; + this.newchallenge.fromPreset = true; this.loadNewchallVariant(this.issueNewChallenge); }, issueNewChallenge: async function() { @@ -1084,30 +1100,34 @@ export default { error = this.st.tr["Wrong color"]; } } - if (!!error) { - alert(error); - return; - } - window.V = this.newchallenge.V; - error = checkChallenge(this.newchallenge); if (error) { alert(error); return; } - // NOTE: "from" information is not required here + window.V = this.newchallenge.V; let chall = Object.assign({}, this.newchallenge); - chall.options = {}; - // Get/set options variables (if any) / TODO: v-model?! - for (const check of this.newchallenge.V.Options.check) { - const elt = document.getElementById(check.variable + "_opt"); - if (elt.checked) chall.options[check.variable] = true; + if (!this.newchallenge.fromPreset) chall.options = { options: {} }; + if (V.Options && !this.newchallenge.fromPreset) { + // Get/set options variables (if any) / TODO: v-model?! + for (const check of this.newchallenge.V.Options.check || []) { + const elt = document.getElementById(check.variable + "_opt"); + chall.options[check.variable] = elt.checked; + } + for (const select of this.newchallenge.V.Options.select || []) { + const elt = document.getElementById(select.variable + "_opt"); + const tryIntVal = parseInt(elt.value, 10); + chall.options[select.variable] = + (isNaN(tryIntVal) ? elt.value : tryIntVal); + } } - for (const select of this.newchallenge.V.Options.select) { - const elt = document.getElementById(select.variable + "_opt"); - chall.options[select.variable] = elt.value; + error = checkChallenge(chall); + if (error) { + alert(this.st.tr[error]); + return; } chall.options.abridged = V.AbbreviateOptions(chall.options); // Add only if not already issued (not counting FEN): + // NOTE: "from" information is not required here if (this.challenges.some(c => ( c.from.sid == this.st.user.sid || @@ -1126,7 +1146,7 @@ export default { alert(this.st.tr["Challenge already exists"]); return; } - if (this.newchallenge.memorize) this.addPresetChall(this.newchallenge); + if (this.newchallenge.memorize) this.addPresetChall(chall); delete chall["V"]; delete chall["diag"]; const finishAddChallenge = cid => { @@ -1169,7 +1189,10 @@ export default { this.send("newchallenge", { data: Object.assign( // Temporarily add sender infos to display challenge on Discord. - { from: this.st.user.sid, sender: this.st.user.name }, chall) + { from: this.st.user.sid, sender: this.st.user.name }, + chall, + { options: JSON.stringify(chall.options) } + ) }); // Add new challenge: chall.from = { @@ -1317,7 +1340,7 @@ export default { let gameInfo = { id: getRandString(), fen: c.fen || V.GenRandInitFen(c.options), - options: c.options, //for rematch + options: JSON.stringify(c.options), //for rematch players: players, vid: c.vid, cadence: c.cadence @@ -1367,11 +1390,7 @@ export default { { // cid is useful to delete the challenge: data: { - gameInfo: Object.assign( - {}, - gameInfo, - { options: JSON.stringify(gameInfo.options) } - ), + gameInfo: gameInfo, cid: c.id }, success: (response) => { @@ -1469,8 +1488,8 @@ div#peopleWrap > .card #chat > .card max-width: 100% - margin: 0; - border: none; + margin: 0 + border: none #players > p margin-left: 5px