Better Ball rules. Buggish but almost OK Synchrone variant

[vchess.git] / client / src / views / Analyse.vue

diff --git a/client/src/views/Analyse.vue b/client/src/views/Analyse.vue
index 035cd08..557a2df 100644 (file)
--- a/client/src/views/Analyse.vue
+++ b/client/src/views/Analyse.vue
@@ -3,83 +3,113 @@ main
   .row
     .col-sm-12
       .text-center
-        input#fen(v-model="curFen" @input="adjustFenSize()")
-        button(@click="gotoFen()") {{ st.tr["Go"] }}
-  BaseGame(:game="game" :vr="vr")
+        input#fen(
+          v-model="curFen"
+          @input="adjustFenSize(); tryGotoFen()"
+        )
+  BaseGame(
+    ref="basegame"
+    :game="game"
+    @fenchange="setFen"
+  )
 </template>
 
 <script>
 import BaseGame from "@/components/BaseGame.vue";
 import { store } from "@/store";
-import { ArrayFun } from "@/utils/array";
 export default {
-  name: 'my-analyse',
+  name: "my-analyse",
   components: {
-    BaseGame,
+    BaseGame
   },
   // gameRef: to find the game in (potentially remote) storage
   data: function() {
     return {
       st: store.state,
-      gameRef: { //given in URL (rid = remote ID)
+      gameRef: {
+        //given in URL (rid = remote ID)
         vname: "",
         fen: ""
       },
       game: {
-        players:[{name:"Analyse"},{name:"Analyse"}],
-        mode: "analyze",
+        players: [{ name: "Analyse" }, { name: "Analyse" }],
+        mode: "analyze"
       },
-      vr: null, //"variant rules" object initialized from FEN
-      curFen: "",
-      //people: [], //players + observers //TODO later: interactive analyze...
+      curFen: ""
     };
   },
   watch: {
-    // NOTE: no watcher for $route change, because if fenStart doesn't change
-    // then it doesn't trigger BaseGame.re_init() and the result is weird.
-    "vr.movesCount": function(fen) {
-      this.curFen = this.vr.getFen();
-      this.adjustFenSize();
-    },
+    $route: function() {
+      this.initFromUrl();
+    }
   },
   created: function() {
-    this.gameRef.vname = this.$route.params["vname"];
-    if (this.gameRef.vname == "Dark")
-    {
-      alert(this.st.tr["Analyse in Dark mode makes no sense!"]);
-      history.back(); //or this.$router.go(-1)
-    }
-    else
-    {
-      this.gameRef.fen = this.$route.query["fen"].replace(/_/g, " ");
-      this.initialize();
-    }
+    this.initFromUrl();
   },
   methods: {
-    initialize: async function() {
+    alertAndQuit: function(text, wrongVname) {
+      // Soon after component creation, st.tr might be uninitialized.
+      // Set a timeout to let a chance for the message to show translated.
+      const newUrl = "/variants" + (wrongVname ? "" : "/" + this.gameRef.vname);
+      setTimeout(() => {
+        alert(this.st.tr[text] || text);
+        this.$router.replace(newUrl);
+      }, 500);
+    },
+    initFromUrl: function() {
+      this.gameRef.vname = this.$route.params["vname"];
+      const routeFen = this.$route.query["fen"];
+      if (!routeFen) this.alertAndQuit("Missing FEN");
+      else {
+        this.gameRef.fen = routeFen.replace(/_/g, " ");
+        // orientation is optional: taken from FEN if missing
+        const orientation = this.$route.query["side"];
+        this.initialize(orientation);
+      }
+    },
+    initialize: async function(orientation) {
       // Obtain VariantRules object
-      const vModule = await import("@/variants/" + this.gameRef.vname + ".js");
-      window.V = vModule.VariantRules;
-      this.loadGame();
+      await import("@/variants/" + this.gameRef.vname + ".js")
+      .then((vModule) => {
+        window.V = vModule[this.gameRef.vname + "Rules"];
+        if (!V.CanAnalyze)
+          // Late check, in case the user tried to enter URL by hand
+          this.alertAndQuit("Analysis disabled for this variant");
+        else this.loadGame(orientation);
+      })
+      .catch((err) => { this.alertAndQuit("Mispelled variant name", true); });
     },
-    loadGame: function() {
-      // NOTE: no need to set score (~unused)
+    loadGame: function(orientation) {
       this.game.vname = this.gameRef.vname;
+      this.game.fenStart = this.gameRef.fen;
       this.game.fen = this.gameRef.fen;
+      this.game.score = "*"; //never change
       this.curFen = this.game.fen;
       this.adjustFenSize();
-      this.vr = new V(this.game.fen);
-      this.game.mycolor = this.vr.turn;
-      this.$set(this.game, "fenStart", this.gameRef.fen);
+      this.game.mycolor = orientation || V.ParseFen(this.gameRef.fen).turn;
+      this.$refs["basegame"].re_setVariables(this.game);
+    },
+    // Triggered by "fenchange" emitted in BaseGame:
+    setFen: function(fen) {
+      this.curFen = fen;
+      this.adjustFenSize();
     },
     adjustFenSize: function() {
       let fenInput = document.getElementById("fen");
-      fenInput.style.width = this.curFen.length + "ch";
-    },
-    gotoFen: function() {
-      this.gameRef.fen = this.curFen;
-      this.loadGame();
+      fenInput.style.width = (this.curFen.length+3) + "ch";
     },
-  },
+    tryGotoFen: function() {
+      if (V.IsGoodFen(this.curFen)) {
+        this.gameRef.fen = this.curFen;
+        this.loadGame();
+      }
+    }
+  }
 };
 </script>
+
+<style lang="sass" scoped=true>
+input#fen
+  // Use a Monospace font for input FEN width adjustment
+  font-family: "Fira Code"
+</style>