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': { | |
9 | props: ['players'], | |
10 | template: ` | |
11 | <div id="players"> | |
12 | <div id="active"> | |
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"> | |
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> | |
30 | </div> | |
31 | `, | |
32 | computed: { | |
33 | sortedPlayers: function() { | |
34 | return this.players | |
35 | .map( (p,i) => { return Object.assign({}, p, {index: i}); }) | |
36 | .sort( (a,b) => { | |
37 | return a.nom.localeCompare(b.nom); | |
38 | }); | |
39 | }, | |
40 | }, | |
41 | methods: { | |
42 | toggleAvailability: function(i) { | |
43 | this.players[i].available = 1 - this.players[i].available; | |
44 | this.$forceUpdate(); //TODO (Vue.set... ?!) | |
45 | }, | |
46 | }, | |
47 | }, | |
48 | 'my-ranking': { | |
ade10194 | 49 | props: ['players','sortByScore','rankPeople'], |
7a00c409 BA |
50 | template: ` |
51 | <div id="ranking"> | |
52 | <table class="ranking"> | |
53 | <tr class="title"> | |
54 | <th>Rang</th> | |
55 | <th>Joueur</th> | |
ade10194 BA |
56 | <th>Points</th> |
57 | <th>Mini-pts</th> | |
7a00c409 | 58 | </tr> |
ade10194 | 59 | <tr v-for="p in sortedPlayers"> |
fd4a69e4 | 60 | <td>{{ p.rank }}</td> |
7a00c409 | 61 | <td>{{ p.prenom }} {{ p.nom }}</td> |
7a00c409 | 62 | <td>{{ p.pdt }}</td> |
1d2d7593 | 63 | <td>{{ p.session }}</td> |
7a00c409 BA |
64 | </tr> |
65 | </table> | |
66 | </div> | |
67 | `, | |
ade10194 | 68 | computed: { |
7a00c409 | 69 | sortedPlayers: function() { |
ade10194 | 70 | let res = this.rankPeople(); |
fd4a69e4 BA |
71 | // Add rank information (taking care of ex-aequos) |
72 | let rank = 1; | |
73 | for (let i=0; i<res.length; i++) | |
74 | { | |
ade10194 | 75 | if (i==0 || this.sortByScore(res[i],res[i-1]) == 0) |
fd4a69e4 BA |
76 | res[i].rank = rank; |
77 | else //strictly lower scoring | |
78 | res[i].rank = ++rank; | |
79 | } | |
80 | return res; | |
7a00c409 BA |
81 | }, |
82 | }, | |
7a00c409 BA |
83 | }, |
84 | 'my-pairings': { | |
ade10194 | 85 | props: ['players','sortByScore'], |
7a00c409 BA |
86 | data: function() { |
87 | return { | |
88 | unpaired: [], | |
89 | tables: [], //array of arrays of players indices | |
1d2d7593 BA |
90 | pdts: [], //"points de table" for each table |
91 | sessions: [], //"mini-points" for each table | |
7a00c409 BA |
92 | currentIndex: -1, //table index for scoring |
93 | }; | |
94 | }, | |
95 | template: ` | |
96 | <div id="pairings"> | |
97 | <div v-show="currentIndex < 0"> | |
98 | <button class="block btn" @click="shuffle()">Appariement</button> | |
1d2d7593 | 99 | <div class="pairing" v-for="(table,index) in tables" :class="{scored: pdts[index].length > 0}" |
7a00c409 BA |
100 | @click="showScoreForm(table,index)"> |
101 | <p>Table {{ index+1 }}</p> | |
102 | <table> | |
103 | <tr v-for="(i,j) in table"> | |
fd4a69e4 | 104 | <td :class="{toto: players[i].prenom=='Toto'}">{{ players[i].prenom }} {{ players[i].nom }}</td> |
1d2d7593 | 105 | <td class="score"><span v-show="sessions[index].length > 0">{{ sessions[index][j] }}</span></td> |
7a00c409 | 106 | </tr> |
7a00c409 BA |
107 | </table> |
108 | </div> | |
109 | <div v-if="unpaired.length>0" class="pairing unpaired"> | |
110 | <p>Exempts</p> | |
111 | <div v-for="i in unpaired"> | |
112 | {{ players[i].prenom }} {{ players[i].nom }} | |
113 | </div> | |
114 | </div> | |
115 | </div> | |
116 | <div id="scoreInput" v-if="currentIndex >= 0"> | |
117 | <table> | |
118 | <tr v-for="(index,i) in tables[currentIndex]"> | |
fd4a69e4 BA |
119 | <td :class="{toto: players[tables[currentIndex][i]].prenom=='Toto'}"> |
120 | {{ players[tables[currentIndex][i]].prenom }} {{ players[tables[currentIndex][i]].nom }} | |
121 | </td> | |
1d2d7593 | 122 | <td><input type="text" v-model="sessions[currentIndex][i]" value="0"/></td> |
7a00c409 BA |
123 | </tr> |
124 | </table> | |
125 | <div class="button-container"> | |
126 | <button class="btn" @click="setScore()">Enregistrer</button> | |
127 | <button class="btn cancel" @click="resetScore()">Annuler</button> | |
128 | </div> | |
129 | </div> | |
130 | </div> | |
131 | `, | |
132 | methods: { | |
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; |
7a00c409 | 176 | this.pdts = tables.map( t => { return []; }); //empty pdts |
1d2d7593 | 177 | this.sessions = tables.map( t => { return []; }); //empty sessions |
7a00c409 BA |
178 | }, |
179 | shuffle: function() { | |
180 | this.doPairings(); | |
181 | }, | |
182 | showScoreForm: function(table,index) { | |
1d2d7593 | 183 | if (this.pdts[index].length > 0) |
7a00c409 | 184 | return; //already scored |
7a00c409 | 185 | this.pdts[index] = _.times(table.length, _.constant(0)); |
1d2d7593 | 186 | this.sessions[index] = _.times(table.length, _.constant(0)); |
7a00c409 BA |
187 | this.currentIndex = index; |
188 | }, | |
189 | setScore: function() { | |
1d2d7593 | 190 | let sortedSessions = this.sessions[this.currentIndex] |
7a00c409 BA |
191 | .map( (s,i) => { return {value:s, index:i}; }) |
192 | .sort( (a,b) => { return parseInt(b.value) - parseInt(a.value); }); | |
1d2d7593 | 193 | let pdts = [4, 2, 1, 0]; //TODO: ex-aequos ?! |
7a00c409 BA |
194 | for (let i=0; i<this.tables[this.currentIndex].length; i++) |
195 | { | |
1d2d7593 BA |
196 | this.players[this.tables[this.currentIndex][sortedSessions[i].index]].pdt += pdts[i]; |
197 | this.players[this.tables[this.currentIndex][i]].session += parseInt(this.sessions[this.currentIndex][i]); | |
7a00c409 BA |
198 | } |
199 | this.currentIndex = -1; | |
200 | this.writeScoreToDb(); | |
201 | }, | |
202 | resetScore: function() { | |
7a00c409 | 203 | this.pdts[this.currentIndex] = []; |
1d2d7593 | 204 | this.sessions[this.currentIndex] = []; |
7a00c409 BA |
205 | this.currentIndex = -1; |
206 | }, | |
207 | writeScoreToDb: function() | |
208 | { | |
209 | let xhr = new XMLHttpRequest(); | |
210 | xhr.open("POST", "scripts/rw_players.php"); | |
211 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); | |
212 | let orderedPlayers = this.players | |
ade10194 | 213 | .slice(1) //discard Toto |
7a00c409 | 214 | .map( p => { return Object.assign({}, p); }) //deep (enough) copy |
ade10194 | 215 | .sort(this.sortByScore); |
7a00c409 BA |
216 | xhr.send("players="+encodeURIComponent(JSON.stringify(orderedPlayers))); |
217 | }, | |
218 | }, | |
219 | }, | |
220 | }, | |
221 | created: function() { | |
222 | let xhr = new XMLHttpRequest(); | |
223 | let self = this; | |
224 | xhr.onreadystatechange = function() { | |
225 | if (this.readyState == 4 && this.status == 200) | |
226 | { | |
227 | let players = JSON.parse(xhr.responseText); | |
228 | players.forEach( p => { | |
7a00c409 | 229 | p.pdt = !!p.pdt ? parseInt(p.pdt) : 0; |
1d2d7593 | 230 | p.session = !!p.session ? parseInt(p.session) : 0; |
7a00c409 BA |
231 | p.available = !!p.available ? p.available : 1; //use integer for fputcsv PHP func |
232 | }); | |
fd4a69e4 BA |
233 | players.unshift({ //add ghost 4th player for 3-players tables |
234 | prenom: "Toto", | |
235 | nom: "", | |
fd4a69e4 | 236 | pdt: 0, |
1d2d7593 | 237 | session: 0, |
fd4a69e4 BA |
238 | available: 0, |
239 | }); | |
7a00c409 BA |
240 | self.players = players; |
241 | } | |
242 | }; | |
243 | xhr.open("GET", "scripts/rw_players.php", true); | |
244 | xhr.send(null); | |
245 | }, | |
ade10194 BA |
246 | methods: { |
247 | rankPeople: function() { | |
248 | return this.players | |
249 | .slice(1) //discard Toto | |
250 | .map( p => { return Object.assign({}, p); }) //to not alter original array | |
251 | .sort(this.sortByScore); | |
252 | }, | |
253 | sortByScore: function(a,b) { | |
254 | return b.pdt - a.pdt + (Math.atan(b.session - a.session) / (Math.PI/2)) / 2; | |
255 | }, | |
256 | }, | |
7a00c409 | 257 | }); |