Fix Football
[vchess.git] / client / src / views / Rules.vue
CommitLineData
cf2343ce 1<template lang="pug">
7aa548e7 2main
eb2d61de
BA
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"] }}
4313762d
BA
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] }}
eb2d61de
BA
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] }}
4313762d
BA
21 div(v-for="check of V.Options.check || []")
22 label(:for="check.variable + '_opt'") {{ st.tr[check.label] }}
eb2d61de
BA
23 input(
24 :id="check.variable + '_opt'"
25 type="checkbox"
26 :checked="check.defaut")
27 button(@click="setOptions()") {{ st.tr["Validate"] }}
7aa548e7
BA
28 .row
29 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
30 .button-group
9ddaf8da 31 button(@click="clickReadRules()") {{ st.tr["Rules"] }}
910d631b
BA
32 button(
33 v-show="!gameInProgress"
34 @click="startGame('auto')"
35 )
f44fd3bf 36 | {{ st.tr["Example game"] }}
910d631b
BA
37 button(
38 v-show="!gameInProgress"
39 @click="startGame('versus')"
40 )
602d6bef 41 | {{ st.tr["Practice"] }}
910d631b
BA
42 button(
43 v-show="gameInProgress"
44 @click="stopGame()"
45 )
602d6bef 46 | {{ st.tr["Stop game"] }}
910d631b 47 button(
20620465 48 v-if="showAnalyzeBtn"
910d631b
BA
49 @click="gotoAnalyze()"
50 )
8055eabd 51 | {{ st.tr["Analysis mode"] }}
9bd6786b
BA
52 .row
53 .col-sm-12.col-md-8.col-md-offset-2.col-lg-6.col-lg-offset-3
eaa5ad3e 54 h4#variantName(v-show="display=='rules'") {{ getVariantDisplay }}
910d631b
BA
55 div(
56 v-show="display=='rules'"
57 v-html="content"
58 )
59 ComputerGame(
866842c3 60 ref="compgame"
910d631b
BA
61 v-show="display=='computer'"
62 :game-info="gameInfo"
910d631b
BA
63 @game-stopped="gameStopped"
64 )
cf2343ce
BA
65</template>
66
67<script>
a6088c90 68import ComputerGame from "@/components/ComputerGame.vue";
cf2343ce 69import { store } from "@/store";
07052665 70import { replaceByDiag } from "@/utils/printDiagram";
98b94cc3 71import { CompgameStorage } from "@/utils/compgameStorage";
eb2d61de 72import { processModalClick } from "@/utils/modalClick";
70c9745d 73import afterRawLoad from "@/utils/afterRawLoad";
cf2343ce 74export default {
6808d7a1 75 name: "my-rules",
24340cae 76 components: {
6808d7a1 77 ComputerGame
24340cae 78 },
cf2343ce
BA
79 data: function() {
80 return {
81 st: store.state,
cf2343ce 82 display: "rules",
cf2343ce 83 gameInProgress: false,
6dd02928 84 // variables passed to ComputerGame:
834c202a 85 gameInfo: {
fcbc92c2 86 vname: "",
eb2d61de 87 mode: "versus"
b9139251 88 },
eb2d61de 89 V: null
cf2343ce
BA
90 };
91 },
42eb4eaf 92 watch: {
6808d7a1 93 $route: function(newRoute) {
fcbc92c2 94 this.re_setVariant(newRoute.params["vname"]);
6808d7a1 95 }
42eb4eaf 96 },
6f093ada 97 created: function() {
e2732923 98 // NOTE: variant cannot be set before store is initialized
fcbc92c2
BA
99 this.re_setVariant(this.$route.params["vname"]);
100 },
eb2d61de
BA
101 mounted: function() {
102 document.getElementById("optionsDiv")
103 .addEventListener("click", processModalClick);
104 },
fcbc92c2 105 computed: {
20620465 106 showAnalyzeBtn: function() {
84fc0f02 107 return !!this.V && this.V.CanAnalyze;
20620465 108 },
eaa5ad3e
BA
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 },
fcbc92c2 113 content: function() {
6808d7a1 114 if (!this.gameInfo.vname) return ""; //variant not set yet
6808d7a1 115 return (
70c9745d
BA
116 afterRawLoad(
117 require(
118 "raw-loader!@/translations/rules/" +
119 this.gameInfo.vname + "/" + this.st.lang + ".pug"
8b3b2151 120 ).default
70c9745d 121 ).replace(/(fen:)([^:]*):/g, replaceByDiag)
6808d7a1
BA
122 );
123 }
cf2343ce
BA
124 },
125 methods: {
41cb9b94 126 clickReadRules: function() {
6808d7a1
BA
127 if (this.display != "rules") this.display = "rules";
128 else if (this.gameInProgress) this.display = "computer";
41cb9b94 129 },
fcbc92c2 130 re_setVariant: async function(vname) {
ba65b8de
BA
131 const key = "rr_" + vname;
132 if (!localStorage.getItem(key))
133 // Mark rules as "read"
134 localStorage.setItem(key, '1');
a97bdbda
BA
135 await import("@/variants/" + vname + ".js")
136 .then((vModule) => {
32f6285e 137 this.V = window.V = vModule[vname + "Rules"];
a97bdbda
BA
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 });
cf2343ce 149 },
eb2d61de
BA
150 setOptions: function() {
151 let options = {};
152 // Get/set options variables / TODO: v-model?!
4313762d 153 for (const check of this.V.Options.check || []) {
eb2d61de
BA
154 const elt = document.getElementById(check.variable + "_opt");
155 if (elt.checked) options[check.variable] = true;
156 }
4313762d 157 for (const select of this.V.Options.select || []) {
eb2d61de 158 const elt = document.getElementById(select.variable + "_opt");
4313762d
BA
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;
eb2d61de
BA
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) {
6808d7a1 170 if (this.gameInProgress) return;
eb2d61de
BA
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") {
98b94cc3 186 CompgameStorage.get(this.gameInfo.vname, (game) => {
996bdaa4
BA
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 }
4313762d 193 if (!!game || !V.Options) next(game);
eb2d61de 194 else askOptions();
98b94cc3 195 });
98b94cc3 196 }
eb2d61de 197 else {
4313762d 198 if (!V.Options) next();
eb2d61de
BA
199 else askOptions();
200 }
cf2343ce 201 },
d2edca6d 202 // The user wants to stop the game:
866842c3
BA
203 stopGame: function() {
204 this.$refs["compgame"].gameOver("?", "Undetermined result");
cf2343ce 205 },
41cb9b94
BA
206 // The game is effectively stopped:
207 gameStopped: function() {
208 this.gameInProgress = false;
98b94cc3
BA
209 if (this.gameInfo.mode == "versus")
210 CompgameStorage.remove(this.gameInfo.vname);
41cb9b94 211 },
eb2d61de 212 gotoAnalyze: function(options) {
4313762d 213 if (!options && V.Options) {
eb2d61de
BA
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 }
6808d7a1
BA
223 }
224 }
cf2343ce
BA
225};
226</script>
50aed5a1 227
26d8a01a 228<!-- NOTE: not scoped here, because HTML is injected -->
5bcc9b31 229<style lang="sass">
26d8a01a
BA
230@import "@/styles/_board_squares_img.sass"
231@import "@/styles/_rules.sass"
232</style>
c7550017 233
26d8a01a
BA
234<style lang="sass" scoped>
235h4#variantName
50aed5a1 236 text-align: center
9a3049f3 237 font-weight: bold
50aed5a1 238</style>