Merge branch 'master' of auder.net:vchess
[vchess.git] / client / src / views / Rules.vue
1 <template lang="pug">
2 main
3 input#modalOptions.modal(type="checkbox")
4 div#optionsDiv(
5 role="dialog"
6 data-checkbox="modalOptions"
7 )
8 .card
9 label.modal-close(for="modalOptions")
10 h3 {{ st.tr["Options"] }}
11 fieldset(v-if="!!V && V.Options")
12 div(v-for="select of V.Options.select || []")
13 label(:for="select.variable + '_opt'") {{ st.tr[select.label] }}
14 select(:id="select.variable + '_opt'")
15 option(
16 v-for="o of select.options"
17 :value="o.value"
18 :selected="o.value == select.defaut"
19 )
20 | {{ st.tr[o.label] }}
21 div(v-for="check of V.Options.check || []")
22 label(:for="check.variable + '_opt'") {{ st.tr[check.label] }}
23 input(
24 :id="check.variable + '_opt'"
25 type="checkbox"
26 :checked="check.defaut")
27 button(@click="setOptions()") {{ st.tr["Validate"] }}
28 .row
29 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
30 .button-group
31 button(@click="clickReadRules()") {{ st.tr["Rules"] }}
32 button(
33 v-show="!gameInProgress"
34 @click="startGame('auto')"
35 )
36 | {{ st.tr["Example game"] }}
37 button(
38 v-show="!gameInProgress"
39 @click="startGame('versus')"
40 )
41 | {{ st.tr["Practice"] }}
42 button(
43 v-show="gameInProgress"
44 @click="stopGame()"
45 )
46 | {{ st.tr["Stop game"] }}
47 button(
48 v-if="showAnalyzeBtn"
49 @click="gotoAnalyze()"
50 )
51 | {{ st.tr["Analysis mode"] }}
52 .row
53 .col-sm-12.col-md-8.col-md-offset-2.col-lg-6.col-lg-offset-3
54 h4#variantName(v-show="display=='rules'") {{ getVariantDisplay }}
55 div(
56 v-show="display=='rules'"
57 v-html="content"
58 )
59 ComputerGame(
60 ref="compgame"
61 v-show="display=='computer'"
62 :game-info="gameInfo"
63 @game-stopped="gameStopped"
64 )
65 </template>
66
67 <script>
68 import ComputerGame from "@/components/ComputerGame.vue";
69 import { store } from "@/store";
70 import { replaceByDiag } from "@/utils/printDiagram";
71 import { CompgameStorage } from "@/utils/compgameStorage";
72 import { processModalClick } from "@/utils/modalClick";
73 import afterRawLoad from "@/utils/afterRawLoad";
74 export default {
75 name: "my-rules",
76 components: {
77 ComputerGame
78 },
79 data: function() {
80 return {
81 st: store.state,
82 display: "rules",
83 gameInProgress: false,
84 // variables passed to ComputerGame:
85 gameInfo: {
86 vname: "",
87 mode: "versus"
88 },
89 V: null
90 };
91 },
92 watch: {
93 $route: function(newRoute) {
94 this.re_setVariant(newRoute.params["vname"]);
95 }
96 },
97 created: function() {
98 // NOTE: variant cannot be set before store is initialized
99 this.re_setVariant(this.$route.params["vname"]);
100 },
101 mounted: function() {
102 document.getElementById("optionsDiv")
103 .addEventListener("click", processModalClick);
104 },
105 computed: {
106 showAnalyzeBtn: function() {
107 return !!this.V && this.V.CanAnalyze;
108 },
109 getVariantDisplay: function() {
110 if (!this.gameInfo.vname) return ""; //variant not set yet
111 return this.st.variants.find(v => v.name == this.gameInfo.vname).display;
112 },
113 content: function() {
114 if (!this.gameInfo.vname) return ""; //variant not set yet
115 return (
116 afterRawLoad(
117 require(
118 "raw-loader!@/translations/rules/" +
119 this.gameInfo.vname + "/" + this.st.lang + ".pug"
120 ).default
121 ).replace(/(fen:)([^:]*):/g, replaceByDiag)
122 );
123 }
124 },
125 methods: {
126 clickReadRules: function() {
127 if (this.display != "rules") this.display = "rules";
128 else if (this.gameInProgress) this.display = "computer";
129 },
130 re_setVariant: async function(vname) {
131 const key = "rr_" + vname;
132 if (!localStorage.getItem(key))
133 // Mark rules as "read"
134 localStorage.setItem(key, '1');
135 await import("@/variants/" + vname + ".js")
136 .then((vModule) => {
137 this.V = window.V = vModule[vname + "Rules"];
138 this.gameInfo.vname = vname;
139 })
140 .catch((err) => {
141 // Soon after component creation, st.tr might be uninitialized.
142 // Set a timeout to let a chance for the message to show translated.
143 const text = "Mispelled variant name";
144 setTimeout(() => {
145 alert(this.st.tr[text] || text);
146 this.$router.replace("/variants");
147 }, 500);
148 });
149 },
150 setOptions: function() {
151 let options = {};
152 // Get/set options variables / TODO: v-model?!
153 for (const check of this.V.Options.check || []) {
154 const elt = document.getElementById(check.variable + "_opt");
155 if (elt.checked) options[check.variable] = true;
156 }
157 for (const select of this.V.Options.select || []) {
158 const elt = document.getElementById(select.variable + "_opt");
159 options[select.variable] = parseInt(elt.value, 10) || elt.value;
160 }
161 if (!V.IsValidOptions(options)) {
162 alert(this.st.tr["Invalid options"]);
163 return;
164 }
165 document.getElementById("modalOptions").checked = false;
166 if (this.whatNext == "analyze") this.gotoAnalyze(options);
167 else this.startGame(this.whatNext, options);
168 },
169 startGame: function(mode, options) {
170 if (this.gameInProgress) return;
171 const next = (game, options) => {
172 this.gameInProgress = true;
173 this.display = "computer";
174 this.gameInfo.mode = mode;
175 this.$refs["compgame"].launchGame(game, options);
176 };
177 if (!!options) {
178 next(null, options);
179 return;
180 }
181 const askOptions = () => {
182 this.whatNext = mode;
183 doClick("modalOptions");
184 };
185 if (mode == "versus") {
186 CompgameStorage.get(this.gameInfo.vname, (game) => {
187 // NOTE: game might be null (if none stored yet)
188 if (!!game && !V.IsGoodFen(game.fen)) {
189 // Some issues with stored game: delete
190 CompgameStorage.remove(game.vname);
191 game = null;
192 }
193 if (!!game || !V.Options) next(game);
194 else askOptions();
195 });
196 }
197 else {
198 if (!V.Options) next();
199 else askOptions();
200 }
201 },
202 // The user wants to stop the game:
203 stopGame: function() {
204 this.$refs["compgame"].gameOver("?", "Undetermined result");
205 },
206 // The game is effectively stopped:
207 gameStopped: function() {
208 this.gameInProgress = false;
209 if (this.gameInfo.mode == "versus")
210 CompgameStorage.remove(this.gameInfo.vname);
211 },
212 gotoAnalyze: function(options) {
213 if (!options && V.Options) {
214 this.whatNext = "analyze";
215 doClick("modalOptions");
216 }
217 else {
218 this.$router.push(
219 "/analyse/" + this.gameInfo.vname +
220 "/?fen=" + V.GenRandInitFen(options)
221 );
222 }
223 }
224 }
225 };
226 </script>
227
228 <!-- NOTE: not scoped here, because HTML is injected -->
229 <style lang="sass">
230 @import "@/styles/_board_squares_img.sass"
231 @import "@/styles/_rules.sass"
232 </style>
233
234 <style lang="sass" scoped>
235 h4#variantName
236 text-align: center
237 font-weight: bold
238 </style>