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