0c23a28b7f87959a180251237c57dd78403f9434
[vchess.git] / 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>