Fixes

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

diff --git a/client/src/views/Analyze.vue b/client/src/views/Analyze.vue
index a1352f7..59d2f3a 100644 (file)
--- a/client/src/views/Analyze.vue
+++ b/client/src/views/Analyze.vue
@@ -2,10 +2,10 @@
 main
   .row
     .col-sm-12
-      #fenDiv(v-if="!!vr") {{ vr.getFen() }}
-  .row
-    .col-sm-12.col-md-10.col-md-offset-1
-      BaseGame(:game="game" :vr="vr" ref="basegame")
+      #fenDiv
+        input#fen(v-model="curFen" @input="adjustFenSize")
+        button(@click="gotoFen") {{ st.tr["Go"] }}
+  BaseGame(:game="game" :vr="vr" ref="basegame")
 </template>
 
 <script>
@@ -31,36 +31,61 @@ export default {
         mode: "analyze"
       },
       vr: null, //"variant rules" object initialized from FEN
+      curFen: "",
       //people: [], //players + observers //TODO later: interactive analyze...
     };
   },
   watch: {
-    "$route": function(to, from) {
-      this.gameRef.fen = to.query["fen"].replace(/_/g, " ");
-      this.gameRef.vname = to.params["vname"];
-      this.loadGame();
+    // 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();
     },
   },
   created: function() {
-    this.gameRef.fen = this.$route.query["fen"].replace(/_/g, " ");
     this.gameRef.vname = this.$route.params["vname"];
-    this.loadGame();
+    if (this.gameRef.vname == "Dark")
+    {
+      alert(this.st.tr["Analyze 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();
+    }
   },
   methods: {
-    loadGame: async function() {
+    initialize: async function() {
+      // Obtain VariantRules object
+      const vModule = await import("@/variants/" + this.gameRef.vname + ".js");
+      window.V = vModule.VariantRules;
+      this.loadGame();
+    },
+    loadGame: function() {
+      // NOTE: no need to set score (~unused)
       this.game.vname = this.gameRef.vname;
       this.game.fen = this.gameRef.fen;
-      const vModule = await import("@/variants/" + this.game.vname + ".js");
-      window.V = vModule.VariantRules;
+      this.curFen = this.game.fen;
+      this.adjustFenSize();
       this.vr = new V(this.game.fen);
-      // fenStart initialized in the end, after definition of V,
-      // because it triggers a reset on BaseGame component.
-      this.$set(this.game, "fenStart", this.gameRef.fen); //TODO: Vue3...
+      this.game.mycolor = this.vr.turn;
+      this.$set(this.game, "fenStart", this.gameRef.fen);
+    },
+    adjustFenSize: function() {
+      let fenInput = document.getElementById("fen");
+      fenInput.style.width = this.curFen.length + "ch";
+    },
+    gotoFen: function() {
+      this.gameRef.fen = this.curFen;
+      this.loadGame();
     },
   },
 };
 </script>
 
-<style lang="sass">
-// TODO
+<style lang="sass" scoped>
+#fenDiv
+  text-align: center
 </style>