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