presetChalls: JSON.parse(localStorage.getItem("presetChalls") || "[]"),
conn: null,
connexionString: "",
- socketCloseListener: 0,
+ reopenTimeout: 0,
+ reconnectTimeout: 0,
// Related to (killing of) self multi-connects:
newConnect: {}
};
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 +
"&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")
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;
},
},
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:
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() {
return;
}
window.V = this.newchallenge.V;
- let chall = Object.assign({}, this.newchallenge, { options: {} });
- if (V.Options) {
+ let chall = Object.assign({}, this.newchallenge);
+ 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");
#chat > .card
max-width: 100%
- margin: 0;
- border: none;
+ margin: 0
+ border: none
#players > p
margin-left: 5px