3 input#modalNewprob.modal(
5 @change="fenFocusIfOpened($event)"
9 data-checkbox="modalNewprob"
12 label#closeNewprob.modal-close(for="modalNewprob")
14 label(for="selectVariant") {{ st.tr["Variant"] }}
16 v-model="curproblem.vid"
17 @change="changeVariant(curproblem)"
20 v-for="v in [emptyVar].concat(st.variants)"
22 :selected="curproblem.vid==v.id"
29 v-model="curproblem.fen"
30 @input="trySetDiagram(curproblem)"
32 #diagram(v-html="curproblem.diag")
35 :placeholder="st.tr['Instructions']"
36 v-model="curproblem.instruction"
38 p(v-html="parseHtml(curproblem.instruction)")
41 :placeholder="st.tr['Solution']"
42 v-model="curproblem.solution"
44 p(v-html="parseHtml(curproblem.solution)")
45 button(@click="sendProblem()") {{ st.tr["Send"] }}
46 #dialog.text-center {{ st.tr[infoMsg] }}
48 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
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_p"] }}
60 p.oneInstructions.clickable(
61 v-html="parseHtml(curproblem.instruction)"
62 @click="curproblem.showSolution=!curproblem.showSolution"
64 | {{ st.tr["Show solution"] }}
66 v-show="curproblem.showSolution"
67 v-html="parseHtml(curproblem.solution)"
70 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
72 button#newProblem(@click="prepareNewProblem()")
73 | {{ st.tr["New problem"] }}
74 div#myProblems(v-if="st.user.id > 0")
75 label(for="checkboxMine") {{ st.tr["My problems"] }}
80 label(for="selectVariant") {{ st.tr["Variant"] }}
81 select#selectVariant(v-model="selectedVar")
83 v-for="v in [emptyVar].concat(st.variants)"
89 th {{ st.tr["Variant"] }}
90 th {{ st.tr["Instructions"] }}
91 th {{ st.tr["Number"] }}
93 v-for="p in problems[onlyMine ? 'mine' : 'others']"
94 v-show="onlyMine || !selectedVar || p.vid == selectedVar"
95 @click="setHrefPid(p)"
98 td {{ firstChars(p.instruction) }}
101 v-if="hasMore[onlyMine ? 'mine' : 'others']"
102 @click="loadMore(onlyMine ? 'mine' : 'others')"
104 | {{ st.tr["Load more"] }}
113 import { store } from "@/store";
114 import { ajax } from "@/utils/ajax";
115 import { checkProblem } from "@/data/problemCheck";
116 import { getDiagram } from "@/utils/printDiagram";
117 import { processModalClick } from "@/utils/modalClick";
118 import { ArrayFun } from "@/utils/array";
119 import BaseGame from "@/components/BaseGame.vue";
132 // Problem currently showed, or edited:
134 id: 0, //used in case of edit
142 loadedVar: 0, //corresponding to loaded V
143 selectedVar: 0, //to filter problems based on variant
144 problems: { "mine": [], "others": [] },
145 // timestamp of oldest showed problem:
147 mine: Number.MAX_SAFE_INTEGER,
148 others: Number.MAX_SAFE_INTEGER
150 // hasMore == TRUE: a priori there could be more problems to load
151 hasMore: { mine: true, others: true },
156 players: [{ name: "Problem" }, { name: "Problem" }],
161 created: function() {
162 const pid = this.$route.query["id"];
163 if (!!pid) this.showProblem(pid);
164 else this.loadMore("others", () => { this.loadMore("mine"); });
166 mounted: function() {
167 document.getElementById("newprobDiv")
168 .addEventListener("click", processModalClick);
171 // st.variants changes only once, at loading from [] to [...]
172 "st.variants": function() {
173 // Set problems vname (either all are set or none)
174 let problems = this.problems["others"].concat(this.problems["mine"]);
175 if (problems.length > 0 && problems[0].vname == "")
176 problems.forEach(p => this.setVname(p));
178 $route: function(to) {
179 const pid = to.query["id"];
180 if (!!pid) this.showProblem(pid);
182 if (this.cursor["others"] == Number.MAX_SAFE_INTEGER)
183 // Back from a single problem view at initial loading:
184 // problems lists are empty!
185 this.loadMore("others", () => { this.loadMore("mine"); });
186 this.showOne = false;
191 fenFocusIfOpened: function(event) {
192 if (event.target.checked) {
194 document.getElementById("inputFen").focus();
197 setVname: function(prob) {
198 prob.vname = this.st.variants.find(v => v.id == prob.vid).name;
200 // Add vname and user names:
201 decorate: function(problems, callback) {
202 if (this.st.variants.length > 0)
203 problems.forEach(p => this.setVname(p));
204 // Retrieve all problems' authors' names
206 problems.forEach(p => {
207 if (p.uid != this.st.user.id) names[p.uid] = "";
208 else p.uname = this.st.user.name;
210 if (Object.keys(names).length > 0) {
215 data: { ids: Object.keys(names).join(",") },
217 res2.users.forEach(u => {
218 names[u.id] = u.name;
220 problems.forEach(p => {
222 p.uname = names[p.uid];
224 if (!!callback) callback();
228 } else if (!!callback) callback();
230 firstChars: function(text) {
231 let preparedText = text
232 // Replace line jumps and <br> by spaces
234 .replace(/<br\/?>/g, " ")
235 .replace(/<[^>]+>/g, "") //remove remaining HTML tags
236 .replace(/[ ]+/g, " ") //remove series of spaces by only one
238 const maxLength = 32; //arbitrary...
239 if (preparedText.length > maxLength)
240 return preparedText.substr(0, 32) + "...";
243 copyProblem: function(p1, p2) {
244 for (let key in p1) p2[key] = p1[key];
246 setHrefPid: function(p) {
247 // Change href => $route changes, watcher notices, call showProblem
248 const curHref = document.location.href;
249 document.location.href = curHref.split("?")[0] + "?id=" + p.id;
251 backToList: function() {
252 // Change href => $route change, watcher notices, reset showOne to false
253 document.location.href = document.location.href.split("?")[0];
255 resetCurProb: function() {
256 this.curproblem.id = 0;
257 this.curproblem.uid = 0;
258 this.curproblem.vid = "";
259 this.curproblem.vname = "";
260 this.curproblem.fen = "";
261 this.curproblem.diag = "";
262 this.curproblem.instruction = "";
263 this.curproblem.solution = "";
264 this.curproblem.showSolution = false;
266 parseHtml: function(txt) {
267 return !txt.match(/<[/a-zA-Z]+>/)
268 ? txt.replace(/\n/g, "<br/>") //no HTML tag
271 changeVariant: function(prob) {
273 this.loadVariant(prob.vid, () => {
274 // Set FEN if possible (might not be correct yet)
275 if (V.IsGoodFen(prob.fen)) this.setDiagram(prob);
278 loadVariant: async function(vid, cb) {
279 // Condition: vid is a valid variant ID
281 const variant = this.st.variants.find(v => v.id == vid);
282 await import("@/variants/" + variant.name + ".js")
284 window.V = vModule[variant.name + "Rules"];
285 this.loadedVar = vid;
289 trySetDiagram: function(prob) {
290 // Problem edit: FEN could be wrong or incomplete,
291 // variant could not be ready, or not defined
292 if (prob.vid > 0 && this.loadedVar == prob.vid && V.IsGoodFen(prob.fen))
293 this.setDiagram(prob);
295 setDiagram: function(prob) {
296 // Condition: prob.fen is correct and global V is ready
297 const parsedFen = V.ParseFen(prob.fen);
299 position: parsedFen.position,
300 orientation: parsedFen.turn
302 prob.diag = getDiagram(args);
304 showProblem: function(p_id) {
305 const processWhenWeHaveProb = () => {
306 this.loadVariant(p.vid, () => {
307 this.onlyMine = (p.uid == this.st.user.id);
308 // The FEN is already checked at this stage:
309 this.game.vname = p.vname;
310 this.game.mycolor = V.ParseFen(p.fen).turn; //diagram orientation
311 this.game.fenStart = p.fen;
312 this.game.fen = p.fen;
314 // $nextTick to be sure $refs["basegame"] exists
315 this.$nextTick(() => {
316 this.$refs["basegame"].re_setVariables(this.game); });
317 this.copyProblem(p, this.curproblem);
321 if (typeof p_id == "object") p = p_id;
323 const problems = this.problems["others"].concat(this.problems["mine"]);
324 p = problems.find(prob => prob.id == p_id);
327 // Bad luck: problem not in list. Get from server
334 this.decorate([res.problem], () => {
336 const mode = (p.uid == this.st.user.id ? "mine" : "others");
337 this.problems[mode].push(p);
338 processWhenWeHaveProb();
343 } else processWhenWeHaveProb();
345 gotoPrevNext: function(e, prob, dir) {
346 const mode = (this.onlyMine ? "mine" : "others");
347 const problems = this.problems[mode];
348 const startIdx = problems.findIndex(p => p.id == prob.id);
349 const nextIdx = startIdx + dir;
350 if (nextIdx >= 0 && nextIdx < problems.length)
351 this.setHrefPid(problems[nextIdx]);
352 else if (this.hasMore[mode]) this.loadMore(mode);
353 else alert(this.st.tr["No more problems"]);
355 prepareNewProblem: function() {
357 window.doClick("modalNewprob");
359 sendProblem: function() {
360 const error = checkProblem(this.curproblem);
362 alert(this.st.tr[error]);
365 const edit = this.curproblem.id > 0;
366 this.infoMsg = "Processing... Please wait";
369 edit ? "PUT" : "POST",
371 data: { prob: this.curproblem },
374 let editedP = this.problems.find(p => p.id == this.curproblem.id);
375 this.copyProblem(this.curproblem, editedP);
376 this.showProblem(editedP);
379 let newProblem = Object.assign({}, this.curproblem);
380 newProblem.id = ret.id;
381 newProblem.uid = this.st.user.id;
382 newProblem.uname = this.st.user.name;
383 this.problems["mine"] = [newProblem].concat(this.problems["mine"]);
385 document.getElementById("modalNewprob").checked = false;
391 editProblem: function(prob) {
392 // prob.diag might correspond to some other problem or be empty:
393 this.setDiagram(prob); //V is loaded at this stage
394 this.copyProblem(prob, this.curproblem);
395 window.doClick("modalNewprob");
397 deleteProblem: function(prob) {
398 if (confirm(this.st.tr["Are you sure?"])) {
403 data: { id: prob.id },
405 const mode = prob.uid == (this.st.user.id ? "mine" : "others");
406 ArrayFun.remove(this.problems[mode], p => p.id == prob.id);
413 loadMore: function(mode, cb) {
419 uid: this.st.user.id,
421 cursor: this.cursor[mode]
424 const L = res.problems.length;
426 this.cursor[mode] = res.problems[L - 1].added;
427 // Remove potential duplicates:
428 const pids = this.problems[mode].map(p => p.id);
429 ArrayFun.remove(res.problems, p => pids.includes(p.id), "all");
430 this.decorate(res.problems);
431 this.problems[mode] = this.problems[mode].concat(res.problems);
432 } else this.hasMore[mode] = false;
442 <style lang="sass" scoped>
443 [type="checkbox"].modal+div .card
474 background-color: lightgreen
477 display: inline-block
482 padding-left: var(--universal-margin)
484 padding-left: var(--universal-margin)
491 @media screen and (max-width: 767px)