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 | |
20 | label(for="inputFen") FEN | |
21 | input#inputFen( | |
22 | type="text" | |
23 | v-model="curproblem.fen" | |
24 | @input="trySetDiagram(curproblem)" | |
25 | ) | |
26 | div(v-html="curproblem.diag") | |
27 | fieldset | |
28 | textarea#instructions( | |
29 | :placeholder="st.tr['Instructions']" | |
30 | v-model="curproblem.instruction" | |
31 | ) | |
32 | p(v-html="parseHtml(curproblem.instruction)") | |
33 | fieldset | |
34 | textarea#solution( | |
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 BA |
40 | #dialog.text-center {{ st.tr[infoMsg] }} |
41 | .row | |
42 | .col-sm-12 | |
604b951e BA |
43 | button#newProblem(onClick="doClick('modalNewprob')") |
44 | | {{ st.tr["New problem"] }} | |
45 | .row(v-if="showOne") | |
46 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 | |
47 | #actions | |
48 | button(@click="showOne=false") {{ st.tr["Back to list"] }} | |
49 | button( | |
50 | v-if="st.user.id == curproblem.uid" | |
51 | @click="editProblem(curproblem)" | |
52 | ) | |
53 | | {{ st.tr["Edit"] }} | |
54 | button( | |
55 | v-if="st.user.id == curproblem.uid" | |
56 | @click="deleteProblem(curproblem)" | |
57 | ) | |
58 | | {{ st.tr["Delete"] }} | |
59 | h4 {{ curproblem.vname }} | |
60 | p(v-html="parseHtml(curproblem.instruction)") | |
61 | h4(@click="curproblem.showSolution=!curproblem.showSolution") | |
62 | | {{ st.tr["Show solution"] }} | |
63 | p( | |
64 | v-show="curproblem.showSolution" | |
65 | v-html="parseHtml(curproblem.solution)" | |
66 | ) | |
67 | .row(v-else) | |
89021f18 BA |
68 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 |
69 | label(for="checkboxMine") {{ st.tr["My problems"] }} | |
604b951e BA |
70 | input#checkboxMine( |
71 | type="checkbox" | |
72 | v-model="onlyMines" | |
73 | ) | |
89021f18 | 74 | label(for="selectVariant") {{ st.tr["Variant"] }} |
604b951e BA |
75 | select#selectVariant(v-model="selectedVar") |
76 | option( | |
77 | v-for="v in [emptyVar].concat(st.variants)" | |
78 | :value="v.id" | |
79 | ) | |
89021f18 | 80 | | {{ v.name }} |
604b951e BA |
81 | div( |
82 | v-for="p in problems" | |
83 | v-show="displayProblem(p)" | |
84 | @click="showProblem(p)" | |
85 | ) | |
86 | h4 {{ p.vname }} | |
89021f18 | 87 | p {{ p.fen }} |
604b951e BA |
88 | p(v-html="p.instruction") |
89 | BaseGame(v-if="showOne" :game="game" :vr="vr") | |
89021f18 BA |
90 | </template> |
91 | ||
92 | <script> | |
604b951e BA |
93 | // TODO: si showProblem(p), changer URL (ajouter problem ID) |
94 | // Et si au lancement l'URL comprend un pid, alors showOne=true et curproblem=... | |
7e4a880e | 95 | // TODO: also style problem div (in the list, similar to variants page + clickable) |
604b951e | 96 | |
89021f18 BA |
97 | import { store } from "@/store"; |
98 | import { ajax } from "@/utils/ajax"; | |
99 | import { checkProblem } from "@/data/problemCheck"; | |
100 | import { getDiagram } from "@/utils/printDiagram"; | |
604b951e | 101 | import BaseGame from "@/components/BaseGame.vue"; |
89021f18 BA |
102 | export default { |
103 | name: "my-problems", | |
604b951e BA |
104 | components: { |
105 | BaseGame, | |
106 | }, | |
89021f18 BA |
107 | data: function() { |
108 | return { | |
604b951e | 109 | st: store.state, |
89021f18 BA |
110 | emptyVar: { |
111 | vid: 0, | |
112 | vname: "", | |
113 | }, | |
604b951e BA |
114 | // Problem currently showed, or edited: |
115 | curproblem: { | |
116 | id: 0, //used in case of edit | |
89021f18 BA |
117 | vid: 0, |
118 | fen: "", | |
604b951e | 119 | diag: "", |
89021f18 BA |
120 | instruction: "", |
121 | solution: "", | |
604b951e | 122 | showSolution: false, |
89021f18 | 123 | }, |
604b951e BA |
124 | loadedVar: 0, //corresponding to loaded V |
125 | selectedVar: 0, //to filter problems based on variant | |
89021f18 | 126 | problems: [], |
604b951e BA |
127 | onlyMines: false, |
128 | showOne: false, | |
89021f18 | 129 | infoMsg: "", |
604b951e BA |
130 | vr: null, //"variant rules" object initialized from FEN |
131 | game: { | |
132 | players:[{name:"Problem"},{name:"Problem"}], | |
133 | mode: "analyze", | |
134 | }, | |
89021f18 BA |
135 | }; |
136 | }, | |
137 | created: function() { | |
138 | ajax("/problems", "GET", (res) => { | |
139 | this.problems = res.problems; | |
604b951e BA |
140 | if (this.st.variants.length > 0) |
141 | this.problems.forEach(p => this.setVname(p)) | |
89021f18 BA |
142 | }); |
143 | }, | |
604b951e BA |
144 | watch: { |
145 | // st.variants changes only once, at loading from [] to [...] | |
146 | "st.variants": function(variantArray) { | |
147 | // Set problems vname (either all are set or none) | |
148 | if (this.problems.length > 0 && this.problems[0].vname == "") | |
149 | this.problems.forEach(p => this.setVname(p)); | |
150 | }, | |
151 | }, | |
89021f18 | 152 | methods: { |
604b951e BA |
153 | setVname: function(prob) { |
154 | prob.vname = this.st.variants.find(v => v.id == prob.vid).name; | |
155 | }, | |
156 | copyProblem: function(p1, p2) { | |
157 | for (let key in p1) | |
158 | p2[key] = p1[key]; | |
159 | }, | |
160 | resetCurProb: function() { | |
161 | this.curproblem.id = 0; | |
162 | this.curproblem.uid = 0; | |
163 | this.curproblem.vid = ""; | |
164 | this.curproblem.vname = ""; | |
165 | this.curproblem.fen = ""; | |
166 | this.curproblem.diag = ""; | |
167 | this.curproblem.instruction = ""; | |
168 | this.curproblem.solution = ""; | |
169 | this.curproblem.showSolution = false; | |
89021f18 | 170 | }, |
604b951e BA |
171 | parseHtml: function(txt) { |
172 | return !txt.match(/<[/a-zA-Z]+>/) | |
173 | ? txt.replace(/\n/g, "<br/>") //no HTML tag | |
174 | : txt; | |
175 | }, | |
176 | changeVariant: function(prob) { | |
177 | this.setVname(prob); | |
178 | this.loadVariant( | |
179 | prob.vid, | |
180 | () => { | |
181 | // Set FEN if possible (might not be correct yet) | |
182 | if (V.IsGoodFen(prob.fen)) | |
183 | this.setDiagram(prob); | |
184 | } | |
185 | ); | |
186 | }, | |
187 | loadVariant: async function(vid, cb) { | |
188 | // Condition: vid is a valid variant ID | |
189 | this.loadedVar = 0; | |
190 | const variant = this.st.variants.find(v => v.id == vid); | |
89021f18 BA |
191 | const vModule = await import("@/variants/" + variant.name + ".js"); |
192 | window.V = vModule.VariantRules; | |
604b951e BA |
193 | this.loadedVar = vid; |
194 | cb(); | |
195 | }, | |
196 | trySetDiagram: function(prob) { | |
197 | // Problem edit: FEN could be wrong or incomplete, | |
198 | // variant could not be ready, or not defined | |
199 | if (prob.vid > 0 && this.loadedVar == prob.vid && V.IsGoodFen(prob.fen)) | |
200 | this.setDiagram(prob); | |
89021f18 | 201 | }, |
604b951e BA |
202 | setDiagram: function(prob) { |
203 | // Condition: prob.fen is correct and global V is ready | |
204 | const parsedFen = V.ParseFen(prob.fen); | |
205 | const args = { | |
206 | position: parsedFen.position, | |
207 | orientation: parsedFen.turn, | |
208 | }; | |
209 | prob.diag = getDiagram(args); | |
89021f18 | 210 | }, |
604b951e BA |
211 | displayProblem: function(p) { |
212 | return ((this.selectedVar == 0 || p.vid == this.selectedVar) && | |
213 | ((this.onlyMines && p.uid == this.st.user.id) | |
214 | || (!this.onlyMines && p.uid != this.st.user.id))); | |
215 | }, | |
216 | showProblem: function(p) { | |
217 | this.loadVariant( | |
218 | p.vid, | |
219 | () => { | |
220 | // The FEN is already checked at this stage: | |
221 | this.vr = new V(p.fen); | |
222 | this.game.vname = p.vname; | |
223 | this.game.mycolor = this.vr.turn; //diagram orientation | |
224 | this.game.fen = p.fen; | |
225 | this.$set(this.game, "fenStart", p.fen); | |
226 | this.copyProblem(p, this.curproblem); | |
227 | this.showOne = true; | |
228 | } | |
229 | ); | |
230 | }, | |
231 | sendProblem: function() { | |
232 | const error = checkProblem(this.curproblem); | |
89021f18 BA |
233 | if (!!error) |
234 | return alert(error); | |
604b951e BA |
235 | const edit = this.curproblem.id > 0; |
236 | this.infoMsg = "Processing... Please wait"; | |
237 | ajax( | |
238 | "/problems", | |
239 | edit ? "PUT" : "POST", | |
240 | {prob: this.curproblem}, | |
241 | (ret) => { | |
242 | if (edit) | |
243 | { | |
244 | let editedP = this.problems.find(p => p.id == this.curproblem.id); | |
245 | this.copyProblem(this.curproblem, editedP); | |
246 | } | |
247 | else //new problem | |
248 | { | |
249 | let newProblem = Object.assign({}, this.curproblem); | |
250 | newProblem.id = ret.id; | |
251 | this.problems = this.problems.concat(newProblem); | |
252 | } | |
253 | this.resetCurProb(); | |
254 | this.infoMsg = ""; | |
255 | } | |
256 | ); | |
257 | }, | |
258 | editProblem: function(prob) { | |
259 | if (!prob.diag) | |
260 | this.setDiagram(prob); //possible because V is loaded at this stage | |
261 | this.copyProblem(prob, this.curproblem); | |
262 | doClick('modalNewprob'); | |
263 | }, | |
264 | deleteProblem: function(prob) { | |
265 | if (confirm(this.st.tr["Are you sure?"])) | |
266 | ajax("/problems", "DELETE", {pid:prob.id}); | |
89021f18 BA |
267 | }, |
268 | }, | |
269 | }; | |
270 | </script> | |
271 | ||
272 | <style lang="sass" scoped> | |
273 | #newProblem | |
274 | display: block | |
275 | margin: 10px auto 5px auto | |
276 | </style> |