client/src/views/Analyse.vue

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