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