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