From: Benjamin Auder <benjamin.auder@somewhere> Date: Thu, 28 Dec 2017 13:49:00 +0000 (+0100) Subject: 'Toto' player handling, fix ranking, cosmetics X-Git-Url: https://git.auder.net/doc/html/assets/pieces/app_dev.php/common.css?a=commitdiff_plain;h=fd4a69e4ea369afb39c01f1207d79b0ab2d4cc8e;p=westcastle.git 'Toto' player handling, fix ranking, cosmetics --- diff --git a/README.md b/README.md new file mode 100644 index 0000000..fe69cc4 --- /dev/null +++ b/README.md @@ -0,0 +1,23 @@ +## Prérequis + +php (assez récent) + +## Ajustement du fichier de données + + 1. Renommer joueurs.csv.dist en joueurs.csv + 2. éditer joueurs.csv (ajout de joueurs, édition, suppression...). Format en lignes : prénom,nom[,score,pdt,présent] + +pdt = "points de table". score,pdt,présent : optionnels (défaut 0, 0, 1) + +## Lancement de l'aplication + + - [Linux] Double click sur "westcastle.sh", ou lancement depuis un terminal + - [Windows,MacOS] `php -S localhost:8000` puis naviguer vers index.html + +## Utilisation + + 1. Cliquer sur les joueurs absents dans l'onglet "joueurs" + 2. Aller dans la section "appariements" et cliquer sur le bouton en haut + 3. À la fin d'une ronde, cliquer sur chaque table pour indiquer les points. Pour lancer la ronde suivante, revenir en 1) + +Le classement est mis à jour dans la rubrique correspondante et dans joueurs.csv diff --git a/css/index.css b/css/index.css index 015c6f8..54022f6 100644 --- a/css/index.css +++ b/css/index.css @@ -69,6 +69,7 @@ table th { #players { overflow: auto; + margin-bottom: 15px; } #players p { @@ -116,6 +117,10 @@ table.list tr:not(.title):hover, table.ranking tr:not(.title):nth-child(even):ho /* ranking div */ +#ranking { + margin-bottom: 15px; +} + table.ranking { border-collapse: collapse; width: 500px; @@ -171,6 +176,10 @@ button.cancel:hover { background-image: linear-gradient(to bottom, #fc433c, #d93434); } +.toto { + color: darkgrey; +} + .scored { background-color: lightgreen; } diff --git a/js/index.js b/js/index.js index 944a51b..870be76 100644 --- a/js/index.js +++ b/js/index.js @@ -21,7 +21,7 @@ new Vue({ <div id="inactive"> <p>Absents</p> <table class="list"> - <tr v-for="p in sortedPlayers" v-if="!p.available" @click="toggleAvailability(p.index)"> + <tr v-for="p in sortedPlayers" v-if="!p.available && p.nom!=''" @click="toggleAvailability(p.index)"> <td>{{ p.prenom }}</td> <td>{{ p.nom }}</td> </tr> @@ -61,8 +61,8 @@ new Vue({ <th @click="sortMethod='score'" class="scoring" :class="{active: sortMethod=='score'}">Score</th> <th @click="sortMethod='pdt'" class="scoring" :class="{active: sortMethod=='pdt'}">PdT</th> </tr> - <tr v-for="(p,i) in sortedPlayers"> - <td>{{ i+1 }}</td> + <tr v-for="p in sortedPlayers" v-if="p.nom!=''"> + <td>{{ p.rank }}</td> <td>{{ p.prenom }} {{ p.nom }}</td> <td>{{ p.score }}</td> <td>{{ p.pdt }}</td> @@ -70,14 +70,24 @@ new Vue({ </table> </div> `, - computed: { + computed: { //TODO: first sort on score, then on Pdt (and reciprocally) --> function add fraction relative Pdt / score (compute min max first, take care of 0 case) sortedPlayers: function() { let sortFunc = this.sortMethod == "score" ? this.sortByScore : this.sortByPdt; - return this.players - .map( p => { return p; }) //to not alter original array + let res = this.players + .map( p => { return Object.assign({}, p); }) //to not alter original array .sort(sortFunc); + // Add rank information (taking care of ex-aequos) + let rank = 1; + for (let i=0; i<res.length; i++) + { + if (i==0 || sortFunc(res[i],res[i-1]) == 0) + res[i].rank = rank; + else //strictly lower scoring + res[i].rank = ++rank; + } + return res; }, }, methods: { @@ -109,13 +119,9 @@ new Vue({ <p>Table {{ index+1 }}</p> <table> <tr v-for="(i,j) in table"> - <td>{{ players[i].prenom }} {{ players[i].nom }}</td> + <td :class="{toto: players[i].prenom=='Toto'}">{{ players[i].prenom }} {{ players[i].nom }}</td> <td class="score"><span v-show="pdts[index].length > 0">{{ pdts[index][j] }}</span></td> </tr> - <tr v-if="table.length < 4"> - <td> </td> - <td> </td> - </tr> </table> </div> <div v-if="unpaired.length>0" class="pairing unpaired"> @@ -128,7 +134,9 @@ new Vue({ <div id="scoreInput" v-if="currentIndex >= 0"> <table> <tr v-for="(index,i) in tables[currentIndex]"> - <td>{{ players[tables[currentIndex][i]].prenom }} {{ players[tables[currentIndex][i]].nom }}</td> + <td :class="{toto: players[tables[currentIndex][i]].prenom=='Toto'}"> + {{ players[tables[currentIndex][i]].prenom }} {{ players[tables[currentIndex][i]].nom }} + </td> <td><input type="text" v-model="pdts[currentIndex][i]" value="0"/></td> </tr> </table> @@ -177,6 +185,11 @@ new Vue({ else this.unpaired = currentTable; } + // Ensure that all tables have 4 players + tables.forEach( t => { + if (t.length < 4) + t.push(0); //index of "Toto", ghost player + }); this.tables = tables; this.scores = tables.map( t => { return []; }); //empty scores this.pdts = tables.map( t => { return []; }); //empty pdts @@ -195,7 +208,7 @@ new Vue({ let sortedPdts = this.pdts[this.currentIndex] .map( (s,i) => { return {value:s, index:i}; }) .sort( (a,b) => { return parseInt(b.value) - parseInt(a.value); }); - let scores = [4, 2, 1, 0]; //TODO: biased for 3-players tables. TODO: ex-aequos ?! + let scores = [4, 2, 1, 0]; //TODO: ex-aequos ?! for (let i=0; i<this.tables[this.currentIndex].length; i++) { this.players[this.tables[this.currentIndex][sortedPdts[i].index]].score += scores[i]; @@ -215,6 +228,7 @@ new Vue({ xhr.open("POST", "scripts/rw_players.php"); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); let orderedPlayers = this.players + .slice(1) //discard "Toto" .map( p => { return Object.assign({}, p); }) //deep (enough) copy .sort( (a,b) => { return b.score - a.score; }); xhr.send("players="+encodeURIComponent(JSON.stringify(orderedPlayers))); @@ -234,6 +248,13 @@ new Vue({ p.pdt = !!p.pdt ? parseInt(p.pdt) : 0; p.available = !!p.available ? p.available : 1; //use integer for fputcsv PHP func }); + players.unshift({ //add ghost 4th player for 3-players tables + prenom: "Toto", + nom: "", + score: 0, + pdt: 0, + available: 0, + }); self.players = players; } };