Commit | Line | Data |
---|---|---|
cf2343ce | 1 | <template lang="pug"> |
7aa548e7 | 2 | main |
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 | 68 | import ComputerGame from "@/components/ComputerGame.vue"; |
cf2343ce | 69 | import { store } from "@/store"; |
07052665 | 70 | import { replaceByDiag } from "@/utils/printDiagram"; |
98b94cc3 | 71 | import { CompgameStorage } from "@/utils/compgameStorage"; |
eb2d61de | 72 | import { processModalClick } from "@/utils/modalClick"; |
70c9745d | 73 | import afterRawLoad from "@/utils/afterRawLoad"; |
cf2343ce | 74 | export 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> |
235 | h4#variantName | |
50aed5a1 | 236 | text-align: center |
9a3049f3 | 237 | font-weight: bold |
50aed5a1 | 238 | </style> |