Fix a few things: ready to work on basic live games

diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index d0b584b..e8ca696 100644 (file)
--- a/client/src/components/BaseGame.vue
+++ b/client/src/components/BaseGame.vue
@@ -55,14 +55,7 @@ export default {
   watch: {
     // game initial FEN changes when a new game starts
     "game.fenStart": function() {
-      // Reset all variables
-      this.endgameMessage = "";
-      this.orientation = this.game.mycolor || "w"; //default orientation for observed games
-      this.score = this.game.score || "*"; //mutable (if initially "*")
-      this.moves = JSON.parse(JSON.stringify(this.game.moves || []));
-      const L = this.moves.length;
-      this.cursor = L-1;
-      this.lastMove = (L > 0 ? this.moves[L-1]  : null);
+      this.re_setVariables();
     },
   },
   computed: {
@@ -77,7 +70,20 @@ export default {
       return this.game.mode == "analyze";
     },
   },
+  created: function() {
+    if (!!this.game.fenStart)
+      this.re_setVariables();
+  },
   methods: {
+    re_setVariables: function() {
+      this.endgameMessage = "";
+      this.orientation = this.game.mycolor || "w"; //default orientation for observed games
+      this.score = this.game.score || "*"; //mutable (if initially "*")
+      this.moves = JSON.parse(JSON.stringify(this.game.moves || []));
+      const L = this.moves.length;
+      this.cursor = L-1;
+      this.lastMove = (L > 0 ? this.moves[L-1]  : null);
+    },
     setEndgameMessage: function(score) {
       let eogMessage = "Undefined";
       switch (score)

diff --git a/client/src/utils/storage.js b/client/src/utils/storage.js
index eb04078..48435b5 100644 (file)
--- a/client/src/utils/storage.js
+++ b/client/src/utils/storage.js
@@ -1,5 +1,4 @@
 import { extractTime } from "@/utils/timeControl";
-import { shuffle } from "@/utils/alea";
 
 // TODO: show game structure
 //const newItem = [
@@ -79,10 +78,6 @@ export const GameStorage =
   // localStorage:
   init: function(o)
   {
-    // NOTE: when >= 3 players, better use an array + shuffle for mycolor
-    const mycolor = (Math.random() < 0.5 ? "w" : "b");
-    // Shuffle players order (white then black then other colors).
-    const players = shuffle(o.players);
     // Extract times (in [milli]seconds), set clocks, store in localStorage
     const tc = extractTime(o.timeControl);
 
@@ -91,9 +86,8 @@ export const GameStorage =
     {
       gameId: o.gameId,
       vname: o.vname,
-      mycolor: mycolor,
       fenStart: o.fenStart,
-      players: players,
+      players: o.players,
       timeControl: o.timeControl,
       increment: tc.increment,
       mode: "live", //function for live games only

diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index 2ef43c3..22cf5bf 100644 (file)
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -22,7 +22,7 @@ pareil quand quelqu'un reco.
       button(@click="abortGame") Abort
       button(@click="resign") Resign
     div(v-if="game.mode=='corr'")
-      textarea(v-show="score=='*' && vr.turn==mycolor" v-model="corrMsg")
+      textarea(v-show="score=='*' && vr.turn==game.mycolor" v-model="corrMsg")
       div(v-show="cursor>=0") {{ moves[cursor].message }}
 </template>
 
@@ -42,11 +42,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: {
@@ -101,7 +104,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 +122,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 +134,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 +146,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 +170,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 +194,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 +213,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 +221,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,7 +235,11 @@ 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: ["w","b"][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);

diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue
index e76139a..563ecd3 100644 (file)
--- a/client/src/views/Hall.vue
+++ b/client/src/views/Hall.vue
@@ -78,7 +78,7 @@ import { NbPlayers } from "@/data/nbPlayers";
 import { checkChallenge } from "@/data/challengeCheck";
 import { ArrayFun } from "@/utils/array";
 import { ajax } from "@/utils/ajax";
-import { getRandString } from "@/utils/alea";
+import { getRandString, shuffle } from "@/utils/alea";
 import GameList from "@/components/GameList.vue";
 import ChallengeList from "@/components/ChallengeList.vue";
 import { GameStorage } from "@/utils/storage";
@@ -564,11 +564,14 @@ export default {
       window.V = vModule.VariantRules;
       let players = [c.from];
       Array.prototype.push.apply(players, c.seats);
-      let gameInfo =
+      // These game informations will be sent to other players
+      const gameInfo =
       {
+        gameId: getRandString(),
         fen: c.fen || V.GenRandInitFen(),
         // Players' names may be required if game start when a player is offline
-        players: players.map(p => { return {name:p.name, sid:p.sid} }),
+        // Shuffle players order (white then black then other colors).
+        players: shuffle(players.map(p => { return {name:p.name, sid:p.sid} })),
         vid: c.vid,
         timeControl: c.timeControl,
       };
@@ -584,7 +587,7 @@ export default {
     // NOTE: for live games only (corr games are launched on server)
     newGame: function(gameInfo) {
       GameStorage.init({
-        gameId: getRandString(),
+        gameId: gameInfo.gameId,
         vname: this.getVname(gameInfo.vid),
         fenStart: gameInfo.fen,
         players: gameInfo.players,