X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FRules.vue;h=5a69c5bf9019becdf9ce95a21100cafaca874c4e;hb=6f093ada2dafe47198b85d29ce5d26b50a343f8e;hp=82a4a40f3672555519e3231f2f46bdda90f1f7e6;hpb=41c80bb63b85b2696d3925c10784c3d7bb5d2aa3;p=vchess.git

diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue
index 82a4a40f..5a69c5bf 100644
--- a/client/src/views/Rules.vue
+++ b/client/src/views/Rules.vue
@@ -3,14 +3,16 @@ main
   .row
     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
       .button-group
-        button(@click="clickReadRules") Rules
+        button(@click="clickReadRules") {{ st.tr["Rules"] }}
         button(v-show="!gameInProgress" @click="() => startGame('auto')")
-          | Sample game
+          | {{ st.tr["Example game"] }}
         button(v-show="!gameInProgress" @click="() => startGame('versus')")
-          | Practice
+          | {{ st.tr["Practice"] }}
         button(v-show="gameInProgress" @click="() => stopGame()")
-          | Stop game
-        button(@click="gotoAnalyze") Analyze
+          | {{ st.tr["Stop game"] }}
+        button(v-if="display=='rules' && gameInfo.vname!='Dark'"
+            @click="gotoAnalyze")
+          | {{ st.tr["Analyze"] }}
       .section-content(v-show="display=='rules'" v-html="content")
   ComputerGame(v-show="display=='computer'" :game-info="gameInfo"
     @game-over="stopGame" @game-stopped="gameStopped")
@@ -29,12 +31,11 @@ export default {
   data: function() {
     return {
       st: store.state,
-      content: "",
       display: "rules",
       gameInProgress: false,
       // variables passed to ComputerGame:
       gameInfo: {
-        vname: "_unknown",
+        vname: "",
         mode: "versus",
         fen: "",
         score: "*",
@@ -43,12 +44,25 @@ export default {
   },
   watch: {
     "$route": function(newRoute) {
-      this.tryChangeVariant(newRoute.params["vname"]);
+      this.re_setVariant(newRoute.params["vname"]);
     },
   },
-  created: async function() {
+  created: function() {
     // NOTE: variant cannot be set before store is initialized
-    this.tryChangeVariant(this.$route.params["vname"]);
+    this.re_setVariant(this.$route.params["vname"]);
+  },
+  computed: {
+    content: function() {
+      if (!this.gameInfo.vname)
+        return ""; //variant not set yet
+      // (AJAX) Request to get rules content (plain text, HTML)
+      return require("raw-loader!@/translations/rules/" +
+          this.gameInfo.vname + "/" + this.st.lang + ".pug")
+        // Next two lines fix a weird issue after last update (2019-11)
+        .replace(/\\n/g, " ").replace(/\\"/g, '"')
+        .replace('module.exports = "', '').replace(/"$/, "")
+        .replace(/(fen:)([^:]*):/g, this.replaceByDiag);
+    },
   },
   methods: {
     clickReadRules: function() {
@@ -66,24 +80,15 @@ export default {
         shadow: fenParts[3],
       };
     },
-    tryChangeVariant: async function(vname) {
-      if (!vname || vname == "_unknown")
-        return;
-      this.gameInfo.vname = vname;
+    // Method to replace diagrams in loaded HTML
+    replaceByDiag: function(match, p1, p2) {
+      const args = this.parseFen(p2);
+      return getDiagram(args);
+    },
+    re_setVariant: async function(vname) {
       const vModule = await import("@/variants/" + vname + ".js");
       window.V = vModule.VariantRules;
-      // Method to replace diagrams in loaded HTML
-      const replaceByDiag = (match, p1, p2) => {
-        const args = this.parseFen(p2);
-        return getDiagram(args);
-      };
-      // (AJAX) Request to get rules content (plain text, HTML)
-      this.content =
-        require("raw-loader!@/translations/rules/" + vname + "/" + this.st.lang + ".pug")
-        // Next two lines fix a weird issue after last update (2019-11)
-        .replace(/\\[n"]/g, " ")
-        .replace('module.exports = "', '').replace(/"$/, "")
-        .replace(/(fen:)([^:]*):/g, replaceByDiag);
+      this.gameInfo.vname = vname;
     },
     startGame: function(mode) {
       if (this.gameInProgress)
@@ -97,7 +102,6 @@ export default {
     // user is willing to stop the game:
     stopGame: function(score) {
       this.gameInfo.score = score || "?";
-      this.gameInfo.mode = "analyze";
     },
     // The game is effectively stopped:
     gameStopped: function() {
@@ -111,7 +115,8 @@ export default {
 };
 </script>
 
-<style lang="sass" scoped>
+<!-- NOTE: not scoped here, because HTML is injected (TODO) -->
+<style lang="sass">
 //.section-content
 //  *
 //    margin-left: auto