From 5157ce0b8872417fbeecd736c9d1ae750b24acdc Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Fri, 31 Jan 2020 12:10:57 +0100
Subject: [PATCH] 'update'

---
 client/src/App.vue                 | 10 ++++----
 client/src/components/BaseGame.vue | 10 +++++++-
 client/src/components/MoveList.vue |  4 ++--
 client/src/views/Analyze.vue       | 38 +++++++++++++++++++++++-------
 client/src/views/Rules.vue         | 11 ++++++---
 5 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 6c945663..4b062a65 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -8,7 +8,7 @@
     .row
       .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
         // Menu (top of page):
-        // Left: hall, variants, mygames, forum (ext. link)
+        // Left: hall, variants, mygames
         // Right: usermenu, settings, flag
         nav
           label.drawer-toggle(for="drawerControl")
@@ -22,8 +22,6 @@
                 | {{ st.tr["Variants"] }}
               router-link(to="/mygames")
                 | {{ st.tr["My games"] }}
-              a(href="https://forum.vchess.club")
-                | {{ st.tr["Forum"] }}
             #rightMenu
               .clickable(onClick="doClick('modalUser')")
                 | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }}
@@ -38,6 +36,8 @@
           router-link.menuitem(to="/about") {{ st.tr["About"] }}
           p.clickable(onClick="doClick('modalContact')")
             | {{ st.tr["Contact"] }}
+          a.menuitem(href="https://forum.vchess.club")
+            | {{ st.tr["Forum"] }}
 </template>
 
 <script>
@@ -163,7 +163,7 @@ footer
   justify-content: center
   & > .menuitem
     display: inline-block
-    margin: 0 10px 0 0
+    margin: 0 10px
     &:link
       color: #2c3e50
     &:visited, &:hover
@@ -171,7 +171,7 @@ footer
       text-decoration: none
   & > p
     display: inline-block
-    margin: 0 0 0 10px
+    margin: 0 10px
 
 @media screen and (max-width: 767px)
   footer
diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index 608a98d4..324e534a 100644
--- a/client/src/components/BaseGame.vue
+++ b/client/src/components/BaseGame.vue
@@ -23,7 +23,8 @@ div#baseGame(tabindex=-1 @click="() => focusBg()" @keydown="handleKeys")
           | {{ st.tr["Analyze"] }}
     .col-sm-12.col-md-3
       MoveList(v-if="showMoves" :score="game.score" :message="game.scoreMsg"
-        :moves="moves" :cursor="cursor" @goto-move="gotoMove")
+        :firstNum="firstMoveNumber" :moves="moves" :cursor="cursor"
+        @goto-move="gotoMove")
 </template>
 
 <script>
@@ -51,6 +52,7 @@ export default {
       moves: [],
       cursor: -1, //index of the move just played
       lastMove: null,
+      firstMoveNumber: 0, //for printing
     };
   },
   watch: {
@@ -107,6 +109,8 @@ export default {
       // Post-processing: decorate each move with color + current FEN:
       // (to be able to jump to any position quickly)
       let vr_tmp = new V(this.game.fenStart); //vr is already at end of game
+      this.firstMoveNumber =
+        Math.floor(V.ParseFen(this.game.fenStart).movesCount / 2);
       this.moves.forEach(move => {
         // NOTE: this is doing manually what play() function below achieve,
         // but in a lighter "fast-forward" way
@@ -297,6 +301,8 @@ export default {
       this.lastMove = this.moves[index];
     },
     gotoBegin: function() {
+      if (this.cursor == -1)
+        return;
       this.vr.re_init(this.game.fenStart);
       if (this.moves.length > 0 && this.moves[0].notation == "...")
       {
@@ -310,6 +316,8 @@ export default {
       }
     },
     gotoEnd: function() {
+      if (this.cursor == this.moves.length - 1)
+        return;
       this.gotoMove(this.moves.length-1);
     },
     flip: function() {
diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue
index 1bb44367..c63f2cdf 100644
--- a/client/src/components/MoveList.vue
+++ b/client/src/components/MoveList.vue
@@ -6,7 +6,7 @@ div
   table#movesList
     tbody
       tr(v-for="moveIdx in evenNumbers")
-        td {{ moveIdx / 2 + 1 }}
+        td {{ firstNum + moveIdx / 2 + 1 }}
         td(:class="{'highlight-lm': cursor == moveIdx}"
             data-label="White move" @click="() => gotoMove(moveIdx)")
           | {{ moves[moveIdx].notation }}
@@ -22,7 +22,7 @@ div
 // Component for moves list on the right
 export default {
   name: 'my-move-list',
-	props: ["moves","cursor","score","message"],
+	props: ["moves","cursor","score","message","firstNum"],
   watch: {
     cursor: function(newValue) {
       if (newValue < 0)
diff --git a/client/src/views/Analyze.vue b/client/src/views/Analyze.vue
index a1352f7c..d7e812f4 100644
--- a/client/src/views/Analyze.vue
+++ b/client/src/views/Analyze.vue
@@ -2,7 +2,9 @@
 main
   .row
     .col-sm-12
-      #fenDiv(v-if="!!vr") {{ vr.getFen() }}
+      #fenDiv
+        input#fen(v-model="curFen" @input="adjustFenSize")
+        button(@click="gotoFen") Go
   .row
     .col-sm-12.col-md-10.col-md-offset-1
       BaseGame(:game="game" :vr="vr" ref="basegame")
@@ -31,6 +33,7 @@ export default {
         mode: "analyze"
       },
       vr: null, //"variant rules" object initialized from FEN
+      curFen: "",
       //people: [], //players + observers //TODO later: interactive analyze...
     };
   },
@@ -40,27 +43,44 @@ export default {
       this.gameRef.vname = to.params["vname"];
       this.loadGame();
     },
+    "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();
+    this.initialize(this.loadGame);
   },
   methods: {
-    loadGame: async function() {
+    initialize: async function(callback) {
+      // Obtain VariantRules object
+      const vModule = await import("@/variants/" + this.gameRef.vname + ".js");
+      window.V = vModule.VariantRules;
+      callback();
+    },
+    loadGame: function() {
       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...
     },
+    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>
diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue
index 33ef6a57..8056ba32 100644
--- a/client/src/views/Rules.vue
+++ b/client/src/views/Rules.vue
@@ -3,13 +3,14 @@ main
   .row
     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
       .button-group
-        button(@click="clickReadRules") Read the rules
+        button(@click="clickReadRules") Rules
         button(v-show="!gameInProgress" @click="() => startGame('auto')")
-          | Observe a sample game
+          | Sample game
         button(v-show="!gameInProgress" @click="() => startGame('versus')")
-          | Beat the computer!
+          |  Practice!
         button(v-show="gameInProgress" @click="() => stopGame()")
           | Stop game
+        button(@click="gotoAnalyze") Analyze
       .section-content(v-show="display=='rules'" v-html="content")
   ComputerGame(v-show="display=='computer'" :game-info="gameInfo"
     @game-over="stopGame" @game-stopped="gameStopped")
@@ -102,6 +103,10 @@ export default {
     gameStopped: function() {
       this.gameInProgress = false;
     },
+    gotoAnalyze: function() {
+      this.$router.push("/analyze/" + this.gameInfo.vname
+        + "/?fen=" + V.GenRandInitFen());
+    },
   },
 };
 </script>
-- 
2.44.0