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         const orientation = this.$route.query["side"];
  69         this.initialize(orientation);
  70       }
  71     },
  72     initialize: async function(orientation) {
  73       // Obtain VariantRules object
  74       await import("@/variants/" + this.gameRef.vname + ".js")
  75       .then((vModule) => {
  76         window.V = vModule[this.gameRef.vname + "Rules"];
  77         if (!V.CanAnalyze)
  78           // Late check, in case the user tried to enter URL by hand
  79           this.alertAndQuit("Analysis disabled for this variant");
  80         else this.loadGame(orientation);
  81       })
  82       .catch((err) => { this.alertAndQuit("Mispelled variant name", true); });
  83     },
  84     loadGame: function(orientation) {
  85       this.game.vname = this.gameRef.vname;
  86       this.game.fenStart = this.gameRef.fen;
  87       this.game.fen = this.gameRef.fen;
  88       this.game.score = "*"; //never change
  89       this.curFen = this.game.fen;
  90       this.adjustFenSize();
  91       this.game.mycolor = orientation || V.ParseFen(this.gameRef.fen).turn;
  92       this.$refs["basegame"].re_setVariables(this.game);
  93     },
  94     // Triggered by "fenchange" emitted in BaseGame:
  95     setFen: function(fen) {
  96       this.curFen = fen;
  97       this.adjustFenSize();
  98     },
  99     adjustFenSize: function() {
 100       let fenInput = document.getElementById("fen");
 101       fenInput.style.width = (this.curFen.length+3) + "ch";
 102     },
 103     tryGotoFen: function() {
 104       if (V.IsGoodFen(this.curFen)) {
 105         this.gameRef.fen = this.curFen;
 106         this.loadGame();
 107       }
 108     }
 109   }
 110 };
 111 </script>
 112
 113 <style lang="sass" scoped=true>
 114 input#fen
 115   // Use a Monospace font for input FEN width adjustment
 116   font-family: "Fira Code"
 117 </style>