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