From 6dd02928259482332d639bb71d2c44ff684fcfb5 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Sun, 2 Jun 2019 16:50:02 +0200
Subject: [PATCH] Toward game info simplification

---
 client/src/components/ComputerGame.vue | 53 +++++++++++++-------------
 client/src/views/Game.vue              | 28 +++++---------
 client/src/views/Rules.vue             | 25 ++++++------
 3 files changed, 49 insertions(+), 57 deletions(-)

diff --git a/client/src/components/ComputerGame.vue b/client/src/components/ComputerGame.vue
index 5196e542..debaeac8 100644
--- a/client/src/components/ComputerGame.vue
+++ b/client/src/components/ComputerGame.vue
@@ -1,8 +1,7 @@
 <template lang="pug">
 .row
   .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-    BaseGame(:vname="vname" :analyze="analyze" :vr="vr"
-      :game-info="gameInfo" ref="basegame" @newmove="processMove")
+    BaseGame(:game="game" :vr="vr" ref="basegame" @newmove="processMove")
 </template>
 
 <script>
@@ -10,26 +9,21 @@ import BaseGame from "@/components/BaseGame.vue";
 import { store } from "@/store";
 import Worker from 'worker-loader!@/playCompMove';
 
-
-// TODO: simplify, just "game" and "gameInfo" prop (fen+mode+vname may change at the same time)
-
-
 export default {
   name: 'my-computer-game',
   components: {
     BaseGame,
   },
+  // gameInfo: fen + mode + vname
   // mode: "auto" (game comp vs comp), "versus" (normal) or "analyze"
-  props: ["fen","mode","vname"],
+  props: ["gameInfo"],
   data: function() {
     return {
       st: store.state,
       // variables passed to BaseGame:
-      gameInfo: {
-        fenStart: "",
-        players: ["Myself","Computer"], //playing as white
-        mycolor: "w",
-      },
+      fenStart: "",
+      players: ["Myself","Computer"], //playing as white
+      mycolor: "w",
       vr: null,
       // Web worker to play computer moves without freezing interface:
       timeStart: undefined, //time when computer starts thinking
@@ -38,12 +32,18 @@ export default {
     };
   },
   computed: {
-    analyze: function() {
-      return this.mode == "analyze";
+    game: function() {
+      return Object.assign({},
+        this.gameInfo,
+        {
+          fenStart: this.fenStart,
+          players: this.players,
+          mycolor: this.mycolor,
+        });
     },
   },
   watch: {
-    fen: function() {
+    gameInfo: function() {
       // (Security) No effect if a computer move is in progress:
       if (this.lockCompThink)
         return this.$emit("computer-think");
@@ -62,7 +62,7 @@ export default {
       // Small delay for the bot to appear "more human"
       const delay = Math.max(500-(Date.now()-this.timeStart), 0);
       setTimeout(() => {
-        const animate = (this.vname != "Dark");
+        const animate = (this.gameInfo.vname != "Dark");
         this.$refs.basegame.play(compMove[0], animate);
         if (compMove.length == 2)
           setTimeout( () => { this.$refs.basegame.play(compMove[1], animate); }, 750);
@@ -77,21 +77,20 @@ export default {
   // et les chats dans chat.js. Puis en webRTC, repenser tout ça.
   methods: {
     launchGame: async function() {
-      const vModule = await import("@/variants/" + this.vname + ".js");
+      const vModule = await import("@/variants/" + this.gameInfo.vname + ".js");
       window.V = vModule.VariantRules;
-      this.compWorker.postMessage(["scripts",this.vname]);
-      this.compWorker.postMessage(["init",this.fen]);
-      this.newGameFromFen(this.fen);
+      this.compWorker.postMessage(["scripts",this.gameInfo.vname]);
+      this.compWorker.postMessage(["init",this.gameInfo.fenStart]);
+      this.newGameFromFen(this.gameInfo.fenStart);
     },
     newGameFromFen: function(fen) {
       this.vr = new V(fen);
-      this.gameInfo.fenStart = fen;
-      this.gameInfo.mycolor = (Math.random() < 0.5 ? "w" : "b");
-      this.gameInfo.players = ["Myself","Computer"];
-      if (this.gameInfo.mycolor == "b")
-        this.gameInfo.players = this.gameInfo.players.reverse();
+      this.mycolor = (Math.random() < 0.5 ? "w" : "b");
+      this.players = ["Myself","Computer"];
+      if (this.mycolor == "b")
+        this.players = this.players.reverse();
       this.compWorker.postMessage(["init",fen]);
-      if (this.gameInfo.mycolor != "w" || this.mode == "auto")
+      if (this.mycolor != "w" || this.gameInfo.mode == "auto")
         this.playComputerMove();
     },
     playComputerMove: function() {
@@ -104,7 +103,7 @@ export default {
       this.compWorker.postMessage(["newmove",move]);
       // subTurn condition for Marseille (and Avalanche) rules
       if ((!this.vr.subTurn || this.vr.subTurn <= 1)
-        && (this.mode == "auto" || this.vr.turn != this.gameInfo.mycolor))
+        && (this.mode == "auto" || this.vr.turn != this.mycolor))
       {
         this.playComputerMove();
       }
diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index 3a2f03a5..2ef43c36 100644
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -16,13 +16,12 @@ pareil quand quelqu'un reco.
 <template lang="pug">
 .row
   .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-    BaseGame(:vname="game.vname" :game="game" :analyze="analyze" :vr="vr"
-      ref="basegame" @newmove="processMove")
-    .button-group(v-if="mode!='analyze'")
+    BaseGame(:game="game" :vr="vr" ref="basegame" @newmove="processMove")
+    .button-group(v-if="game.mode!='analyze'")
       button(@click="offerDraw") Draw
       button(@click="abortGame") Abort
       button(@click="resign") Resign
-    div(v-if="mode=='corr'")
+    div(v-if="game.mode=='corr'")
       textarea(v-show="score=='*' && vr.turn==mycolor" v-model="corrMsg")
       div(v-show="cursor>=0") {{ moves[cursor].message }}
 </template>
@@ -40,23 +39,16 @@ export default {
     BaseGame,
   },
   // gameRef: to find the game in (potentially remote) storage
-  // mode: "live" or "corr" (correspondance game), or "analyze"
   data: function() {
     return {
       st: store.state,
       gameRef: {id: "", rid: ""}, //given in URL (rid = remote ID)
       game: {}, //passed to BaseGame
-      vr: null, //TODO
-      mode: "analyze", //mutable
+      vr: null, //"variant rules" object initialized from FEN
       drawOfferSent: false, //did I just ask for draw? (TODO: draw variables?)
       people: [], //potential observers (TODO)
     };
   },
-  computed: {
-    analyze: function() {
-      return this.mode == "analyze";
-    },
-  },
   watch: {
     '$route' (to, from) {
       if (!!to.params["id"])
@@ -240,14 +232,12 @@ export default {
     //  - from indexedDB (one completed live game)
     //  - from server (one correspondance game I play[ed] or not)
     //  - from remote peer (one live game I don't play, finished or not)
-    loadGame: async function() {
-      GameStorage.get(this.gameRef, (game) => {
-        this.gameInfo = 
-        this.vname = game.vname;
-        this.mode = game.mode;
-        const vModule = await import("@/variants/" + this.vname + ".js");
+    loadGame: function() {
+      GameStorage.get(this.gameRef, async (game) => {
+        this.game = game;
+        const vModule = await import("@/variants/" + game.vname + ".js");
         window.V = vModule.VariantRules;
-        this.vr = new V(this.gameInfo.fen);
+        this.vr = new V(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)
diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue
index 738e25fa..74c4e842 100644
--- a/client/src/views/Rules.vue
+++ b/client/src/views/Rules.vue
@@ -10,8 +10,7 @@
       button(v-show="gameInProgress" @click="stopGame")
         | Stop game
     .section-content(v-show="display=='rules'" v-html="content")
-    ComputerGame(v-show="display=='computer'"
-      :fen="fen" :mode="mode" :vname="variant.name"
+    ComputerGame(v-show="display=='computer'" :game-info="gameInfo"
       @computer-think="gameInProgress=false" @game-over="stopGame")
 </template>
 
@@ -28,14 +27,24 @@ export default {
   data: function() {
     return {
       st: store.state,
-      variant: {id: 0, name: "_unknown"}, //...yet
       content: "",
       display: "rules",
-      mode: "versus",
       gameInProgress: false,
+      // variables passed to ComputerGame:
+      vname: "_unknown",
+      mode: "versus",
       fen: "",
     };
   },
+  computed: {
+    gameInfo: function() {
+      return {
+        fen: this.fen,
+        mode: this.mode,
+        vname: this.vname,
+      };
+    },
+  },
   watch: {
     "$route": function(newRoute) {
       this.tryChangeVariant(newRoute.params["vname"]);
@@ -58,13 +67,7 @@ export default {
     tryChangeVariant: async function(vname) {
       if (!vname || vname == "_unknown")
         return;
-      if (this.st.variants.length > 0)
-      {
-        const idxOfVar = this.st.variants.findIndex(e => e.name == vname);
-        this.variant = this.st.variants[idxOfVar];
-      }
-      else
-        this.variant.name = vname;
+      this.vname = vname;
       const vModule = await import("@/variants/" + vname + ".js");
       window.V = vModule.VariantRules;
       // Method to replace diagrams in loaded HTML
-- 
2.44.0