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