Fix computer mode in rules tab
[vchess.git] / public / javascripts / components / problems.js
CommitLineData
4ecf423b 1Vue.component('my-problems', {
582df349 2 props: ["queryHash","settings"],
da06a6eb
BA
3 data: function () {
4 return {
ff1d4c3f 5 userId: user.id,
81da2786 6 problems: [], //oldest first
ff1d4c3f 7 myProblems: [], //same, but only mine
936dc463
BA
8 singletons: [], //requested problems (using #num)
9 display: "others", //or "mine"
10 curProb: null, //(reference to) current displayed problem (if any)
ff1d4c3f 11 showSolution: false,
936dc463 12 pbNum: 0, //to navigate directly to some problem
ff1d4c3f
BA
13 // New problem (to upload), or existing problem to edit:
14 modalProb: {
15 id: 0, //defined if it's an edit
77fa6d1f 16 fen: "",
45109880
BA
17 instructions: "",
18 solution: "",
a9f262f3 19 preview: false,
45109880 20 },
da06a6eb
BA
21 };
22 },
4ecf423b 23 template: `
a5d56686
BA
24 <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
25 <div id="problemControls" class="button-group">
ff1d4c3f 26 <button :aria-label='translate("Previous problem(s)")' class="tooltip" @click="showNext('backward')">
a5d56686
BA
27 <i class="material-icons">skip_previous</i>
28 </button>
ff1d4c3f 29 <button :aria-label='translate("Add a problem")' class="tooltip" onClick="doClick('modal-newproblem')">
247356cd 30 {{ translate("New") }}
a5d56686 31 </button>
ff1d4c3f 32 <button :aria-label='translate("Next problem(s)")' class="tooltip" @click="showNext('forward')">
a5d56686
BA
33 <i class="material-icons">skip_next</i>
34 </button>
35 </div>
936dc463 36 <div id="mainBoard" v-show="!!curProb">
ff1d4c3f 37 <div id="instructions-div" class="section-content">
8ef618ef
BA
38 <p id="problem-instructions">
39 {{ curProb.instructions }}
40 </p>
ff1d4c3f 41 </div>
582df349 42 <my-game :fen="curProb.fen" :mode="analyze" :allowMovelist="true" :settings="settings">
e5dc87e0 43 </my-board>
ff1d4c3f
BA
44 <div id="solution-div" class="section-content">
45 <h3 class="clickable" @click="showSolution = !showSolution">
46 {{ translations["Show solution"] }}
47 </h3>
8ef618ef
BA
48 <p id="problem-solution" v-show="showSolution">
49 {{ curProb.solution }}
50 </p>
ff1d4c3f 51 </div>
936dc463
BA
52 <button @click="displayList()">
53 <span>Back to list display</span>
54 </button>
55 </div>
56 <div>
57 <input type="text" placeholder="Type problem number" v-model="pbNum"/>
58 <button @click="showProblem()">
59 <span>Show problem</span>
60 </button>
ff1d4c3f 61 </div>
8ef618ef
BA
62 <button v-if="!!userId" @click="toggleListDisplay()">
63 <span>My problems (only)</span>
64 </button>
936dc463
BA
65 <my-problem-summary v-show="!curProb"
66 v-on:edit-problem="editProblem(p)" v-on:delete-problem="deleteProblem(p.id)"
67 v-for="p in curProblems" @click="curProb=p"
8ef618ef 68 v-bind:prob="p" v-bind:userid="userId" v-bind:key="p.id">
da06a6eb 69 </my-problem-summary>
8ef618ef 70 <input type="checkbox" id="modal-newproblem" class="modal"/>
ff1d4c3f
BA
71 <div role="dialog" aria-labelledby="modalProblemTxt">
72 <div v-show="!modalProb.preview" class="card newproblem-form">
8ef618ef
BA
73 <label for="modal-newproblem" class="modal-close">
74 </label>
75 <h3 id="modalProblemTxt">
76 {{ translate("Add a problem") }}
77 </h3>
78 <form @submit.prevent="previewProblem()">
da06a6eb 79 <fieldset>
247356cd 80 <label for="newpbFen">FEN</label>
ff1d4c3f 81 <input id="newpbFen" type="text" v-model="modalProb.fen"
e081ffe3 82 :placeholder='translate("Full FEN description")'/>
da06a6eb
BA
83 </fieldset>
84 <fieldset>
8ef618ef
BA
85 <p class="emphasis">
86 {{ translate("Safe HTML tags allowed") }}
87 </p>
88 <label for="newpbInstructions">
89 {{ translate("Instructions") }}
90 </label>
ff1d4c3f 91 <textarea id="newpbInstructions" v-model="modalProb.instructions"
8ef618ef
BA
92 :placeholder='translate("Describe the problem goal")'>
93 </textarea>
94 <label for="newpbSolution">
95 {{ translate("Solution") }}
96 </label>
ff1d4c3f 97 <textarea id="newpbSolution" v-model="modalProb.solution"
8ef618ef
BA
98 :placeholder='translate("How to solve the problem?")'>
99 </textarea>
100 <button class="center-btn">
101 {{ translate("Preview") }}
102 </button>
da06a6eb 103 </fieldset>
da06a6eb
BA
104 </form>
105 </div>
ff1d4c3f 106 <div v-show="modalProb.preview" class="card newproblem-preview">
8ef618ef
BA
107 <label for="modal-newproblem" class="modal-close">
108 </label>
109 <my-problem-summary v-bind:prob="modalProb" v-bind:userid="userId">
110 </my-problem-summary>
a5d56686 111 <div class="button-group">
8ef618ef
BA
112 <button @click="modalProb.preview=false">
113 {{ translate("Cancel") }}
114 </button>
115 <button @click="sendProblem()">
116 {{ translate("Send") }}
117 </button>
b5fb8e69 118 </div>
45109880 119 </div>
da06a6eb 120 </div>
936dc463
BA
121 <input id="modalNomore" type="checkbox" class="modal"/>
122 <div role="dialog" aria-labelledby="nomoreMessage">
123 <div class="card smallpad small-modal text-center">
124 <label for="modalNomore" class="modal-close"></label>
125 <h3 id="nomoreMessage" class="section">
126 {{ nomoreMessage }}
127 </h3>
128 </div>
129 </div>
4ecf423b
BA
130 </div>
131 `,
582df349
BA
132 watch: {
133 queryHash: function(newQhash) {
134 if (!!newQhash)
135 {
136 // New query hash = "id=42"; get 42 as problem ID
137 const pid = parseInt(newQhash.substr(2));
138 this.showProblem(pid);
139 }
140 else
141 this.curProb = null; //(back to) list display
142 },
143 },
298c42e6 144 created: function() {
582df349
BA
145 if (!!this.queryHash)
146 {
147 const pid = parseInt(this.queryHash.substr(2));
148 this.showProblem(pid);
149 }
ff1d4c3f 150 else
936dc463 151 this.firstFetch();
298c42e6 152 },
da06a6eb 153 methods: {
936dc463
BA
154 firstFetch: function() {
155 // Fetch most recent problems from server, for both lists
156 this.fetchProblems("others", "bacwkard");
157 this.fetchProblems("mine", "bacwkard");
158 this.listsInitialized = true;
159 },
160 showProblem: function(num) {
161 const pid = num || this.pbNum;
162 location.hash = "#" + pid;
163 const pIdx = this.singletons.findIndex(p => p.id == pid);
164 if (pIdx >= 0)
165 curProb = this.singletons[pIdx];
166 else
167 {
168 // Cannot find problem in current set; get from server, and add to singletons.
169 ajax(
170 "/problems/" + variant.name + "/" + pid, //TODO: use variant._id ?
171 "GET",
172 response => {
173 if (!!response.problem)
174 {
175 this.singletons.push(response.problem);
176 this.curProb = response.problem;
177 }
178 else
179 this.noMoreProblems("Sorry, problem " + pid + " does not exist");
180 }
181 );
182 }
ff1d4c3f 183 },
247356cd
BA
184 translate: function(text) {
185 return translations[text];
186 },
ff1d4c3f
BA
187 curProblems: function() {
188 switch (this.display)
189 {
936dc463 190 case "others":
ff1d4c3f 191 return this.problems;
936dc463 192 case "mine":
ff1d4c3f
BA
193 return this.myProblems;
194 }
81da2786 195 },
8ef618ef 196 // TODO?: get 50 from server but only show 10 at a time (for example)
ff1d4c3f 197 showNext: function(direction) {
936dc463
BA
198 if (!this.curProb)
199 return this.fetchProblems(this.display, direction);
8ef618ef 200 // Show next problem (older or newer):
ff1d4c3f 201 let curProbs = this.curProblems();
936dc463
BA
202 // Try to find a neighbour problem in the direction, among current set
203 const neighbor = this.findClosestNeighbor(this.curProb, curProbs, direction);
204 if (!!neighbor)
ff1d4c3f 205 {
936dc463
BA
206 this.curProb = neighbor;
207 return;
ff1d4c3f 208 }
936dc463
BA
209 // Boundary case: nothing in current set, need to fetch from server
210 const curSize = curProbs.length;
211 this.fetchProblems(this.display, direction);
212 const newSize = curProbs.length;
213 if (curSize == newSize) //no problems found
214 return this.noMoreProblems("No more problems in this direction");
215 // Ok, found something:
216 this.curProb = this.findClosestNeighbor(this.curProb, curProbs, direction);
217 },
218 findClosestNeighbor: function(problem, probList, direction) {
219 let neighbor = undefined;
220 let smallestDistance = Number.MAX_SAFE_INTEGER;
221 for (let prob of probList)
ff1d4c3f 222 {
936dc463
BA
223 const delta = Math.abs(prob.id - problem.id);
224 if (delta < smallestDistance &&
225 ((direction == "backward" && prob.id < problem.id)
226 || (direction == "forward" && prob.id > problem.id)))
8ef618ef 227 {
936dc463
BA
228 neighbor = prob;
229 smallestDistance = delta;
8ef618ef 230 }
ff1d4c3f 231 }
936dc463
BA
232 return neighbor;
233 },
234 noMoreProblems: function(message) {
235 this.nomoreMessage = message;
236 let modalNomore = document.getElementById("modalNomore");
237 modalNomore.checked = true;
238 setTimeout(() => modalNomore.checked = false, 2000);
239 },
240 displayList: function() {
241 this.curProb = null;
242 location.hash = "";
243 // Fetch problems if first call (if #num, and then lists)
244 if (!this.listsInitialized)
245 this.firstFetch();
ff1d4c3f
BA
246 },
247 toggleListDisplay: function() {
936dc463 248 this.display = (this.display == "others" ? "mine" : "others");
81da2786 249 },
936dc463
BA
250 fetchProblems: function(type, direction) {
251 let problems = (type == "others" ? this.problems : this.myProblems);
252 let last_dt = (direction=="forward" ? 0 : Number.MAX_SAFE_INTEGER);
253 if (this.problems.length > 0)
7931e479 254 {
936dc463
BA
255 // Search for newest date (or oldest)
256 last_dt = problems[0].added;
257 for (let i=1; i<problems.length; i++)
7931e479 258 {
936dc463
BA
259 if ((direction == "forward" && this.problems[i].added > last_dt) ||
260 (direction == "backward" && this.problems[i].added < last_dt))
261 {
262 last_dt = this.problems[i].added;
263 }
7931e479
BA
264 }
265 }
936dc463 266 ajax(
582df349 267 "/problems/" + variant.id,
936dc463 268 "GET",
81da2786 269 {
936dc463
BA
270 type: type,
271 direction: direction,
272 last_dt: last_dt,
273 },
274 response => {
275 if (response.problems.length > 0)
276 {
277 Array.prototype.push.apply(problems,
278 response.problems.sort((p1,p2) => { return p1.added - p2.added; }));
279 // If one list is empty but not the other, show the non-empty
280 const otherArray = (type == "mine" ? this.problems : this.myProblems);
281 if (problems.length > 0 && otherArray.length == 0)
282 this.display = type;
283 }
81da2786 284 }
936dc463 285 );
da06a6eb 286 },
8ef618ef 287 previewProblem: function() {
45109880 288 if (!V.IsGoodFen(this.newProblem.fen))
e081ffe3 289 return alert(translations["Bad FEN description"]);
6b5517b4
BA
290 if (this.newProblem.instructions.trim().length == 0)
291 return alert(translations["Empty instructions"]);
292 if (this.newProblem.solution.trim().length == 0)
293 return alert(translations["Empty solution"]);
ff1d4c3f 294 this.modalProb.preview = true;
45109880 295 },
936dc463
BA
296 editProblem: function(prob) {
297 this.modalProb = prob;
298 document.getElementById("modal-newproblem").checked = true;
299 },
300 deleteProblem: function(pid) {
301 ajax(
582df349 302 "/problems/" + variant.id + "/" + pid,
936dc463
BA
303 "DELETE",
304 response => {
305 // Delete problem from the list on client side
306 let problems = this.curProblems();
307 const pIdx = problems.findIndex(p => p.id == pid);
308 problems.splice(pIdx, 1);
309 }
310 );
311 },
8ef618ef 312 sendProblem: function() {
45109880 313 // Send it to the server and close modal
8ef618ef 314 ajax(
582df349 315 "/problems/" + variant.id,
8ef618ef
BA
316 (this.modalProb.id > 0 ? "PUT" : "POST"),
317 this.modalProb,
318 response => {
319 document.getElementById("modal-newproblem").checked = false;
320 if (this.modalProb.id == 0)
321 {
322 this.modalProb.added = Date.now();
323 this.modalProb.preview = false;
936dc463 324 this.myProblems.push(JSON.parse(JSON.stringify(this.modalProb)));
8ef618ef
BA
325 }
326 else
327 this.modalProb.id = 0;
328 }
329 );
330 },
da06a6eb 331 },
4ecf423b 332})