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 import { ArrayFun } from "@/utils/array";
  15 export default {
  16   name: 'my-analyse',
  17   components: {
  18     BaseGame,
  19   },
  20   // gameRef: to find the game in (potentially remote) storage
  21   data: function() {
  22     return {
  23       st: store.state,
  24       gameRef: { //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(fen) {
  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     {
  49       alert(this.st.tr["Analyse in Dark mode makes no sense!"]);
  50       history.back(); //or this.$router.go(-1)
  51     }
  52     else
  53     {
  54       this.gameRef.fen = this.$route.query["fen"].replace(/_/g, " ");
  55       this.initialize();
  56     }
  57   },
  58   methods: {
  59     initialize: async function() {
  60       // Obtain VariantRules object
  61       const vModule = await import("@/variants/" + this.gameRef.vname + ".js");
  62       window.V = vModule.VariantRules;
  63       this.loadGame();
  64     },
  65     loadGame: function() {
  66       // NOTE: no need to set score (~unused)
  67       this.game.vname = this.gameRef.vname;
  68       this.game.fen = this.gameRef.fen;
  69       this.curFen = this.game.fen;
  70       this.adjustFenSize();
  71       this.vr = new V(this.game.fen);
  72       this.game.mycolor = this.vr.turn;
  73       this.$set(this.game, "fenStart", this.gameRef.fen);
  74     },
  75     adjustFenSize: function() {
  76       let fenInput = document.getElementById("fen");
  77       fenInput.style.width = this.curFen.length + "ch";
  78     },
  79     gotoFen: function() {
  80       this.gameRef.fen = this.curFen;
  81       this.loadGame();
  82     },
  83   },
  84 };
  85 </script>