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     this.gameRef.fen = this.$route.query["fen"].replace(/_/g, " ");
  45     this.initialize();
  46   },
  47   methods: {
  48     initialize: async function() {
  49       // Obtain VariantRules object
  50       const vModule = await import("@/variants/" + this.gameRef.vname + ".js");
  51       window.V = vModule.VariantRules;
  52       this.loadGame();
  53     },
  54     loadGame: function() {
  55       // NOTE: no need to set score (~unused)
  56       this.game.vname = this.gameRef.vname;
  57       this.game.fen = this.gameRef.fen;
  58       this.curFen = this.game.fen;
  59       this.adjustFenSize();
  60       this.game.mycolor = V.ParseFen(this.gameRef.fen).turn;
  61       this.$set(this.game, "fenStart", this.gameRef.fen);
  62     },
  63     // Triggered by "fenchange" emitted in BaseGame:
  64     setFen: function(fen) {
  65       this.curFen = fen;
  66       this.adjustFenSize();
  67     },
  68     adjustFenSize: function() {
  69       let fenInput = document.getElementById("fen");
  70       fenInput.style.width = this.curFen.length + "ch";
  71     },
  72     tryGotoFen: function() {
  73       if (V.IsGoodFen(this.curFen))
  74       {
  75         this.gameRef.fen = this.curFen;
  76         this.loadGame();
  77       }
  78     }
  79   }
  80 };
  81 </script>