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