1 Vue
.component('my-problems', {
2 props: ["probId","settings"],
6 problems: [], //oldest first
7 myProblems: [], //same, but only mine
8 singletons: [], //requested problems (using #num)
9 display: "others", //or "mine"
10 curProb: null, //(reference to) current displayed problem (if any)
13 mode: "analyze", //for game component
14 pbNum: 0, //to navigate directly to some problem
15 // New problem (to upload), or existing problem to edit:
17 id: 0, //defined if it's an edit
26 // NOTE: always modals first, because otherwise "scroll to the end" undesirable effect
28 <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
29 <input type="checkbox" id="modal-newproblem" class="modal"/>
30 <div role="dialog" aria-labelledby="modalProblemTxt">
31 <div v-show="!modalProb.preview" class="card newproblem-form">
32 <label for="modal-newproblem" class="modal-close">
34 <h3 id="modalProblemTxt">{{ translate("Add a problem") }}</h3>
35 <form @submit.prevent="previewProblem()">
37 <label for="newpbFen">FEN</label>
38 <input id="newpbFen" type="text" v-model="modalProb.fen"
39 :placeholder='translate("Full FEN description")'/>
42 <p class="emphasis">{{ translate("Safe HTML tags allowed") }}</p>
43 <label for="newpbInstructions">{{ translate("Instructions") }}</label>
44 <textarea id="newpbInstructions" v-model="modalProb.instructions"
45 :placeholder='translate("Describe the problem goal")'>
47 <label for="newpbSolution">{{ translate("Solution") }}</label>
48 <textarea id="newpbSolution" v-model="modalProb.solution"
49 :placeholder='translate("How to solve the problem?")'>
51 <button class="center-btn">{{ translate("Preview") }}</button>
55 <div v-show="modalProb.preview" class="card newproblem-preview">
56 <label for="modal-newproblem" class="modal-close"
57 @click="modalProb.preview=false">
59 <my-problem-summary :prob="modalProb" :userid="userId" :preview="true">
61 <div class="button-group">
62 <button @click="modalProb.preview=false">{{ translate("Cancel") }}</button>
63 <button @click="sendProblem()">{{ translate("Send") }}</button>
67 <input id="modalNomore" type="checkbox" class="modal"/>
68 <div role="dialog" aria-labelledby="nomoreMessage">
69 <div class="card smallpad small-modal text-center">
70 <label for="modalNomore" class="modal-close"></label>
71 <h3 id="nomoreMessage" class="section">{{ nomoreMessage }}</h3>
74 <div id="problemControls" class="button-group">
75 <button :aria-label='translate("Previous problem(s)")' class="tooltip"
76 @click="showNext('backward')"
78 <i class="material-icons">skip_previous</i>
80 <button v-if="!!userId" :aria-label='translate("Add a problem")'
81 class="tooltip" onClick="doClick('modal-newproblem')"
83 {{ translate("New") }}
85 <button :aria-label='translate("Next problem(s)")' class="tooltip"
86 @click="showNext('forward')"
88 <i class="material-icons">skip_next</i>
91 <div id="mainBoard" v-if="!!curProb">
92 <div id="instructions-div" class="section-content">
93 <p id="problem-instructions">{{ curProb.instructions }}</p>
95 <my-game :fen="curProb.fen" :mode="mode" :allowMovelist="true"
98 <div id="solution-div" class="section-content">
99 <h3 class="clickable" @click="showSolution = !showSolution">
100 {{ translate("Show solution") }}
102 <p id="problem-solution" v-show="showSolution">{{ curProb.solution }}</p>
104 <button @click="displayList">Back to list display</button>
107 <input type="text" placeholder="Type problem number" v-model="pbNum"/>
108 <button @click="() => showProblem(pbNum)">Show problem</button>
110 <button v-if="!!userId" @click="toggleListDisplay"
111 :class="{'only-mine':display=='mine'}"
115 <my-problem-summary v-show="!curProb"
116 v-on:edit-problem="editProblem(p)" v-on:delete-problem="deleteProblem(p.id)"
117 v-on:show-problem="() => showProblem(p.id)"
118 v-for="p in curProblems()" @click="curProb=p"
119 v-bind:prob="p" v-bind:userid="userId" v-bind:key="p.id">
120 </my-problem-summary>
125 this.showProblem(this.probId
);
128 created: function() {
130 this.showProblem(this.probId
);
135 translate: translate
,
136 firstFetch: function() {
137 // Fetch most recent problems from server, for both lists
138 this.fetchProblems("others", "bacwkard");
139 this.fetchProblems("mine", "bacwkard");
140 this.listsInitialized
= true;
142 showProblem: function(pid
) {
143 location
.hash
= "#problems?id=" + pid
;
144 for (let parray
of [this.singletons
,this.problems
,this.myProblems
])
146 const pIdx
= parray
.findIndex(p
=> p
.id
== pid
);
149 this.curProb
= parray
[pIdx
];
155 // Cannot find problem in current set; get from server, and add to singletons.
157 "/problems/" + variant
.id
+ "/" + pid
, //TODO: variant ID should not be required
160 if (!!response
.problem
)
162 this.singletons
.push(response
.problem
);
163 this.curProb
= response
.problem
;
164 this.display
= (response
.problem
.uid
== this.userId
? "mine" : "others");
167 this.noMoreProblems("Sorry, problem " + pid
+ " does not exist");
172 this.display
= (this.curProb
.uid
== this.userId
? "mine" : "others");
174 curProblems: function() {
175 switch (this.display
)
178 return this.problems
;
180 return this.myProblems
;
183 // TODO?: get 50 from server but only show 10 at a time (for example)
184 showNext: function(direction
) {
187 if (!problems
|| problems
.length
== 0)
188 this.noMoreProblems("No more problems in this direction");
191 return this.fetchProblems(this.display
, direction
, nomorePb
);
192 // Show next problem (older or newer):
193 let curProbs
= this.curProblems();
194 // Try to find a neighbour problem in the direction, among current set
195 const neighbor
= this.findClosestNeighbor(this.curProb
, curProbs
, direction
);
198 this.curProb
= neighbor
;
201 // Boundary case: nothing in current set, need to fetch from server
202 const curSize
= curProbs
.length
;
203 this.fetchProblems(this.display
, direction
, problems
=> {
204 if (problems
.length
> 0)
206 // Ok, found something:
208 this.findClosestNeighbor(this.curProb
, curProbs
, direction
);
214 findClosestNeighbor: function(problem
, probList
, direction
) {
215 let neighbor
= undefined;
216 let smallestDistance
= Number
.MAX_SAFE_INTEGER
;
217 for (let prob
of probList
)
219 const delta
= Math
.abs(prob
.id
- problem
.id
);
220 if (delta
< smallestDistance
&&
221 ((direction
== "backward" && prob
.id
< problem
.id
)
222 || (direction
== "forward" && prob
.id
> problem
.id
)))
225 smallestDistance
= delta
;
230 noMoreProblems: function(message
) {
231 this.nomoreMessage
= message
;
232 let modalNomore
= document
.getElementById("modalNomore");
233 modalNomore
.checked
= true;
234 setTimeout(() => modalNomore
.checked
= false, 2000);
236 displayList: function() {
238 location
.hash
= "#problems";
239 // Fetch problems if first call (if #num, and then lists)
240 if (!this.listsInitialized
)
243 toggleListDisplay: function() {
244 const displays
= ["mine","others"];
245 const curIndex
= displays
.findIndex(item
=> item
== this.display
);
246 this.display
= displays
[1-curIndex
];
248 fetchProblems: function(type
, direction
, cb
) {
249 let problems
= (type
== "others" ? this.problems : this.myProblems
);
250 // "last datetime" set at a value OK for an empty initial array
251 let last_dt
= (direction
=="forward" ? 0 : Number
.MAX_SAFE_INTEGER
);
252 if (problems
.length
> 0)
254 // Search for newest date (or oldest)
255 last_dt
= problems
[0].added
;
256 for (let i
=1; i
<problems
.length
; i
++)
258 if ((direction
== "forward" && problems
[i
].added
> last_dt
) ||
259 (direction
== "backward" && problems
[i
].added
< last_dt
))
261 last_dt
= problems
[i
].added
;
266 "/problems/" + variant
.id
,
270 direction: direction
,
274 if (response
.problems
.length
> 0)
276 Array
.prototype.push
.apply(problems
, response
.problems
.sort(
277 (p1
,p2
) => { return p2
.added
- p1
.added
; }));
278 // If one list is empty but not the other, show the non-empty
280 (type
== "mine" ? this.problems : this.myProblems
);
281 if (otherArray
.length
== 0)
283 this.$forceUpdate(); //TODO...
286 cb(response
.problems
);
290 previewProblem: function() {
291 if (!V
.IsGoodFen(this.modalProb
.fen
))
292 return alert(translations
["Bad FEN description"]);
293 if (this.modalProb
.instructions
.trim().length
== 0)
294 return alert(translations
["Empty instructions"]);
295 if (this.modalProb
.solution
.trim().length
== 0)
296 return alert(translations
["Empty solution"]);
297 Vue
.set(this.modalProb
, "preview", true);
299 editProblem: function(prob
) {
300 this.modalProb
= prob
;
301 Vue
.set(this.modalProb
, "preview", false);
302 document
.getElementById("modal-newproblem").checked
= true;
304 deleteProblem: function(pid
) {
309 // Delete problem from the list on client side
310 let problems
= this.curProblems();
311 const pIdx
= problems
.findIndex(p
=> p
.id
== pid
);
312 problems
.splice(pIdx
, 1);
316 sendProblem: function() {
317 // Send it to the server and close modal
319 "/problems/" + variant
.id
,
320 (this.modalProb
.id
> 0 ? "PUT" : "POST"),
323 document
.getElementById("modal-newproblem").checked
= false;
324 Vue
.set(this.modalProb
, "preview", false);
325 if (this.modalProb
.id
== 0)
327 this.myProblems
.unshift({
331 fen: this.modalProb
.fen
,
332 instructions: this.modalProb
.instructions
,
333 solution: this.modalProb
.solution
,
335 if (!this.curProb
&& this.display
!= "mine")
336 this.display
= "mine";
339 this.modalProb
.id
= 0;