client/src/views/Analyse.vue

   1 <template lang="pug">
   2 main
   3   .row
   4     .col-sm-12
   5       .text-center
   6         input#fen(
   7           v-model="curFen"
   8           @input="adjustFenSize(); tryGotoFen()"
   9         )
  10   BaseGame(
  11     ref="basegame"
  12     :game="game"
  13     @fenchange="setFen"
  14   )
  15 </template>
  16
  17 <script>
  18 import BaseGame from "@/components/BaseGame.vue";
  19 import { store } from "@/store";
  20 export default {
  21   name: "my-analyse",
  22   components: {
  23     BaseGame
  24   },
  25   // gameRef: to find the game in (potentially remote) storage
  26   data: function() {
  27     return {
  28       st: store.state,
  29       gameRef: {
  30         //given in URL (rid = remote ID)
  31         vname: "",
  32         fen: ""
  33       },
  34       game: {
  35         players: [{ name: "Analyse" }, { name: "Analyse" }],
  36         mode: "analyze"
  37       },
  38       curFen: ""
  39     };
  40   },
  41   watch: {
  42     $route: function() {
  43       this.initFromUrl();
  44     }
  45   },
  46   created: function() {
  47     this.initFromUrl();
  48   },
  49   methods: {
  50     alertAndQuit: function(text, wrongVname) {
  51       // Soon after component creation, st.tr might be uninitialized.
  52       // Set a timeout to let a chance for the message to show translated.
  53       const newUrl =
  54         "/variants" + (wrongVname ? "" : "/" + this.gameRef.vname);
  55       setTimeout(() => {
  56         alert(this.st.tr[text] || text);
  57         this.$router.replace(newUrl);
  58       }, 500);
  59     },
  60     initFromUrl: function() {
  61       this.gameRef.vname = this.$route.params["vname"];
  62       const routeFen = this.$route.query["fen"];
  63       if (!routeFen) this.alertAndQuit("Missing FEN");
  64       else {
  65         this.gameRef.fen = routeFen.replace(/_/g, " ");
  66         // orientation is optional: taken from FEN if missing
  67         const orientation = this.$route.query["side"];
  68         this.initialize(orientation);
  69       }
  70     },
  71     initialize: async function(orientation) {
  72       // Obtain VariantRules object
  73       await import("@/variants/" + this.gameRef.vname + ".js")
  74       .then((vModule) => {
  75         window.V = vModule[this.gameRef.vname + "Rules"];
  76         if (!V.CanAnalyze)
  77           // Late check, in case the user tried to enter URL by hand
  78           this.alertAndQuit("Analysis disabled for this variant");
  79         else this.loadGame(orientation);
  80       })
  81       .catch((err) => { this.alertAndQuit("Mispelled variant name", true); });
  82     },
  83     loadGame: function(orientation) {
  84       this.game.vname = this.gameRef.vname;
  85       this.game.fenStart = this.gameRef.fen;
  86       this.game.fen = this.gameRef.fen;
  87       this.game.score = "*"; //never change
  88       this.curFen = this.game.fen;
  89       this.adjustFenSize();
  90       this.game.mycolor = orientation || V.ParseFen(this.gameRef.fen).turn;
  91       this.$refs["basegame"].re_setVariables(this.game);
  92     },
  93     // Triggered by "fenchange" emitted in BaseGame:
  94     setFen: function(fen) {
  95       this.curFen = fen;
  96       this.adjustFenSize();
  97     },
  98     adjustFenSize: function() {
  99       let fenInput = document.getElementById("fen");
 100       fenInput.style.width = (this.curFen.length+3) + "ch";
 101     },
 102     tryGotoFen: function() {
 103       if (V.IsGoodFen(this.curFen)) {
 104         this.gameRef.fen = this.curFen;
 105         this.loadGame();
 106       }
 107     }
 108   }
 109 };
 110 </script>
 111
 112 <style lang="sass" scoped=true>
 113 input#fen
 114   // Use a Monospace font for input FEN width adjustment
 115   font-family: "Fira Code"
 116 </style>