client/src/views/Analyze.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-analyze',
  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:"Analyze"},{name:"Analyze"}],
  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     "$route": function(to, from) {
  40       this.gameRef.fen = to.query["fen"].replace(/_/g, " ");
  41       this.gameRef.vname = to.params["vname"];
  42       this.loadGame();
  43     },
  44     "vr.movesCount": function(fen) {
  45       this.curFen = this.vr.getFen();
  46       this.adjustFenSize();
  47     },
  48   },
  49   created: function() {
  50     this.gameRef.fen = this.$route.query["fen"].replace(/_/g, " ");
  51     this.gameRef.vname = this.$route.params["vname"];
  52     if (this.gameRef.vname != "Dark")
  53       this.initialize(this.loadGame);
  54     else
  55     {
  56       alert(this.st.tr["Analyze in Dark mode makes no sense!"]);
  57       history.back(); //or this.$router.go(-1)
  58     }
  59   },
  60   methods: {
  61     initialize: async function(callback) {
  62       // Obtain VariantRules object
  63       const vModule = await import("@/variants/" + this.gameRef.vname + ".js");
  64       window.V = vModule.VariantRules;
  65       callback();
  66     },
  67     loadGame: function() {
  68       // NOTE: no need to set score (~unused)
  69       this.game.vname = this.gameRef.vname;
  70       this.game.fen = this.gameRef.fen;
  71       this.curFen = this.game.fen;
  72       this.adjustFenSize();
  73       this.vr = new V(this.game.fen);
  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>