client/src/views/Analyse.vue

   1 <template lang="pug">
   2 main
   3   input#modalRules.modal(type="checkbox")
   4   div#rulesDiv(
   5     role="dialog"
   6     data-checkbox="modalRules"
   7   )
   8     .card
   9       label.modal-close(for="modalRules")
  10       a#variantNameInAnalyze(:href="'/#/variants/'+game.vname")
  11         | {{ game.vname }}
  12       div(v-html="rulesContent")
  13   .row
  14     .col-sm-12
  15       .text-center
  16         input#fen(
  17           v-model="curFen"
  18           @input="adjustFenSize(); tryGotoFen()"
  19         )
  20   BaseGame(
  21     ref="basegame"
  22     :game="game"
  23     @fenchange="setFen"
  24   )
  25 </template>
  26
  27 <script>
  28 import BaseGame from "@/components/BaseGame.vue";
  29 import { processModalClick } from "@/utils/modalClick";
  30 import { replaceByDiag } from "@/utils/printDiagram";
  31 import { store } from "@/store";
  32 export default {
  33   name: "my-analyse",
  34   // TODO: game import ==> require some adjustments, like
  35   // the ability to analyse from a list of moves...
  36   components: {
  37     BaseGame
  38   },
  39   // gameRef: to find the game in (potentially remote) storage
  40   data: function() {
  41     return {
  42       st: store.state,
  43       rulesContent: "",
  44       gameRef: {
  45         vname: "",
  46         fen: ""
  47       },
  48       game: {
  49         players: [{ name: "Analyse" }, { name: "Analyse" }],
  50         mode: "analyze"
  51       },
  52       curFen: ""
  53     };
  54   },
  55   watch: {
  56     $route: function() {
  57       this.initFromUrl();
  58     }
  59   },
  60   created: function() {
  61     this.initFromUrl();
  62   },
  63   mounted: function() {
  64     document.getElementById("rulesDiv")
  65       .addEventListener("click", processModalClick);
  66   },
  67   methods: {
  68     alertAndQuit: function(text, wrongVname) {
  69       // Soon after component creation, st.tr might be uninitialized.
  70       // Set a timeout to let a chance for the message to show translated.
  71       const newUrl =
  72         "/variants" + (wrongVname ? "" : "/" + this.gameRef.vname);
  73       setTimeout(() => {
  74         alert(this.st.tr[text] || text);
  75         this.$router.replace(newUrl);
  76       }, 500);
  77     },
  78     initFromUrl: function() {
  79       this.gameRef.vname = this.$route.params["vname"];
  80       const routeFen = this.$route.query["fen"];
  81       if (!routeFen) this.alertAndQuit("Missing FEN");
  82       else {
  83         this.gameRef.fen = routeFen.replace(/_/g, " ");
  84         // orientation is optional: taken from FEN if missing.
  85         // NOTE: currently no internal usage of 'side', but could be used by
  86         // manually settings the URL (TODO?).
  87         const orientation = this.$route.query["side"];
  88         this.initialize(orientation);
  89       }
  90     },
  91     initialize: async function(orientation) {
  92       // Obtain VariantRules object
  93       await import("@/variants/" + this.gameRef.vname + ".js")
  94       .then((vModule) => {
  95         window.V = vModule[this.gameRef.vname + "Rules"];
  96         if (!V.CanAnalyze)
  97           // Late check, in case the user tried to enter URL by hand
  98           this.alertAndQuit("Analysis disabled for this variant");
  99         else this.loadGame(orientation);
 100       })
 101       .catch((err) => { this.alertAndQuit("Mispelled variant name", true); });
 102       this.rulesContent =
 103         require(
 104           "raw-loader!@/translations/rules/" +
 105           this.gameRef.vname + "/" +
 106           this.st.lang + ".pug"
 107         )
 108         // Next two lines fix a weird issue after last update (2019-11)
 109         .replace(/\\n/g, " ")
 110         .replace(/\\"/g, '"')
 111         .replace('module.exports = "', "")
 112         .replace(/"$/, "")
 113         .replace(/(fen:)([^:]*):/g, replaceByDiag);
 114     },
 115     loadGame: function(orientation) {
 116       this.game.vname = this.gameRef.vname;
 117       this.game.fenStart = this.gameRef.fen;
 118       this.game.fen = this.gameRef.fen;
 119       this.game.score = "*"; //never change
 120       this.curFen = this.game.fen;
 121       this.adjustFenSize();
 122       this.game.mycolor = orientation || V.ParseFen(this.gameRef.fen).turn;
 123       this.$refs["basegame"].re_setVariables(this.game);
 124     },
 125     // Triggered by "fenchange" emitted in BaseGame:
 126     setFen: function(fen) {
 127       this.curFen = fen;
 128       this.adjustFenSize();
 129     },
 130     adjustFenSize: function() {
 131       let fenInput = document.getElementById("fen");
 132       fenInput.style.width = (this.curFen.length+3) + "ch";
 133     },
 134     tryGotoFen: function() {
 135       if (V.IsGoodFen(this.curFen)) {
 136         this.gameRef.fen = this.curFen;
 137         this.loadGame();
 138       }
 139     }
 140   }
 141 };
 142 </script>
 143
 144 <style lang="sass">
 145 @import "@/styles/_board_squares_img.sass"
 146 @import "@/styles/_rules.sass"
 147 </style>
 148
 149 <style lang="sass" scoped>
 150 a#variantNameInAnalyze
 151   color: var(--card-fore-color)
 152   text-align: center
 153   font-weight: bold
 154   font-size: calc(1rem * var(--heading-ratio))
 155   line-height: 1.2
 156   margin: calc(1.5 * var(--universal-margin))
 157
 158 #rulesDiv > .card
 159   padding: 5px 0
 160   max-width: 50%
 161   max-height: 100%
 162   @media screen and (max-width: 1500px)
 163     max-width: 67%
 164   @media screen and (max-width: 1024px)
 165     max-width: 85%
 166   @media screen and (max-width: 767px)
 167     max-width: 100%
 168
 169 input#fen
 170   // Use a Monospace font for input FEN width adjustment
 171   font-family: "Fira Code"
 172 </style>