| 1 | new Vue({ |
| 2 | el: "#mahjong", |
| 3 | data: { |
| 4 | players: [], //array of objects, filled later |
| 5 | display: "players", |
| 6 | }, |
| 7 | components: { |
| 8 | 'my-players': { |
| 9 | props: ['players','initPlayers'], |
| 10 | template: ` |
| 11 | <div id="players"> |
| 12 | <div class="left"> |
| 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> |
| 21 | <div id="inactive" class="right"> |
| 22 | <p>Absents</p> |
| 23 | <table class="list"> |
| 24 | <tr v-for="p in sortedPlayers" v-if="!p.available && p.nom!=''" @click="toggleAvailability(p.index)"> |
| 25 | <td>{{ p.prenom }}</td> |
| 26 | <td>{{ p.nom }}</td> |
| 27 | </tr> |
| 28 | </table> |
| 29 | </div> |
| 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> |
| 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; |
| 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); |
| 61 | }, |
| 62 | }, |
| 63 | }, |
| 64 | 'my-pairings': { |
| 65 | props: ['players','commitScores'], |
| 66 | data: function() { |
| 67 | return { |
| 68 | unpaired: [], |
| 69 | tables: [], //array of arrays of players indices |
| 70 | sessions: [], //"mini-points" for each table |
| 71 | currentIndex: -1, //table index for scoring |
| 72 | scored: [], //boolean for each table index |
| 73 | }; |
| 74 | }, |
| 75 | template: ` |
| 76 | <div id="pairings"> |
| 77 | <div v-show="currentIndex < 0"> |
| 78 | <div class="button-container-horizontal"> |
| 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"> |
| 80 | Valider |
| 81 | </button> |
| 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"> |
| 83 | Nouvelle ronde |
| 84 | </button> |
| 85 | </div> |
| 86 | <div class="pairing" v-for="(table,index) in tables" :class="{scored: scored[index]}" |
| 87 | @click="showScoreForm(table,index)"> |
| 88 | <p>Table {{ index+1 }}</p> |
| 89 | <table> |
| 90 | <tr v-for="(i,j) in table"> |
| 91 | <td :class="{toto: players[i].prenom=='Toto'}">{{ players[i].prenom }} {{ players[i].nom }}</td> |
| 92 | <td class="score"><span v-show="sessions[index].length > 0">{{ sessions[index][j] }}</span></td> |
| 93 | </tr> |
| 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]"> |
| 106 | <td :class="{toto: players[tables[currentIndex][i]].prenom=='Toto'}"> |
| 107 | {{ players[tables[currentIndex][i]].prenom }} {{ players[tables[currentIndex][i]].nom }} |
| 108 | </td> |
| 109 | <td><input type="text" v-model="sessions[currentIndex][i]" :disabled="scored[currentIndex]"/></td> |
| 110 | </tr> |
| 111 | </table> |
| 112 | <div class="button-container-horizontal"> |
| 113 | <button :class="{hide:scored[currentIndex]}" class="btn validate" @click="setScore()" title="Enregistre le score dans la base"> |
| 114 | Enregistrer |
| 115 | </button> |
| 116 | <button :class="{hide:!scored[currentIndex]}" class="btn cancel" @click="resetScore()" title="Annule le score précédemment enregistré"> |
| 117 | Annuler |
| 118 | </button> |
| 119 | <button class="btn" @click="closeScoreForm()">Fermer</button> |
| 120 | </div> |
| 121 | </div> |
| 122 | </div> |
| 123 | `, |
| 124 | methods: { |
| 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 |
| 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 | }, |
| 133 | doPairings: function() { |
| 134 | // Simple case first: 4 by 4 |
| 135 | let tables = []; |
| 136 | let currentTable = []; |
| 137 | let ordering = _.shuffle(_.range(this.players.length)); |
| 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 | } |
| 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 | }); |
| 175 | this.tables = tables; |
| 176 | this.sessions = tables.map( t => { return []; }); //empty sessions |
| 177 | this.scored = tables.map( t => { return false; }); //nothing scored yet |
| 178 | this.currentIndex = -1; //required if reset while scoring |
| 179 | }, |
| 180 | showScoreForm: function(table,index) { |
| 181 | if (this.sessions[index].length == 0) |
| 182 | this.sessions[index] = _.times(table.length, _.constant(0)); |
| 183 | this.currentIndex = index; |
| 184 | }, |
| 185 | closeScoreForm: function() { |
| 186 | if (!this.scored[this.currentIndex]) |
| 187 | this.sessions[this.currentIndex] = []; |
| 188 | this.currentIndex = -1; |
| 189 | }, |
| 190 | getPdts: function() { |
| 191 | let sortedSessions = this.sessions[this.currentIndex] |
| 192 | .map( (s,i) => { return {value:parseInt(s), index:i}; }) |
| 193 | .sort( (a,b) => { return b.value - a.value; }); |
| 194 | const ref_pdts = [4, 2, 1, 0]; |
| 195 | // NOTE: take care of ex-aequos (spread points subtotal) |
| 196 | let curSum = 0, curCount = 0, start = 0; |
| 197 | let sortedPdts = []; |
| 198 | for (let i=0; i<4; i++) |
| 199 | { |
| 200 | curSum += ref_pdts[i]; |
| 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++) |
| 206 | sortedPdts.push(pdt); |
| 207 | curSum = 0; |
| 208 | curCount = 0; |
| 209 | start = i+1; |
| 210 | } |
| 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]; |
| 223 | this.players[this.tables[this.currentIndex][i]].session += parseInt(this.sessions[this.currentIndex][i]); |
| 224 | } |
| 225 | Vue.set(this.scored, this.currentIndex, true); |
| 226 | this.currentIndex = -1; |
| 227 | }, |
| 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); |
| 236 | }, |
| 237 | }, |
| 238 | }, |
| 239 | 'my-timer': { |
| 240 | data: function() { |
| 241 | return { |
| 242 | time: 0, //remaining time, in seconds |
| 243 | running: false, |
| 244 | initialTime: 90, //1h30, in minutes |
| 245 | setter: false, |
| 246 | setterTime: 0, //to input new initial time |
| 247 | }; |
| 248 | }, |
| 249 | template: ` |
| 250 | <div id="timer" :style="{lineHeight: divHeight + 'px', fontSize: 0.66*divHeight + 'px', width: divWidth + 'px', height: divHeight + 'px'}"> |
| 251 | <div v-show="!setter" @click.left="pauseResume()" @click.right.prevent="reset()" :class="{timeout:time==0}"> |
| 252 | {{ formattedTime }} |
| 253 | </div> |
| 254 | <input type="text" autofocus id="setter" @keyup.enter="setTime()" @keyup.esc="setter=false" v-show="setter" v-model="setterTime"></input> |
| 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 | }, |
| 264 | divHeight: function() { |
| 265 | return screen.height; |
| 266 | }, |
| 267 | divWidth: function() { |
| 268 | return screen.width; |
| 269 | }, |
| 270 | }, |
| 271 | methods: { |
| 272 | setTime: function() { |
| 273 | this.initialTime = this.setterTime; |
| 274 | this.setter = false; |
| 275 | this.reset(); |
| 276 | }, |
| 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; |
| 289 | this.time = this.initialTime * 60; |
| 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 | } |
| 300 | if (this.time == this.initialTime) |
| 301 | new Audio("sounds/gong.mp3").play(); //gong at the beginning |
| 302 | setTimeout(() => { |
| 303 | if (this.running) |
| 304 | this.time--; |
| 305 | this.start(); |
| 306 | }, 1000); |
| 307 | }, |
| 308 | }, |
| 309 | created: function() { |
| 310 | this.setterTime = this.initialTime; |
| 311 | this.reset(); |
| 312 | }, |
| 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 | }, |
| 331 | }, |
| 332 | 'my-ranking': { |
| 333 | props: ['players','sortByScore','commitScores'], |
| 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"> |
| 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> |
| 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 |
| 378 | .sort(this.sortByScore); |
| 379 | }, |
| 380 | resetPlayers: function() { |
| 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"; |
| 397 | this.players |
| 398 | .slice(1) //discard Toto |
| 399 | .sort(this.sortByScore) |
| 400 | .forEach( p => { |
| 401 | content += p.prenom + "," + p.nom + "," + p.pdt + "," + p.session + "\n"; |
| 402 | }); |
| 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(); |
| 408 | }, |
| 409 | }, |
| 410 | }, |
| 411 | }, |
| 412 | created: function() { |
| 413 | let players = JSON.parse(localStorage.getItem("players")); |
| 414 | if (players !== null) |
| 415 | { |
| 416 | this.addToto(players); |
| 417 | this.players = players; |
| 418 | } |
| 419 | }, |
| 420 | methods: { |
| 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 | }, |
| 430 | // Used both in ranking and pairings: |
| 431 | sortByScore: function(a,b) { |
| 432 | return b.pdt - a.pdt + (Math.atan(b.session - a.session) / (Math.PI/2)) / 2; |
| 433 | }, |
| 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(","); |
| 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; |
| 454 | }); |
| 455 | this.addToto(players); |
| 456 | this.players = players; |
| 457 | this.commitScores(); //save players in memory |
| 458 | }, |
| 459 | }, |
| 460 | }); |