3 input#modalRules.modal(type="checkbox")
6 data-checkbox="modalRules"
9 label.modal-close(for="modalRules")
10 a#variantNameInProblems(:href="'/#/variants/'+game.vname")
12 div(v-html="rulesContent")
13 input#modalNewprob.modal(
15 @change="fenFocusIfOpened($event)"
19 data-checkbox="modalNewprob"
22 label#closeNewprob.modal-close(for="modalNewprob")
24 label(for="selectVariant") {{ st.tr["Variant"] }}
26 v-model="curproblem.vid"
27 @change="changeVariant(curproblem)"
30 v-for="v in [emptyVar].concat(st.variants)"
33 :selected="curproblem.vid==v.id"
40 v-model="curproblem.fen"
41 @input="trySetDiagram(curproblem)"
43 #diagram(v-html="curproblem.diag")
45 textarea.instructions-edit(
46 :placeholder="st.tr['Instructions']"
47 @input="adjustHeight('instructions')"
48 v-model="curproblem.instruction"
50 .instructions(v-html="parseHtml(curproblem.instruction)")
52 textarea.solution-edit(
53 :placeholder="st.tr['Solution']"
54 @input="adjustHeight('solution')"
55 v-model="curproblem.solution"
57 .solution(v-html="parseHtml(curproblem.solution)")
58 button(@click="sendProblem()") {{ st.tr["Send"] }}
59 #dialog.text-center {{ st.tr[infoMsg] }}
61 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
63 .button-group(v-if="canIedit(curproblem.uid)")
64 button(@click="editProblem(curproblem)") {{ st.tr["Edit"] }}
65 button(@click="deleteProblem(curproblem)") {{ st.tr["Delete"] }}
66 span.vname {{ curproblem.vname }}
67 span.uname ({{ curproblem.uname }})
68 button.marginleft(@click="backToList()") {{ st.tr["Back to list"] }}
69 button.nomargin(@click="gotoPrevNext(curproblem,1)")
70 | {{ st.tr["Previous_p"] }}
71 button.nomargin(@click="gotoPrevNext(curproblem,-1)")
72 | {{ st.tr["Next_p"] }}
73 .instructions.oneInstructions.clickable(
74 v-html="parseHtml(curproblem.instruction)"
75 @click="curproblem.showSolution=!curproblem.showSolution"
77 | {{ st.tr["Show solution"] }}
79 v-show="curproblem.showSolution"
80 v-html="parseHtml(curproblem.solution)"
83 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
85 button#newProblem(@click="prepareNewProblem()")
86 | {{ st.tr["New problem"] }}
87 div#myProblems(v-if="st.user.id > 0")
88 label(for="checkboxMine") {{ st.tr["My problems"] }}
93 label(for="selectVariant") {{ st.tr["Variant"] }}
94 select#selectVariant(v-model="selectedVar")
96 v-for="v in [emptyVar].concat(st.variants)"
103 th {{ st.tr["Variant"] }}
104 th {{ st.tr["Instructions"] }}
105 th {{ st.tr["Number"] }}
107 v-for="p in problems[onlyMine ? 'mine' : 'others']"
108 v-show="onlyMine || !selectedVar || p.vid == selectedVar"
109 @click="setHrefPid(p)"
112 td {{ firstChars(p.instruction) }}
115 v-if="hasMore[onlyMine ? 'mine' : 'others']"
116 @click="loadMore(onlyMine ? 'mine' : 'others')"
118 | {{ st.tr["Load more"] }}
127 import { store } from "@/store";
128 import { ajax } from "@/utils/ajax";
129 import { checkProblem } from "@/data/problemCheck";
130 import params from "@/parameters";
131 import { getDiagram, replaceByDiag } from "@/utils/printDiagram";
132 import { processModalClick } from "@/utils/modalClick";
133 import { ArrayFun } from "@/utils/array";
134 import BaseGame from "@/components/BaseGame.vue";
147 // Problem currently showed, or edited:
149 id: 0, //used in case of edit
157 loadedVar: 0, //corresponding to loaded V
158 selectedVar: 0, //to filter problems based on variant
159 problems: { "mine": [], "others": [] },
160 // timestamp of oldest showed problem:
162 mine: Number.MAX_SAFE_INTEGER,
163 others: Number.MAX_SAFE_INTEGER
165 // hasMore == TRUE: a priori there could be more problems to load
166 hasMore: { mine: true, others: true },
172 players: [{ name: "Problem" }, { name: "Problem" }],
177 created: function() {
178 const pid = this.$route.query["id"];
179 if (!!pid) this.showProblem(pid);
180 else this.loadMore("others", () => { this.loadMore("mine"); });
182 mounted: function() {
183 ["rulesDiv","newprobDiv"].forEach(eltName => {
184 document.getElementById(eltName)
185 .addEventListener("click", processModalClick)
189 // st.variants changes only once, at loading from [] to [...]
190 "st.variants": function() {
191 // Set problems vname (either all are set or none)
192 let problems = this.problems["others"].concat(this.problems["mine"]);
193 if (problems.length > 0 && problems[0].vname == "")
194 problems.forEach(p => this.setVname(p));
196 $route: function(to) {
197 const pid = to.query["id"];
198 if (!!pid) this.showProblem(pid);
200 if (this.cursor["others"] == Number.MAX_SAFE_INTEGER)
201 // Back from a single problem view at initial loading:
202 // problems lists are empty!
203 this.loadMore("others", () => { this.loadMore("mine"); });
204 this.showOne = false;
209 fenFocusIfOpened: function(event) {
210 if (event.target.checked) {
212 document.getElementById("inputFen").focus();
215 adjustHeight: function(elt) {
216 // https://stackoverflow.com/a/48460773
217 let t = document.querySelector("." + elt + "-edit");
219 t.style.height = (t.scrollHeight + 3) + "px";
221 setVname: function(prob) {
222 prob.vname = this.st.variants.find(v => v.id == prob.vid).name;
224 // Add vname and user names:
225 decorate: function(problems, callback) {
226 if (this.st.variants.length > 0)
227 problems.forEach(p => this.setVname(p));
228 // Retrieve all problems' authors' names
230 problems.forEach(p => {
231 if (p.uid != this.st.user.id) names[p.uid] = "";
232 else p.uname = this.st.user.name;
234 if (Object.keys(names).length > 0) {
239 data: { ids: Object.keys(names).join(",") },
241 res2.users.forEach(u => {
242 names[u.id] = u.name;
244 problems.forEach(p => {
246 p.uname = names[p.uid];
248 if (!!callback) callback();
252 } else if (!!callback) callback();
254 firstChars: function(text) {
255 let preparedText = text
256 // Replace line jumps and <br> by spaces
258 .replace(/<br\/?>/g, " ")
259 .replace(/<[^>]+>/g, "") //remove remaining HTML tags
260 .replace(/[ ]+/g, " ") //remove series of spaces by only one
262 const maxLength = 32; //arbitrary...
263 if (preparedText.length > maxLength)
264 return preparedText.substr(0, 32) + "...";
267 copyProblem: function(p1, p2) {
268 for (let key in p1) p2[key] = p1[key];
270 setHrefPid: function(p) {
271 // Change href => $route changes, watcher notices, call showProblem
272 const curHref = document.location.href;
273 document.location.href = curHref.split("?")[0] + "?id=" + p.id;
275 backToList: function() {
276 // Change href => $route change, watcher notices, reset showOne to false
277 document.location.href = document.location.href.split("?")[0];
279 resetCurProb: function() {
280 this.curproblem.id = 0;
281 this.curproblem.uid = 0;
282 this.curproblem.vid = "";
283 this.curproblem.vname = "";
284 this.curproblem.fen = "";
285 this.curproblem.diag = "";
286 this.curproblem.instruction = "";
287 this.curproblem.solution = "";
288 this.curproblem.showSolution = false;
290 parseHtml: function(txt) {
291 return !txt.match(/<[/a-zA-Z]+>/)
294 txt.replace(/\n\n/g, "<br/><div class='br'></div>")
295 .replace(/\n/g, "<br/>")
298 changeVariant: function(prob) {
300 this.loadVariant(prob.vid, () => {
301 // Set FEN if possible (might not be correct yet)
302 if (V.IsGoodFen(prob.fen)) this.setDiagram(prob);
306 loadVariant: async function(vid, cb) {
307 // Condition: vid is a valid variant ID
309 const variant = this.st.variants.find(v => v.id == vid);
310 await import("@/variants/" + variant.name + ".js")
312 window.V = vModule[variant.name + "Rules"];
313 this.loadedVar = vid;
316 // (AJAX) Request to get rules content (plain text, HTML)
319 "raw-loader!@/translations/rules/" +
321 this.st.lang + ".pug"
323 // Next two lines fix a weird issue after last update (2019-11)
324 .replace(/\\n/g, " ")
325 .replace(/\\"/g, '"')
326 .replace('module.exports = "', "")
328 .replace(/(fen:)([^:]*):/g, replaceByDiag);
330 trySetDiagram: function(prob) {
331 // Problem edit: FEN could be wrong or incomplete,
332 // variant could not be ready, or not defined
333 if (prob.vid > 0 && this.loadedVar == prob.vid && V.IsGoodFen(prob.fen))
334 this.setDiagram(prob);
337 setDiagram: function(prob) {
338 // Condition: prob.fen is correct and global V is ready
339 const parsedFen = V.ParseFen(prob.fen);
341 position: parsedFen.position,
342 orientation: parsedFen.turn
344 prob.diag = getDiagram(args);
346 showProblem: function(p_id) {
347 const processWhenWeHaveProb = () => {
348 this.loadVariant(p.vid, () => {
349 this.onlyMine = (p.uid == this.st.user.id);
350 // The FEN is already checked at this stage:
351 this.game.vname = p.vname;
352 this.game.mycolor = V.ParseFen(p.fen).turn; //diagram orientation
353 this.game.fenStart = p.fen;
354 this.game.fen = p.fen;
356 // $nextTick to be sure $refs["basegame"] exists
357 this.$nextTick(() => {
358 this.$refs["basegame"].re_setVariables(this.game); });
359 this.curproblem.showSolution = false; //in case of
360 this.copyProblem(p, this.curproblem);
364 if (typeof p_id == "object") p = p_id;
366 const problems = this.problems["others"].concat(this.problems["mine"]);
367 p = problems.find(prob => prob.id == p_id);
370 // Bad luck: problem not in list. Get from server
377 this.decorate([res.problem], () => {
379 const mode = (p.uid == this.st.user.id ? "mine" : "others");
380 this.problems[mode].push(p);
381 processWhenWeHaveProb();
386 } else processWhenWeHaveProb();
388 gotoPrevNext: function(prob, dir) {
389 const mode = (this.onlyMine ? "mine" : "others");
390 const problems = this.problems[mode];
391 const startIdx = problems.findIndex(p => p.id == prob.id);
392 const nextIdx = startIdx + dir;
393 if (nextIdx >= 0 && nextIdx < problems.length)
394 this.setHrefPid(problems[nextIdx]);
395 else if (this.hasMore[mode]) {
399 if (nbProbs > 0) this.gotoPrevNext(prob, dir);
400 else alert(this.st.tr["No more problems"]);
404 else alert(this.st.tr["No more problems"]);
406 prepareNewProblem: function() {
408 this.adjustHeight("instructions");
409 this.adjustHeight("solution");
410 window.doClick("modalNewprob");
412 sendProblem: function() {
413 const error = checkProblem(this.curproblem);
415 alert(this.st.tr[error]);
418 const edit = this.curproblem.id > 0;
419 this.infoMsg = "Processing... Please wait";
422 edit ? "PUT" : "POST",
424 data: { prob: this.curproblem },
427 let editedP = this.problems["mine"]
428 .find(p => p.id == this.curproblem.id);
430 // I'm an admin and edit another user' problem
431 editedP = this.problems["others"]
432 .find(p => p.id == this.curproblem.id);
433 this.copyProblem(this.curproblem, editedP);
434 this.showProblem(editedP);
437 let newProblem = Object.assign({}, this.curproblem);
438 newProblem.id = ret.id;
439 newProblem.uid = this.st.user.id;
440 newProblem.uname = this.st.user.name;
441 this.problems["mine"] =
442 [newProblem].concat(this.problems["mine"]);
444 document.getElementById("modalNewprob").checked = false;
450 canIedit: function(puid) {
451 return params.devs.concat([puid]).includes(this.st.user.id);
453 editProblem: function(prob) {
454 // prob.diag might correspond to some other problem or be empty:
455 this.setDiagram(prob); //V is loaded at this stage
456 this.copyProblem(prob, this.curproblem);
457 this.adjustHeight("instructions");
458 this.adjustHeight("solution");
459 window.doClick("modalNewprob");
461 deleteProblem: function(prob) {
462 if (confirm(this.st.tr["Are you sure?"])) {
467 data: { id: prob.id },
469 const mode = prob.uid == (this.st.user.id ? "mine" : "others");
470 ArrayFun.remove(this.problems[mode], p => p.id == prob.id);
477 loadMore: function(mode, cb) {
483 uid: this.st.user.id,
485 cursor: this.cursor[mode]
488 const L = res.problems.length;
490 this.cursor[mode] = res.problems[L - 1].added;
491 // Remove potential duplicates:
492 const pids = this.problems[mode].map(p => p.id);
493 ArrayFun.remove(res.problems, p => pids.includes(p.id), "all");
494 this.decorate(res.problems);
495 this.problems[mode] =
496 this.problems[mode].concat(res.problems)
497 // TODO: problems are already sorted, would just need to insert
498 // the current individual problem in list; more generally
499 // there is probably only one misclassified problem.
500 // (Unless the user navigated several times by URL to show a
501 // single problem...)
502 .sort((p1, p2) => p2.added - p1.added);
503 } else this.hasMore[mode] = false;
514 @import "@/styles/_board_squares_img.sass"
515 @import "@/styles/_rules.sass"
516 .instructions, .solution
517 margin: 0 var(--universal-margin)
518 p, ul, ol, pre, table, h3, h4, h5, h6, blockquote
519 margin: var(--universal-margin) 0
525 <style lang="sass" scoped>
526 [type="checkbox"].modal+div .card
534 @media screen and (max-width: 1500px)
536 @media screen and (max-width: 1024px)
538 @media screen and (max-width: 767px)
572 background-color: lightgreen
575 display: inline-block
580 padding-left: var(--universal-margin)
582 padding-left: var(--universal-margin)
589 @media screen and (max-width: 767px)
593 a#variantNameInProblems
594 color: var(--card-fore-color)
597 font-size: calc(1rem * var(--heading-ratio))
599 margin: calc(1.5 * var(--universal-margin))