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