368e09a7f94a82a46edf37348a809f3dccaa2945
[vchess.git] / client / next_src / views / Problems.vue
1 <template>
2 <div class="test">
3 <TestComp :vname="variant.name"/>
4 </div>
5 </template>
6
7 <script>
8 // @ is an alias to /src
9 import TestComp from "@/components/TestComp.vue";
10
11 export default {
12 name: "test",
13 components: {
14 TestComp,
15 },
16 data: function() {
17 return {
18 variant: {name: "Atomic", id: 3},
19 };
20 }
21 };
22 </script>
23 Vue.component('my-problems', {
24 props: ["probId","settings"],
25 data: function () {
26 return {
27 userId: user.id,
28 problems: [], //oldest first
29 myProblems: [], //same, but only mine
30 singletons: [], //requested problems (using #num)
31 display: "others", //or "mine"
32 curProb: null, //(reference to) current displayed problem (if any)
33 showSolution: false,
34 nomoreMessage: "",
35 mode: "analyze", //for game component
36 pbNum: 0, //to navigate directly to some problem
37 // New problem (to upload), or existing problem to edit:
38 modalProb: {
39 id: 0, //defined if it's an edit
40 uid: 0, //...also
41 fen: "",
42 instructions: "",
43 solution: "",
44 preview: false,
45 },
46 };
47 },
48 // NOTE: always modals first, because otherwise "scroll to the end" undesirable effect
49 template: `
50 <div id="problemControls" class="button-group">
51 <button :aria-label='translate("Previous problem(s)")' class="tooltip"
52 @click="showNext('backward')"
53 >
54 <i class="material-icons">skip_previous</i>
55 </button>
56 <button v-if="!!userId" :aria-label='translate("Add a problem")'
57 class="tooltip" onClick="doClick('modal-newproblem')"
58 >
59 {{ translate("New") }}
60 </button>
61 <button :aria-label='translate("Next problem(s)")' class="tooltip"
62 @click="showNext('forward')"
63 >
64 <i class="material-icons">skip_next</i>
65 </button>
66 </div>
67 <div id="mainBoard" v-if="!!curProb">
68 <div id="instructions-div" class="section-content">
69 <p id="problem-instructions">{{ curProb.instructions }}</p>
70 </div>
71 <my-game :fen="curProb.fen" :mode="mode" :allowMovelist="true"
72 :settings="settings">
73 </my-game>
74 <div id="solution-div" class="section-content">
75 <h3 class="clickable" @click="showSolution = !showSolution">
76 {{ translate("Show solution") }}
77 </h3>
78 <p id="problem-solution" v-show="showSolution">{{ curProb.solution }}</p>
79 </div>
80 <button @click="displayList">Back to list display</button>
81 </div>
82 <div>
83 <input type="text" placeholder="Type problem number" v-model="pbNum"/>
84 <button @click="() => showProblem(pbNum)">Show problem</button>
85 </div>
86 <button v-if="!!userId" @click="toggleListDisplay"
87 :class="{'only-mine':display=='mine'}"
88 >
89 My problems (only)
90 </button>
91 <my-problem-summary v-show="!curProb"
92 v-on:edit-problem="editProblem(p)" v-on:delete-problem="deleteProblem(p.id)"
93 v-on:show-problem="() => showProblem(p.id)"
94 v-for="p in curProblems()" @click="curProb=p"
95 v-bind:prob="p" v-bind:userid="userId" v-bind:key="p.id">
96 </my-problem-summary>
97 </div>
98 `,
99 watch: {
100 probId: function() {
101 this.showProblem(this.probId);
102 },
103 },
104 created: function() {
105 if (!!this.probId)
106 this.showProblem(this.probId);
107 else
108 this.firstFetch();
109 },
110 methods: {
111 translate: translate,
112 firstFetch: function() {
113 // Fetch most recent problems from server, for both lists
114 this.fetchProblems("others", "bacwkard");
115 this.fetchProblems("mine", "bacwkard");
116 this.listsInitialized = true;
117 },
118 showProblem: function(pid) {
119 location.hash = "#problems?id=" + pid;
120 for (let parray of [this.singletons,this.problems,this.myProblems])
121 {
122 const pIdx = parray.findIndex(p => p.id == pid);
123 if (pIdx >= 0)
124 {
125 this.curProb = parray[pIdx];
126 break;
127 }
128 }
129 if (!this.curProb)
130 {
131 // Cannot find problem in current set; get from server, and add to singletons.
132 ajax(
133 "/problems/" + variant.id + "/" + pid, //TODO: variant ID should not be required
134 "GET",
135 response => {
136 if (!!response.problem)
137 {
138 this.singletons.push(response.problem);
139 this.curProb = response.problem;
140 this.display = (response.problem.uid == this.userId ? "mine" : "others");
141 }
142 else
143 this.noMoreProblems("Sorry, problem " + pid + " does not exist");
144 }
145 );
146 }
147 else
148 this.display = (this.curProb.uid == this.userId ? "mine" : "others");
149 },
150 curProblems: function() {
151 switch (this.display)
152 {
153 case "others":
154 return this.problems;
155 case "mine":
156 return this.myProblems;
157 }
158 },
159 // TODO?: get 50 from server but only show 10 at a time (for example)
160 showNext: function(direction) {
161 const nomorePb =
162 problems => {
163 if (!problems || problems.length == 0)
164 this.noMoreProblems("No more problems in this direction");
165 };
166 if (!this.curProb)
167 return this.fetchProblems(this.display, direction, nomorePb);
168 // Show next problem (older or newer):
169 let curProbs = this.curProblems();
170 // Try to find a neighbour problem in the direction, among current set
171 const neighbor = this.findClosestNeighbor(this.curProb, curProbs, direction);
172 if (!!neighbor)
173 {
174 this.curProb = neighbor;
175 return;
176 }
177 // Boundary case: nothing in current set, need to fetch from server
178 const curSize = curProbs.length;
179 this.fetchProblems(this.display, direction, problems => {
180 if (problems.length > 0)
181 {
182 // Ok, found something:
183 this.curProb =
184 this.findClosestNeighbor(this.curProb, curProbs, direction);
185 }
186 else
187 nomorePb();
188 });
189 },
190 findClosestNeighbor: function(problem, probList, direction) {
191 let neighbor = undefined;
192 let smallestDistance = Number.MAX_SAFE_INTEGER;
193 for (let prob of probList)
194 {
195 const delta = Math.abs(prob.id - problem.id);
196 if (delta < smallestDistance &&
197 ((direction == "backward" && prob.id < problem.id)
198 || (direction == "forward" && prob.id > problem.id)))
199 {
200 neighbor = prob;
201 smallestDistance = delta;
202 }
203 }
204 return neighbor;
205 },
206 noMoreProblems: function(message) {
207 this.nomoreMessage = message;
208 let modalNomore = document.getElementById("modalNomore");
209 modalNomore.checked = true;
210 setTimeout(() => modalNomore.checked = false, 2000);
211 },
212 displayList: function() {
213 this.curProb = null;
214 location.hash = "#problems";
215 // Fetch problems if first call (if #num, and then lists)
216 if (!this.listsInitialized)
217 this.firstFetch();
218 },
219 toggleListDisplay: function() {
220 const displays = ["mine","others"];
221 const curIndex = displays.findIndex(item => item == this.display);
222 this.display = displays[1-curIndex];
223 },
224 fetchProblems: function(type, direction, cb) {
225 let problems = (type == "others" ? this.problems : this.myProblems);
226 // "last datetime" set at a value OK for an empty initial array
227 let last_dt = (direction=="forward" ? 0 : Number.MAX_SAFE_INTEGER);
228 if (problems.length > 0)
229 {
230 // Search for newest date (or oldest)
231 last_dt = problems[0].added;
232 for (let i=1; i<problems.length; i++)
233 {
234 if ((direction == "forward" && problems[i].added > last_dt) ||
235 (direction == "backward" && problems[i].added < last_dt))
236 {
237 last_dt = problems[i].added;
238 }
239 }
240 }
241 ajax(
242 "/problems/" + variant.id,
243 "GET",
244 {
245 type: type,
246 direction: direction,
247 last_dt: last_dt,
248 },
249 response => {
250 if (response.problems.length > 0)
251 {
252 Array.prototype.push.apply(problems, response.problems.sort(
253 (p1,p2) => { return p2.added - p1.added; }));
254 // If one list is empty but not the other, show the non-empty
255 const otherArray =
256 (type == "mine" ? this.problems : this.myProblems);
257 if (otherArray.length == 0)
258 this.display = type;
259 this.$forceUpdate(); //TODO...
260 }
261 if (!!cb)
262 cb(response.problems);
263 }
264 );
265 },
266 },
267 })