Commit | Line | Data |
---|---|---|
a6088c90 BA |
1 | <template lang="pug"> |
2 | .row | |
3 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 | |
b988c726 BA |
4 | input#modalAbort.modal(type="checkbox") |
5 | div(role="dialog" aria-labelledby="abortBoxTitle") | |
6 | .card.smallpad.small-modal.text-center | |
7 | label.modal-close(for="modalAbort") | |
8 | h3#abortBoxTitle.section {{ st.tr["Terminate game?"] }} | |
9 | button(@click="abortGame") {{ st.tr["Sorry I have to go"] }} | |
10 | button(@click="abortGame") {{ st.tr["Game seems over"] }} | |
11 | button(@click="abortGame") {{ st.tr["Game is too boring"] }} | |
b4fb1612 BA |
12 | BaseGame(:game="game" :vr="vr" ref="basegame" |
13 | @newmove="processMove" @gameover="gameOver") | |
6fba6e0c | 14 | // TODO: also show players names |
809ba2aa | 15 | div Time: {{ virtualClocks[0] }} - {{ virtualClocks[1] }} |
d4036efe | 16 | .button-group(v-if="game.mode!='analyze' && game.score=='*'") |
a6088c90 | 17 | button(@click="offerDraw") Draw |
b988c726 | 18 | button(@click="() => abortGame()") Abort |
a6088c90 | 19 | button(@click="resign") Resign |
6dd02928 | 20 | div(v-if="game.mode=='corr'") |
4b0384fa | 21 | textarea(v-show="score=='*' && vr.turn==game.mycolor" v-model="corrMsg") |
a6088c90 BA |
22 | div(v-show="cursor>=0") {{ moves[cursor].message }} |
23 | </template> | |
24 | ||
9aa229f3 BA |
25 | <!-- |
26 | // TODO: movelist dans basegame et chat ici | |
9aa229f3 BA |
27 | // ==> après, implémenter/vérifier les passages de challenges + parties en cours |
28 | // observer, | |
29 | // + problèmes, habiller et publier. (+ corr...) | |
6fba6e0c BA |
30 | // TODO: how to know who is observing ? Send message to everyone with game ID ? |
31 | // and then just listen to (dis)connect events | |
32 | // server always send "connect on " + URL ; then add to observers if game... | |
33 | // router when access a game page tell to server I joined + game ID (no need rid) | |
34 | // and ask server for current joined (= observers) | |
35 | // when send to chat (or a move), reach only this group (send gid along) | |
36 | // -> doivent être enregistrés comme observers au niveau du serveur... | |
37 | // non: poll users + events startObserving / stopObserving | |
38 | // (à faire au niveau du routeur ?) | |
9aa229f3 BA |
39 | --> |
40 | ||
a6088c90 | 41 | <script> |
46284a2f | 42 | import BaseGame from "@/components/BaseGame.vue"; |
a6088c90 BA |
43 | //import Chat from "@/components/Chat.vue"; |
44 | //import MoveList from "@/components/MoveList.vue"; | |
45 | import { store } from "@/store"; | |
967a2686 | 46 | import { GameStorage } from "@/utils/gameStorage"; |
5b87454c | 47 | import { ppt } from "@/utils/datetime"; |
a6088c90 BA |
48 | |
49 | export default { | |
50 | name: 'my-game', | |
51 | components: { | |
52 | BaseGame, | |
53 | }, | |
f7121527 | 54 | // gameRef: to find the game in (potentially remote) storage |
a6088c90 BA |
55 | data: function() { |
56 | return { | |
57 | st: store.state, | |
4b0384fa BA |
58 | gameRef: { //given in URL (rid = remote ID) |
59 | id: "", | |
60 | rid: "" | |
61 | }, | |
62 | game: { }, //passed to BaseGame | |
6fba6e0c BA |
63 | oppConnected: false, |
64 | corrMsg: "", //to send offline messages in corr games | |
809ba2aa | 65 | virtualClocks: [0, 0], //initialized with true game.clocks |
6dd02928 | 66 | vr: null, //"variant rules" object initialized from FEN |
6fba6e0c | 67 | drawOffer: "", //TODO: use for button style |
4b0384fa | 68 | people: [ ], //potential observers (TODO) |
a6088c90 BA |
69 | }; |
70 | }, | |
71 | watch: { | |
f7121527 | 72 | '$route' (to, from) { |
4fe5664d BA |
73 | if (!!to.params["id"]) |
74 | { | |
75 | this.gameRef.id = to.params["id"]; | |
76 | this.gameRef.rid = to.query["rid"]; | |
77 | this.loadGame(); | |
78 | } | |
a6088c90 | 79 | }, |
5b87454c | 80 | "game.clocks": function(newState) { |
809ba2aa BA |
81 | this.virtualClocks = newState.map(s => ppt(s)); |
82 | const currentTurn = this.vr.turn; | |
6fba6e0c | 83 | const colorIdx = ["w","b"].indexOf(currentTurn); |
809ba2aa BA |
84 | let countdown = newState[colorIdx] - |
85 | (Date.now() - this.game.initime[colorIdx])/1000; | |
86 | const myTurn = (currentTurn == this.game.mycolor); | |
809ba2aa | 87 | let clockUpdate = setInterval(() => { |
809ba2aa BA |
88 | if (countdown <= 0 || this.vr.turn != currentTurn) |
89 | { | |
90 | clearInterval(clockUpdate); | |
91 | if (countdown <= 0 && myTurn) | |
92 | { | |
93 | this.$refs["basegame"].endGame( | |
94 | this.game.mycolor=="w" ? "0-1" : "1-0", "Time"); | |
6fba6e0c BA |
95 | this.st.conn.send(JSON.stringify({ |
96 | code: "timeover", | |
97 | target: this.game.oppid, | |
98 | })); | |
809ba2aa BA |
99 | } |
100 | } | |
9aa229f3 BA |
101 | else |
102 | { | |
103 | // TODO: with Vue 3, just do this.virtualClocks[colorIdx] = ppt(--countdown) | |
104 | this.$set(this.virtualClocks, colorIdx, ppt(Math.max(0, --countdown))); | |
105 | } | |
809ba2aa | 106 | }, 1000); |
5b87454c | 107 | }, |
a6088c90 | 108 | }, |
a6088c90 | 109 | created: function() { |
f7121527 | 110 | if (!!this.$route.params["id"]) |
a6088c90 | 111 | { |
f7121527 BA |
112 | this.gameRef.id = this.$route.params["id"]; |
113 | this.gameRef.rid = this.$route.query["rid"]; | |
b196f8ea | 114 | this.loadGame(); |
f7121527 | 115 | } |
a6088c90 BA |
116 | const socketMessageListener = msg => { |
117 | const data = JSON.parse(msg.data); | |
a6088c90 BA |
118 | switch (data.code) |
119 | { | |
f7121527 | 120 | case "newmove": |
c4f91d3f BA |
121 | // NOTE: next call will trigger processMove() |
122 | this.$refs["basegame"].play(data.move, | |
123 | "receive", this.game.vname!="Dark" ? "animate" : null); | |
a6088c90 BA |
124 | break; |
125 | case "pong": //received if we sent a ping (game still alive on our side) | |
6fba6e0c | 126 | { |
a6088c90 BA |
127 | this.oppConnected = true; |
128 | // Send our "last state" informations to opponent(s) | |
6fba6e0c BA |
129 | const L = this.game.moves.length; |
130 | this.st.conn.send(JSON.stringify({ | |
131 | code: "lastate", | |
132 | target: this.game.oppid, | |
133 | gameId: this.gameRef.id, | |
134 | lastMove: (L>0 ? this.game.moves[L-1] : undefined), | |
135 | score: this.game.score, | |
136 | movesCount: L, | |
137 | drawOffer: this.drawOffer, | |
138 | clocks: this.game.clocks, | |
139 | })); | |
a6088c90 | 140 | break; |
6fba6e0c | 141 | } |
a6088c90 | 142 | case "lastate": //got opponent infos about last move |
6fba6e0c BA |
143 | { |
144 | const L = this.game.moves.length; | |
a6088c90 BA |
145 | if (this.gameRef.id != data.gameId) |
146 | break; //games IDs don't match: nothing we can do... | |
147 | // OK, opponent still in game (which might be over) | |
6fba6e0c | 148 | if (data.movesCount > L) |
a6088c90 | 149 | { |
6fba6e0c BA |
150 | // Just got last move from him |
151 | this.$refs["basegame"].play(data.lastMove, "receive"); | |
152 | if (data.score != "*" && this.game.score == "*") | |
153 | { | |
154 | // Opponent resigned or aborted game, or accepted draw offer | |
155 | // (this is not a stalemate or checkmate) | |
156 | this.$refs["basegame"].endGame(data.score, "Opponent action"); | |
157 | } | |
158 | this.game.clocks = data.clocks; | |
159 | this.drawOffer = data.drawOffer; | |
a6088c90 | 160 | } |
a6088c90 BA |
161 | else if (data.movesCount < L) |
162 | { | |
163 | // We must tell last move to opponent | |
4b0384fa | 164 | this.st.conn.send(JSON.stringify({ |
a6088c90 | 165 | code: "lastate", |
6fba6e0c | 166 | target: this.game.oppid, |
a6088c90 | 167 | gameId: this.gameRef.id, |
6fba6e0c BA |
168 | lastMove: (L>0 ? this.game.moves[L-1] : undefined), |
169 | score: this.game.score, | |
a6088c90 | 170 | movesCount: L, |
6fba6e0c BA |
171 | drawOffer: this.drawOffer, |
172 | clocks: this.game.clocks, | |
a6088c90 BA |
173 | })); |
174 | } | |
a6088c90 | 175 | break; |
6fba6e0c | 176 | } |
93d1d7a7 BA |
177 | case "resign": |
178 | this.$refs["basegame"].endGame( | |
179 | this.game.mycolor=="w" ? "1-0" : "0-1", "Resign"); | |
180 | break; | |
181 | case "timeover": | |
182 | this.$refs["basegame"].endGame( | |
183 | this.game.mycolor=="w" ? "1-0" : "0-1", "Time"); | |
a6088c90 | 184 | break; |
93d1d7a7 BA |
185 | case "abort": |
186 | this.$refs["basegame"].endGame("?", "Abort: " + data.msg); | |
187 | break; | |
2cc10cdb BA |
188 | case "draw": |
189 | this.$refs["basegame"].endGame("1/2", "Mutual agreement"); | |
190 | break; | |
191 | case "drawoffer": | |
192 | this.drawOffer = "received"; | |
193 | break; | |
93d1d7a7 BA |
194 | // TODO: drawaccepted (click draw button before sending move ==> draw offer in move) |
195 | // ==> on "newmove", check "drawOffer" field | |
a6088c90 BA |
196 | // TODO: also use (dis)connect info to count online players? |
197 | case "gameconnect": | |
198 | case "gamedisconnect": | |
6fba6e0c BA |
199 | const online = (data.code == "gameconnect"); |
200 | // If this is an opponent ? | |
201 | if (this.game.oppid == data.id) | |
202 | this.oppConnected = true; | |
203 | else | |
a6088c90 | 204 | { |
6fba6e0c BA |
205 | // Or an observer ? |
206 | if (!online) | |
207 | delete this.people[data.id]; | |
a6088c90 | 208 | else |
6fba6e0c | 209 | this.people[data.id] = data.name; |
a6088c90 BA |
210 | } |
211 | break; | |
212 | } | |
213 | }; | |
40477190 | 214 | // TODO: onopen, ask lastState informations + update observers and players status |
a6088c90 | 215 | const socketCloseListener = () => { |
4b0384fa BA |
216 | this.st.conn.addEventListener('message', socketMessageListener); |
217 | this.st.conn.addEventListener('close', socketCloseListener); | |
a6088c90 | 218 | }; |
4b0384fa BA |
219 | this.st.conn.onmessage = socketMessageListener; |
220 | this.st.conn.onclose = socketCloseListener; | |
a6088c90 | 221 | }, |
a6088c90 BA |
222 | methods: { |
223 | offerDraw: function() { | |
2cc10cdb | 224 | // TODO: also for corr games |
6fba6e0c BA |
225 | if (this.drawOffer == "received") |
226 | { | |
2cc10cdb | 227 | if (!confirm("Accept draw?")) |
6fba6e0c BA |
228 | return; |
229 | this.st.conn.send(JSON.stringify({code:"draw", target:this.game.oppid})); | |
2cc10cdb BA |
230 | this.$refs["basegame"].endGame("1/2", "Mutual agreement"); |
231 | } | |
6fba6e0c BA |
232 | else if (this.drawOffer == "sent") |
233 | this.drawOffer = ""; | |
234 | else | |
235 | { | |
236 | if (!confirm("Offer draw?")) | |
237 | return; | |
2cc10cdb | 238 | this.st.conn.send(JSON.stringify({code:"drawoffer", target:this.game.oppid})); |
a6088c90 BA |
239 | } |
240 | }, | |
241 | // + conn handling: "draw" message ==> agree for draw (if we have "drawOffered" at true) | |
242 | receiveDrawOffer: function() { | |
243 | //if (...) | |
244 | // TODO: ignore if preventDrawOffer is set; otherwise show modal box with option "prevent future offers" | |
245 | // if accept: send message "draw" | |
246 | }, | |
b988c726 | 247 | abortGame: function(event) { |
9aa229f3 | 248 | let modalBox = document.getElementById("modalAbort"); |
b988c726 BA |
249 | if (!event) |
250 | { | |
251 | // First call show options: | |
b988c726 BA |
252 | modalBox.checked = true; |
253 | } | |
254 | else | |
255 | { | |
9aa229f3 BA |
256 | modalBox.checked = false; //decision made: box disappear |
257 | const message = event.target.innerText; | |
d4036efe | 258 | // Next line will trigger a "gameover" event, bubbling up till here |
9aa229f3 | 259 | this.$refs["basegame"].endGame("?", "Abort: " + message); |
6fba6e0c BA |
260 | this.st.conn.send(JSON.stringify({ |
261 | code: "abort", | |
262 | msg: message, | |
263 | target: this.game.oppid, | |
264 | })); | |
b988c726 | 265 | } |
a6088c90 BA |
266 | }, |
267 | resign: function(e) { | |
268 | if (!confirm("Resign the game?")) | |
269 | return; | |
6fba6e0c BA |
270 | this.st.conn.send(JSON.stringify({ |
271 | code: "resign", | |
272 | target: this.game.oppid, | |
273 | })); | |
93d1d7a7 | 274 | // Next line will trigger a "gameover" event, bubbling up till here |
809ba2aa BA |
275 | this.$refs["basegame"].endGame( |
276 | this.game.mycolor=="w" ? "0-1" : "1-0", "Resign"); | |
a6088c90 | 277 | }, |
967a2686 BA |
278 | // 3 cases for loading a game: |
279 | // - from indexedDB (running or completed live game I play) | |
b196f8ea BA |
280 | // - from server (one correspondance game I play[ed] or not) |
281 | // - from remote peer (one live game I don't play, finished or not) | |
967a2686 BA |
282 | loadGame: function(game) { |
283 | const afterRetrieval = async (game) => { | |
d4036efe BA |
284 | const vModule = await import("@/variants/" + game.vname + ".js"); |
285 | window.V = vModule.VariantRules; | |
809ba2aa | 286 | this.vr = new V(game.fen); |
6fba6e0c | 287 | const myIdx = game.players.findIndex(p => p.sid == this.st.user.sid); |
4b0384fa BA |
288 | this.game = Object.assign({}, |
289 | game, | |
290 | // NOTE: assign mycolor here, since BaseGame could also bs VS computer | |
6fba6e0c BA |
291 | { |
292 | mycolor: [undefined,"w","b"][myIdx+1], | |
293 | // opponent sid not strictly required, but easier | |
294 | oppid: (myIdx < 0 ? undefined : game.players[1-myIdx].sid), | |
295 | } | |
4b0384fa | 296 | ); |
6fba6e0c BA |
297 | if (!!this.game.oppid) |
298 | { | |
299 | // Send ping to server (answer pong if players[s] are connected) | |
a36a09c0 | 300 | this.st.conn.send(JSON.stringify({code:"ping", target:this.game.oppid})); |
6fba6e0c | 301 | } |
967a2686 BA |
302 | }; |
303 | if (!!game) | |
304 | return afterRetrival(game); | |
305 | if (!!this.gameRef.rid) | |
306 | { | |
307 | // TODO: just send a game request message to the remote player, | |
308 | // and when receiving answer just call loadGame(received_game) | |
309 | // + remote peer should have registered us as an observer | |
310 | // (send moves updates + resign/abort/draw actions) | |
967a2686 BA |
311 | } |
312 | else | |
313 | { | |
314 | GameStorage.get(this.gameRef.id, async (game) => { | |
315 | afterRetrieval(game); | |
316 | }); | |
317 | } | |
a6088c90 | 318 | }, |
9d54ab89 | 319 | // Post-process a move (which was just played) |
ce87ac6a | 320 | processMove: function(move) { |
b4fb1612 BA |
321 | if (!this.game.mycolor) |
322 | return; //I'm just an observer | |
9d54ab89 | 323 | // Update storage (corr or live) |
6fba6e0c | 324 | const colorIdx = ["w","b"].indexOf(move.color); |
9d54ab89 BA |
325 | // https://stackoverflow.com/a/38750895 |
326 | const allowed_fields = ["appear", "vanish", "start", "end"]; | |
327 | const filtered_move = Object.keys(move) | |
328 | .filter(key => allowed_fields.includes(key)) | |
329 | .reduce((obj, key) => { | |
8a7452b5 | 330 | obj[key] = move[key]; |
9d54ab89 BA |
331 | return obj; |
332 | }, {}); | |
b4fb1612 | 333 | // Send move ("newmove" event) to opponent(s) (if ours) |
c4f91d3f | 334 | let addTime = undefined; |
9d54ab89 | 335 | if (move.color == this.game.mycolor) |
b4fb1612 | 336 | { |
809ba2aa | 337 | const elapsed = Date.now() - this.game.initime[colorIdx]; |
5b87454c BA |
338 | // elapsed time is measured in milliseconds |
339 | addTime = this.game.increment - elapsed/1000; | |
6fba6e0c BA |
340 | this.st.conn.send(JSON.stringify({ |
341 | code: "newmove", | |
342 | target: this.game.oppid, | |
343 | move: Object.assign({}, filtered_move, {addTime: addTime}), | |
344 | })); | |
b4fb1612 | 345 | } |
5b87454c BA |
346 | else |
347 | addTime = move.addTime; //supposed transmitted | |
6fba6e0c | 348 | const nextIdx = ["w","b"].indexOf(this.vr.turn); |
967a2686 BA |
349 | GameStorage.update(this.gameRef.id, |
350 | { | |
9d54ab89 | 351 | colorIdx: colorIdx, |
809ba2aa | 352 | nextIdx: nextIdx, |
9d54ab89 BA |
353 | move: filtered_move, |
354 | fen: move.fen, | |
c4f91d3f | 355 | addTime: addTime, |
9d54ab89 | 356 | }); |
967a2686 BA |
357 | // Also update current game object: |
358 | this.game.moves.push(move); | |
359 | this.game.fen = move.fen; | |
27d18a24 BA |
360 | //TODO: just this.game.clocks[colorIdx] += (!!addTime ? addTime : 0); |
361 | this.$set(this.game.clocks, colorIdx, | |
362 | this.game.clocks[colorIdx] + (!!addTime ? addTime : 0)); | |
809ba2aa | 363 | this.game.initime[nextIdx] = Date.now(); |
b4fb1612 | 364 | }, |
93d1d7a7 | 365 | // TODO: this update function should also work for corr games |
b4fb1612 | 366 | gameOver: function(score) { |
93d1d7a7 | 367 | this.game.mode = "analyze"; |
5b87454c BA |
368 | GameStorage.update(this.gameRef.id, |
369 | { | |
9d54ab89 BA |
370 | score: score, |
371 | }); | |
ce87ac6a | 372 | }, |
a6088c90 BA |
373 | }, |
374 | }; | |
375 | </script> |