Commit | Line | Data |
---|---|---|
a6088c90 | 1 | <template lang="pug"> |
7aa548e7 | 2 | main |
a1c48034 | 3 | input#modalChat.modal(type="checkbox" @change="toggleChat") |
dcd68c41 BA |
4 | div#chatWrap(role="dialog" data-checkbox="modalChat" |
5 | aria-labelledby="inputChat") | |
a1c48034 BA |
6 | #chat.card |
7 | label.modal-close(for="modalChat") | |
3837d4f7 | 8 | Chat(:players="game.players" :pastChats="game.chats" |
a1c48034 | 9 | @newchat-sent="finishSendChat" @newchat-received="processChat") |
7aa548e7 | 10 | .row |
050ae3b5 | 11 | #aboveBoard.col-sm-12.col-md-9.col-md-offset-3.col-lg-10.col-lg-offset-2 |
cf94b843 | 12 | button#chatBtn(onClick="doClick('modalChat')") Chat |
430a2038 | 13 | #actions(v-if="game.mode!='analyze' && game.score=='*'") |
dcd68c41 | 14 | button(@click="clickDraw" :class="{['draw-' + drawOffer]: true}") Draw |
7aa548e7 BA |
15 | button(@click="abortGame") Abort |
16 | button(@click="resign") Resign | |
050ae3b5 BA |
17 | #playersInfo |
18 | p | |
19 | span.name(:class="{connected: isConnected(0)}") {{ game.players[0].name }} | |
20 | span.time(v-if="game.score=='*'") {{ virtualClocks[0] }} | |
21 | span.split-names - | |
22 | span.name(:class="{connected: isConnected(1)}") {{ game.players[1].name }} | |
23 | span.time(v-if="game.score=='*'") {{ virtualClocks[1] }} | |
430a2038 BA |
24 | BaseGame(:game="game" :vr="vr" ref="basegame" |
25 | @newmove="processMove" @gameover="gameOver") | |
a6088c90 BA |
26 | </template> |
27 | ||
28 | <script> | |
46284a2f | 29 | import BaseGame from "@/components/BaseGame.vue"; |
f21cd6d9 | 30 | import Chat from "@/components/Chat.vue"; |
a6088c90 | 31 | import { store } from "@/store"; |
967a2686 | 32 | import { GameStorage } from "@/utils/gameStorage"; |
5b87454c | 33 | import { ppt } from "@/utils/datetime"; |
66d03f23 | 34 | import { extractTime } from "@/utils/timeControl"; |
f41ce580 | 35 | import { ArrayFun } from "@/utils/array"; |
dcd68c41 | 36 | import { processModalClick } from "@/utils/modalClick"; |
a6088c90 BA |
37 | |
38 | export default { | |
39 | name: 'my-game', | |
40 | components: { | |
41 | BaseGame, | |
5c8e044f | 42 | Chat, |
a6088c90 | 43 | }, |
f7121527 | 44 | // gameRef: to find the game in (potentially remote) storage |
a6088c90 BA |
45 | data: function() { |
46 | return { | |
47 | st: store.state, | |
4b0384fa BA |
48 | gameRef: { //given in URL (rid = remote ID) |
49 | id: "", | |
50 | rid: "" | |
51 | }, | |
f41ce580 | 52 | game: {players:[{name:""},{name:""}]}, //passed to BaseGame |
809ba2aa | 53 | virtualClocks: [0, 0], //initialized with true game.clocks |
6dd02928 | 54 | vr: null, //"variant rules" object initialized from FEN |
dcd68c41 BA |
55 | drawOffer: "", |
56 | people: {}, //players + observers | |
760adbce | 57 | lastate: undefined, //used if opponent send lastate before game is ready |
72ccbd67 | 58 | repeat: {}, //detect position repetition |
a6088c90 BA |
59 | }; |
60 | }, | |
61 | watch: { | |
5f131484 BA |
62 | "$route": function(to, from) { |
63 | this.gameRef.id = to.params["id"]; | |
64 | this.gameRef.rid = to.query["rid"]; | |
65 | this.loadGame(); | |
a6088c90 | 66 | }, |
5b87454c | 67 | "game.clocks": function(newState) { |
b7cbbda1 | 68 | if (this.game.moves.length < 2 || this.game.score != "*") |
dce792f6 | 69 | { |
b7cbbda1 | 70 | // 1st move not completed yet, or game over: freeze time |
dce792f6 BA |
71 | this.virtualClocks = newState.map(s => ppt(s)); |
72 | return; | |
73 | } | |
809ba2aa | 74 | const currentTurn = this.vr.turn; |
6fba6e0c | 75 | const colorIdx = ["w","b"].indexOf(currentTurn); |
809ba2aa BA |
76 | let countdown = newState[colorIdx] - |
77 | (Date.now() - this.game.initime[colorIdx])/1000; | |
c0b27606 BA |
78 | this.virtualClocks = [0,1].map(i => { |
79 | const removeTime = i == colorIdx | |
80 | ? (Date.now() - this.game.initime[colorIdx])/1000 | |
81 | : 0; | |
82 | return ppt(newState[i] - removeTime); | |
83 | }); | |
809ba2aa | 84 | let clockUpdate = setInterval(() => { |
e69f159d | 85 | if (countdown < 0 || this.vr.turn != currentTurn || this.game.score != "*") |
809ba2aa BA |
86 | { |
87 | clearInterval(clockUpdate); | |
e69f159d | 88 | if (countdown < 0) |
430a2038 | 89 | this.gameOver(this.vr.turn=="w" ? "0-1" : "1-0", "Time"); |
809ba2aa | 90 | } |
9aa229f3 BA |
91 | else |
92 | { | |
93 | // TODO: with Vue 3, just do this.virtualClocks[colorIdx] = ppt(--countdown) | |
94 | this.$set(this.virtualClocks, colorIdx, ppt(Math.max(0, --countdown))); | |
95 | } | |
809ba2aa | 96 | }, 1000); |
5b87454c | 97 | }, |
92a523d1 | 98 | }, |
dcd68c41 | 99 | // NOTE: some redundant code with Hall.vue (related to people array) |
a6088c90 | 100 | created: function() { |
5f131484 BA |
101 | // Always add myself to players' list |
102 | const my = this.st.user; | |
dcd68c41 | 103 | this.$set(this.people, my.sid, {id:my.id, name:my.name}); |
dc284d90 BA |
104 | this.gameRef.id = this.$route.params["id"]; |
105 | this.gameRef.rid = this.$route.query["rid"]; //may be undefined | |
760adbce | 106 | // Define socket .onmessage() and .onclose() events: |
5f131484 | 107 | this.st.conn.onmessage = this.socketMessageListener; |
cdb34c93 BA |
108 | const socketCloseListener = () => { |
109 | store.socketCloseListener(); //reinitialize connexion (in store.js) | |
a9b131f1 | 110 | this.st.conn.addEventListener('message', this.socketMessageListener); |
cdb34c93 BA |
111 | this.st.conn.addEventListener('close', socketCloseListener); |
112 | }; | |
cdb34c93 | 113 | this.st.conn.onclose = socketCloseListener; |
760adbce BA |
114 | // Socket init required before loading remote game: |
115 | const socketInit = (callback) => { | |
116 | if (!!this.st.conn && this.st.conn.readyState == 1) //1 == OPEN state | |
117 | callback(); | |
118 | else //socket not ready yet (initial loading) | |
119 | this.st.conn.onopen = callback; | |
120 | }; | |
121 | if (!this.gameRef.rid) //game stored locally or on server | |
122 | this.loadGame(null, () => socketInit(this.roomInit)); | |
123 | else //game stored remotely: need socket to retrieve it | |
124 | { | |
125 | // NOTE: the callback "roomInit" will be lost, so we don't provide it. | |
126 | // --> It will be given when receiving "fullgame" socket event. | |
127 | // A more general approach would be to store it somewhere. | |
128 | socketInit(this.loadGame); | |
129 | } | |
cdb34c93 | 130 | }, |
dcd68c41 BA |
131 | mounted: function() { |
132 | document.getElementById("chatWrap").addEventListener( | |
133 | "click", processModalClick); | |
134 | }, | |
cdb34c93 | 135 | methods: { |
760adbce BA |
136 | // O.1] Ask server for room composition: |
137 | roomInit: function() { | |
138 | this.st.conn.send(JSON.stringify({code:"pollclients"})); | |
5f131484 | 139 | }, |
050ae3b5 BA |
140 | isConnected: function(index) { |
141 | const name = this.game.players[index].name; | |
142 | if (this.st.user.name == name) | |
143 | return true; | |
dcd68c41 | 144 | return Object.values(this.people).some(p => p.name == name); |
050ae3b5 | 145 | }, |
cdb34c93 | 146 | socketMessageListener: function(msg) { |
a6088c90 | 147 | const data = JSON.parse(msg.data); |
a6088c90 BA |
148 | switch (data.code) |
149 | { | |
6d9f4315 BA |
150 | case "duplicate": |
151 | alert("Warning: duplicate 'offline' connection"); | |
152 | break; | |
5f131484 BA |
153 | // 0.2] Receive clients list (just socket IDs) |
154 | case "pollclients": | |
155 | { | |
156 | data.sockIds.forEach(sid => { | |
dcd68c41 BA |
157 | // TODO: understand clearly what happens here, problems when a |
158 | // game is quit, and then launch a new game from hall. | |
159 | if (!!this.people[sid]) | |
160 | return; | |
161 | this.$set(this.people, sid, {id:0, name:""}); | |
5f131484 BA |
162 | // Ask only identity |
163 | this.st.conn.send(JSON.stringify({code:"askidentity", target:sid})); | |
164 | }); | |
165 | break; | |
166 | } | |
167 | case "askidentity": | |
168 | { | |
169 | // Request for identification: reply if I'm not anonymous | |
170 | if (this.st.user.id > 0) | |
171 | { | |
dcd68c41 BA |
172 | this.st.conn.send(JSON.stringify({code:"identity", |
173 | user: { | |
174 | // NOTE: decompose to avoid revealing email | |
175 | name: this.st.user.name, | |
176 | sid: this.st.user.sid, | |
177 | id: this.st.user.id, | |
178 | }, | |
179 | target:data.from})); | |
5f131484 BA |
180 | } |
181 | break; | |
182 | } | |
183 | case "identity": | |
184 | { | |
dcd68c41 | 185 | let player = this.people[data.user.sid]; |
cd0d7743 BA |
186 | // NOTE: sometimes player.id fails because player is undefined... |
187 | // Probably because the event was meant for Hall? | |
188 | if (!player) | |
189 | return; | |
f41ce580 BA |
190 | player.id = data.user.id; |
191 | player.name = data.user.name; | |
192 | // Sending last state only for live games: corr games are complete | |
dcd68c41 | 193 | if (this.game.type == "live" && this.game.oppsid == data.user.sid) |
411d23cd | 194 | { |
f41ce580 | 195 | // Send our "last state" informations to opponent |
411d23cd | 196 | const L = this.game.moves.length; |
6d9f4315 BA |
197 | let lastMove = (L>0 ? this.game.moves[L-1] : undefined); |
198 | if (!!lastMove && this.drawOffer == "sent") | |
199 | lastMove.draw = true; | |
411d23cd BA |
200 | this.st.conn.send(JSON.stringify({ |
201 | code: "lastate", | |
dcd68c41 | 202 | target: data.user.sid, |
f41ce580 BA |
203 | state: |
204 | { | |
6d9f4315 | 205 | lastMove: lastMove, |
f41ce580 BA |
206 | score: this.game.score, |
207 | movesCount: L, | |
f41ce580 BA |
208 | clocks: this.game.clocks, |
209 | } | |
411d23cd BA |
210 | })); |
211 | } | |
a6088c90 | 212 | break; |
6fba6e0c | 213 | } |
c6788ecf BA |
214 | case "askgame": |
215 | // Send current (live) game | |
216 | const myGame = | |
217 | { | |
218 | // Minimal game informations: | |
219 | id: this.game.id, | |
ab6f48ea | 220 | players: this.game.players.map(p => { return {name:p.name}; }), |
c6788ecf BA |
221 | vid: this.game.vid, |
222 | timeControl: this.game.timeControl, | |
223 | }; | |
224 | this.st.conn.send(JSON.stringify({code:"game", | |
225 | game:myGame, target:data.from})); | |
226 | break; | |
f41ce580 | 227 | case "newmove": |
06e79b07 | 228 | this.$set(this.game, "moveToPlay", data.move); //TODO: Vue3... |
f41ce580 | 229 | break; |
a6088c90 | 230 | case "lastate": //got opponent infos about last move |
6fba6e0c | 231 | { |
760adbce BA |
232 | this.lastate = data; |
233 | if (!!this.game.type) //game is loaded | |
234 | this.processLastate(); | |
235 | //else: will be processed when game is ready | |
a6088c90 | 236 | break; |
6fba6e0c | 237 | } |
93d1d7a7 | 238 | case "resign": |
430a2038 | 239 | this.gameOver(data.side=="b" ? "1-0" : "0-1", "Resign"); |
93d1d7a7 | 240 | break; |
93d1d7a7 | 241 | case "abort": |
430a2038 | 242 | this.gameOver("?", "Abort"); |
93d1d7a7 | 243 | break; |
2cc10cdb | 244 | case "draw": |
dcd68c41 | 245 | this.gameOver("1/2", data.message); |
2cc10cdb BA |
246 | break; |
247 | case "drawoffer": | |
760adbce | 248 | this.drawOffer = "received"; //TODO: observers don't know who offered draw |
6d9f4315 | 249 | break; |
7e1a1fe9 | 250 | case "askfullgame": |
dc284d90 | 251 | this.st.conn.send(JSON.stringify({code:"fullgame", game:this.game, target:data.from})); |
7e1a1fe9 | 252 | break; |
5f131484 | 253 | case "fullgame": |
760adbce BA |
254 | // Callback "roomInit" to poll clients only after game is loaded |
255 | this.loadGame(data.game, this.roomInit); | |
5f131484 | 256 | break; |
5f131484 BA |
257 | case "connect": |
258 | { | |
dcd68c41 BA |
259 | // TODO: next condition is probably not required. See note line 150 |
260 | if (!this.people[data.from]) | |
261 | { | |
262 | this.$set(this.people, data.from, {name:"", id:0}); | |
263 | this.st.conn.send(JSON.stringify({code:"askidentity", target:data.from})); | |
264 | } | |
5f131484 BA |
265 | break; |
266 | } | |
267 | case "disconnect": | |
dcd68c41 | 268 | this.$delete(this.people, data.from); |
a6088c90 BA |
269 | break; |
270 | } | |
cdb34c93 | 271 | }, |
760adbce BA |
272 | // lastate was received, but maybe game wasn't ready yet: |
273 | processLastate: function() { | |
274 | const data = this.lastate; | |
275 | this.lastate = undefined; //security... | |
276 | const L = this.game.moves.length; | |
277 | if (data.movesCount > L) | |
278 | { | |
279 | // Just got last move from him | |
06e79b07 | 280 | this.$set(this.game, "moveToPlay", data.lastMove); |
760adbce BA |
281 | if (data.score != "*" && this.game.score == "*") |
282 | { | |
283 | // Opponent resigned or aborted game, or accepted draw offer | |
284 | // (this is not a stalemate or checkmate) | |
430a2038 | 285 | this.gameOver(data.score, "Opponent action"); |
760adbce BA |
286 | } |
287 | this.game.clocks = data.clocks; //TODO: check this? | |
288 | if (!!data.lastMove.draw) | |
289 | this.drawOffer = "received"; | |
290 | } | |
291 | }, | |
dcd68c41 | 292 | clickDraw: function() { |
a1c48034 | 293 | if (["received","threerep"].includes(this.drawOffer)) |
6fba6e0c | 294 | { |
2cc10cdb | 295 | if (!confirm("Accept draw?")) |
6fba6e0c | 296 | return; |
a1c48034 BA |
297 | const message = (this.drawOffer == "received" |
298 | ? "Mutual agreement" | |
299 | : "Three repetitions"); | |
dcd68c41 BA |
300 | Object.keys(this.people).forEach(sid => { |
301 | if (sid != this.st.user.sid) | |
302 | { | |
303 | this.st.conn.send(JSON.stringify({code:"draw", | |
304 | message:message, target:sid})); | |
305 | } | |
306 | }); | |
a1c48034 | 307 | this.gameOver("1/2", message); |
2cc10cdb | 308 | } |
6fba6e0c | 309 | else if (this.drawOffer == "sent") |
b7cbbda1 | 310 | { |
6fba6e0c | 311 | this.drawOffer = ""; |
b7cbbda1 BA |
312 | if (this.game.type == "corr") |
313 | GameStorage.update(this.gameRef.id, {drawOffer: false}); | |
314 | } | |
6fba6e0c BA |
315 | else |
316 | { | |
317 | if (!confirm("Offer draw?")) | |
318 | return; | |
760adbce | 319 | this.drawOffer = "sent"; |
dcd68c41 BA |
320 | Object.keys(this.people).forEach(sid => { |
321 | if (sid != this.st.user.sid) | |
322 | this.st.conn.send(JSON.stringify({code:"drawoffer", target:sid})); | |
760adbce | 323 | }); |
b7cbbda1 BA |
324 | if (this.game.type == "corr") |
325 | GameStorage.update(this.gameRef.id, {drawOffer: true}); | |
a6088c90 BA |
326 | } |
327 | }, | |
7f3484bd BA |
328 | abortGame: function() { |
329 | if (!confirm(this.st.tr["Terminate game?"])) | |
330 | return; | |
430a2038 | 331 | this.gameOver("?", "Abort"); |
dcd68c41 BA |
332 | Object.keys(this.people).forEach(sid => { |
333 | if (sid != this.st.user.sid) | |
5f131484 BA |
334 | { |
335 | this.st.conn.send(JSON.stringify({ | |
336 | code: "abort", | |
dcd68c41 | 337 | target: sid, |
5f131484 BA |
338 | })); |
339 | } | |
7f3484bd | 340 | }); |
a6088c90 BA |
341 | }, |
342 | resign: function(e) { | |
343 | if (!confirm("Resign the game?")) | |
344 | return; | |
dcd68c41 BA |
345 | Object.keys(this.people).forEach(sid => { |
346 | if (sid != this.st.user.sid) | |
760adbce BA |
347 | { |
348 | this.st.conn.send(JSON.stringify({code:"resign", | |
dcd68c41 | 349 | side:this.game.mycolor, target:sid})); |
760adbce BA |
350 | } |
351 | }); | |
430a2038 | 352 | this.gameOver(this.game.mycolor=="w" ? "0-1" : "1-0", "Resign"); |
a6088c90 | 353 | }, |
967a2686 BA |
354 | // 3 cases for loading a game: |
355 | // - from indexedDB (running or completed live game I play) | |
b196f8ea BA |
356 | // - from server (one correspondance game I play[ed] or not) |
357 | // - from remote peer (one live game I don't play, finished or not) | |
760adbce | 358 | loadGame: function(game, callback) { |
967a2686 | 359 | const afterRetrieval = async (game) => { |
f41ce580 BA |
360 | const vModule = await import("@/variants/" + game.vname + ".js"); |
361 | window.V = vModule.VariantRules; | |
362 | this.vr = new V(game.fen); | |
c0b27606 | 363 | const gtype = (game.timeControl.indexOf('d') >= 0 ? "corr" : "live"); |
92a523d1 | 364 | const tc = extractTime(game.timeControl); |
c0b27606 BA |
365 | if (gtype == "corr") |
366 | { | |
f41ce580 BA |
367 | if (game.players[0].color == "b") |
368 | { | |
369 | // Adopt the same convention for live and corr games: [0] = white | |
370 | [ game.players[0], game.players[1] ] = | |
371 | [ game.players[1], game.players[0] ]; | |
372 | } | |
c0b27606 | 373 | // corr game: needs to compute the clocks + initime |
7f3484bd | 374 | // NOTE: clocks in seconds, initime in milliseconds |
92a523d1 | 375 | game.clocks = [tc.mainTime, tc.mainTime]; |
92b82def | 376 | game.moves.sort((m1,m2) => m1.idx - m2.idx); //in case of |
b7cbbda1 | 377 | if (game.score == "*") //otherwise no need to bother with time |
92a523d1 | 378 | { |
b7cbbda1 BA |
379 | game.initime = [0, 0]; |
380 | const L = game.moves.length; | |
381 | if (L >= 3) | |
5f131484 | 382 | { |
b7cbbda1 BA |
383 | let addTime = [0, 0]; |
384 | for (let i=2; i<L; i++) | |
385 | { | |
386 | addTime[i%2] += tc.increment - | |
387 | (game.moves[i].played - game.moves[i-1].played) / 1000; | |
388 | } | |
389 | for (let i=0; i<=1; i++) | |
390 | game.clocks[i] += addTime[i]; | |
5f131484 | 391 | } |
b7cbbda1 BA |
392 | if (L >= 1) |
393 | game.initime[L%2] = game.moves[L-1].played; | |
394 | if (game.drawOffer) | |
395 | this.drawOffer = "received"; | |
92a523d1 | 396 | } |
92b82def | 397 | // Now that we used idx and played, re-format moves as for live games |
6d68309a | 398 | game.moves = game.moves.map( (m) => { |
92b82def | 399 | const s = m.squares; |
6d68309a | 400 | return { |
92b82def BA |
401 | appear: s.appear, |
402 | vanish: s.vanish, | |
403 | start: s.start, | |
404 | end: s.end, | |
92b82def BA |
405 | }; |
406 | }); | |
3837d4f7 BA |
407 | // Also sort chat messages (if any) |
408 | game.chats.sort( (c1,c2) => { return c2.added - c1.added; }); | |
c0b27606 | 409 | } |
f41ce580 BA |
410 | const myIdx = game.players.findIndex(p => { |
411 | return p.sid == this.st.user.sid || p.uid == this.st.user.id; | |
412 | }); | |
92a523d1 | 413 | if (gtype == "live" && game.clocks[0] < 0) //game unstarted |
66d03f23 BA |
414 | { |
415 | game.clocks = [tc.mainTime, tc.mainTime]; | |
b7cbbda1 | 416 | if (game.score == "*") |
22efa391 | 417 | { |
b7cbbda1 BA |
418 | game.initime[0] = Date.now(); |
419 | if (myIdx >= 0) | |
22efa391 | 420 | { |
b7cbbda1 BA |
421 | // I play in this live game; corr games don't have clocks+initime |
422 | GameStorage.update(game.id, | |
423 | { | |
424 | clocks: game.clocks, | |
425 | initime: game.initime, | |
426 | }); | |
427 | } | |
22efa391 | 428 | } |
66d03f23 | 429 | } |
4b0384fa BA |
430 | this.game = Object.assign({}, |
431 | game, | |
cf742aaf | 432 | // NOTE: assign mycolor here, since BaseGame could also be VS computer |
6fba6e0c | 433 | { |
c0b27606 | 434 | type: gtype, |
66d03f23 | 435 | increment: tc.increment, |
6fba6e0c | 436 | mycolor: [undefined,"w","b"][myIdx+1], |
5f131484 BA |
437 | // opponent sid not strictly required (or available), but easier |
438 | // at least oppsid or oppid is available anyway: | |
439 | oppsid: (myIdx < 0 ? undefined : game.players[1-myIdx].sid), | |
440 | oppid: (myIdx < 0 ? undefined : game.players[1-myIdx].uid), | |
6fba6e0c | 441 | } |
4b0384fa | 442 | ); |
72ccbd67 | 443 | this.repeat = {}; //reset |
760adbce BA |
444 | if (!!this.lastate) //lastate arrived before game was loaded: |
445 | this.processLastate(); | |
446 | callback(); | |
967a2686 BA |
447 | }; |
448 | if (!!game) | |
dc284d90 | 449 | return afterRetrieval(game); |
967a2686 BA |
450 | if (!!this.gameRef.rid) |
451 | { | |
760adbce | 452 | // Remote live game: forgetting about callback func... (TODO: design) |
5f131484 BA |
453 | this.st.conn.send(JSON.stringify( |
454 | {code:"askfullgame", target:this.gameRef.rid})); | |
967a2686 BA |
455 | } |
456 | else | |
457 | { | |
f41ce580 | 458 | // Local or corr game |
11667c79 | 459 | GameStorage.get(this.gameRef.id, afterRetrieval); |
967a2686 | 460 | } |
a6088c90 | 461 | }, |
9d54ab89 | 462 | // Post-process a move (which was just played) |
ce87ac6a | 463 | processMove: function(move) { |
a1c48034 | 464 | // Update storage (corr or live) if I play in the game |
6fba6e0c | 465 | const colorIdx = ["w","b"].indexOf(move.color); |
9d54ab89 | 466 | // https://stackoverflow.com/a/38750895 |
a1c48034 BA |
467 | if (!!this.game.mycolor) |
468 | { | |
469 | const allowed_fields = ["appear", "vanish", "start", "end"]; | |
470 | // NOTE: 'var' to see this variable outside this block | |
471 | var filtered_move = Object.keys(move) | |
472 | .filter(key => allowed_fields.includes(key)) | |
473 | .reduce((obj, key) => { | |
474 | obj[key] = move[key]; | |
475 | return obj; | |
476 | }, {}); | |
477 | } | |
dc284d90 | 478 | // Send move ("newmove" event) to people in the room (if our turn) |
dce792f6 | 479 | let addTime = 0; |
9d54ab89 | 480 | if (move.color == this.game.mycolor) |
b4fb1612 | 481 | { |
dce792f6 BA |
482 | if (this.game.moves.length >= 2) //after first move |
483 | { | |
484 | const elapsed = Date.now() - this.game.initime[colorIdx]; | |
485 | // elapsed time is measured in milliseconds | |
486 | addTime = this.game.increment - elapsed/1000; | |
487 | } | |
6d68309a | 488 | let sendMove = Object.assign({}, filtered_move, {addTime: addTime}); |
dcd68c41 BA |
489 | Object.keys(this.people).forEach(sid => { |
490 | if (sid != this.st.user.sid) | |
dc284d90 BA |
491 | { |
492 | this.st.conn.send(JSON.stringify({ | |
493 | code: "newmove", | |
dcd68c41 | 494 | target: sid, |
dc284d90 BA |
495 | move: sendMove, |
496 | })); | |
497 | } | |
498 | }); | |
b4fb1612 | 499 | } |
5b87454c BA |
500 | else |
501 | addTime = move.addTime; //supposed transmitted | |
6fba6e0c | 502 | const nextIdx = ["w","b"].indexOf(this.vr.turn); |
6d68309a BA |
503 | // Since corr games are stored at only one location, update should be |
504 | // done only by one player for each move: | |
a1c48034 BA |
505 | if (!!this.game.mycolor && |
506 | (this.game.type == "live" || move.color == this.game.mycolor)) | |
967a2686 | 507 | { |
e69f159d | 508 | if (this.game.type == "corr") |
f41ce580 | 509 | { |
e69f159d | 510 | GameStorage.update(this.gameRef.id, |
6d68309a | 511 | { |
e69f159d BA |
512 | fen: move.fen, |
513 | move: | |
514 | { | |
515 | squares: filtered_move, | |
e69f159d BA |
516 | played: Date.now(), //TODO: on server? |
517 | idx: this.game.moves.length, | |
518 | }, | |
519 | }); | |
520 | } | |
521 | else //live | |
522 | { | |
523 | GameStorage.update(this.gameRef.id, | |
524 | { | |
525 | fen: move.fen, | |
526 | move: filtered_move, | |
527 | clocks: this.game.clocks.map((t,i) => i==colorIdx | |
528 | ? this.game.clocks[i] + addTime | |
529 | : this.game.clocks[i]), | |
530 | initime: this.game.initime.map((t,i) => i==nextIdx | |
531 | ? Date.now() | |
532 | : this.game.initime[i]), | |
533 | }); | |
534 | } | |
6d68309a | 535 | } |
967a2686 BA |
536 | // Also update current game object: |
537 | this.game.moves.push(move); | |
538 | this.game.fen = move.fen; | |
760adbce | 539 | //TODO: (Vue3) just this.game.clocks[colorIdx] += addTime; |
66d03f23 | 540 | this.$set(this.game.clocks, colorIdx, this.game.clocks[colorIdx] + addTime); |
809ba2aa | 541 | this.game.initime[nextIdx] = Date.now(); |
72ccbd67 BA |
542 | // If repetition detected, consider that a draw offer was received: |
543 | const fenObj = V.ParseFen(move.fen); | |
544 | let repIdx = fenObj.position + "_" + fenObj.turn; | |
545 | if (!!fenObj.flags) | |
546 | repIdx += "_" + fenObj.flags; | |
547 | this.repeat[repIdx] = (!!this.repeat[repIdx] | |
548 | ? this.repeat[repIdx]+1 | |
549 | : 1); | |
550 | if (this.repeat[repIdx] >= 3) | |
a1c48034 | 551 | this.drawOffer = "threerep"; |
b4fb1612 | 552 | }, |
a1c48034 BA |
553 | toggleChat: function() { |
554 | document.getElementById("chatBtn").style.backgroundColor = "#e2e2e2"; | |
555 | }, | |
556 | finishSendChat: function(chat) { | |
63ca2b89 BA |
557 | if (this.game.type == "corr") |
558 | GameStorage.update(this.gameRef.id, {chat: chat}); | |
559 | }, | |
a1c48034 BA |
560 | processChat: function() { |
561 | if (!document.getElementById("inputChat").checked) | |
562 | document.getElementById("chatBtn").style.backgroundColor = "#c5fefe"; | |
563 | }, | |
430a2038 | 564 | gameOver: function(score, scoreMsg) { |
93d1d7a7 | 565 | this.game.mode = "analyze"; |
430a2038 BA |
566 | this.game.score = score; |
567 | this.game.scoreMsg = scoreMsg; | |
ab6f48ea BA |
568 | const myIdx = this.game.players.findIndex(p => { |
569 | return p.sid == this.st.user.sid || p.uid == this.st.user.id; | |
570 | }); | |
571 | if (myIdx >= 0) //OK, I play in this game | |
dcd68c41 BA |
572 | { |
573 | GameStorage.update(this.gameRef.id, | |
574 | {score: score, scoreMsg: scoreMsg}); | |
575 | } | |
ce87ac6a | 576 | }, |
a6088c90 BA |
577 | }, |
578 | }; | |
579 | </script> | |
7e1a1fe9 BA |
580 | |
581 | <style lang="sass"> | |
72ccbd67 | 582 | .connected |
050ae3b5 | 583 | background-color: lightgreen |
72ccbd67 | 584 | |
430a2038 BA |
585 | @media screen and (min-width: 768px) |
586 | #actions | |
587 | width: 300px | |
588 | @media screen and (max-width: 767px) | |
589 | .game | |
590 | width: 100% | |
72ccbd67 | 591 | |
430a2038 | 592 | #actions |
cf94b843 | 593 | display: inline-block |
430a2038 | 594 | margin-top: 10px |
430a2038 BA |
595 | button |
596 | display: inline-block | |
597 | width: 33% | |
598 | margin: 0 | |
a1c48034 | 599 | |
050ae3b5 BA |
600 | @media screen and (max-width: 767px) |
601 | #aboveBoard | |
602 | text-align: center | |
603 | ||
604 | .name | |
605 | font-size: 1.5rem | |
606 | padding: 1px | |
607 | ||
608 | .time | |
609 | font-size: 2rem | |
610 | display: inline-block | |
611 | margin-left: 10px | |
612 | ||
613 | .split-names | |
614 | display: inline-block | |
615 | margin: 0 15px | |
616 | ||
430a2038 | 617 | #chat |
a1c48034 BA |
618 | padding-top: 20px |
619 | max-width: 600px | |
430a2038 | 620 | border: none; |
cf94b843 BA |
621 | |
622 | #chatBtn | |
623 | margin: 0 10px 0 0 | |
dcd68c41 BA |
624 | |
625 | .draw-sent, .draw-sent:hover | |
626 | background-color: lightyellow | |
627 | ||
628 | .draw-received, .draw-received:hover | |
629 | background-color: lightgreen | |
630 | ||
631 | .draw-threerep, .draw-threerep:hover | |
632 | background-color: #e4d1fc | |
7e1a1fe9 | 633 | </style> |