+ },
+ // NOTE: some redundant code with Hall.vue (mostly related to people array)
+ created: function() {
+ // Always add myself to players' list
+ const my = this.st.user;
+ this.$set(this.people, my.sid, { id: my.id, name: my.name });
+ this.gameRef.id = this.$route.params["id"];
+ // rid = remote ID to find an observed live game,
+ // next = next corr games IDs to navigate faster
+ // (Both might be undefined)
+ this.gameRef.rid = this.$route.query["rid"];
+ this.nextIds = JSON.parse(this.$route.query["next"] || "[]");
+ // Initialize connection
+ this.connexionString =
+ params.socketUrl +
+ "/?sid=" +
+ this.st.user.sid +
+ "&tmpId=" +
+ getRandString() +
+ "&page=" +
+ encodeURIComponent(this.$route.path);
+ this.conn = new WebSocket(this.connexionString);
+ this.conn.onmessage = this.socketMessageListener;
+ this.conn.onclose = this.socketCloseListener;
+ // Socket init required before loading remote game:
+ const socketInit = callback => {
+ if (!!this.conn && this.conn.readyState == 1)
+ // 1 == OPEN state
+ callback();
+ else
+ // Socket not ready yet (initial loading)
+ // NOTE: it's important to call callback without arguments,
+ // otherwise first arg is Websocket object and loadGame fails.
+ this.conn.onopen = () => callback();
+ };
+ if (!this.gameRef.rid)
+ // Game stored locally or on server
+ this.loadGame(null, () => socketInit(this.roomInit));
+ else
+ // Game stored remotely: need socket to retrieve it
+ // NOTE: the callback "roomInit" will be lost, so we don't provide it.
+ // --> It will be given when receiving "fullgame" socket event.
+ socketInit(this.loadGame);
+ },
+ mounted: function() {
+ document
+ .getElementById("chatWrap")
+ .addEventListener("click", processModalClick);
+ },
+ beforeDestroy: function() {
+ this.send("disconnect");
+ },
+ methods: {
+ 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.send(JSON.stringify(Object.assign({ code: code }, obj)));
+ },
+ isConnected: function(index) {
+ const player = this.game.players[index];
+ // Is it me ?
+ if (
+ (this.st.user.sid == player.sid || this.st.user.id == player.uid) &&
+ (!this.st.user.name || this.st.user.name == player.name)
+ ) {
+ return true;
+ }
+ // Try to find a match in people:
+ return (
+ (
+ player.sid &&
+ Object.keys(this.people).some(sid => sid == player.sid)
+ )
+ ||
+ (
+ player.uid &&
+ Object.values(this.people).some(p => p.id == player.uid)
+ )
+ );
+ },
+ resetChatColor: function() {
+ // TODO: this is called twice, once on opening an once on closing
+ document.getElementById("chatBtn").classList.remove("somethingnew");
+ },
+ processChat: function(chat) {
+ this.send("newchat", { data: chat });
+ // NOTE: anonymous chats in corr games are not stored on server (TODO?)
+ if (this.game.type == "corr" && this.st.user.id > 0)
+ GameStorage.update(this.gameRef.id, { chat: chat });
+ },
+ clearChat: function() {
+ // Nothing more to do if game is live (chats not recorded)
+ if (this.game.type == "corr") {
+ if (!!this.game.mycolor)
+ ajax("/chats", "DELETE", {gid: this.game.id});
+ this.$set(this.game, "chats", []);
+ }
+ },
+ // Notify turn after a new move (to opponent and me on MyGames page)
+ notifyTurn: function(sid) {
+ const player = this.people[sid];
+ const colorIdx = this.game.players.findIndex(
+ p => p.sid == sid || p.uid == player.id);
+ const color = ["w","b"][colorIdx];
+ const movesCount = this.game.moves.length;
+ const yourTurn =
+ (color == "w" && movesCount % 2 == 0) ||
+ (color == "b" && movesCount % 2 == 1);
+ this.send("turnchange", { target: sid, yourTurn: yourTurn });
+ },
+ showNextGame: function() {
+ // Did I play in current game? If not, add it to nextIds list
+ if (this.game.score == "*" && this.vr.turn == this.game.mycolor)
+ this.nextIds.unshift(this.game.id);
+ const nextGid = this.nextIds.pop();
+ this.$router.push(
+ "/game/" + nextGid + "/?next=" + JSON.stringify(this.nextIds));
+ },
+ rematch: function() {
+ alert("Unimplemented yet (soon :) )");
+ // TODO: same logic as for draw, but re-click remove rematch offer (toggle)
+ },
+ askGameAgain: function() {
+ this.gameIsLoading = true;
+ const doAskGame = () => {
+ if (!this.gameRef.rid)
+ // This is my game: just reload.
+ this.loadGame();
+ else {
+ // Just ask fullgame again (once!), this is much simpler.
+ // If this fails, the user could just reload page :/
+ let self = this;
+ (function askIfPeerConnected() {
+ if (!!self.people[self.gameRef.rid])
+ self.send("askfullgame", { target: self.gameRef.rid });
+ else setTimeout(askIfPeerConnected, 1000);
+ })();
+ }
+ };
+ // Delay of at least 2s between two game requests
+ const now = Date.now();
+ const delay = Math.max(2000 - (now - this.askGameTime), 0);
+ this.askGameTime = now;
+ setTimeout(doAskGame, delay);
+ },
+ socketMessageListener: function(msg) {
+ if (!this.conn) return;