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