X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FGame.vue;h=920e9c8453e203973beedb2ad89f405ff2df0785;hb=9d54ab8900b69876c3249b4ed1bfa355dccb7f97;hp=2ef43c36f6afb8a423b316710f64e0a470b7fde1;hpb=6dd02928259482332d639bb71d2c44ff684fcfb5;p=vchess.git diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 2ef43c36..920e9c84 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -16,13 +16,14 @@ pareil quand quelqu'un reco. @@ -42,11 +43,14 @@ export default { data: function() { return { st: store.state, - gameRef: {id: "", rid: ""}, //given in URL (rid = remote ID) - game: {}, //passed to BaseGame + gameRef: { //given in URL (rid = remote ID) + id: "", + rid: "" + }, + game: { }, //passed to BaseGame vr: null, //"variant rules" object initialized from FEN drawOfferSent: false, //did I just ask for draw? (TODO: draw variables?) - people: [], //potential observers (TODO) + people: [ ], //potential observers (TODO) }; }, watch: { @@ -78,6 +82,7 @@ export default { // --> doivent être enregistrés comme observers au niveau du serveur... // non: poll users + events startObserving / stopObserving + // (à faire au niveau du routeur ?) // TODO: also handle "draw accepted" (use opponents array?) @@ -93,6 +98,18 @@ export default { // ...or just see nothing as on buho21 this.$refs["basegame"].play( data.move, this.game.vname!="Dark" ? "animate" : null); + this.processMove(data.move); + + + +// TODO: +// send filtered_move + elapsed time +// receive same. (update clock) + update (our) initime if it's my turn +// + update fen (using vr.getFen()) + + + + break; case "pong": //received if we sent a ping (game still alive on our side) if (this.gameRef.id != data.gameId) @@ -101,7 +118,7 @@ export default { // Send our "last state" informations to opponent(s) L = this.vr.moves.length; Object.keys(this.opponents).forEach(oid => { - this.conn.send(JSON.stringify({ + this.st.conn.send(JSON.stringify({ code: "lastate", oppid: oid, gameId: this.gameRef.id, @@ -119,7 +136,7 @@ export default { if (this.score != "*") { // We finished the game (any result possible) - this.conn.send(JSON.stringify({ + this.st.conn.send(JSON.stringify({ code: "lastate", oppid: data.oppid, gameId: this.gameRef.id, @@ -131,7 +148,7 @@ export default { else if (data.movesCount < L) { // We must tell last move to opponent - this.conn.send(JSON.stringify({ + this.st.conn.send(JSON.stringify({ code: "lastate", oppid: this.opponent.id, gameId: this.gameRef.id, @@ -143,7 +160,7 @@ export default { this.play(data.lastMove, "animate"); break; case "resign": //..you won! - this.endGame(this.mycolor=="w"?"1-0":"0-1"); + this.endGame(this.game.mycolor=="w"?"1-0":"0-1"); break; // TODO: also use (dis)connect info to count online players? case "gameconnect": @@ -167,14 +184,11 @@ export default { } }; const socketCloseListener = () => { - this.conn.addEventListener('message', socketMessageListener); - this.conn.addEventListener('close', socketCloseListener); + this.st.conn.addEventListener('message', socketMessageListener); + this.st.conn.addEventListener('close', socketCloseListener); }; - if (!!this.conn) - { - this.conn.onmessage = socketMessageListener; - this.conn.onclose = socketCloseListener; - } + this.st.conn.onmessage = socketMessageListener; + this.st.conn.onclose = socketCloseListener; }, // dans variant.js (plutôt room.js) conn gère aussi les challenges // et les chats dans chat.js. Puis en webRTC, repenser tout ça. @@ -194,7 +208,7 @@ export default { if (!!o.online) { try { - this.conn.send(JSON.stringify({code: "draw", oppid: o.id})); + this.st.conn.send(JSON.stringify({code: "draw", oppid: o.id})); } catch (INVALID_STATE_ERR) { return; } @@ -213,6 +227,7 @@ export default { return; //+ bouton "abort" avec score == "?" + demander confirmation pour toutes ces actions, //send message: "gameOver" avec score "?" + // ==> BaseGame must listen to game.score change, and call "endgame(score)" in this case }, resign: function(e) { if (!confirm("Resign the game?")) @@ -220,7 +235,7 @@ export default { if (this.mode == "human" && this.oppConnected(this.oppid)) { try { - this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid})); + this.st.conn.send(JSON.stringify({code: "resign", oppid: this.oppid})); } catch (INVALID_STATE_ERR) { return; } @@ -234,10 +249,23 @@ export default { // - from remote peer (one live game I don't play, finished or not) loadGame: function() { GameStorage.get(this.gameRef, async (game) => { - this.game = game; + this.game = Object.assign({}, + game, + // NOTE: assign mycolor here, since BaseGame could also bs VS computer + {mycolor: [undefined,"w","b"][1 + game.players.findIndex( + p => p.sid == this.st.user.sid)]}, + ); const vModule = await import("@/variants/" + game.vname + ".js"); window.V = vModule.VariantRules; this.vr = new V(game.fen); + // Post-processing: decorate each move with current FEN: + // (to be able to jump to any position quickly) + game.moves.forEach(move => { + move.color = this.vr.turn; + vr.play(move); + move.fen = this.vr.getFen(); + }); + this.vr.re_init(game.fen); }); // // Poll all players except me (if I'm playing) to know online status. // // --> Send ping to server (answer pong if players[s] are connected) @@ -249,12 +277,60 @@ export default { // }); // } }, + // TODO: refactor this old "oppConnected" logic oppConnected: function(uid) { return this.opponents.some(o => o.id == uid && o.online); }, + // Post-process a move (which was just played) processMove: function(move) { - // TODO: process some opponent's move + if (!this.game.mycolor) + return; //I'm just an observer + // Update storage (corr or live) + const colorIdx = ["w","b","g","r"][move.color]; + // https://stackoverflow.com/a/38750895 + const allowed_fields = ["appear", "vanish", "start", "end"]; + const filtered_move = Object.keys(move) + .filter(key => allowed_fields.includes(key)) + .reduce((obj, key) => { + obj[key] = raw[key]; + return obj; + }, {}); + // Send move ("newmove" event) to opponent(s) (if ours) + // (otherwise move.elapsed is supposed to be already transmitted) + if (move.color == this.game.mycolor) + { + const elapsed = Date.now() - GameStorage.getInitime(); + this.game.players.forEach(p => { + if (p.sid != this.st.user.sid) + this.st.conn.send("newmove", + { + target: p.sid, + move: Object.assign({}, filtered_move, {elapsed: elapsed}), + }); + }); + move.elapsed = elapsed; + } + GameStorage.update({ + colorIdx: colorIdx, + move: filtered_move, + fen: move.fen, + elapsed: move.elapsed, + increment: this.game.increment, //redundant but faster + initime: (this.vr.turn == this.game.mycolor), //it's my turn + }); + }, + // NOTE: this update function should also work for corr games + gameOver: function(score) { + GameStorage.update({ + score: score, + }); }, }, }; + +