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