Attempt to clarify installation instructions a little
[vchess.git] / client / src / views / Analyse.vue
CommitLineData
7f3484bd 1<template lang="pug">
7aa548e7 2main
26d8a01a
BA
3 input#modalRules.modal(type="checkbox")
4 div#rulesDiv(
5 role="dialog"
6 data-checkbox="modalRules"
7 )
8 .card
9 label.modal-close(for="modalRules")
1c15969e
BA
10 a#variantNameInAnalyze(:href="'/#/variants/'+game.vname")
11 | {{ game.vname }}
26d8a01a 12 div(v-html="rulesContent")
63ca2b89
BA
13 .row
14 .col-sm-12
9a3049f3 15 .text-center
910d631b
BA
16 input#fen(
17 v-model="curFen"
725da57f 18 @input="adjustFenSize(); tryGotoFen()"
910d631b 19 )
910d631b 20 BaseGame(
b1e46b33 21 ref="basegame"
910d631b 22 :game="game"
8055eabd 23 @fenchange="setFen"
910d631b 24 )
7f3484bd
BA
25</template>
26
27<script>
28import BaseGame from "@/components/BaseGame.vue";
26d8a01a
BA
29import { processModalClick } from "@/utils/modalClick";
30import { replaceByDiag } from "@/utils/printDiagram";
7f3484bd 31import { store } from "@/store";
70c9745d 32import afterRawLoad from "@/utils/afterRawLoad";
7f3484bd 33export default {
6808d7a1 34 name: "my-analyse",
5f918a27
BA
35 // TODO: game import ==> require some adjustments, like
36 // the ability to analyse from a list of moves...
7f3484bd 37 components: {
6808d7a1 38 BaseGame
7f3484bd
BA
39 },
40 // gameRef: to find the game in (potentially remote) storage
41 data: function() {
42 return {
43 st: store.state,
26d8a01a 44 rulesContent: "",
6808d7a1 45 gameRef: {
652f40de 46 vname: "",
eb2d61de
BA
47 fen: "",
48 options: {}
652f40de
BA
49 },
50 game: {
6808d7a1
BA
51 players: [{ name: "Analyse" }, { name: "Analyse" }],
52 mode: "analyze"
7f3484bd 53 },
6808d7a1 54 curFen: ""
7f3484bd
BA
55 };
56 },
b1e46b33
BA
57 watch: {
58 $route: function() {
59 this.initFromUrl();
a97bdbda 60 }
7f3484bd 61 },
b1e46b33
BA
62 created: function() {
63 this.initFromUrl();
64 },
26d8a01a
BA
65 mounted: function() {
66 document.getElementById("rulesDiv")
67 .addEventListener("click", processModalClick);
68 },
7f3484bd 69 methods: {
a97bdbda
BA
70 alertAndQuit: function(text, wrongVname) {
71 // Soon after component creation, st.tr might be uninitialized.
72 // Set a timeout to let a chance for the message to show translated.
2c5d7b20
BA
73 const newUrl =
74 "/variants" + (wrongVname ? "" : "/" + this.gameRef.vname);
a97bdbda
BA
75 setTimeout(() => {
76 alert(this.st.tr[text] || text);
77 this.$router.replace(newUrl);
78 }, 500);
79 },
b1e46b33
BA
80 initFromUrl: function() {
81 this.gameRef.vname = this.$route.params["vname"];
82 const routeFen = this.$route.query["fen"];
83 if (!routeFen) this.alertAndQuit("Missing FEN");
84 else {
85 this.gameRef.fen = routeFen.replace(/_/g, " ");
07052665
BA
86 // orientation is optional: taken from FEN if missing.
87 // NOTE: currently no internal usage of 'side', but could be used by
88 // manually settings the URL (TODO?).
b1e46b33
BA
89 const orientation = this.$route.query["side"];
90 this.initialize(orientation);
91 }
92 },
7ba4a5bc 93 initialize: async function(orientation) {
5157ce0b 94 // Obtain VariantRules object
a97bdbda
BA
95 await import("@/variants/" + this.gameRef.vname + ".js")
96 .then((vModule) => {
32f6285e 97 window.V = vModule[this.gameRef.vname + "Rules"];
a97bdbda
BA
98 if (!V.CanAnalyze)
99 // Late check, in case the user tried to enter URL by hand
100 this.alertAndQuit("Analysis disabled for this variant");
7ba4a5bc 101 else this.loadGame(orientation);
a97bdbda 102 })
0fb43db7 103 //.catch((err) => { this.alertAndQuit("Mispelled variant name", true); });
26d8a01a 104 this.rulesContent =
70c9745d
BA
105 afterRawLoad(
106 require(
107 "raw-loader!@/translations/rules/" +
108 this.gameRef.vname + "/" + this.st.lang + ".pug"
8b3b2151 109 ).default
70c9745d 110 ).replace(/(fen:)([^:]*):/g, replaceByDiag);
26d8a01a 111 },
7ba4a5bc 112 loadGame: function(orientation) {
652f40de 113 this.game.vname = this.gameRef.vname;
b1e46b33 114 this.game.fenStart = this.gameRef.fen;
652f40de 115 this.game.fen = this.gameRef.fen;
0234201f 116 this.game.score = "*"; //never change
5157ce0b
BA
117 this.curFen = this.game.fen;
118 this.adjustFenSize();
7ba4a5bc 119 this.game.mycolor = orientation || V.ParseFen(this.gameRef.fen).turn;
b1e46b33 120 this.$refs["basegame"].re_setVariables(this.game);
7f3484bd 121 },
8055eabd
BA
122 // Triggered by "fenchange" emitted in BaseGame:
123 setFen: function(fen) {
124 this.curFen = fen;
125 this.adjustFenSize();
126 },
5157ce0b
BA
127 adjustFenSize: function() {
128 let fenInput = document.getElementById("fen");
d54f6261 129 fenInput.style.width = (this.curFen.length+3) + "ch";
5157ce0b 130 },
725da57f 131 tryGotoFen: function() {
3a2a7b5f 132 if (V.IsGoodFen(this.curFen)) {
725da57f
BA
133 this.gameRef.fen = this.curFen;
134 this.loadGame();
135 }
6808d7a1
BA
136 }
137 }
7f3484bd
BA
138};
139</script>
d54f6261 140
26d8a01a
BA
141<style lang="sass">
142@import "@/styles/_board_squares_img.sass"
143@import "@/styles/_rules.sass"
144</style>
145
146<style lang="sass" scoped>
1c15969e
BA
147a#variantNameInAnalyze
148 color: var(--card-fore-color)
26d8a01a 149 text-align: center
26d8a01a 150 font-weight: bold
1c15969e
BA
151 font-size: calc(1rem * var(--heading-ratio))
152 line-height: 1.2
153 margin: calc(1.5 * var(--universal-margin))
26d8a01a
BA
154
155#rulesDiv > .card
156 padding: 5px 0
157 max-width: 50%
158 max-height: 100%
159 @media screen and (max-width: 1500px)
160 max-width: 67%
161 @media screen and (max-width: 1024px)
162 max-width: 85%
163 @media screen and (max-width: 767px)
164 max-width: 100%
165
d54f6261
BA
166input#fen
167 // Use a Monospace font for input FEN width adjustment
168 font-family: "Fira Code"
169</style>