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 label(for="checkboxMine") {{ st.tr["My problems"] }}
79 label(for="selectVariant") {{ st.tr["Variant"] }}
80 select#selectVariant(v-model="selectedVar")
82 v-for="v in [emptyVar].concat(st.variants)"
88 th {{ st.tr["Variant"] }}
89 th {{ st.tr["Instructions"] }}
90 th {{ st.tr["Number"] }}
93 v-show="displayProblem(p)"
94 @click="setHrefPid(p)"
97 td {{ firstChars(p.instruction) }}
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";
126 // Problem currently showed, or edited:
128 id: 0, //used in case of edit
136 loadedVar: 0, //corresponding to loaded V
137 selectedVar: 0, //to filter problems based on variant
143 players: [{ name: "Problem" }, { name: "Problem" }],
148 created: function() {
154 // Show newest problem first:
155 this.problems = res.problems.sort((p1, p2) => p2.added - p1.added);
156 if (this.st.variants.length > 0)
157 this.problems.forEach(p => this.setVname(p));
158 // Retrieve all problems' authors' names
160 this.problems.forEach(p => {
161 if (p.uid != this.st.user.id) names[p.uid] = "";
162 else p.uname = this.st.user.name;
164 const showOneIfPid = () => {
165 const pid = this.$route.query["id"];
166 if (!!pid) this.showProblem(this.problems.find(p => p.id == pid));
168 if (Object.keys(names).length > 0) {
173 data: { ids: Object.keys(names).join(",") },
175 res2.users.forEach(u => {
176 names[u.id] = u.name;
178 this.problems.forEach(p => {
180 p.uname = names[p.uid];
186 } else showOneIfPid();
191 mounted: function() {
192 document.getElementById("newprobDiv")
193 .addEventListener("click", processModalClick);
196 // st.variants changes only once, at loading from [] to [...]
197 "st.variants": function() {
198 // Set problems vname (either all are set or none)
199 if (this.problems.length > 0 && this.problems[0].vname == "")
200 this.problems.forEach(p => this.setVname(p));
202 $route: function(to) {
203 const pid = to.query["id"];
204 if (!!pid) this.showProblem(this.problems.find(p => p.id == pid));
205 else this.showOne = false;
209 fenFocusIfOpened: function(event) {
210 if (event.target.checked) {
212 document.getElementById("inputFen").focus();
215 setVname: function(prob) {
216 prob.vname = this.st.variants.find(v => v.id == prob.vid).name;
218 firstChars: function(text) {
219 let preparedText = text
220 // Replace line jumps and <br> by spaces
222 .replace(/<br\/?>/g, " ")
223 .replace(/<[^>]+>/g, "") //remove remaining HTML tags
224 .replace(/[ ]+/g, " ") //remove series of spaces by only one
226 const maxLength = 32; //arbitrary...
227 if (preparedText.length > maxLength)
228 return preparedText.substr(0, 32) + "...";
231 copyProblem: function(p1, p2) {
232 for (let key in p1) p2[key] = p1[key];
234 setHrefPid: function(p) {
235 // Change href => $route changes, watcher notices, call showProblem
236 const curHref = document.location.href;
237 document.location.href = curHref.split("?")[0] + "?id=" + p.id;
239 backToList: function() {
240 // Change href => $route change, watcher notices, reset showOne to false
241 document.location.href = document.location.href.split("?")[0];
243 resetCurProb: function() {
244 this.curproblem.id = 0;
245 this.curproblem.uid = 0;
246 this.curproblem.vid = "";
247 this.curproblem.vname = "";
248 this.curproblem.fen = "";
249 this.curproblem.diag = "";
250 this.curproblem.instruction = "";
251 this.curproblem.solution = "";
252 this.curproblem.showSolution = false;
254 parseHtml: function(txt) {
255 return !txt.match(/<[/a-zA-Z]+>/)
256 ? txt.replace(/\n/g, "<br/>") //no HTML tag
259 changeVariant: function(prob) {
261 this.loadVariant(prob.vid, () => {
262 // Set FEN if possible (might not be correct yet)
263 if (V.IsGoodFen(prob.fen)) this.setDiagram(prob);
266 loadVariant: async function(vid, cb) {
267 // Condition: vid is a valid variant ID
269 const variant = this.st.variants.find(v => v.id == vid);
270 const vModule = await import("@/variants/" + variant.name + ".js");
271 window.V = vModule.VariantRules;
272 this.loadedVar = vid;
275 trySetDiagram: function(prob) {
276 // Problem edit: FEN could be wrong or incomplete,
277 // variant could not be ready, or not defined
278 if (prob.vid > 0 && this.loadedVar == prob.vid && V.IsGoodFen(prob.fen))
279 this.setDiagram(prob);
281 setDiagram: function(prob) {
282 // Condition: prob.fen is correct and global V is ready
283 const parsedFen = V.ParseFen(prob.fen);
285 position: parsedFen.position,
286 orientation: parsedFen.turn
288 prob.diag = getDiagram(args);
290 displayProblem: function(p) {
292 (!this.selectedVar || p.vid == this.selectedVar) &&
293 ((this.onlyMines && p.uid == this.st.user.id) ||
294 (!this.onlyMines && p.uid != this.st.user.id))
297 showProblem: function(p) {
298 this.loadVariant(p.vid, () => {
299 // The FEN is already checked at this stage:
300 this.game.vname = p.vname;
301 this.game.mycolor = V.ParseFen(p.fen).turn; //diagram orientation
302 this.game.fenStart = p.fen;
303 this.game.fen = p.fen;
305 // $nextTick to be sure $refs["basegame"] exists
306 this.$nextTick(() => {
307 this.$refs["basegame"].re_setVariables(this.game); });
308 this.copyProblem(p, this.curproblem);
311 gotoPrevNext: function(e, prob, dir) {
312 const startIdx = this.problems.findIndex(p => p.id == prob.id);
313 let nextIdx = startIdx + dir;
316 nextIdx < this.problems.length &&
317 ((this.onlyMines && this.problems[nextIdx].uid != this.st.user.id) ||
318 (!this.onlyMines && this.problems[nextIdx].uid == this.st.user.id))
321 if (nextIdx >= 0 && nextIdx < this.problems.length)
322 this.setHrefPid(this.problems[nextIdx]);
324 alert(this.st.tr["No more problems"]);
326 prepareNewProblem: function() {
328 window.doClick("modalNewprob");
330 sendProblem: function() {
331 const error = checkProblem(this.curproblem);
333 alert(this.st.tr[error]);
336 const edit = this.curproblem.id > 0;
337 this.infoMsg = "Processing... Please wait";
340 edit ? "PUT" : "POST",
342 data: { prob: this.curproblem },
345 let editedP = this.problems.find(p => p.id == this.curproblem.id);
346 this.copyProblem(this.curproblem, editedP);
347 this.showProblem(editedP);
350 let newProblem = Object.assign({}, this.curproblem);
351 newProblem.id = ret.id;
352 newProblem.uid = this.st.user.id;
353 newProblem.uname = this.st.user.name;
354 this.problems = [newProblem].concat(this.problems);
356 document.getElementById("modalNewprob").checked = false;
362 editProblem: function(prob) {
363 // prob.diag might correspond to some other problem or be empty:
364 this.setDiagram(prob); //V is loaded at this stage
365 this.copyProblem(prob, this.curproblem);
366 window.doClick("modalNewprob");
368 deleteProblem: function(prob) {
369 if (confirm(this.st.tr["Are you sure?"])) {
374 data: { id: prob.id },
376 ArrayFun.remove(this.problems, p => p.id == prob.id);
387 <style lang="sass" scoped>
388 [type="checkbox"].modal+div .card
415 background-color: lightgreen
420 padding-left: var(--universal-margin)
422 padding-left: var(--universal-margin)
429 @media screen and (max-width: 767px)