d12fff480f845d1e031cc98926e24b89da124ce7
[vchess.git] / client / src / views / MyGames.vue
1 <template lang="pug">
2 main
3 .row
4 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
5 .button-group
6 button.tabbtn#liveGames(@click="setDisplay('live',$event)")
7 | {{ st.tr["Live games"] }}
8 button.tabbtn#corrGames(@click="setDisplay('corr',$event)")
9 | {{ st.tr["Correspondence games"] }}
10 button.tabbtn#importGames(@click="setDisplay('import',$event)")
11 | {{ st.tr["Imported games"] }}
12 GameList(
13 ref="livegames"
14 v-show="display=='live'"
15 :games="liveGames"
16 @show-game="showGame"
17 @abortgame="abortGame"
18 )
19 GameList(
20 v-show="display=='corr'"
21 ref="corrgames"
22 :games="corrGames"
23 @show-game="showGame"
24 @abortgame="abortGame"
25 )
26 UploadGame(
27 v-show="display=='import'"
28 @game-uploaded="addGameImport"
29 )
30 GameList(
31 v-show="display=='import'"
32 ref="importgames"
33 :games="importGames"
34 :show-both="true"
35 @show-game="showGame"
36 )
37 button#loadMoreBtn(
38 v-show="hasMore[display]"
39 @click="loadMore(display)"
40 )
41 | {{ st.tr["Load more"] }}
42 </template>
43
44 <script>
45 import { store } from "@/store";
46 import { GameStorage } from "@/utils/gameStorage";
47 import { ImportgameStorage } from "@/utils/importgameStorage";
48 import { ajax } from "@/utils/ajax";
49 import { getScoreMessage } from "@/utils/scoring";
50 import params from "@/parameters";
51 import { getRandString } from "@/utils/alea";
52 import GameList from "@/components/GameList.vue";
53 import UploadGame from "@/components/UploadGame.vue";
54 export default {
55 name: "my-my-games",
56 components: {
57 GameList,
58 UploadGame
59 },
60 data: function() {
61 return {
62 st: store.state,
63 display: "live",
64 liveGames: [],
65 corrGames: [],
66 importGames: [],
67 // timestamp of last showed (oldest) game:
68 cursor: {
69 live: Number.MAX_SAFE_INTEGER,
70 "import": Number.MAX_SAFE_INTEGER,
71 corr: Number.MAX_SAFE_INTEGER
72 },
73 // hasMore == TRUE: a priori there could be more games to load
74 hasMore: {
75 live: true,
76 "import": true,
77 corr: (store.state.user.id > 0)
78 },
79 conn: null,
80 connexionString: "",
81 socketCloseListener: 0
82 };
83 },
84 watch: {
85 $route: function(to, from) {
86 if (to.path != "/mygames") this.cleanBeforeDestroy();
87 },
88 // st.variants changes only once, at loading from [] to [...]
89 "st.variants": function() {
90 // Set potential games variant names + display:
91 this.liveGames.concat(this.corrGames).concat(this.importGames)
92 .forEach(o => {
93 if (!o.vname) this.setVname(o);
94 });
95 }
96 },
97 created: function() {
98 window.addEventListener("beforeunload", this.cleanBeforeDestroy);
99 // Initialize connection
100 this.connexionString =
101 params.socketUrl +
102 "/?sid=" + this.st.user.sid +
103 "&id=" + this.st.user.id +
104 "&tmpId=" + getRandString() +
105 "&page=" +
106 encodeURIComponent(this.$route.path);
107 this.conn = new WebSocket(this.connexionString);
108 this.conn.onmessage = this.socketMessageListener;
109 this.socketCloseListener = setInterval(
110 () => {
111 if (this.conn.readyState == 3) {
112 // Connexion is closed: re-open
113 this.conn.removeEventListener("message", this.socketMessageListener);
114 this.conn = new WebSocket(this.connexionString);
115 this.conn.addEventListener("message", this.socketMessageListener);
116 }
117 },
118 1000
119 );
120 },
121 mounted: function() {
122 const adjustAndSetDisplay = () => {
123 // showType is the last type viewed by the user (default)
124 let showType = localStorage.getItem("type-myGames") || "live";
125 // Live games, my turn: highest priority:
126 if (this.liveGames.some(g => !!g.myTurn)) showType = "live";
127 // Then corr games, my turn:
128 else if (this.corrGames.some(g => !!g.myTurn)) showType = "corr";
129 else {
130 // If a listing is empty, try showing the other (if non-empty)
131 const types = ["corr", "live"];
132 for (let i of [0,1]) {
133 if (
134 this[types[i] + "Games"].length > 0 &&
135 this[types[1-i] + "Games"].length == 0
136 ) {
137 showType = types[i];
138 }
139 }
140 }
141 this.setDisplay(showType);
142 };
143 GameStorage.getRunning(localGames => {
144 localGames.forEach(g => g.type = "live");
145 this.decorate(localGames);
146 this.liveGames = localGames;
147 if (this.st.user.id > 0) {
148 // Ask running corr games first
149 ajax(
150 "/runninggames",
151 "GET",
152 {
153 credentials: true,
154 success: (res) => {
155 // These games are garanteed to not be deleted
156 this.corrGames = res.games;
157 this.corrGames.forEach(g => {
158 g.type = "corr";
159 g.score = "*";
160 g.options = JSON.parse(g.options);
161 });
162 this.decorate(this.corrGames);
163 // Now ask completed games (partial list)
164 this.loadMore(
165 "live",
166 () => this.loadMore("corr", () => {
167 this.loadMore("import", adjustAndSetDisplay);
168 })
169 );
170 }
171 }
172 );
173 }
174 else {
175 this.loadMore("live", () => {
176 this.loadMore("import", adjustAndSetDisplay);
177 });
178 }
179 });
180 },
181 beforeDestroy: function() {
182 this.cleanBeforeDestroy();
183 },
184 methods: {
185 cleanBeforeDestroy: function() {
186 clearInterval(this.socketCloseListener);
187 window.removeEventListener("beforeunload", this.cleanBeforeDestroy);
188 this.conn.removeEventListener("message", this.socketMessageListener);
189 this.conn.send(JSON.stringify({code: "disconnect"}));
190 this.conn = null;
191 },
192 setDisplay: function(type, e) {
193 this.display = type;
194 localStorage.setItem("type-myGames", type);
195 let elt = (!!e ? e.target : document.getElementById(type + "Games"));
196 elt.classList.add("active");
197 elt.classList.remove("somethingnew"); //in case of
198 for (let t of ["live","corr","import"]) {
199 if (t != type)
200 document.getElementById(t + "Games").classList.remove("active");
201 }
202 },
203 // TODO: duplicated from Hall.vue:
204 setVname: function(obj) {
205 const variant = this.st.variants.find(v => v.id == obj.vid);
206 if (!!variant) {
207 obj.vname = variant.name;
208 obj.vdisp = variant.display;
209 }
210 },
211 addGameImport(game) {
212 game.type = "import";
213 ImportgameStorage.add(game, (err) => {
214 if (!!err) {
215 if (err.message.indexOf("Key already exists") < 0) {
216 alert(this.st.tr["An error occurred. Try again!"]);
217 return;
218 }
219 // NOTE: since a random new ID is generated for imported games,
220 // this error will not occur.
221 else alert(this.st.tr["The game was already imported"]);
222 }
223 this.$router.push("/game/" + game.id);
224 });
225 },
226 tryShowNewsIndicator: function(type) {
227 if (
228 (type == "live" && this.display != "live") ||
229 (type == "corr" && this.display != "corr")
230 ) {
231 document
232 .getElementById(type + "Games")
233 .classList.add("somethingnew");
234 }
235 },
236 // Called at loading to augment games with myColor + myTurn infos
237 decorate: function(games) {
238 games.forEach(g => {
239 g.myColor =
240 (g.type == "corr" && g.players[0].id == this.st.user.id) ||
241 (g.type == "live" && g.players[0].sid == this.st.user.sid)
242 ? 'w'
243 : 'b';
244 // If game is over, myTurn doesn't exist:
245 if (g.score == "*") {
246 const rem = g.movesCount % 2;
247 if ((rem == 0 && g.myColor == 'w') || (rem == 1 && g.myColor == 'b'))
248 g.myTurn = true;
249 }
250 this.setVname(g);
251 });
252 },
253 socketMessageListener: function(msg) {
254 if (!this.conn) return;
255 const data = JSON.parse(msg.data);
256 // NOTE: no imported games here
257 let gamesArrays = {
258 "corr": this.corrGames,
259 "live": this.liveGames
260 };
261 switch (data.code) {
262 case "notifyturn":
263 case "notifyscore": {
264 const info = data.data;
265 const type = (!!parseInt(info.gid, 10) ? "corr" : "live");
266 let game = gamesArrays[type].find(g => g.id == info.gid);
267 // "notifything" --> "thing":
268 const thing = data.code.substr(6);
269 game[thing] = info[thing];
270 if (thing == "turn") {
271 game.myTurn = !game.myTurn;
272 if (game.myTurn) this.tryShowNewsIndicator(type);
273 }
274 else game.myTurn = false;
275 // TODO: forcing refresh like that is ugly and wrong.
276 // How to do it cleanly?
277 this.$refs[type + "games"].$forceUpdate();
278 break;
279 }
280 case "notifynewgame": {
281 let gameInfo = data.data;
282 this.setVname(gameInfo);
283 // TODO: remove patch on next line (options || "{}")
284 gameInfo.options = JSON.parse(gameInfo.options || "{}");
285 const type = (gameInfo.cadence.indexOf('d') >= 0 ? "corr": "live");
286 let game = Object.assign(
287 {
288 type: type,
289 score: "*",
290 created: Date.now()
291 },
292 gameInfo
293 );
294 game.myTurn =
295 (type == "corr" && game.players[0].id == this.st.user.id) ||
296 (type == "live" && game.players[0].sid == this.st.user.sid);
297 gamesArrays[type].push(game);
298 if (game.myTurn) this.tryShowNewsIndicator(type);
299 // TODO: cleaner refresh
300 this.$refs[type + "games"].$forceUpdate();
301 break;
302 }
303 }
304 },
305 showGame: function(game) {
306 if (game.type != "corr" || !game.myTurn) {
307 this.$router.push("/game/" + game.id);
308 return;
309 }
310 // It's my turn in this game. Are there others?
311 let nextIds = "";
312 let otherCorrGamesMyTurn = this.corrGames.filter(g =>
313 g.id != game.id && !!g.myTurn);
314 if (otherCorrGamesMyTurn.length > 0) {
315 nextIds += "/?next=[";
316 otherCorrGamesMyTurn.forEach(g => { nextIds += g.id + ","; });
317 // Remove last comma and close array:
318 nextIds = nextIds.slice(0, -1) + "]";
319 }
320 this.$router.push("/game/" + game.id + nextIds);
321 },
322 abortGame: function(game) {
323 // Special "trans-pages" case: from MyGames to Game
324 // TODO: also for corr games? (It's less important)
325 if (game.type == "live") {
326 const oppsid =
327 game.players[0].sid == this.st.user.sid
328 ? game.players[1].sid
329 : game.players[0].sid;
330 if (!!this.conn) {
331 this.conn.send(
332 JSON.stringify(
333 {
334 code: "mabort",
335 gid: game.id,
336 // NOTE: target might not be online
337 target: oppsid
338 }
339 )
340 );
341 }
342 }
343 // NOTE: no imported games here
344 else if (!game.deletedByWhite || !game.deletedByBlack) {
345 // Set score if game isn't deleted on server:
346 ajax(
347 "/games",
348 "PUT",
349 {
350 data: {
351 gid: game.id,
352 newObj: {
353 score: "?",
354 scoreMsg: getScoreMessage("?")
355 }
356 }
357 }
358 );
359 }
360 },
361 loadMore: function(type, cb) {
362 if (type == "corr" && this.st.user.id > 0) {
363 ajax(
364 "/completedgames",
365 "GET",
366 {
367 credentials: true,
368 data: { cursor: this.cursor["corr"] },
369 success: (res) => {
370 const L = res.games.length;
371 if (L > 0) {
372 this.cursor["corr"] = res.games[L - 1].created;
373 let moreGames = res.games;
374 moreGames.forEach(g => {
375 g.type = "corr";
376 g.options = JSON.parse(g.options);
377 });
378 this.decorate(moreGames);
379 this.corrGames = this.corrGames.concat(moreGames);
380 }
381 else this.hasMore["corr"] = false;
382 if (!!cb) cb();
383 }
384 }
385 );
386 }
387 else if (type == "live") {
388 GameStorage.getNext(this.cursor["live"], localGames => {
389 const L = localGames.length;
390 if (L > 0) {
391 // Add "-1" because IDBKeyRange.upperBound includes boundary
392 this.cursor["live"] = localGames[L - 1].created - 1;
393 localGames.forEach(g => {
394 g.type = "live";
395 // TODO: remove patch on next line (options || "{}")
396 g.options = JSON.parse(g.options || "{}");
397 });
398 this.decorate(localGames);
399 this.liveGames = this.liveGames.concat(localGames);
400 }
401 else this.hasMore["live"] = false;
402 if (!!cb) cb();
403 });
404 }
405 else if (type == "import") {
406 ImportgameStorage.getNext(this.cursor["import"], importGames => {
407 const L = importGames.length;
408 if (L > 0) {
409 // Add "-1" because IDBKeyRange.upperBound includes boundary
410 this.cursor["import"] = importGames[L - 1].created - 1;
411 importGames.forEach(g => {
412 g.type = "import";
413 // TODO: remove following patch (options || "{}")
414 g.options = JSON.parse(g.options || "{}");
415 this.setVname(g);
416 });
417 this.importGames = this.importGames.concat(importGames);
418 }
419 else this.hasMore["import"] = false;
420 if (!!cb) cb();
421 });
422 }
423 }
424 }
425 };
426 </script>
427
428 <style lang="sass" scoped>
429 .active
430 color: #388e3c
431
432 .tabbtn
433 background-color: #f9faee
434
435 button#loadMoreBtn
436 display: block
437 margin: 0 auto
438
439 .somethingnew
440 background-color: #90C4EC !important
441 </style>
442
443 <!-- Not scoped because acting on GameList -->
444 <style lang="sass">
445 table.game-list
446 max-height: 100%
447 </style>