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