X-Git-Url: https://git.auder.net/assets/icon_infos.svg?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FAnalyse.vue;h=9dcf033aab37ae5b0efadda7a3fbb8c95137dc6e;hb=3cfd9287bfde5b5aad1e0dee61d084c690b1e54d;hp=2f087b99d701d1fa783033da2e1f1fdb70b1bf2f;hpb=5f918a278904266a2a66a3c8e2a3655f37c2d2a7;p=vchess.git

diff --git a/client/src/views/Analyse.vue b/client/src/views/Analyse.vue
index 2f087b99..9dcf033a 100644
--- a/client/src/views/Analyse.vue
+++ b/client/src/views/Analyse.vue
@@ -1,5 +1,15 @@
 <template lang="pug">
 main
+  input#modalRules.modal(type="checkbox")
+  div#rulesDiv(
+    role="dialog"
+    data-checkbox="modalRules"
+  )
+    .card
+      label.modal-close(for="modalRules")
+      a#variantNameInAnalyze(:href="'/#/variants/'+game.vname")
+        | {{ game.vname }}
+      div(v-html="rulesContent")
   .row
     .col-sm-12
       .text-center
@@ -16,6 +26,8 @@ main
 
 <script>
 import BaseGame from "@/components/BaseGame.vue";
+import { processModalClick } from "@/utils/modalClick";
+import { replaceByDiag } from "@/utils/printDiagram";
 import { store } from "@/store";
 export default {
   name: "my-analyse",
@@ -28,6 +40,7 @@ export default {
   data: function() {
     return {
       st: store.state,
+      rulesContent: "",
       gameRef: {
         vname: "",
         fen: ""
@@ -47,6 +60,10 @@ export default {
   created: function() {
     this.initFromUrl();
   },
+  mounted: function() {
+    document.getElementById("rulesDiv")
+      .addEventListener("click", processModalClick);
+  },
   methods: {
     alertAndQuit: function(text, wrongVname) {
       // Soon after component creation, st.tr might be uninitialized.
@@ -64,7 +81,9 @@ export default {
       if (!routeFen) this.alertAndQuit("Missing FEN");
       else {
         this.gameRef.fen = routeFen.replace(/_/g, " ");
-        // orientation is optional: taken from FEN if missing
+        // orientation is optional: taken from FEN if missing.
+        // NOTE: currently no internal usage of 'side', but could be used by
+        // manually settings the URL (TODO?).
         const orientation = this.$route.query["side"];
         this.initialize(orientation);
       }
@@ -80,6 +99,18 @@ export default {
         else this.loadGame(orientation);
       })
       .catch((err) => { this.alertAndQuit("Mispelled variant name", true); });
+      this.rulesContent =
+        require(
+          "raw-loader!@/translations/rules/" +
+          this.gameRef.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, replaceByDiag);
     },
     loadGame: function(orientation) {
       this.game.vname = this.gameRef.vname;
@@ -110,7 +141,31 @@ export default {
 };
 </script>
 
-<style lang="sass" scoped=true>
+<style lang="sass">
+@import "@/styles/_board_squares_img.sass"
+@import "@/styles/_rules.sass"
+</style>
+
+<style lang="sass" scoped>
+a#variantNameInAnalyze
+  color: var(--card-fore-color)
+  text-align: center
+  font-weight: bold
+  font-size: calc(1rem * var(--heading-ratio))
+  line-height: 1.2
+  margin: calc(1.5 * var(--universal-margin))
+
+#rulesDiv > .card
+  padding: 5px 0
+  max-width: 50%
+  max-height: 100%
+  @media screen and (max-width: 1500px)
+    max-width: 67%
+  @media screen and (max-width: 1024px)
+    max-width: 85%
+  @media screen and (max-width: 767px)
+    max-width: 100%
+
 input#fen
   // Use a Monospace font for input FEN width adjustment
   font-family: "Fira Code"