4 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
6 button.tabbtn#liveGames(@click="setDisplay('live',$event)")
7 | {{ st.tr["Live games"] }}
8 button.tabbtn#corrGames(@click="setDisplay('corr',$event)")
9 | {{ st.tr["Correspondance games"] }}
10 button.tabbtn#importGames(@click="setDisplay('import',$event)")
11 | {{ st.tr["Imported games"] }}
14 v-show="display=='live'"
17 @abortgame="abortGame"
20 v-show="display=='corr'"
24 @abortgame="abortGame"
27 v-show="display=='import'"
33 v-show="hasMore[display]"
34 @click="loadMore(display)"
36 | {{ st.tr["Load more"] }}
37 UploadGame(@game-uploaded="addGameImport")
41 import { store } from "@/store";
42 import { GameStorage } from "@/utils/gameStorage";
43 import { ImportgameStorage } from "@/utils/importgameStorage";
44 import { ajax } from "@/utils/ajax";
45 import { getScoreMessage } from "@/utils/scoring";
46 import params from "@/parameters";
47 import { getRandString } from "@/utils/alea";
48 import GameList from "@/components/GameList.vue";
49 import UploadGame from "@/components/UploadGame.vue";
63 // timestamp of last showed (oldest) game:
65 live: Number.MAX_SAFE_INTEGER,
66 "import": Number.MAX_SAFE_INTEGER,
67 corr: Number.MAX_SAFE_INTEGER
69 // hasMore == TRUE: a priori there could be more games to load
73 corr: (store.state.user.id > 0)
77 socketCloseListener: 0
81 $route: function(to, from) {
82 if (to.path != "/mygames") this.cleanBeforeDestroy();
86 window.addEventListener("beforeunload", this.cleanBeforeDestroy);
87 // Initialize connection
88 this.connexionString =
90 "/?sid=" + this.st.user.sid +
91 "&id=" + this.st.user.id +
92 "&tmpId=" + getRandString() +
94 encodeURIComponent(this.$route.path);
95 this.conn = new WebSocket(this.connexionString);
96 this.conn.onmessage = this.socketMessageListener;
97 this.socketCloseListener = setInterval(
99 if (this.conn.readyState == 3) {
100 // Connexion is closed: re-open
101 this.conn.removeEventListener("message", this.socketMessageListener);
102 this.conn = new WebSocket(this.connexionString);
103 this.conn.addEventListener("message", this.socketMessageListener);
109 mounted: function() {
110 const adjustAndSetDisplay = () => {
111 // showType is the last type viwed by the user (default)
112 let showType = localStorage.getItem("type-myGames") || "live";
113 // Live games, my turn: highest priority:
114 if (this.liveGames.some(g => !!g.myTurn)) showType = "live";
115 // Then corr games, my turn:
116 else if (this.corrGames.some(g => !!g.myTurn)) showType = "corr";
118 // If a listing is empty, try showing the other (if non-empty)
119 const types = ["corr", "live"];
120 for (let i of [0,1]) {
122 this[types[i] + "Games"].length > 0 &&
123 this[types[1-i] + "Games"].length == 0
129 this.setDisplay(showType);
131 GameStorage.getRunning(localGames => {
132 localGames.forEach(g => g.type = "live");
133 this.decorate(localGames);
134 this.liveGames = localGames;
135 if (this.st.user.id > 0) {
136 // Ask running corr games first
143 // These games are garanteed to not be deleted
144 this.corrGames = res.games;
145 this.corrGames.forEach(g => {
149 this.decorate(this.corrGames);
150 // Now ask completed games (partial list)
153 () => this.loadMore("corr", adjustAndSetDisplay)
158 } else this.loadMore("live", adjustAndSetDisplay);
161 beforeDestroy: function() {
162 this.cleanBeforeDestroy();
165 cleanBeforeDestroy: function() {
166 clearInterval(this.socketCloseListener);
167 window.removeEventListener("beforeunload", this.cleanBeforeDestroy);
168 this.conn.removeEventListener("message", this.socketMessageListener);
169 this.conn.send(JSON.stringify({code: "disconnect"}));
172 setDisplay: function(type, e) {
174 localStorage.setItem("type-myGames", type);
175 let elt = e ? e.target : document.getElementById(type + "Games");
176 elt.classList.add("active");
177 elt.classList.remove("somethingnew"); //in case of
178 if (elt.previousElementSibling)
179 elt.previousElementSibling.classList.remove("active");
180 else elt.nextElementSibling.classList.remove("active");
182 addGameImport(game) {
185 "No identifier found: use the upload button in analysis mode"]);
187 else this.importGames.push(game);
189 tryShowNewsIndicator: function(type) {
191 (type == "live" && this.display == "corr") ||
192 (type == "corr" && this.display == "live")
195 .getElementById(type + "Games")
196 .classList.add("somethingnew");
199 // Called at loading to augment games with myColor + myTurn infos
200 decorate: function(games) {
203 (g.type == "corr" && g.players[0].id == this.st.user.id) ||
204 (g.type == "live" && g.players[0].sid == this.st.user.sid)
207 // If game is over, myTurn doesn't exist:
208 if (g.score == "*") {
209 const rem = g.movesCount % 2;
210 if ((rem == 0 && g.myColor == 'w') || (rem == 1 && g.myColor == 'b'))
215 socketMessageListener: function(msg) {
216 if (!this.conn) return;
217 const data = JSON.parse(msg.data);
218 // NOTE: no imported games here
220 "corr": this.corrGames,
221 "live": this.liveGames
225 case "notifyscore": {
226 const info = data.data;
227 const type = (!!parseInt(info.gid) ? "corr" : "live");
228 let game = gamesArrays[type].find(g => g.id == info.gid);
229 // "notifything" --> "thing":
230 const thing = data.code.substr(6);
231 game[thing] = info[thing];
232 if (thing == "turn") {
233 game.myTurn = !game.myTurn;
234 if (game.myTurn) this.tryShowNewsIndicator(type);
235 } else game.myTurn = false;
236 // TODO: forcing refresh like that is ugly and wrong.
237 // How to do it cleanly?
238 this.$refs[type + "games"].$forceUpdate();
241 case "notifynewgame": {
242 const gameInfo = data.data;
243 // st.variants might be uninitialized,
244 // if unlucky and newgame right after connect:
245 const v = this.st.variants.find(v => v.id == gameInfo.vid);
246 const vname = !!v ? v.name : "";
247 const type = (gameInfo.cadence.indexOf('d') >= 0 ? "corr": "live");
248 let game = Object.assign(
258 (type == "corr" && game.players[0].id == this.st.user.id) ||
259 (type == "live" && game.players[0].sid == this.st.user.sid);
260 gamesArrays[type].push(game);
261 if (game.myTurn) this.tryShowNewsIndicator(type);
262 // TODO: cleaner refresh
263 this.$refs[type + "games"].$forceUpdate();
268 showGame: function(game) {
269 if (game.type != "corr" || !game.myTurn) {
270 this.$router.push("/game/" + game.id);
273 // It's my turn in this game. Are there others?
275 let otherCorrGamesMyTurn = this.corrGames.filter(g =>
276 g.id != game.id && !!g.myTurn);
277 if (otherCorrGamesMyTurn.length > 0) {
278 nextIds += "/?next=[";
279 otherCorrGamesMyTurn.forEach(g => { nextIds += g.id + ","; });
280 // Remove last comma and close array:
281 nextIds = nextIds.slice(0, -1) + "]";
283 this.$router.push("/game/" + game.id + nextIds);
285 abortGame: function(game) {
286 // Special "trans-pages" case: from MyGames to Game
287 // TODO: also for corr games? (It's less important)
288 if (game.type == "live") {
290 game.players[0].sid == this.st.user.sid
291 ? game.players[1].sid
292 : game.players[0].sid;
299 // NOTE: target might not be online
306 // NOTE: no imported games here
307 else if (!game.deletedByWhite || !game.deletedByBlack) {
308 // Set score if game isn't deleted on server:
317 scoreMsg: getScoreMessage("?")
324 loadMore: function(type, cb) {
325 if (type == "corr" && this.st.user.id > 0) {
331 data: { cursor: this.cursor["corr"] },
333 const L = res.games.length;
335 this.cursor["corr"] = res.games[L - 1].created;
336 let moreGames = res.games;
337 moreGames.forEach(g => g.type = "corr");
338 this.decorate(moreGames);
339 this.corrGames = this.corrGames.concat(moreGames);
340 } else this.hasMore["corr"] = false;
346 else if (type == "live") {
347 GameStorage.getNext(this.cursor["live"], localGames => {
348 const L = localGames.length;
350 // Add "-1" because IDBKeyRange.upperBound includes boundary
351 this.cursor["live"] = localGames[L - 1].created - 1;
352 localGames.forEach(g => g.type = "live");
353 this.decorate(localGames);
354 this.liveGames = this.liveGames.concat(localGames);
355 } else this.hasMore["live"] = false;
359 else if (type == "import") {
360 ImportgameStorage.getNext(this.cursor["import"], importGames => {
361 const L = importGames.length;
363 // Add "-1" because IDBKeyRange.upperBound includes boundary
364 this.cursor["import"] = importGames[L - 1].created - 1;
365 importGames.forEach(g => g.type = "import");
366 this.importGames = this.importGames.concat(importGames);
367 } else this.hasMore["import"] = false;
381 background-color: #f9faee
391 background-color: #c5fefe !important