TODO: board+moves in same div fixed width centered, chat modal (any screen size)
[vchess.git] / 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>