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