Fix ExtinctionRules position check, add prev/next buttons in problems page
[vchess.git] / client / src / views / Problems.vue
1 <template lang="pug">
2 main
3 input#modalNewprob.modal(
4 type="checkbox"
5 @change="infoMsg=''"
6 )
7 div#newprobDiv(
8 role="dialog"
9 data-checkbox="modalNewprob"
10 )
11 .card
12 label#closeNewprob.modal-close(for="modalNewprob")
13 fieldset
14 label(for="selectVariant") {{ st.tr["Variant"] }}
15 select#selectVariant(
16 v-model="curproblem.vid"
17 @change="changeVariant(curproblem)"
18 )
19 option(
20 v-for="v in [emptyVar].concat(st.variants)"
21 :value="v.id"
22 :selected="curproblem.vid==v.id"
23 )
24 | {{ v.name }}
25 fieldset
26 input#inputFen(
27 type="text"
28 placeholder="FEN"
29 v-model="curproblem.fen"
30 @input="trySetDiagram(curproblem)"
31 )
32 #diagram(v-html="curproblem.diag")
33 fieldset
34 textarea(
35 :placeholder="st.tr['Instructions']"
36 v-model="curproblem.instruction"
37 )
38 p(v-html="parseHtml(curproblem.instruction)")
39 fieldset
40 textarea(
41 :placeholder="st.tr['Solution']"
42 v-model="curproblem.solution"
43 )
44 p(v-html="parseHtml(curproblem.solution)")
45 button(@click="sendProblem()") {{ st.tr["Send"] }}
46 #dialog.text-center {{ st.tr[infoMsg] }}
47 .row(v-if="showOne")
48 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
49 #topPage
50 .button-group(v-if="st.user.id == curproblem.uid")
51 button(@click="editProblem(curproblem)") {{ st.tr["Edit"] }}
52 button(@click="deleteProblem(curproblem)") {{ st.tr["Delete"] }}
53 span.vname {{ curproblem.vname }}
54 span.uname ({{ curproblem.uname }})
55 button.marginleft(@click="backToList()") {{ st.tr["Back to list"] }}
56 button.nomargin(@click="gotoPrevNext($event,curproblem,1)")
57 | {{ st.tr["Previous"] }}
58 button.nomargin(@click="gotoPrevNext($event,curproblem,-1)")
59 | {{ st.tr["Next"] }}
60 p.oneInstructions.clickable(
61 v-html="parseHtml(curproblem.instruction)"
62 @click="curproblem.showSolution=!curproblem.showSolution"
63 )
64 | {{ st.tr["Show solution"] }}
65 p(
66 v-show="curproblem.showSolution"
67 v-html="parseHtml(curproblem.solution)"
68 )
69 .row(v-else)
70 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
71 #controls
72 button#newProblem(@click="prepareNewProblem()")
73 | {{ st.tr["New problem"] }}
74 label(for="checkboxMine") {{ st.tr["My problems"] }}
75 input#checkboxMine(
76 type="checkbox"
77 v-model="onlyMines"
78 )
79 label(for="selectVariant") {{ st.tr["Variant"] }}
80 select#selectVariant(v-model="selectedVar")
81 option(
82 v-for="v in [emptyVar].concat(st.variants)"
83 :value="v.id"
84 )
85 | {{ v.name }}
86 table#tProblems
87 tr
88 th {{ st.tr["Variant"] }}
89 th {{ st.tr["Instructions"] }}
90 th {{ st.tr["Number"] }}
91 tr(
92 v-for="p in problems"
93 v-show="displayProblem(p)"
94 @click="setHrefPid(p)"
95 )
96 td {{ p.vname }}
97 td {{ firstChars(p.instruction) }}
98 td {{ p.id }}
99 BaseGame(
100 v-if="showOne"
101 :game="game"
102 :vr="vr"
103 )
104 </template>
105
106 <script>
107 import { store } from "@/store";
108 import { ajax } from "@/utils/ajax";
109 import { checkProblem } from "@/data/problemCheck";
110 import { getDiagram } from "@/utils/printDiagram";
111 import { processModalClick } from "@/utils/modalClick";
112 import { ArrayFun } from "@/utils/array";
113 import BaseGame from "@/components/BaseGame.vue";
114 export default {
115 name: "my-problems",
116 components: {
117 BaseGame
118 },
119 data: function() {
120 return {
121 st: store.state,
122 emptyVar: {
123 vid: 0,
124 vname: ""
125 },
126 // Problem currently showed, or edited:
127 curproblem: {
128 id: 0, //used in case of edit
129 vid: 0,
130 fen: "",
131 diag: "",
132 instruction: "",
133 solution: "",
134 showSolution: false
135 },
136 loadedVar: 0, //corresponding to loaded V
137 selectedVar: 0, //to filter problems based on variant
138 problems: [],
139 onlyMines: false,
140 showOne: false,
141 infoMsg: "",
142 vr: null, //"variant rules" object initialized from FEN
143 game: {
144 players: [{ name: "Problem" }, { name: "Problem" }],
145 mode: "analyze"
146 }
147 };
148 },
149 created: function() {
150 ajax("/problems", "GET", res => {
151 // Show newest problem first:
152 this.problems = res.problems.sort((p1, p2) => p2.added - p1.added);
153 if (this.st.variants.length > 0)
154 this.problems.forEach(p => this.setVname(p));
155 // Retrieve all problems' authors' names
156 let names = {};
157 this.problems.forEach(p => {
158 if (p.uid != this.st.user.id) names[p.uid] = "";
159 else p.uname = this.st.user.name;
160 });
161 const showOneIfPid = () => {
162 const pid = this.$route.query["id"];
163 if (pid) this.showProblem(this.problems.find(p => p.id == pid));
164 };
165 if (Object.keys(names).length > 0) {
166 ajax("/users", "GET", { ids: Object.keys(names).join(",") }, res2 => {
167 res2.users.forEach(u => {
168 names[u.id] = u.name;
169 });
170 this.problems.forEach(p => {
171 if (!p.uname)
172 p.uname = names[p.uid];
173 });
174 showOneIfPid();
175 });
176 } else showOneIfPid();
177 });
178 },
179 mounted: function() {
180 document
181 .getElementById("newprobDiv")
182 .addEventListener("click", processModalClick);
183 },
184 watch: {
185 // st.variants changes only once, at loading from [] to [...]
186 "st.variants": function() {
187 // Set problems vname (either all are set or none)
188 if (this.problems.length > 0 && this.problems[0].vname == "")
189 this.problems.forEach(p => this.setVname(p));
190 },
191 $route: function(to) {
192 const pid = to.query["id"];
193 if (pid) this.showProblem(this.problems.find(p => p.id == pid));
194 else this.showOne = false;
195 }
196 },
197 methods: {
198 setVname: function(prob) {
199 prob.vname = this.st.variants.find(v => v.id == prob.vid).name;
200 },
201 firstChars: function(text) {
202 let preparedText = text
203 // Replace line jumps and <br> by spaces
204 .replace(/\n/g, " ")
205 .replace(/<br\/?>/g, " ")
206 .replace(/<[^>]+>/g, "") //remove remaining HTML tags
207 .replace(/[ ]+/g, " ") //remove series of spaces by only one
208 .trim();
209 const maxLength = 32; //arbitrary...
210 if (preparedText.length > maxLength)
211 return preparedText.substr(0, 32) + "...";
212 return preparedText;
213 },
214 copyProblem: function(p1, p2) {
215 for (let key in p1) p2[key] = p1[key];
216 },
217 setHrefPid: function(p) {
218 // Change href => $route changes, watcher notices, call showProblem
219 const curHref = document.location.href;
220 document.location.href = curHref.split("?")[0] + "?id=" + p.id;
221 },
222 backToList: function() {
223 // Change href => $route change, watcher notices, reset showOne to false
224 document.location.href = document.location.href.split("?")[0];
225 },
226 resetCurProb: function() {
227 this.curproblem.id = 0;
228 this.curproblem.uid = 0;
229 this.curproblem.vid = "";
230 this.curproblem.vname = "";
231 this.curproblem.fen = "";
232 this.curproblem.diag = "";
233 this.curproblem.instruction = "";
234 this.curproblem.solution = "";
235 this.curproblem.showSolution = false;
236 },
237 parseHtml: function(txt) {
238 return !txt.match(/<[/a-zA-Z]+>/)
239 ? txt.replace(/\n/g, "<br/>") //no HTML tag
240 : txt;
241 },
242 changeVariant: function(prob) {
243 this.setVname(prob);
244 this.loadVariant(prob.vid, () => {
245 // Set FEN if possible (might not be correct yet)
246 if (V.IsGoodFen(prob.fen)) this.setDiagram(prob);
247 });
248 },
249 loadVariant: async function(vid, cb) {
250 // Condition: vid is a valid variant ID
251 this.loadedVar = 0;
252 const variant = this.st.variants.find(v => v.id == vid);
253 const vModule = await import("@/variants/" + variant.name + ".js");
254 window.V = vModule.VariantRules;
255 this.loadedVar = vid;
256 cb();
257 },
258 trySetDiagram: function(prob) {
259 // Problem edit: FEN could be wrong or incomplete,
260 // variant could not be ready, or not defined
261 if (prob.vid > 0 && this.loadedVar == prob.vid && V.IsGoodFen(prob.fen))
262 this.setDiagram(prob);
263 },
264 setDiagram: function(prob) {
265 // Condition: prob.fen is correct and global V is ready
266 const parsedFen = V.ParseFen(prob.fen);
267 const args = {
268 position: parsedFen.position,
269 orientation: parsedFen.turn
270 };
271 prob.diag = getDiagram(args);
272 },
273 displayProblem: function(p) {
274 return (
275 (!this.selectedVar || p.vid == this.selectedVar) &&
276 ((this.onlyMines && p.uid == this.st.user.id) ||
277 (!this.onlyMines && p.uid != this.st.user.id))
278 );
279 },
280 showProblem: function(p) {
281 this.loadVariant(p.vid, () => {
282 // The FEN is already checked at this stage:
283 this.vr = new V(p.fen);
284 this.game.vname = p.vname;
285 this.game.mycolor = this.vr.turn; //diagram orientation
286 this.game.fen = p.fen;
287 this.$set(this.game, "fenStart", p.fen);
288 this.copyProblem(p, this.curproblem);
289 this.showOne = true;
290 });
291 },
292 gotoPrevNext: function(e, prob, dir) {
293 const startIdx = this.problems.findIndex(p => p.id == prob.id);
294 let nextIdx = startIdx + dir;
295 while (
296 nextIdx >= 0 &&
297 nextIdx < this.problems.length &&
298 ((this.onlyMines && this.problems[nextIdx].uid != this.st.user.id) ||
299 (!this.onlyMines && this.problems[nextIdx].uid == this.st.user.id))
300 )
301 nextIdx += dir;
302 if (nextIdx >= 0 && nextIdx < this.problems.length)
303 this.setHrefPid(this.problems[nextIdx]);
304 else
305 alert(this.st.tr["No more problems"]);
306 },
307 prepareNewProblem: function() {
308 this.resetCurProb();
309 window.doClick("modalNewprob");
310 },
311 sendProblem: function() {
312 const error = checkProblem(this.curproblem);
313 if (error) {
314 alert(this.st.tr[error]);
315 return;
316 }
317 const edit = this.curproblem.id > 0;
318 this.infoMsg = "Processing... Please wait";
319 ajax(
320 "/problems",
321 edit ? "PUT" : "POST",
322 { prob: this.curproblem },
323 ret => {
324 if (edit) {
325 let editedP = this.problems.find(p => p.id == this.curproblem.id);
326 this.copyProblem(this.curproblem, editedP);
327 this.showProblem(editedP);
328 }
329 else {
330 let newProblem = Object.assign({}, this.curproblem);
331 newProblem.id = ret.id;
332 newProblem.uid = this.st.user.id;
333 newProblem.uname = this.st.user.name;
334 this.problems = [newProblem].concat(this.problems);
335 }
336 document.getElementById("modalNewprob").checked = false;
337 this.infoMsg = "";
338 }
339 );
340 },
341 editProblem: function(prob) {
342 // prob.diag might correspond to some other problem or be empty:
343 this.setDiagram(prob); //V is loaded at this stage
344 this.copyProblem(prob, this.curproblem);
345 window.doClick("modalNewprob");
346 },
347 deleteProblem: function(prob) {
348 if (confirm(this.st.tr["Are you sure?"])) {
349 ajax("/problems", "DELETE", { id: prob.id }, () => {
350 ArrayFun.remove(this.problems, p => p.id == prob.id);
351 this.backToList();
352 });
353 }
354 }
355 }
356 };
357 </script>
358
359 <style lang="sass" scoped>
360 [type="checkbox"].modal+div .card
361 max-width: 767px
362 max-height: 100%
363
364 #inputFen
365 width: 100%
366
367 textarea
368 width: 100%
369
370 #diagram
371 margin: 0 auto
372 max-width: 400px
373
374 table#tProblems
375 max-height: 100%
376
377 #controls
378 margin: 0
379 width: 100%
380 text-align: center
381 & > *
382 margin: 0
383
384 p.oneInstructions
385 margin: 0
386 padding: 2px 5px
387 background-color: lightgreen
388
389 #topPage
390 span.vname
391 font-weight: bold
392 padding-left: var(--universal-margin)
393 span.uname
394 padding-left: var(--universal-margin)
395 margin: 0 auto
396 & > .nomargin
397 margin: 0
398 & > .marginleft
399 margin: 0 0 0 15px
400
401 @media screen and (max-width: 767px)
402 #topPage
403 text-align: center
404 </style>