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()"
   9         )
  10         button(@click="gotoFen()") {{ st.tr["Go"] }}
  11   BaseGame(
  12     :game="game"
  13     :vr="vr"
  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   components: {
  23     BaseGame
  24   },
  25   // gameRef: to find the game in (potentially remote) storage
  26   data: function() {
  27     return {
  28       st: store.state,
  29       gameRef: {
  30         //given in URL (rid = remote ID)
  31         vname: "",
  32         fen: ""
  33       },
  34       game: {
  35         players: [{ name: "Analyse" }, { name: "Analyse" }],
  36         mode: "analyze"
  37       },
  38       vr: null, //"variant rules" object initialized from FEN
  39       curFen: ""
  40       //people: [], //players + observers //TODO later: interactive analyze...
  41     };
  42   },
  43   watch: {
  44     // NOTE: no watcher for $route change, because if fenStart doesn't change
  45     // then it doesn't trigger BaseGame.re_init() and the result is weird.
  46     "vr.movesCount": function() {
  47       this.curFen = this.vr.getFen();
  48       this.adjustFenSize();
  49     }
  50   },
  51   created: function() {
  52     this.gameRef.vname = this.$route.params["vname"];
  53     if (this.gameRef.vname == "Dark") {
  54       alert(this.st.tr["Analyse in Dark mode makes no sense!"]);
  55       history.back(); //or this.$router.go(-1)
  56     } else {
  57       this.gameRef.fen = this.$route.query["fen"].replace(/_/g, " ");
  58       this.initialize();
  59     }
  60   },
  61   methods: {
  62     initialize: async function() {
  63       // Obtain VariantRules object
  64       const vModule = await import("@/variants/" + this.gameRef.vname + ".js");
  65       window.V = vModule.VariantRules;
  66       this.loadGame();
  67     },
  68     loadGame: function() {
  69       // NOTE: no need to set score (~unused)
  70       this.game.vname = this.gameRef.vname;
  71       this.game.fen = this.gameRef.fen;
  72       this.curFen = this.game.fen;
  73       this.adjustFenSize();
  74       this.vr = new V(this.game.fen);
  75       this.game.mycolor = this.vr.turn;
  76       this.$set(this.game, "fenStart", this.gameRef.fen);
  77     },
  78     adjustFenSize: function() {
  79       let fenInput = document.getElementById("fen");
  80       fenInput.style.width = this.curFen.length + "ch";
  81     },
  82     gotoFen: function() {
  83       this.gameRef.fen = this.curFen;
  84       this.loadGame();
  85     }
  86   }
  87 };
  88 </script>