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")
8 label(for="selectVariant") {{ st.tr["Variant"] }}
10 v-model="curproblem.vid"
11 @change="changeVariant(curproblem)"
14 v-for="v in [emptyVar].concat(st.variants)"
16 :selected="curproblem.vid==v.id"
20 label(for="inputFen") FEN
23 v-model="curproblem.fen"
24 @input="trySetDiagram(curproblem)"
26 div(v-html="curproblem.diag")
28 textarea#instructions(
29 :placeholder="st.tr['Instructions']"
30 v-model="curproblem.instruction"
32 p(v-html="parseHtml(curproblem.instruction)")
35 :placeholder="st.tr['Solution']"
36 v-model="curproblem.solution"
38 p(v-html="parseHtml(curproblem.solution)")
39 button(@click="sendProblem()") {{ st.tr["Send"] }}
40 #dialog.text-center {{ st.tr[infoMsg] }}
43 button#newProblem(onClick="doClick('modalNewprob')")
44 | {{ st.tr["New problem"] }}
46 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
48 button(@click="showOne=false") {{ st.tr["Back to list"] }}
50 v-if="st.user.id == curproblem.uid"
51 @click="editProblem(curproblem)"
55 v-if="st.user.id == curproblem.uid"
56 @click="deleteProblem(curproblem)"
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"] }}
64 v-show="curproblem.showSolution"
65 v-html="parseHtml(curproblem.solution)"
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"] }}
74 label(for="selectVariant") {{ st.tr["Variant"] }}
75 select#selectVariant(v-model="selectedVar")
77 v-for="v in [emptyVar].concat(st.variants)"
83 v-show="displayProblem(p)"
84 @click="showProblem(p)"
88 p(v-html="p.instruction")
89 BaseGame(v-if="showOne" :game="game" :vr="vr")
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=...
96 import { store } from "@/store";
97 import { ajax } from "@/utils/ajax";
98 import { checkProblem } from "@/data/problemCheck";
99 import { getDiagram } from "@/utils/printDiagram";
100 import BaseGame from "@/components/BaseGame.vue";
113 // Problem currently showed, or edited:
115 id: 0, //used in case of edit
123 loadedVar: 0, //corresponding to loaded V
124 selectedVar: 0, //to filter problems based on variant
129 vr: null, //"variant rules" object initialized from FEN
131 players:[{name:"Problem"},{name:"Problem"}],
136 created: function() {
137 ajax("/problems", "GET", (res) => {
138 this.problems = res.problems;
139 if (this.st.variants.length > 0)
140 this.problems.forEach(p => this.setVname(p))
144 // st.variants changes only once, at loading from [] to [...]
145 "st.variants": function(variantArray) {
146 // Set problems vname (either all are set or none)
147 if (this.problems.length > 0 && this.problems[0].vname == "")
148 this.problems.forEach(p => this.setVname(p));
152 setVname: function(prob) {
153 prob.vname = this.st.variants.find(v => v.id == prob.vid).name;
155 copyProblem: function(p1, p2) {
159 resetCurProb: function() {
160 this.curproblem.id = 0;
161 this.curproblem.uid = 0;
162 this.curproblem.vid = "";
163 this.curproblem.vname = "";
164 this.curproblem.fen = "";
165 this.curproblem.diag = "";
166 this.curproblem.instruction = "";
167 this.curproblem.solution = "";
168 this.curproblem.showSolution = false;
170 parseHtml: function(txt) {
171 return !txt.match(/<[/a-zA-Z]+>/)
172 ? txt.replace(/\n/g, "<br/>") //no HTML tag
175 changeVariant: function(prob) {
180 // Set FEN if possible (might not be correct yet)
181 if (V.IsGoodFen(prob.fen))
182 this.setDiagram(prob);
186 loadVariant: async function(vid, cb) {
187 // Condition: vid is a valid variant ID
189 const variant = this.st.variants.find(v => v.id == vid);
190 const vModule = await import("@/variants/" + variant.name + ".js");
191 window.V = vModule.VariantRules;
192 this.loadedVar = vid;
195 trySetDiagram: function(prob) {
196 // Problem edit: FEN could be wrong or incomplete,
197 // variant could not be ready, or not defined
198 if (prob.vid > 0 && this.loadedVar == prob.vid && V.IsGoodFen(prob.fen))
199 this.setDiagram(prob);
201 setDiagram: function(prob) {
202 // Condition: prob.fen is correct and global V is ready
203 const parsedFen = V.ParseFen(prob.fen);
205 position: parsedFen.position,
206 orientation: parsedFen.turn,
208 prob.diag = getDiagram(args);
210 displayProblem: function(p) {
211 return ((this.selectedVar == 0 || p.vid == this.selectedVar) &&
212 ((this.onlyMines && p.uid == this.st.user.id)
213 || (!this.onlyMines && p.uid != this.st.user.id)));
215 showProblem: function(p) {
219 // The FEN is already checked at this stage:
220 this.vr = new V(p.fen);
221 this.game.vname = p.vname;
222 this.game.mycolor = this.vr.turn; //diagram orientation
223 this.game.fen = p.fen;
224 this.$set(this.game, "fenStart", p.fen);
225 this.copyProblem(p, this.curproblem);
230 sendProblem: function() {
231 const error = checkProblem(this.curproblem);
234 const edit = this.curproblem.id > 0;
235 this.infoMsg = "Processing... Please wait";
238 edit ? "PUT" : "POST",
239 {prob: this.curproblem},
243 let editedP = this.problems.find(p => p.id == this.curproblem.id);
244 this.copyProblem(this.curproblem, editedP);
248 let newProblem = Object.assign({}, this.curproblem);
249 newProblem.id = ret.id;
250 this.problems = this.problems.concat(newProblem);
257 editProblem: function(prob) {
259 this.setDiagram(prob); //possible because V is loaded at this stage
260 this.copyProblem(prob, this.curproblem);
261 doClick('modalNewprob');
263 deleteProblem: function(prob) {
264 if (confirm(this.st.tr["Are you sure?"]))
265 ajax("/problems", "DELETE", {pid:prob.id});
271 <style lang="sass" scoped>
274 margin: 10px auto 5px auto