client/src/views/Analyze.vue

   1 <template lang="pug">
   2 main
   3   .row
   4     .col-sm-12
   5       #fenDiv(v-if="!!vr") {{ vr.getFen() }}
   6   .row
   7     .col-sm-12.col-md-10.col-md-offset-1
   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       //people: [], //players + observers //TODO later: interactive analyze...
  35     };
  36   },
  37   watch: {
  38     "$route": function(to, from) {
  39       this.gameRef.fen = to.query["fen"].replace(/_/g, " ");
  40       this.gameRef.vname = to.params["vname"];
  41       this.loadGame();
  42     },
  43   },
  44   created: function() {
  45     this.gameRef.fen = this.$route.query["fen"].replace(/_/g, " ");
  46     this.gameRef.vname = this.$route.params["vname"];
  47     this.loadGame();
  48   },
  49   methods: {
  50     loadGame: async function() {
  51       this.game.vname = this.gameRef.vname;
  52       this.game.fen = this.gameRef.fen;
  53       const vModule = await import("@/variants/" + this.game.vname + ".js");
  54       window.V = vModule.VariantRules;
  55       this.vr = new V(this.game.fen);
  56       // fenStart initialized in the end, after definition of V,
  57       // because it triggers a reset on BaseGame component.
  58       this.$set(this.game, "fenStart", this.gameRef.fen); //TODO: Vue3...
  59     },
  60   },
  61 };
  62 </script>
  63
  64 <style lang="sass">
  65 // TODO
  66 </style>