Fix games ordering in MyGames, fix en-passant mistake in Rifle variant
[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(
11 v-show="display=='live'"
12 :games="liveGames"
13 @show-game="showGame"
3b0f26c1 14 @abortgame="abortGame"
910d631b
BA
15 )
16 GameList(
17 v-show="display=='corr'"
18 :games="corrGames"
19 @show-game="showGame"
3b0f26c1 20 @abortgame="abortGame"
910d631b 21 )
afd3240d
BA
22</template>
23
24<script>
afd3240d
BA
25import { store } from "@/store";
26import { GameStorage } from "@/utils/gameStorage";
27import { ajax } from "@/utils/ajax";
aae89b49 28import { getScoreMessage } from "@/utils/scoring";
23ecf008
BA
29import params from "@/parameters";
30import { getRandString } from "@/utils/alea";
afd3240d
BA
31import GameList from "@/components/GameList.vue";
32export default {
89021f18 33 name: "my-my-games",
afd3240d 34 components: {
6808d7a1 35 GameList
afd3240d
BA
36 },
37 data: function() {
38 return {
39 st: store.state,
dac39588 40 display: "live",
2f258c37 41 liveGames: [],
db1f1f9a
BA
42 corrGames: [],
43 conn: null,
44 connexionString: ""
afd3240d
BA
45 };
46 },
47 created: function() {
db1f1f9a 48 GameStorage.getAll(true, localGames => {
aae89b49 49 localGames.forEach(g => g.type = "live");
e727fe31 50 this.decorate(localGames);
2f258c37 51 this.liveGames = localGames;
afd3240d 52 });
6808d7a1 53 if (this.st.user.id > 0) {
aae89b49
BA
54 ajax(
55 "/games",
56 "GET",
e57c4de4
BA
57 {
58 data: { uid: this.st.user.id },
59 success: (res) => {
60 let serverGames = res.games.filter(g => {
61 const mySide =
62 g.players[0].uid == this.st.user.id
63 ? "White"
64 : "Black";
65 return !g["deletedBy" + mySide];
66 });
67 serverGames.forEach(g => g.type = "corr");
e727fe31 68 this.decorate(serverGames);
e57c4de4
BA
69 this.corrGames = serverGames;
70 }
71 }
72 );
afd3240d 73 }
db1f1f9a
BA
74 // Initialize connection
75 this.connexionString =
76 params.socketUrl +
77 "/?sid=" +
78 this.st.user.sid +
cafe0166
BA
79 "&id=" +
80 this.st.user.id +
db1f1f9a
BA
81 "&tmpId=" +
82 getRandString() +
83 "&page=" +
84 encodeURIComponent(this.$route.path);
85 this.conn = new WebSocket(this.connexionString);
86 this.conn.onmessage = this.socketMessageListener;
87 this.conn.onclose = this.socketCloseListener;
afd3240d 88 },
2f258c37
BA
89 mounted: function() {
90 const showType = localStorage.getItem("type-myGames") || "live";
91 this.setDisplay(showType);
92 },
23ecf008
BA
93 beforeDestroy: function() {
94 this.conn.send(JSON.stringify({code: "disconnect"}));
95 },
afd3240d 96 methods: {
2f258c37
BA
97 setDisplay: function(type, e) {
98 this.display = type;
99 localStorage.setItem("type-myGames", type);
6808d7a1 100 let elt = e ? e.target : document.getElementById(type + "Games");
2f258c37 101 elt.classList.add("active");
23ecf008 102 elt.classList.remove("somethingnew"); //in case of
6808d7a1 103 if (elt.previousElementSibling)
2f258c37 104 elt.previousElementSibling.classList.remove("active");
6808d7a1 105 else elt.nextElementSibling.classList.remove("active");
2f258c37 106 },
cafe0166
BA
107 tryShowNewsIndicator: function(type) {
108 if (
109 (type == "live" && this.display == "corr") ||
110 (type == "corr" && this.display == "live")
111 ) {
112 document
113 .getElementById(type + "Games")
114 .classList.add("somethingnew");
115 }
116 },
e727fe31
BA
117 // Called at loading to augment games with priority + myTurn infos
118 decorate: function(games) {
119 games.forEach(g => {
120 g.priority = 0;
121 if (g.score == "*") {
122 g.priority++;
123 const myColor =
124 (g.type == "corr" && g.players[0].uid == this.st.user.id) ||
125 (g.type == "live" && g.players[0].sid == this.st.user.sid)
126 ? 'w'
127 : 'b';
128 const rem = g.movesCount % 2;
129 if ((rem == 0 && myColor == 'w') || (rem == 1 && myColor == 'b')) {
130 g.myTurn = true;
131 g.priority++;
132 }
133 }
134 });
135 },
cafe0166
BA
136 socketMessageListener: function(msg) {
137 const data = JSON.parse(msg.data);
e727fe31
BA
138 let gamesArrays = {
139 "corr": this.corrGames,
140 "live": this.liveGames
141 };
cafe0166 142 switch (data.code) {
cafe0166
BA
143 case "notifyturn":
144 case "notifyscore": {
145 const info = data.data;
e727fe31
BA
146 const type = (!!parseInt(info.gid) ? "corr" : "live");
147 let game = gamesArrays[type].find(g => g.id == info.gid);
cafe0166
BA
148 // "notifything" --> "thing":
149 const thing = data.code.substr(6);
e727fe31
BA
150 game[thing] = info[thing];
151 if (thing == "score") game.priority = 0;
152 else {
153 game.priority = 3 - game.priority; //toggle turn
154 game.myTurn = !game.myTurn;
155 }
156 this.$forceUpdate();
157 this.tryShowNewsIndicator(type);
cafe0166
BA
158 break;
159 }
160 case "notifynewgame": {
161 const gameInfo = data.data;
162 // st.variants might be uninitialized,
163 // if unlucky and newgame right after connect:
164 const v = this.st.variants.find(v => v.id == gameInfo.vid);
165 const vname = !!v ? v.name : "";
e727fe31
BA
166 const type = (gameInfo.cadence.indexOf('d') >= 0 ? "corr": "live");
167 let game = Object.assign(
cafe0166
BA
168 {
169 vname: vname,
170 type: type,
2a8a94c9 171 score: "*",
e727fe31 172 created: Date.now()
cafe0166
BA
173 },
174 gameInfo
175 );
e727fe31
BA
176 // Compute priority:
177 game.priority = 1; //at least: my running game
178 if (
179 (type == "corr" && game.players[0].uid == this.st.user.id) ||
180 (type == "live" && game.players[0].sid == this.st.user.sid)
181 ) {
182 game.priority++;
183 game.myTurn = true;
184 }
185 gamesArrays[type].push(game);
186 this.$forceUpdate();
cafe0166
BA
187 this.tryShowNewsIndicator(type);
188 break;
189 }
190 }
191 },
192 socketCloseListener: function() {
193 this.conn = new WebSocket(this.connexionString);
194 this.conn.addEventListener("message", this.socketMessageListener);
195 this.conn.addEventListener("close", this.socketCloseListener);
afd3240d 196 },
feaf1bf7 197 showGame: function(game) {
e727fe31 198 if (game.type == "live" || !game.myTurn) {
feaf1bf7 199 this.$router.push("/game/" + game.id);
620a88ed
BA
200 return;
201 }
feaf1bf7
BA
202 // It's my turn in this game. Are there others?
203 let nextIds = "";
e727fe31
BA
204 let otherCorrGamesMyTurn = this.corrGames.filter(g =>
205 g.id != game.id && !!g.myTurn);
feaf1bf7
BA
206 if (otherCorrGamesMyTurn.length > 0) {
207 nextIds += "/?next=[";
208 otherCorrGamesMyTurn.forEach(g => { nextIds += g.id + ","; });
209 // Remove last comma and close array:
210 nextIds = nextIds.slice(0, -1) + "]";
211 }
212 this.$router.push("/game/" + game.id + nextIds);
db1f1f9a 213 },
aae89b49
BA
214 abortGame: function(game) {
215 // Special "trans-pages" case: from MyGames to Game
216 // TODO: also for corr games? (It's less important)
217 if (game.type == "live") {
218 const oppsid =
219 game.players[0].sid == this.st.user.sid
220 ? game.players[1].sid
221 : game.players[0].sid;
222 this.conn.send(
223 JSON.stringify(
224 {
225 code: "mabort",
226 gid: game.id,
227 // NOTE: target might not be online
228 target: oppsid
229 }
230 )
231 );
232 }
233 else if (!game.deletedByWhite || !game.deletedByBlack) {
234 // Set score if game isn't deleted on server:
235 ajax(
236 "/games",
237 "PUT",
238 {
e57c4de4
BA
239 data: {
240 gid: game.id,
241 newObj: {
242 score: "?",
243 scoreMsg: getScoreMessage("?")
244 }
aae89b49
BA
245 }
246 }
247 );
248 }
6808d7a1
BA
249 }
250 }
afd3240d
BA
251};
252</script>
2f258c37 253
e2590fa8 254<style lang="sass">
2f258c37
BA
255.active
256 color: #42a983
5fe7e71c
BA
257
258.tabbtn
259 background-color: #f9faee
e2590fa8
BA
260
261table.game-list
262 max-height: 100%
23ecf008
BA
263
264.somethingnew
265 background-color: #c5fefe !important
2f258c37 266</style>