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" | |
14 | ) | |
15 | GameList( | |
16 | v-show="display=='corr'" | |
17 | :games="corrGames" | |
18 | @show-game="showGame" | |
aae89b49 | 19 | @abort="abortGame" |
910d631b | 20 | ) |
afd3240d BA |
21 | </template> |
22 | ||
23 | <script> | |
afd3240d BA |
24 | import { store } from "@/store"; |
25 | import { GameStorage } from "@/utils/gameStorage"; | |
26 | import { ajax } from "@/utils/ajax"; | |
aae89b49 | 27 | import { getScoreMessage } from "@/utils/scoring"; |
23ecf008 BA |
28 | import params from "@/parameters"; |
29 | import { getRandString } from "@/utils/alea"; | |
afd3240d BA |
30 | import GameList from "@/components/GameList.vue"; |
31 | export default { | |
89021f18 | 32 | name: "my-my-games", |
afd3240d | 33 | components: { |
6808d7a1 | 34 | GameList |
afd3240d BA |
35 | }, |
36 | data: function() { | |
37 | return { | |
38 | st: store.state, | |
dac39588 | 39 | display: "live", |
2f258c37 | 40 | liveGames: [], |
db1f1f9a BA |
41 | corrGames: [], |
42 | conn: null, | |
43 | connexionString: "" | |
afd3240d BA |
44 | }; |
45 | }, | |
46 | created: function() { | |
db1f1f9a | 47 | GameStorage.getAll(true, localGames => { |
aae89b49 | 48 | localGames.forEach(g => g.type = "live"); |
2f258c37 | 49 | this.liveGames = localGames; |
afd3240d | 50 | }); |
6808d7a1 | 51 | if (this.st.user.id > 0) { |
aae89b49 BA |
52 | ajax( |
53 | "/games", | |
54 | "GET", | |
55 | { uid: this.st.user.id }, | |
56 | res => { | |
57 | let serverGames = res.games.filter(g => { | |
58 | const mySide = | |
59 | g.players[0].uid == this.st.user.id | |
60 | ? "White" | |
61 | : "Black"; | |
62 | return !g["deletedBy" + mySide]; | |
63 | }); | |
64 | serverGames.forEach(g => g.type = "corr"); | |
65 | this.corrGames = serverGames; | |
afd3240d BA |
66 | }); |
67 | } | |
db1f1f9a BA |
68 | // Initialize connection |
69 | this.connexionString = | |
70 | params.socketUrl + | |
71 | "/?sid=" + | |
72 | this.st.user.sid + | |
73 | "&tmpId=" + | |
74 | getRandString() + | |
75 | "&page=" + | |
76 | encodeURIComponent(this.$route.path); | |
77 | this.conn = new WebSocket(this.connexionString); | |
78 | this.conn.onmessage = this.socketMessageListener; | |
79 | this.conn.onclose = this.socketCloseListener; | |
afd3240d | 80 | }, |
2f258c37 BA |
81 | mounted: function() { |
82 | const showType = localStorage.getItem("type-myGames") || "live"; | |
83 | this.setDisplay(showType); | |
84 | }, | |
23ecf008 BA |
85 | beforeDestroy: function() { |
86 | this.conn.send(JSON.stringify({code: "disconnect"})); | |
87 | }, | |
afd3240d | 88 | methods: { |
2f258c37 BA |
89 | setDisplay: function(type, e) { |
90 | this.display = type; | |
91 | localStorage.setItem("type-myGames", type); | |
6808d7a1 | 92 | let elt = e ? e.target : document.getElementById(type + "Games"); |
2f258c37 | 93 | elt.classList.add("active"); |
23ecf008 | 94 | elt.classList.remove("somethingnew"); //in case of |
6808d7a1 | 95 | if (elt.previousElementSibling) |
2f258c37 | 96 | elt.previousElementSibling.classList.remove("active"); |
6808d7a1 | 97 | else elt.nextElementSibling.classList.remove("active"); |
2f258c37 BA |
98 | }, |
99 | // TODO: classifyObject is redundant (see Hall.vue) | |
afd3240d | 100 | classifyObject: function(o) { |
6808d7a1 | 101 | return o.cadence.indexOf("d") === -1 ? "live" : "corr"; |
afd3240d | 102 | }, |
feaf1bf7 BA |
103 | showGame: function(game) { |
104 | // TODO: "isMyTurn" is duplicated (see GameList component). myColor also | |
105 | const isMyTurn = (g) => { | |
dc821737 | 106 | if (g.score != "*") return false; |
feaf1bf7 BA |
107 | const myColor = |
108 | g.players[0].uid == this.st.user.id || | |
109 | g.players[0].sid == this.st.user.sid | |
110 | ? "w" | |
111 | : "b"; | |
112 | const rem = g.movesCount % 2; | |
113 | return ( | |
114 | (rem == 0 && myColor == "w") || | |
115 | (rem == 1 && myColor == "b") | |
116 | ); | |
117 | }; | |
620a88ed | 118 | if (game.type == "live" || !isMyTurn(game)) { |
feaf1bf7 | 119 | this.$router.push("/game/" + game.id); |
620a88ed BA |
120 | return; |
121 | } | |
feaf1bf7 BA |
122 | // It's my turn in this game. Are there others? |
123 | let nextIds = ""; | |
124 | let otherCorrGamesMyTurn = this.corrGames.filter( | |
125 | g => g.id != game.id && isMyTurn(g)); | |
126 | if (otherCorrGamesMyTurn.length > 0) { | |
127 | nextIds += "/?next=["; | |
128 | otherCorrGamesMyTurn.forEach(g => { nextIds += g.id + ","; }); | |
129 | // Remove last comma and close array: | |
130 | nextIds = nextIds.slice(0, -1) + "]"; | |
131 | } | |
132 | this.$router.push("/game/" + game.id + nextIds); | |
db1f1f9a | 133 | }, |
aae89b49 BA |
134 | abortGame: function(game) { |
135 | // Special "trans-pages" case: from MyGames to Game | |
136 | // TODO: also for corr games? (It's less important) | |
137 | if (game.type == "live") { | |
138 | const oppsid = | |
139 | game.players[0].sid == this.st.user.sid | |
140 | ? game.players[1].sid | |
141 | : game.players[0].sid; | |
142 | this.conn.send( | |
143 | JSON.stringify( | |
144 | { | |
145 | code: "mabort", | |
146 | gid: game.id, | |
147 | // NOTE: target might not be online | |
148 | target: oppsid | |
149 | } | |
150 | ) | |
151 | ); | |
152 | } | |
153 | else if (!game.deletedByWhite || !game.deletedByBlack) { | |
154 | // Set score if game isn't deleted on server: | |
155 | ajax( | |
156 | "/games", | |
157 | "PUT", | |
158 | { | |
159 | gid: game.id, | |
160 | newObj: { | |
161 | score: "?", | |
162 | scoreMsg: getScoreMessage("?") | |
163 | } | |
164 | } | |
165 | ); | |
166 | } | |
167 | }, | |
db1f1f9a BA |
168 | socketMessageListener: function(msg) { |
169 | const data = JSON.parse(msg.data); | |
f9c36b2d | 170 | if (data.code == "changeturn") { |
db1f1f9a BA |
171 | let games = !!parseInt(data.gid) |
172 | ? this.corrGames | |
173 | : this.liveGames; | |
174 | // NOTE: new move itself is not received, because it wouldn't be used. | |
175 | let g = games.find(g => g.id == data.gid); | |
176 | this.$set(g, "movesCount", g.movesCount + 1); | |
23ecf008 BA |
177 | if ( |
178 | (g.type == "live" && this.display == "corr") || | |
179 | (g.type == "corr" && this.display == "live") | |
180 | ) { | |
181 | document | |
182 | .getElementById(g.type + "Games") | |
183 | .classList.add("somethingnew"); | |
184 | } | |
db1f1f9a BA |
185 | } |
186 | }, | |
187 | socketCloseListener: function() { | |
188 | this.conn = new WebSocket(this.connexionString); | |
189 | this.conn.addEventListener("message", this.socketMessageListener); | |
190 | this.conn.addEventListener("close", this.socketCloseListener); | |
6808d7a1 BA |
191 | } |
192 | } | |
afd3240d BA |
193 | }; |
194 | </script> | |
2f258c37 | 195 | |
e2590fa8 | 196 | <style lang="sass"> |
2f258c37 BA |
197 | .active |
198 | color: #42a983 | |
5fe7e71c BA |
199 | |
200 | .tabbtn | |
201 | background-color: #f9faee | |
e2590fa8 BA |
202 | |
203 | table.game-list | |
204 | max-height: 100% | |
23ecf008 BA |
205 | |
206 | .somethingnew | |
207 | background-color: #c5fefe !important | |
2f258c37 | 208 | </style> |