+ );
+ },
+ beforeDestroy: function() {
+ this.cleanBeforeDestroy();
+ },
+ methods: {
+ 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);
+ this.send("disconnect");
+ this.conn = null;
+ },
+ getRandomnessClass: function(pc) {
+ return {
+ ["random-" + pc.randomness]: true
+ };
+ },
+ anonymousCount: function() {
+ let count = 0;
+ Object.values(this.people).forEach(p => {
+ // Do not cound people who did not send their identity yet:
+ count += (!p.name && p.id === 0) ? 1 : 0;
+ });
+ return count;
+ },
+ visibilityChange: function() {
+ // TODO: Use document.hidden? https://webplatform.news/issues/2019-03-27
+ this.focus = (document.visibilityState == "visible");
+ this.send(this.focus ? "getfocus" : "losefocus");
+ },
+ onFocus: function() {
+ this.focus = true;
+ this.send("getfocus");
+ },
+ onBlur: function() {
+ this.focus = false;
+ this.send("losefocus");
+ },
+ partialResetNewchallenge: function() {
+ // Reset potential target and custom FEN:
+ this.newchallenge.to = "";
+ this.newchallenge.fen = "";
+ this.newchallenge.diag = "";
+ this.newchallenge.memorize = false;
+ },
+ showNewchallengeForm: function() {
+ this.partialResetNewchallenge();
+ window.doClick("modalNewgame");
+ },
+ addPresetChall: function(chall) {
+ // Add only if not already existing:
+ if (this.presetChalls.some(c =>
+ c.vid == chall.vid &&
+ c.cadence == chall.cadence &&
+ c.randomness == chall.randomness
+ )) {
+ return;
+ }
+ const L = this.presetChalls.length;
+ this.presetChalls.push({
+ index: L,
+ vid: chall.vid,
+ vname: chall.vname, //redundant, but easier
+ cadence: chall.cadence,
+ randomness: chall.randomness
+ });
+ localStorage.setItem("presetChalls", JSON.stringify(this.presetChalls));
+ },
+ removePresetChall: function(e, pchall) {
+ e.stopPropagation();
+ const pchallIdx =
+ this.presetChalls.findIndex(pc => pc.index == pchall.index);
+ this.presetChalls.splice(pchallIdx, 1);
+ localStorage.setItem("presetChalls", JSON.stringify(this.presetChalls));
+ },
+ tchallButtonsMargin: function() {
+ if (!!this.curChallToAccept.fen) return { "margin-top": "10px" };
+ return {};
+ },
+ changeChallTarget: function() {
+ if (!this.newchallenge.to) {
+ // Reset potential FEN + diagram
+ this.newchallenge.fen = "";
+ this.newchallenge.diag = "";
+ }
+ },
+ cadenceFocusIfOpened: function() {
+ if (event.target.checked)
+ document.getElementById("cadence").focus();
+ },
+ send: function(code, obj) {
+ if (!!this.conn && this.conn.readyState == 1) {
+ this.conn.send(JSON.stringify(Object.assign({ code: code }, obj)));
+ }
+ },
+ getVname: function(vid) {
+ const variant = this.st.variants.find(v => v.id == vid);
+ // this.st.variants might be uninitialized (variant == null)
+ return variant ? variant.name : "";
+ },
+ filterChallenges: function(type) {
+ return this.challenges.filter(c => c.type == type);
+ },
+ filterGames: function(type) {
+ return this.games.filter(g => g.type == type);
+ },
+ // o: challenge or game
+ classifyObject: function(o) {
+ // Consider imports as live games (TODO)
+ if (!!o.id && !!o.id.toString().match(/^i/)) return "live";
+ return o.cadence.indexOf("d") === -1 ? "live" : "corr";
+ },
+ setDisplay: function(letter, type, e) {
+ this[letter + "display"] = type;
+ localStorage.setItem(
+ "type-" + (letter == "c" ? "challenges" : "games"),
+ type
+ );
+ let elt = e
+ ? e.target
+ : document.getElementById("btn" + letter.toUpperCase() + type);
+ elt.classList.add("active");
+ elt.classList.remove("somethingnew"); //in case of
+ if (!!elt.previousElementSibling)
+ elt.previousElementSibling.classList.remove("active");
+ else elt.nextElementSibling.classList.remove("active");
+ },
+ isGamer: function(sid) {
+ return Object.values(this.people[sid].tmpIds)
+ .some(v => v.focus && v.page.indexOf("/game/") >= 0);
+ },
+ 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 &&
+ Object.values(this.people[sid].tmpIds)
+ .some(v => v.focus && v.page == "/")
+ );
+ },
+ challenge: function(sid) {
+ this.partialResetNewchallenge();
+ // Available, in Hall
+ this.newchallenge.to = this.people[sid].name;
+ // TODO: also store target sid to not re-search for it
+ document.getElementById("modalPeople").checked = false;
+ window.doClick("modalNewgame");
+ },
+ watchGame: function(sid) {
+ // In some game, maybe playing maybe not: show a random one
+ let gids = [];
+ Object.values(this.people[sid].tmpIds).forEach(v => {
+ if (v.focus) {
+ const matchGid = v.page.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
+ // ==> Moves sent by connected remote player(s) if live game
+ this.$router.push("/game/" + g.id);
+ },
+ 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 });
+ },
+ 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;
+ const data = JSON.parse(msg.data);
+ switch (data.code) {
+ case "pollclientsandgamers": {
+ // TODO: shuffling and random filtering on server,
+ // if the room is really crowded.
+ Object.keys(data.sockIds).forEach(sid => {
+ if (sid != this.st.user.sid) {
+ // Pick a target tmpId (+page) at random:
+ const pt = Object.values(data.sockIds[sid]);
+ const randPage = pt[randInt(pt.length)].page;
+ this.send(
+ "askidentity",
+ {
+ target: sid,
+ page: randPage
+ }
+ );
+ }
+ if (!this.people[sid])
+ // Do not set name or id: identity unknown yet
+ this.people[sid] = { tmpIds: data.sockIds[sid] };
+ else
+ Object.assign(this.people[sid].tmpIds, data.sockIds[sid]);
+ if (Object.values(data.sockIds[sid]).some(v => v.page == "/"))
+ // Peer is in Hall
+ this.send("askchallenges", { target: sid });
+ Object.values(data.sockIds[sid]).forEach(v => {
+ if (
+ v.page.indexOf("/game/") >= 0 &&
+ !v.page.match(/\/[0-9]+$/)
+ ) {
+ // Peer is in Game: ask only if live game
+ this.send("askgame", { target: sid, page: v.page });
+ }
+ });
+ });
+ break;
+ }
+ case "connect":
+ case "gconnect": {
+ const page = data.page || "/";
+ if (data.code == "connect") {
+ // Ask challenges only on first connexion:
+ if (!this.people[data.from[0]])
+ this.send("askchallenges", { target: data.from[0] });
+ }
+ // Ask game only if live:
+ else if (!page.match(/\/[0-9]+$/))
+ this.send("askgame", { target: data.from[0], page: page });
+ if (!this.people[data.from[0]]) {
+ this.$set(
+ this.people,
+ data.from[0],
+ {
+ tmpIds: {
+ [data.from[1]]: { page: page, focus: true }
+ }
+ }
+ );
+ // For self multi-connects tests:
+ this.newConnect[data.from[0]] = true;
+ this.send("askidentity", { target: data.from[0], page: page });
+ } else {
+ this.people[data.from[0]].tmpIds[data.from[1]] =
+ { page: page, focus: true };
+ this.$forceUpdate(); //TODO: shouldn't be required
+ }
+ break;
+ }
+ case "disconnect":
+ case "gdisconnect": {
+ // If the user reloads the page twice very quickly
+ // (experienced with Firefox), 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[0]]) return;
+ delete this.people[data.from[0]].tmpIds[data.from[1]];
+ if (Object.keys(this.people[data.from[0]].tmpIds).length == 0)
+ 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"
+ );
+ } else {
+ // Remove the matching live game if now unreachable
+ const gid = data.page.match(/[a-zA-Z0-9]+$/)[0];
+ // Corr games are always reachable:
+ if (!gid.match(/^[0-9]+$/)) {
+ // Live games are reachable if someone is on the game page
+ if (Object.values(this.people).every(p =>
+ Object.values(p.tmpIds).every(v => v.page != data.page))
+ ) {
+ ArrayFun.remove(this.games, g => g.id == gid);
+ }
+ }
+ }
+ break;
+ }
+ case "getfocus": {
+ let player = this.people[data.from[0]];
+ // If user reload a page, focus may arrive earlier than connect
+ if (!!player) {
+ player.tmpIds[data.from[1]].focus = true;
+ this.$forceUpdate(); //TODO: shouldn't be required
+ }
+ break;
+ }
+ case "losefocus": {
+ let player = this.people[data.from[0]];
+ if (!!player) {
+ player.tmpIds[data.from[1]].focus = false;
+ this.$forceUpdate(); //TODO: shouldn't be required
+ }
+ break;
+ }
+ case "askidentity": {
+ // Request for identification
+ const me = {
+ // Decompose to avoid revealing email
+ name: this.st.user.name,
+ sid: this.st.user.sid,
+ id: this.st.user.id
+ };
+ this.send("identity", { data: me, target: data.from });
+ break;
+ }
+ case "identity": {
+ const user = data.data;
+ let player = this.people[user.sid];
+ // player.tmpIds 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]) {
+ delete this.newConnect[user.sid];
+ if (
+ user.id > 0 &&
+ user.id == this.st.user.id &&
+ user.sid != this.st.user.sid
+ ) {
+ // I logged in elsewhere:
+ this.cleanBeforeDestroy();
+ alert(this.st.tr["New connexion detected: tab now offline"]);
+ }
+ }
+ break;
+ }
+ case "askchallenges": {
+ // Send my current live challenges (if any)
+ const myChallenges = this.challenges
+ .filter(c =>
+ c.from.sid == this.st.user.sid && c.type == "live"
+ )
+ .map(c => {
+ // NOTE: in principle, should only send targeted challenge to the
+ // target. But we may not know yet the identity of the target
+ // (just name), so can't decide if data.from is the target.
+ return {
+ id: c.id,
+ from: this.st.user.sid,
+ to: c.to,
+ randomness: c.randomness,
+ fen: c.fen,
+ vid: c.vid,
+ cadence: c.cadence,
+ added: c.added
+ };
+ });
+ if (myChallenges.length > 0)
+ this.send("challenges", { data: myChallenges, target: data.from });
+ break;
+ }
+ case "challenges": //after "askchallenges"
+ data.data.forEach(this.addChallenge);
+ break;
+ case "newchallenge":
+ this.addChallenge(data.data);
+ break;
+ case "refusechallenge": {
+ const cid = data.data;
+ ArrayFun.remove(this.challenges, c => c.id == cid);
+ alert(this.st.tr["Challenge declined"]);
+ break;
+ }
+ case "deletechallenge_s": {
+ // NOTE: the challenge(s) may be already removed
+ const cref = data.data;
+ if (!!cref.cid)
+ ArrayFun.remove(this.challenges, c => c.id == cref.cid);
+ else if (!!cref.sids) {
+ cref.sids.forEach(s => {
+ ArrayFun.remove(
+ this.challenges,
+ c => c.type == "live" && c.from.sid == s,
+ "all"
+ );
+ });
+ }
+ break;
+ }
+ case "game": // Individual request
+ case "newgame": {
+ const game = data.data;
+ // 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;
+ }
+ case "result": {
+ let g = this.games.find(g => g.id == data.gid);
+ if (!!g) g.score = data.score;
+ break;
+ }
+ case "startgame": {
+ // New game just started, I'm involved
+ const gameInfo = data.data;
+ if (this.classifyObject(gameInfo) == "live")
+ this.startNewGame(gameInfo);
+ else {
+ this.infoMessage =
+ this.st.tr["New correspondance game:"] + " " +
+ "<a href='#/game/" + gameInfo.id + "'>" +
+ "#/game/" + gameInfo.id + "</a>";
+ document.getElementById("modalInfo").checked = true;
+ }
+ break;
+ }
+ case "newchat":
+ this.$refs["chatcomp"].newChat(data.data);
+ if (!document.getElementById("modalPeople").checked)
+ document.getElementById("peopleBtn").classList.add("somethingnew");
+ break;
+ }
+ },
+ loadMoreCorr: function() {
+ ajax(
+ "/observedgames",
+ "GET",
+ {
+ data: {
+ uid: this.st.user.id,
+ cursor: this.cursor
+ },
+ 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);
+ return Object.assign(
+ {},
+ g,
+ {
+ type: "corr",
+ vname: vname
+ }
+ );
+ });
+ this.games = this.games.concat(moreGames);
+ } else this.hasMore = false;
+ }
+ }
+ );
+ },
+ // Challenge lifecycle:
+ addChallenge: function(chall) {
+ // NOTE about next condition: see "askchallenges" case.
+ if (
+ !chall.to ||
+ (this.people[chall.from].id > 0 &&
+ (chall.from == this.st.user.sid || chall.to == this.st.user.name))
+ ) {
+ 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
+ newChall.from = Object.assign({ sid: chall.from }, fromValues);
+ newChall.vname = this.getVname(newChall.vid);
+ this.challenges.push(newChall);
+ if (
+ (newChall.type == "live" && this.cdisplay == "corr") ||
+ (newChall.type == "corr" && this.cdisplay == "live")
+ ) {
+ document
+ .getElementById("btnC" + newChall.type)
+ .classList.add("somethingnew");
+ }
+ if (!!chall.to) {
+ notify(
+ "New challenge",
+ // fromValues.name should exist since the player is online, but
+ // let's consider there is some chance that the challenge arrives
+ // right after we connected and before receiving the poll result:
+ { body: "from " + (fromValues.name || "unknown yet...") }
+ );
+ }
+ }
+ },
+ loadNewchallVariant: async function(cb) {
+ const vname = this.getVname(this.newchallenge.vid);
+ await import("@/variants/" + vname + ".js")
+ .then((vModule) => {
+ window.V = vModule[vname + "Rules"];
+ this.newchallenge.V = window.V;
+ this.newchallenge.vname = vname;
+ if (!!cb) cb();