Fix live games
[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")
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] = elt.value;
160 }
161 document.getElementById("modalOptions").checked = false;
162 if (this.whatNext == "analyze") this.gotoAnalyze(options);
163 else this.startGame(this.whatNext, options);
164 },
165 startGame: function(mode, options) {
166 if (this.gameInProgress) return;
167 const next = (game, options) => {
168 this.gameInProgress = true;
169 this.display = "computer";
170 this.gameInfo.mode = mode;
171 this.$refs["compgame"].launchGame(game, options);
172 };
173 if (!!options) {
174 next(null, options);
175 return;
176 }
177 const askOptions = () => {
178 this.whatNext = mode;
179 doClick("modalOptions");
180 };
181 if (mode == "versus") {
182 CompgameStorage.get(this.gameInfo.vname, (game) => {
183 // NOTE: game might be null (if none stored yet)
184 if (!!game && !V.IsGoodFen(game.fen)) {
185 // Some issues with stored game: delete
186 CompgameStorage.remove(game.vname);
187 game = null;
188 }
189 if (!!game || Object.keys(V.Options).length == 0) next(game);
190 else askOptions();
191 });
192 }
193 else {
194 if (Object.keys(V.Options).length == 0) next();
195 else askOptions();
196 }
197 },
198 // The user wants to stop the game:
199 stopGame: function() {
200 this.$refs["compgame"].gameOver("?", "Undetermined result");
201 },
202 // The game is effectively stopped:
203 gameStopped: function() {
204 this.gameInProgress = false;
205 if (this.gameInfo.mode == "versus")
206 CompgameStorage.remove(this.gameInfo.vname);
207 },
208 gotoAnalyze: function(options) {
209 if (!options && Object.keys(V.Options).length > 0) {
210 this.whatNext = "analyze";
211 doClick("modalOptions");
212 }
213 else {
214 this.$router.push(
215 "/analyse/" + this.gameInfo.vname +
216 "/?fen=" + V.GenRandInitFen(options)
217 );
218 }
219 }
220 }
221 };
222 </script>
223
224 <!-- NOTE: not scoped here, because HTML is injected -->
225 <style lang="sass">
226 @import "@/styles/_board_squares_img.sass"
227 @import "@/styles/_rules.sass"
228 </style>
229
230 <style lang="sass" scoped>
231 h4#variantName
232 text-align: center
233 font-weight: bold
234 </style>