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