Commit | Line | Data |
---|---|---|
7a00c409 BA |
1 | new Vue({ |
2 | el: "#mahjong", | |
3 | data: { | |
4 | players: [], //array of objects, filled later | |
5 | display: "players", | |
6 | }, | |
7 | components: { | |
8 | 'my-players': { | |
48bee368 | 9 | props: ['players','initPlayers'], |
7a00c409 BA |
10 | template: ` |
11 | <div id="players"> | |
1369a09d | 12 | <div class="left"> |
7a00c409 BA |
13 | <p>Présents</p> |
14 | <table class="list"> | |
15 | <tr v-for="p in sortedPlayers" v-if="p.available" @click="toggleAvailability(p.index)"> | |
16 | <td>{{ p.prenom }}</td> | |
17 | <td>{{ p.nom }}</td> | |
18 | </tr> | |
19 | </table> | |
20 | </div> | |
1369a09d | 21 | <div id="inactive" class="right"> |
7a00c409 BA |
22 | <p>Absents</p> |
23 | <table class="list"> | |
fd4a69e4 | 24 | <tr v-for="p in sortedPlayers" v-if="!p.available && p.nom!=''" @click="toggleAvailability(p.index)"> |
7a00c409 BA |
25 | <td>{{ p.prenom }}</td> |
26 | <td>{{ p.nom }}</td> | |
27 | </tr> | |
28 | </table> | |
29 | </div> | |
48bee368 BA |
30 | <div class="clear"> |
31 | <input class="hide" id="upload" type="file" @change="upload"/> | |
32 | <button class="btn block cancel" @click="uploadTrigger()" title="Charge la liste des joueurs, en principe en début de tournoi"> | |
33 | (Ré)initialiser | |
34 | </button> | |
35 | </div> | |
7a00c409 BA |
36 | </div> |
37 | `, | |
38 | computed: { | |
39 | sortedPlayers: function() { | |
40 | return this.players | |
41 | .map( (p,i) => { return Object.assign({}, p, {index: i}); }) | |
42 | .sort( (a,b) => { | |
43 | return a.nom.localeCompare(b.nom); | |
44 | }); | |
45 | }, | |
46 | }, | |
47 | methods: { | |
48 | toggleAvailability: function(i) { | |
49 | this.players[i].available = 1 - this.players[i].available; | |
48bee368 BA |
50 | }, |
51 | uploadTrigger: function() { | |
52 | document.getElementById("upload").click(); | |
53 | }, | |
54 | upload: function(e) { | |
55 | let file = (e.target.files || e.dataTransfer.files)[0]; | |
56 | var reader = new FileReader(); | |
57 | reader.onloadend = ev => { | |
58 | this.initPlayers(ev.currentTarget.result); | |
59 | }; | |
60 | reader.readAsText(file); | |
7a00c409 BA |
61 | }, |
62 | }, | |
63 | }, | |
7a00c409 | 64 | 'my-pairings': { |
48bee368 | 65 | props: ['players','commitScores'], |
7a00c409 BA |
66 | data: function() { |
67 | return { | |
68 | unpaired: [], | |
69 | tables: [], //array of arrays of players indices | |
1d2d7593 | 70 | sessions: [], //"mini-points" for each table |
7a00c409 | 71 | currentIndex: -1, //table index for scoring |
1369a09d | 72 | scored: [], //boolean for each table index |
7a00c409 BA |
73 | }; |
74 | }, | |
75 | template: ` | |
76 | <div id="pairings"> | |
77 | <div v-show="currentIndex < 0"> | |
48bee368 | 78 | <div class="button-container-horizontal"> |
496ab82e | 79 | <button class="btn cancel" :class="{hide: tables.length==0}" @click="cancelRound()" title="Annule la ronde courante : tous les scores en cours seront perdus, et un nouveau tirage effectué. ATTENTION : action irréversible"> |
48bee368 BA |
80 | Valider |
81 | </button> | |
496ab82e | 82 | <button id="doPairings" class="btn" :class="{cancel: tables.length>0}" :disabled="scored.some( s => { return !s; })" @click="doPairings()" title="Répartit les joueurs actifs aléatoirement sur les tables"> |
48bee368 BA |
83 | Nouvelle ronde |
84 | </button> | |
85 | </div> | |
1369a09d | 86 | <div class="pairing" v-for="(table,index) in tables" :class="{scored: scored[index]}" |
7a00c409 BA |
87 | @click="showScoreForm(table,index)"> |
88 | <p>Table {{ index+1 }}</p> | |
89 | <table> | |
90 | <tr v-for="(i,j) in table"> | |
fd4a69e4 | 91 | <td :class="{toto: players[i].prenom=='Toto'}">{{ players[i].prenom }} {{ players[i].nom }}</td> |
1d2d7593 | 92 | <td class="score"><span v-show="sessions[index].length > 0">{{ sessions[index][j] }}</span></td> |
7a00c409 | 93 | </tr> |
7a00c409 BA |
94 | </table> |
95 | </div> | |
96 | <div v-if="unpaired.length>0" class="pairing unpaired"> | |
97 | <p>Exempts</p> | |
98 | <div v-for="i in unpaired"> | |
99 | {{ players[i].prenom }} {{ players[i].nom }} | |
100 | </div> | |
101 | </div> | |
102 | </div> | |
103 | <div id="scoreInput" v-if="currentIndex >= 0"> | |
104 | <table> | |
105 | <tr v-for="(index,i) in tables[currentIndex]"> | |
fd4a69e4 BA |
106 | <td :class="{toto: players[tables[currentIndex][i]].prenom=='Toto'}"> |
107 | {{ players[tables[currentIndex][i]].prenom }} {{ players[tables[currentIndex][i]].nom }} | |
108 | </td> | |
48bee368 | 109 | <td><input type="text" v-model="sessions[currentIndex][i]" :disabled="scored[currentIndex]"/></td> |
7a00c409 BA |
110 | </tr> |
111 | </table> | |
1369a09d | 112 | <div class="button-container-horizontal"> |
496ab82e | 113 | <button :class="{hide:scored[currentIndex]}" class="btn validate" @click="setScore()" title="Enregistre le score dans la base"> |
48bee368 BA |
114 | Enregistrer |
115 | </button> | |
496ab82e | 116 | <button :class="{hide:!scored[currentIndex]}" class="btn cancel" @click="resetScore()" title="Annule le score précédemment enregistré"> |
48bee368 BA |
117 | Annuler |
118 | </button> | |
119 | <button class="btn" @click="closeScoreForm()">Fermer</button> | |
7a00c409 BA |
120 | </div> |
121 | </div> | |
122 | </div> | |
123 | `, | |
124 | methods: { | |
3480360c BA |
125 | // TODO: clic sur "Valider" télécharge la ronde courante |
126 | // TODO: mémoriser les appariements passés pour éviter que les mêmes joueurs se rencontrent plusieurs fois | |
496ab82e BA |
127 | // --> dans la base: tableau rounds, rounds[0] : {tables[0,1,...], chacune contenant 4 indices de joueurs; + sessions[0,1,...]} |
128 | // --> devrait séparer les components en plusieurs fichiers... | |
129 | // cas à 5 joueurs : le joueur exempt doit tourner (c'est fait automatiquement en fait) | |
130 | cancelRound: function() { | |
131 | ||
132 | }, | |
7a00c409 BA |
133 | doPairings: function() { |
134 | // Simple case first: 4 by 4 | |
135 | let tables = []; | |
136 | let currentTable = []; | |
ade10194 | 137 | let ordering = _.shuffle(_.range(this.players.length)); |
7a00c409 BA |
138 | for (let i=0; i<ordering.length; i++) |
139 | { | |
140 | if ( ! this.players[ordering[i]].available ) | |
141 | continue; | |
142 | if (currentTable.length >= 4) | |
143 | { | |
144 | tables.push(currentTable); | |
145 | currentTable = []; | |
146 | } | |
147 | currentTable.push(ordering[i]); | |
148 | } | |
149 | // Analyse remainder | |
150 | this.unpaired = []; | |
151 | if (currentTable.length != 0) | |
152 | { | |
153 | if (currentTable.length < 3) | |
154 | { | |
155 | let missingPlayers = 3 - currentTable.length; | |
156 | // Pick players from 'missingPlayers' random different tables, if possible | |
157 | if (tables.length >= missingPlayers) | |
158 | { | |
159 | let tblNums = _.sample(_.range(tables.length), missingPlayers); | |
160 | tblNums.forEach( num => { | |
161 | currentTable.push(tables[num].pop()); | |
162 | }); | |
163 | } | |
164 | } | |
165 | if (currentTable.length >= 3) | |
166 | tables.push(currentTable); | |
167 | else | |
168 | this.unpaired = currentTable; | |
169 | } | |
fd4a69e4 BA |
170 | // Ensure that all tables have 4 players |
171 | tables.forEach( t => { | |
172 | if (t.length < 4) | |
173 | t.push(0); //index of "Toto", ghost player | |
174 | }); | |
7a00c409 | 175 | this.tables = tables; |
1d2d7593 | 176 | this.sessions = tables.map( t => { return []; }); //empty sessions |
1369a09d BA |
177 | this.scored = tables.map( t => { return false; }); //nothing scored yet |
178 | this.currentIndex = -1; //required if reset while scoring | |
7a00c409 BA |
179 | }, |
180 | showScoreForm: function(table,index) { | |
1369a09d BA |
181 | if (this.sessions[index].length == 0) |
182 | this.sessions[index] = _.times(table.length, _.constant(0)); | |
7a00c409 BA |
183 | this.currentIndex = index; |
184 | }, | |
48bee368 BA |
185 | closeScoreForm: function() { |
186 | if (!this.scored[this.currentIndex]) | |
187 | this.sessions[this.currentIndex] = []; | |
188 | this.currentIndex = -1; | |
189 | }, | |
190 | getPdts: function() { | |
1d2d7593 | 191 | let sortedSessions = this.sessions[this.currentIndex] |
ce0473b4 BA |
192 | .map( (s,i) => { return {value:parseInt(s), index:i}; }) |
193 | .sort( (a,b) => { return b.value - a.value; }); | |
48bee368 | 194 | const ref_pdts = [4, 2, 1, 0]; |
1369a09d BA |
195 | // NOTE: take care of ex-aequos (spread points subtotal) |
196 | let curSum = 0, curCount = 0, start = 0; | |
48bee368 | 197 | let sortedPdts = []; |
1369a09d | 198 | for (let i=0; i<4; i++) |
7a00c409 | 199 | { |
48bee368 | 200 | curSum += ref_pdts[i]; |
1369a09d BA |
201 | curCount++; |
202 | if (i==3 || sortedSessions[i].value > sortedSessions[i+1].value) | |
203 | { | |
204 | let pdt = curSum / curCount; | |
205 | for (let j=start; j<=i; j++) | |
48bee368 | 206 | sortedPdts.push(pdt); |
1369a09d BA |
207 | curSum = 0; |
208 | curCount = 0; | |
209 | start = i+1; | |
210 | } | |
48bee368 BA |
211 | } |
212 | // Re-order pdts to match table order | |
213 | let pdts = [0, 0, 0, 0]; | |
214 | for (let i=0; i<4; i++) | |
215 | pdts[sortedSessions[i].index] = sortedPdts[i]; | |
216 | return pdts; | |
217 | }, | |
218 | setScore: function() { | |
219 | let pdts = this.getPdts(); | |
220 | for (let i=0; i<4; i++) | |
221 | { | |
222 | this.players[this.tables[this.currentIndex][i]].pdt += pdts[i]; | |
1d2d7593 | 223 | this.players[this.tables[this.currentIndex][i]].session += parseInt(this.sessions[this.currentIndex][i]); |
7a00c409 | 224 | } |
48bee368 | 225 | Vue.set(this.scored, this.currentIndex, true); |
7a00c409 | 226 | this.currentIndex = -1; |
7a00c409 | 227 | }, |
48bee368 BA |
228 | resetScore: function() { |
229 | let pdts = this.getPdts(); | |
230 | for (let i=0; i<4; i++) | |
231 | { | |
232 | this.players[this.tables[this.currentIndex][i]].pdt -= pdts[i]; | |
233 | this.players[this.tables[this.currentIndex][i]].session -= parseInt(this.sessions[this.currentIndex][i]); | |
234 | } | |
235 | Vue.set(this.scored, this.currentIndex, false); | |
6d7bb9ad | 236 | }, |
7a00c409 BA |
237 | }, |
238 | }, | |
2caa3889 BA |
239 | 'my-timer': { |
240 | data: function() { | |
241 | return { | |
242 | time: 0, //remaining time, in seconds | |
243 | running: false, | |
496ab82e BA |
244 | initialTime: 90, //1h30, in minutes |
245 | setter: false, | |
246 | setterTime: 0, //to input new initial time | |
2caa3889 BA |
247 | }; |
248 | }, | |
249 | template: ` | |
8d4d2300 | 250 | <div id="timer" :style="{lineHeight: divHeight + 'px', fontSize: 0.66*divHeight + 'px', width: divWidth + 'px', height: divHeight + 'px'}"> |
496ab82e | 251 | <div v-show="!setter" @click.left="pauseResume()" @click.right.prevent="reset()" :class="{timeout:time==0}"> |
2caa3889 BA |
252 | {{ formattedTime }} |
253 | </div> | |
496ab82e | 254 | <input type="text" autofocus id="setter" @keyup.enter="setTime()" @keyup.esc="setter=false" v-show="setter" v-model="setterTime"></input> |
2caa3889 BA |
255 | <img class="close-cross" src="img/cross.svg" @click="$emit('clockover')"/> |
256 | </div> | |
257 | `, | |
258 | computed: { | |
259 | formattedTime: function() { | |
260 | let seconds = this.time % 60; | |
261 | let minutes = Math.floor(this.time / 60); | |
262 | return this.padToZero(minutes) + ":" + this.padToZero(seconds); | |
263 | }, | |
8d4d2300 | 264 | divHeight: function() { |
6d7bb9ad BA |
265 | return screen.height; |
266 | }, | |
8d4d2300 BA |
267 | divWidth: function() { |
268 | return screen.width; | |
269 | }, | |
2caa3889 BA |
270 | }, |
271 | methods: { | |
496ab82e BA |
272 | setTime: function() { |
273 | this.initialTime = this.setterTime; | |
274 | this.setter = false; | |
275 | this.reset(); | |
276 | }, | |
2caa3889 BA |
277 | padToZero: function(a) { |
278 | if (a < 10) | |
279 | return "0" + a; | |
280 | return a; | |
281 | }, | |
282 | pauseResume: function() { | |
283 | this.running = !this.running; | |
284 | if (this.running) | |
285 | this.start(); | |
286 | }, | |
287 | reset: function(e) { | |
288 | this.running = false; | |
496ab82e | 289 | this.time = this.initialTime * 60; |
2caa3889 BA |
290 | }, |
291 | start: function() { | |
292 | if (!this.running) | |
293 | return; | |
294 | if (this.time == 0) | |
295 | { | |
296 | new Audio("sounds/gong.mp3").play(); | |
297 | this.running = false; | |
298 | return; | |
299 | } | |
3480360c BA |
300 | if (this.time == this.initialTime) |
301 | new Audio("sounds/gong.mp3").play(); //gong at the beginning | |
2caa3889 BA |
302 | setTimeout(() => { |
303 | if (this.running) | |
304 | this.time--; | |
305 | this.start(); | |
306 | }, 1000); | |
307 | }, | |
308 | }, | |
309 | created: function() { | |
496ab82e | 310 | this.setterTime = this.initialTime; |
2caa3889 BA |
311 | this.reset(); |
312 | }, | |
496ab82e BA |
313 | mounted: function() { |
314 | let timer = document.getElementById("timer"); | |
315 | let keyDict = { | |
316 | 32: () => { this.setter = true; }, //Space | |
317 | 27: () => { this.setter = false; }, //Esc | |
318 | }; | |
319 | document.addEventListener("keyup", e => { | |
320 | if (timer.style.display !== "none") | |
321 | { | |
322 | let func = keyDict[e.keyCode]; | |
323 | if (!!func) | |
324 | { | |
325 | e.preventDefault(); | |
326 | func(); | |
327 | } | |
328 | } | |
329 | }); | |
330 | }, | |
2caa3889 | 331 | }, |
48b3a536 | 332 | 'my-ranking': { |
48bee368 | 333 | props: ['players','sortByScore','commitScores'], |
48b3a536 BA |
334 | template: ` |
335 | <div id="ranking"> | |
336 | <table class="ranking"> | |
337 | <tr class="title"> | |
338 | <th>Rang</th> | |
339 | <th>Joueur</th> | |
340 | <th>Points</th> | |
341 | <th>Mini-pts</th> | |
342 | </tr> | |
343 | <tr v-for="p in sortedPlayers"> | |
344 | <td>{{ p.rank }}</td> | |
345 | <td>{{ p.prenom }} {{ p.nom }}</td> | |
346 | <td>{{ p.pdt }}</td> | |
347 | <td>{{ p.session }}</td> | |
348 | </tr> | |
349 | </table> | |
350 | <div class="button-container-vertical" style="width:200px"> | |
48bee368 BA |
351 | <a id="download" href="#"></a> |
352 | <button class="btn" @click="download()" title="Télécharge le classement courant au format CSV">Télécharger</button> | |
353 | <button class="btn cancel" @click="resetPlayers()" title="Réinitialise les scores à zéro. ATTENTION: action irréversible"> | |
354 | Réinitialiser | |
355 | </button> | |
48b3a536 BA |
356 | </div> |
357 | </div> | |
358 | `, | |
359 | computed: { | |
360 | sortedPlayers: function() { | |
361 | let res = this.rankPeople(); | |
362 | // Add rank information (taking care of ex-aequos) | |
363 | let rank = 1; | |
364 | for (let i=0; i<res.length; i++) | |
365 | { | |
366 | if (i==0 || this.sortByScore(res[i],res[i-1]) == 0) | |
367 | res[i].rank = rank; | |
368 | else //strictly lower scoring | |
369 | res[i].rank = ++rank; | |
370 | } | |
371 | return res; | |
372 | }, | |
373 | }, | |
374 | methods: { | |
375 | rankPeople: function() { | |
376 | return this.players | |
377 | .slice(1) //discard Toto | |
48b3a536 BA |
378 | .sort(this.sortByScore); |
379 | }, | |
380 | resetPlayers: function() { | |
48bee368 BA |
381 | if (confirm('Êtes-vous sûr ?')) |
382 | { | |
383 | this.players | |
384 | .slice(1) //discard Toto | |
385 | .forEach( p => { | |
386 | p.pdt = 0; | |
387 | p.session = 0; | |
388 | p.available = 1; | |
389 | }); | |
390 | this.commitScores(); | |
391 | document.getElementById("doPairings").click(); | |
392 | } | |
393 | }, | |
394 | download: function() { | |
395 | // Prepare file content | |
396 | let content = "prénom,nom,pdt,session\n"; | |
48b3a536 BA |
397 | this.players |
398 | .slice(1) //discard Toto | |
48bee368 | 399 | .sort(this.sortByScore) |
48b3a536 | 400 | .forEach( p => { |
48bee368 | 401 | content += p.prenom + "," + p.nom + "," + p.pdt + "," + p.session + "\n"; |
48b3a536 | 402 | }); |
48bee368 BA |
403 | // Prepare and trigger download link |
404 | let downloadAnchor = document.getElementById("download"); | |
405 | downloadAnchor.setAttribute("download", "classement.csv"); | |
406 | downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content); | |
407 | downloadAnchor.click(); | |
48b3a536 BA |
408 | }, |
409 | }, | |
410 | }, | |
7a00c409 BA |
411 | }, |
412 | created: function() { | |
48bee368 BA |
413 | let players = JSON.parse(localStorage.getItem("players")); |
414 | if (players !== null) | |
415 | { | |
416 | this.addToto(players); | |
417 | this.players = players; | |
418 | } | |
7a00c409 | 419 | }, |
ade10194 | 420 | methods: { |
48bee368 BA |
421 | addToto: function(array) { |
422 | array.unshift({ //add ghost 4th player for 3-players tables | |
423 | prenom: "Toto", | |
424 | nom: "", | |
425 | pdt: 0, | |
426 | session: 0, | |
427 | available: 0, | |
428 | }); | |
429 | }, | |
1369a09d | 430 | // Used both in ranking and pairings: |
ade10194 BA |
431 | sortByScore: function(a,b) { |
432 | return b.pdt - a.pdt + (Math.atan(b.session - a.session) / (Math.PI/2)) / 2; | |
433 | }, | |
48bee368 BA |
434 | commitScores: function() { |
435 | localStorage.setItem( | |
436 | "players", | |
437 | JSON.stringify(this.players.slice(1)) //discard Toto | |
438 | ); | |
439 | }, | |
440 | // Used in players, reinit players array | |
441 | initPlayers: function(csv) { | |
442 | const allLines = csv | |
443 | .split(/\r\n|\n|\r/) //line breaks | |
444 | .splice(1); //discard header | |
445 | let players = allLines | |
446 | .filter( line => { return line.length > 0; }) //remove empty lines | |
447 | .map( line => { | |
448 | let parts = line.split(","); | |
d940eb68 BA |
449 | let p = { prenom: parts[0], nom: parts[1] }; |
450 | p.pdt = parts.length > 2 ? parseFloat(parts[2]) : 0; | |
451 | p.session = parts.length > 3 ? parseInt(parts[3]) : 0; | |
452 | p.available = parts.length > 4 ? parts[4] : 1; | |
453 | return p; | |
48bee368 BA |
454 | }); |
455 | this.addToto(players); | |
456 | this.players = players; | |
55043689 | 457 | this.commitScores(); //save players in memory |
1369a09d | 458 | }, |
ade10194 | 459 | }, |
7a00c409 | 460 | }); |