+ );
+ },
+ requestLastate: function(sid) {
+ // TODO: maybe also find opponent SID ?
+ //const oppSid =
+ // this.game.players.find(p => p.sid != this.st.user.sid).sid;
+ this.send("asklastate", { target: sid });
+ let counter = 1;
+ this.askLastate = setInterval(
+ () => {
+ // Ask at most 3 times:
+ // if no reply after that there should be a network issue.
+ if (
+ counter < 3 &&
+ !this.gotLastate &&
+ !!this.people[sid]
+ ) {
+ this.send("asklastate", { target: sid });
+ counter++;
+ }
+ else clearInterval(this.askLastate);
+ },
+ 1500
+ );
+ },
+ atCreation: function() {
+ document.addEventListener('visibilitychange', this.visibilityChange);
+ window.addEventListener('focus', this.onFocus);
+ window.addEventListener('blur', this.onBlur);
+ // 0] (Re)Set variables
+ this.gameRef = this.$route.params["id"];
+ // next = next corr games IDs to navigate faster (if applicable)
+ this.nextIds = JSON.parse(this.$route.query["next"] || "[]");
+ // Always add myself to players' list
+ const my = this.st.user;
+ const tmpId = getRandString();
+ this.$set(
+ this.people,
+ my.sid,
+ {
+ id: my.id,
+ name: my.name,
+ tmpIds: {
+ [tmpId]: { focus: true }
+ }
+ }
+ );
+ this.game = {
+ players: [{ name: "" }, { name: "" }],
+ chats: [],
+ rendered: false
+ };
+ let chatComp = this.$refs["chatcomp"];
+ if (!!chatComp) chatComp.chats = [];
+ this.virtualClocks = [[0,0], [0,0]];
+ this.vr = null;
+ this.rulesContent = "";
+ this.drawOffer = "";
+ this.lastateAsked = false;
+ this.rematchOffer = "";
+ this.lastate = undefined;
+ this.roomInitialized = false;
+ this.gotLastate = false;
+ this.gotMoveIdx = -1;
+ this.opponentGotMove = false;
+ this.askLastate = null;
+ this.retrySendmove = null;
+ this.clockUpdate = null;
+ this.newConnect = {};
+ // 1] Initialize connection
+ this.connexionString =
+ params.socketUrl +
+ "/?sid=" + this.st.user.sid +
+ "&id=" + this.st.user.id +
+ "&tmpId=" + tmpId +
+ "&page=" +
+ // Discard potential "/?next=[...]" for page indication:
+ encodeURIComponent(this.$route.path.match(/\/game\/[a-zA-Z0-9]+/)[0]);
+ this.conn = new WebSocket(this.connexionString);
+ 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);
+ const oppSid = this.getOppsid();
+ if (!!oppSid) this.requestLastate(oppSid); //in case of
+ }
+ },
+ 1000
+ );
+ // Socket init required before loading remote game:
+ const socketInit = callback => {
+ if (this.conn.readyState == 1)
+ // 1 == OPEN state
+ callback();
+ else
+ // Socket not ready yet (initial loading)
+ // NOTE: first arg is Websocket object, unused here:
+ this.conn.onopen = () => callback();
+ };
+ this.fetchGame((game) => {
+ if (!!game) {
+ if (!game.options) {
+ // Patch for retro-compatibility (TODO: remove it)
+ game.options = { randomness: game.randomness };
+ delete game["randomness"];
+ }
+ else game.options = JSON.parse(game.options);
+ this.loadVariantThenGame(game, () => socketInit(this.roomInit));
+ }
+ else
+ // Live game stored remotely: need socket to retrieve it
+ // NOTE: the callback "roomInit" will be lost, so it's not provided.
+ // --> It will be given when receiving "fullgame" socket event.
+ socketInit(() => { this.send("askfullgame"); });
+ });
+ },
+ roomInit: function() {
+ if (!this.roomInitialized) {
+ // Notify the room only now that I connected, because
+ // messages might be lost otherwise (if game loading is slow)
+ this.send("connect");
+ this.send("pollclients");
+ // We may ask fullgame several times if some moves are lost,
+ // but room should be init only once:
+ this.roomInitialized = true;
+ }
+ },
+ send: function(code, obj) {
+ if (!!this.conn && this.conn.readyState == 1)
+ this.conn.send(JSON.stringify(Object.assign({ code: code }, obj)));