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     :game="game"
  12     @fenchange="setFen"
  13   )
  14 </template>
  15
  16 <script>
  17 import BaseGame from "@/components/BaseGame.vue";
  18 import { store } from "@/store";
  19 export default {
  20   name: "my-analyse",
  21   components: {
  22     BaseGame
  23   },
  24   // gameRef: to find the game in (potentially remote) storage
  25   data: function() {
  26     return {
  27       st: store.state,
  28       gameRef: {
  29         //given in URL (rid = remote ID)
  30         vname: "",
  31         fen: ""
  32       },
  33       game: {
  34         players: [{ name: "Analyse" }, { name: "Analyse" }],
  35         mode: "analyze"
  36       },
  37       curFen: ""
  38     };
  39   },
  40   // NOTE: no watcher for $route change, because if fenStart doesn't change
  41   // then it doesn't trigger BaseGame.re_init() and the result is weird.
  42   created: function() {
  43     this.gameRef.vname = this.$route.params["vname"];
  44     const routeFen = this.$route.query["fen"];
  45     if (!routeFen) this.alertAndQuit("Missing FEN");
  46     else {
  47       this.gameRef.fen = routeFen.replace(/_/g, " ");
  48       // orientation is optional: taken from FEN if missing
  49       const orientation = this.$route.query["side"];
  50       this.initialize(orientation);
  51     }
  52   },
  53   methods: {
  54     alertAndQuit: function(text, wrongVname) {
  55       // Soon after component creation, st.tr might be uninitialized.
  56       // Set a timeout to let a chance for the message to show translated.
  57       const newUrl = "/variants" + (wrongVname ? "" : "/" + this.gameRef.vname);
  58       setTimeout(() => {
  59         alert(this.st.tr[text] || text);
  60         this.$router.replace(newUrl);
  61       }, 500);
  62     },
  63     initialize: async function(orientation) {
  64       // Obtain VariantRules object
  65       await import("@/variants/" + this.gameRef.vname + ".js")
  66       .then((vModule) => {
  67         window.V = vModule.VariantRules;
  68         if (!V.CanAnalyze)
  69           // Late check, in case the user tried to enter URL by hand
  70           this.alertAndQuit("Analysis disabled for this variant");
  71         else this.loadGame(orientation);
  72       })
  73       .catch((err) => { this.alertAndQuit("Mispelled variant name", true); });
  74     },
  75     loadGame: function(orientation) {
  76       // NOTE: no need to set score (~unused)
  77       this.game.vname = this.gameRef.vname;
  78       this.game.fen = this.gameRef.fen;
  79       this.curFen = this.game.fen;
  80       this.adjustFenSize();
  81       this.game.mycolor = orientation || V.ParseFen(this.gameRef.fen).turn;
  82       this.$set(this.game, "fenStart", this.gameRef.fen);
  83     },
  84     // Triggered by "fenchange" emitted in BaseGame:
  85     setFen: function(fen) {
  86       this.curFen = fen;
  87       this.adjustFenSize();
  88     },
  89     adjustFenSize: function() {
  90       let fenInput = document.getElementById("fen");
  91       fenInput.style.width = this.curFen.length + "ch";
  92     },
  93     tryGotoFen: function() {
  94       if (V.IsGoodFen(this.curFen))
  95       {
  96         this.gameRef.fen = this.curFen;
  97         this.loadGame();
  98       }
  99     }
 100   }
 101 };
 102 </script>