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( | |
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 |
25 | import { store } from "@/store"; |
26 | import { GameStorage } from "@/utils/gameStorage"; | |
27 | import { ajax } from "@/utils/ajax"; | |
aae89b49 | 28 | import { getScoreMessage } from "@/utils/scoring"; |
23ecf008 BA |
29 | import params from "@/parameters"; |
30 | import { getRandString } from "@/utils/alea"; | |
afd3240d BA |
31 | import GameList from "@/components/GameList.vue"; |
32 | export 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 | }, | |
28b32b4f | 117 | // Called at loading to augment games with myColor + myTurn infos |
e727fe31 BA |
118 | decorate: function(games) { |
119 | games.forEach(g => { | |
28b32b4f | 120 | // If game is over, myColor and myTurn are ignored: |
e727fe31 | 121 | if (g.score == "*") { |
28b32b4f | 122 | g.myColor = |
e727fe31 BA |
123 | (g.type == "corr" && g.players[0].uid == this.st.user.id) || |
124 | (g.type == "live" && g.players[0].sid == this.st.user.sid) | |
125 | ? 'w' | |
126 | : 'b'; | |
127 | const rem = g.movesCount % 2; | |
28b32b4f | 128 | if ((rem == 0 && g.myColor == 'w') || (rem == 1 && g.myColor == 'b')) { |
e727fe31 | 129 | g.myTurn = true; |
e727fe31 BA |
130 | } |
131 | } | |
132 | }); | |
133 | }, | |
cafe0166 BA |
134 | socketMessageListener: function(msg) { |
135 | const data = JSON.parse(msg.data); | |
e727fe31 BA |
136 | let gamesArrays = { |
137 | "corr": this.corrGames, | |
138 | "live": this.liveGames | |
139 | }; | |
cafe0166 | 140 | switch (data.code) { |
cafe0166 BA |
141 | case "notifyturn": |
142 | case "notifyscore": { | |
143 | const info = data.data; | |
e727fe31 BA |
144 | const type = (!!parseInt(info.gid) ? "corr" : "live"); |
145 | let game = gamesArrays[type].find(g => g.id == info.gid); | |
cafe0166 BA |
146 | // "notifything" --> "thing": |
147 | const thing = data.code.substr(6); | |
e727fe31 | 148 | game[thing] = info[thing]; |
28b32b4f | 149 | if (thing == "turn") game.myTurn = !game.myTurn; |
e727fe31 BA |
150 | this.$forceUpdate(); |
151 | this.tryShowNewsIndicator(type); | |
cafe0166 BA |
152 | break; |
153 | } | |
154 | case "notifynewgame": { | |
155 | const gameInfo = data.data; | |
156 | // st.variants might be uninitialized, | |
157 | // if unlucky and newgame right after connect: | |
158 | const v = this.st.variants.find(v => v.id == gameInfo.vid); | |
159 | const vname = !!v ? v.name : ""; | |
e727fe31 BA |
160 | const type = (gameInfo.cadence.indexOf('d') >= 0 ? "corr": "live"); |
161 | let game = Object.assign( | |
cafe0166 BA |
162 | { |
163 | vname: vname, | |
164 | type: type, | |
2a8a94c9 | 165 | score: "*", |
e727fe31 | 166 | created: Date.now() |
cafe0166 BA |
167 | }, |
168 | gameInfo | |
169 | ); | |
28b32b4f | 170 | game.myTurn = |
e727fe31 | 171 | (type == "corr" && game.players[0].uid == this.st.user.id) || |
28b32b4f | 172 | (type == "live" && game.players[0].sid == this.st.user.sid); |
e727fe31 BA |
173 | gamesArrays[type].push(game); |
174 | this.$forceUpdate(); | |
cafe0166 BA |
175 | this.tryShowNewsIndicator(type); |
176 | break; | |
177 | } | |
178 | } | |
179 | }, | |
180 | socketCloseListener: function() { | |
181 | this.conn = new WebSocket(this.connexionString); | |
182 | this.conn.addEventListener("message", this.socketMessageListener); | |
183 | this.conn.addEventListener("close", this.socketCloseListener); | |
afd3240d | 184 | }, |
feaf1bf7 | 185 | showGame: function(game) { |
e727fe31 | 186 | if (game.type == "live" || !game.myTurn) { |
feaf1bf7 | 187 | this.$router.push("/game/" + game.id); |
620a88ed BA |
188 | return; |
189 | } | |
feaf1bf7 BA |
190 | // It's my turn in this game. Are there others? |
191 | let nextIds = ""; | |
e727fe31 BA |
192 | let otherCorrGamesMyTurn = this.corrGames.filter(g => |
193 | g.id != game.id && !!g.myTurn); | |
feaf1bf7 BA |
194 | if (otherCorrGamesMyTurn.length > 0) { |
195 | nextIds += "/?next=["; | |
196 | otherCorrGamesMyTurn.forEach(g => { nextIds += g.id + ","; }); | |
197 | // Remove last comma and close array: | |
198 | nextIds = nextIds.slice(0, -1) + "]"; | |
199 | } | |
200 | this.$router.push("/game/" + game.id + nextIds); | |
db1f1f9a | 201 | }, |
aae89b49 BA |
202 | abortGame: function(game) { |
203 | // Special "trans-pages" case: from MyGames to Game | |
204 | // TODO: also for corr games? (It's less important) | |
205 | if (game.type == "live") { | |
206 | const oppsid = | |
207 | game.players[0].sid == this.st.user.sid | |
208 | ? game.players[1].sid | |
209 | : game.players[0].sid; | |
210 | this.conn.send( | |
211 | JSON.stringify( | |
212 | { | |
213 | code: "mabort", | |
214 | gid: game.id, | |
215 | // NOTE: target might not be online | |
216 | target: oppsid | |
217 | } | |
218 | ) | |
219 | ); | |
220 | } | |
221 | else if (!game.deletedByWhite || !game.deletedByBlack) { | |
222 | // Set score if game isn't deleted on server: | |
223 | ajax( | |
224 | "/games", | |
225 | "PUT", | |
226 | { | |
e57c4de4 BA |
227 | data: { |
228 | gid: game.id, | |
229 | newObj: { | |
230 | score: "?", | |
231 | scoreMsg: getScoreMessage("?") | |
232 | } | |
aae89b49 BA |
233 | } |
234 | } | |
235 | ); | |
236 | } | |
6808d7a1 BA |
237 | } |
238 | } | |
afd3240d BA |
239 | }; |
240 | </script> | |
2f258c37 | 241 | |
e2590fa8 | 242 | <style lang="sass"> |
2f258c37 BA |
243 | .active |
244 | color: #42a983 | |
5fe7e71c BA |
245 | |
246 | .tabbtn | |
247 | background-color: #f9faee | |
e2590fa8 BA |
248 | |
249 | table.game-list | |
250 | max-height: 100% | |
23ecf008 BA |
251 | |
252 | .somethingnew | |
253 | background-color: #c5fefe !important | |
2f258c37 | 254 | </style> |