client/src/views/Analyse.vue

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