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