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     :vr="vr"
  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       vr: null, //"variant rules" object initialized from FEN
  38       curFen: ""
  39     };
  40   },
  41   watch: {
  42     // NOTE: no watcher for $route change, because if fenStart doesn't change
  43     // then it doesn't trigger BaseGame.re_init() and the result is weird.
  44     "vr.movesCount": function() {
  45       this.curFen = this.vr.getFen();
  46       this.adjustFenSize();
  47     }
  48   },
  49   created: function() {
  50     this.gameRef.vname = this.$route.params["vname"];
  51     this.gameRef.fen = this.$route.query["fen"].replace(/_/g, " ");
  52     this.initialize();
  53   },
  54   methods: {
  55     initialize: async function() {
  56       // Obtain VariantRules object
  57       const vModule = await import("@/variants/" + this.gameRef.vname + ".js");
  58       window.V = vModule.VariantRules;
  59       this.loadGame();
  60     },
  61     loadGame: function() {
  62       // NOTE: no need to set score (~unused)
  63       this.game.vname = this.gameRef.vname;
  64       this.game.fen = this.gameRef.fen;
  65       this.curFen = this.game.fen;
  66       this.adjustFenSize();
  67       this.vr = new V(this.game.fen);
  68       this.game.mycolor = this.vr.turn;
  69       this.$set(this.game, "fenStart", this.gameRef.fen);
  70     },
  71     adjustFenSize: function() {
  72       let fenInput = document.getElementById("fen");
  73       fenInput.style.width = this.curFen.length + "ch";
  74     },
  75     tryGotoFen: function() {
  76       if (V.IsGoodFen(this.curFen))
  77       {
  78         this.gameRef.fen = this.curFen;
  79         this.loadGame();
  80       }
  81     }
  82   }
  83 };
  84 </script>