[westcastle.git] / js / index.js

new Vue({
	el: "#mahjong",
	data: {
		players: [], //array of objects, filled later
		display: "players",
	},
	components: {
		'my-players': {
			props: ['players'],
			template: `
				<div id="players">
					<div class="left">
						<p>Présents</p>
						<table class="list">
							<tr v-for="p in sortedPlayers" v-if="p.available" @click="toggleAvailability(p.index)">
								<td>{{ p.prenom }}</td>
								<td>{{ p.nom }}</td>
							</tr>
						</table>
					</div>
					<div id="inactive" class="right">
						<p>Absents</p>
						<table class="list">
							<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>
						</table>
					</div>
				</div>
			`,
			computed: {
				sortedPlayers: function() {
					return this.players
						.map( (p,i) => { return Object.assign({}, p, {index: i}); })
						.sort( (a,b) => {
							return a.nom.localeCompare(b.nom);
						});
				},
			},
			methods: {
				toggleAvailability: function(i) {
					this.players[i].available = 1 - this.players[i].available;
					this.$forceUpdate(); //TODO (Vue.set... ?!)
				},
			},
		},
		'my-ranking': {
			props: ['players','sortByScore','writeScoreToDb'],
			template: `
				<div id="ranking">
					<table class="ranking">
						<tr class="title">
							<th>Rang</th>
							<th>Joueur</th>
							<th>Points</th>
							<th>Mini-pts</th>
						</tr>
						<tr v-for="p in sortedPlayers">
							<td>{{ p.rank }}</td>
							<td>{{ p.prenom }} {{ p.nom }}</td>
							<td>{{ p.pdt }}</td>
							<td>{{ p.session }}</td>
						</tr>
					</table>
					<div class="button-container-vertical" style="width:200px">
						<button class="btn cancel" @click="resetPlayers()">Réinitialiser</button>
						<button id="restoreBtn" class="btn" @click="restoreLast()">Restaurer</button>
					</div>
				</div>
			`,
			computed: {
				sortedPlayers: function() {
					let res = this.rankPeople();
					// Add rank information (taking care of ex-aequos)
					let rank = 1;
					for (let i=0; i<res.length; i++)
					{
						if (i==0 || this.sortByScore(res[i],res[i-1]) == 0)
							res[i].rank = rank;
						else //strictly lower scoring
							res[i].rank = ++rank;
					}
					return res;
				},
			},
			methods: {
				rankPeople: function() {
					return this.players
						.slice(1) //discard Toto
						.map( p => { return Object.assign({}, p); }) //to not alter original array
						.sort(this.sortByScore);
				},
				resetPlayers: function() {
					this.players
						.slice(1) //discard Toto
						.forEach( p => {
							p.pdt = 0;
							p.session = 0;
							p.available = 1;
						});
					this.writeScoreToDb();
					document.getElementById("runPairing").click(); //TODO: hack...
				},
				restoreLast: function() {
					let xhr = new XMLHttpRequest();
					let self = this;
					xhr.onreadystatechange = function() {
						if (this.readyState == 4 && this.status == 200)
						{
							let players = JSON.parse(xhr.responseText);
							if (players.length > 0)
							{
								players.unshift({ //add ghost 4th player for 3-players tables
									prenom: "Toto",
									nom: "",
									pdt: 0,
									session: 0,
									available: 0,
								});
								self.players = players;
							}
						}
					};
					xhr.open("GET", "scripts/rw_players.php?restore=1", true);
					xhr.send(null);
				},
			},
		},
		'my-pairings': {
			props: ['players','writeScoreToDb'],
			data: function() {
				return {
					unpaired: [],
					tables: [], //array of arrays of players indices
					sessions: [], //"mini-points" for each table
					currentIndex: -1, //table index for scoring
					scored: [], //boolean for each table index
				};
			},
			template: `
				<div id="pairings">
					<div v-show="currentIndex < 0">
						<button id="runPairing" class="block btn" @click="doPairings()">Nouvelle ronde</button>
						<div class="pairing" v-for="(table,index) in tables" :class="{scored: scored[index]}"
								@click="showScoreForm(table,index)">
							<p>Table {{ index+1 }}</p>
							<table>
								<tr v-for="(i,j) in table">
									<td :class="{toto: players[i].prenom=='Toto'}">{{ players[i].prenom }} {{ players[i].nom }}</td>
									<td class="score"><span v-show="sessions[index].length > 0">{{ sessions[index][j] }}</span></td>
								</tr>
							</table>
						</div>
						<div v-if="unpaired.length>0" class="pairing unpaired">
							<p>Exempts</p>
							<div v-for="i in unpaired">
								{{ players[i].prenom }} {{ players[i].nom }}
							</div>
						</div>
					</div>
					<div id="scoreInput" v-if="currentIndex >= 0">
						<table>
							<tr v-for="(index,i) in tables[currentIndex]">
								<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="sessions[currentIndex][i]" value="0"/></td>
							</tr>
						</table>
						<div class="button-container-horizontal">
							<button class="btn validate" @click="setScore()">Enregistrer</button>
							<button class="btn" @click="currentIndex = -1">Fermer</button>
						</div>
						<div v-if="scored[currentIndex]" class="warning">
							Attention: un score a déjà été enregistré.
							Les points indiqués ici s'ajouteront : il faut d'abord
							<span class="link" @click="document.getElementById('restoreBtn').click()">restaurer l'état précédent.</span>
							Si c'est déjà fait, ignorer ce message :)
						</div>
					</div>
				</div>
			`,
			methods: {
				doPairings: function() {
					// Simple case first: 4 by 4
					let tables = [];
					let currentTable = [];
					let ordering = _.shuffle(_.range(this.players.length));
					for (let i=0; i<ordering.length; i++)
					{
						if ( ! this.players[ordering[i]].available )
							continue;
						if (currentTable.length >= 4)
						{
							tables.push(currentTable);
							currentTable = [];
						}
						currentTable.push(ordering[i]);
					}
					// Analyse remainder
					this.unpaired = [];
					if (currentTable.length != 0)
					{
						if (currentTable.length < 3)
						{
							let missingPlayers = 3 - currentTable.length;
							// Pick players from 'missingPlayers' random different tables, if possible
							if (tables.length >= missingPlayers)
							{
								let tblNums = _.sample(_.range(tables.length), missingPlayers);
								tblNums.forEach( num => {
									currentTable.push(tables[num].pop());
								});
							}
						}
						if (currentTable.length >= 3)
							tables.push(currentTable);
						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.sessions = tables.map( t => { return []; }); //empty sessions
					this.scored = tables.map( t => { return false; }); //nothing scored yet
					this.currentIndex = -1; //required if reset while scoring
				},
				showScoreForm: function(table,index) {
					if (this.sessions[index].length == 0)
						this.sessions[index] = _.times(table.length, _.constant(0));
					this.currentIndex = index;
				},
				setScore: function() {
					let sortedSessions = this.sessions[this.currentIndex]
						.map( (s,i) => { return {value:s, index:i}; })
						.sort( (a,b) => { return parseInt(b.value) - parseInt(a.value); });
					let pdts = [4, 2, 1, 0];
					// NOTE: take care of ex-aequos (spread points subtotal)
					let curSum = 0, curCount = 0, start = 0;
					for (let i=0; i<4; i++)
					{
						// Update pdts:
						curSum += pdts[i];
						curCount++;
						if (i==3 || sortedSessions[i].value > sortedSessions[i+1].value)
						{
							let pdt = curSum / curCount;
							for (let j=start; j<=i; j++)
								this.players[this.tables[this.currentIndex][sortedSessions[j].index]].pdt += pdt;
							curSum = 0;
							curCount = 0;
							start = i+1;
						}
						// Update sessions:
						this.players[this.tables[this.currentIndex][i]].session += parseInt(this.sessions[this.currentIndex][i]);
					}
					this.scored[this.currentIndex] = true;
					this.currentIndex = -1;
					this.writeScoreToDb();
				},
			},
		},
	},
	created: function() {
		let xhr = new XMLHttpRequest();
		let self = this;
		xhr.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200)
			{
				let players = JSON.parse(xhr.responseText);
				players.forEach( p => {
					p.pdt = !!p.pdt ? parseFloat(p.pdt) : 0;
					p.session = !!p.session ? parseInt(p.session) : 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: "",
					pdt: 0,
					session: 0,
					available: 0,
				});
				self.players = players;
			}
		};
		xhr.open("GET", "scripts/rw_players.php", true);
		xhr.send(null);
	},
	methods: {
		// Used both in ranking and pairings:
		sortByScore: function(a,b) {
			return b.pdt - a.pdt + (Math.atan(b.session - a.session) / (Math.PI/2)) / 2;
		},
		writeScoreToDb: function() {
			let xhr = new XMLHttpRequest();
			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(this.sortByScore);
			xhr.send("players="+encodeURIComponent(JSON.stringify(orderedPlayers)));
		},
	},
});
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">
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>
7a00c409 BA	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': {
1369a09d	49	props: ['players','sortByScore','writeScoreToDb'],
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>
ade10194 BA	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>
7a00c409 BA	65	</table>
1369a09d BA	66	<div class="button-container-vertical" style="width:200px">
	67	<button class="btn cancel" @click="resetPlayers()">Réinitialiser</button>
	68	<button id="restoreBtn" class="btn" @click="restoreLast()">Restaurer</button>
	69	</div>
7a00c409 BA	70	</div>
7a00c409 BA	71	`,
ade10194	72	computed: {
7a00c409	73	sortedPlayers: function() {
ade10194	74	let res = this.rankPeople();
fd4a69e4 BA	75	// Add rank information (taking care of ex-aequos)
	76	let rank = 1;
	77	for (let i=0; i<res.length; i++)
	78	{
ade10194	79	if (i==0 \|\| this.sortByScore(res[i],res[i-1]) == 0)
fd4a69e4 BA	80	res[i].rank = rank;
	81	else //strictly lower scoring
	82	res[i].rank = ++rank;
	83	}
	84	return res;
7a00c409 BA	85	},
7a00c409 BA	86	},
1369a09d BA	87	methods: {
	88	rankPeople: function() {
	89	return this.players
	90	.slice(1) //discard Toto
	91	.map( p => { return Object.assign({}, p); }) //to not alter original array
	92	.sort(this.sortByScore);
	93	},
	94	resetPlayers: function() {
	95	this.players
	96	.slice(1) //discard Toto
	97	.forEach( p => {
	98	p.pdt = 0;
	99	p.session = 0;
	100	p.available = 1;
	101	});
	102	this.writeScoreToDb();
	103	document.getElementById("runPairing").click(); //TODO: hack...
	104	},
	105	restoreLast: function() {
	106	let xhr = new XMLHttpRequest();
	107	let self = this;
	108	xhr.onreadystatechange = function() {
	109	if (this.readyState == 4 && this.status == 200)
	110	{
	111	let players = JSON.parse(xhr.responseText);
	112	if (players.length > 0)
	113	{
	114	players.unshift({ //add ghost 4th player for 3-players tables
	115	prenom: "Toto",
	116	nom: "",
	117	pdt: 0,
	118	session: 0,
	119	available: 0,
	120	});
	121	self.players = players;
	122	}
	123	}
	124	};
	125	xhr.open("GET", "scripts/rw_players.php?restore=1", true);
	126	xhr.send(null);
	127	},
	128	},
7a00c409 BA	129	},
7a00c409 BA	130	'my-pairings': {
1369a09d	131	props: ['players','writeScoreToDb'],
7a00c409 BA	132	data: function() {
	133	return {
	134	unpaired: [],
	135	tables: [], //array of arrays of players indices
1d2d7593	136	sessions: [], //"mini-points" for each table
7a00c409	137	currentIndex: -1, //table index for scoring
1369a09d	138	scored: [], //boolean for each table index
7a00c409 BA	139	};
	140	},
	141	template: `
	142	<div id="pairings">
	143	<div v-show="currentIndex < 0">
1369a09d BA	144	<button id="runPairing" class="block btn" @click="doPairings()">Nouvelle ronde</button>
1369a09d BA	145	<div class="pairing" v-for="(table,index) in tables" :class="{scored: scored[index]}"
7a00c409 BA	146	@click="showScoreForm(table,index)">
	147	<p>Table {{ index+1 }}</p>
	148	<table>
	149	<tr v-for="(i,j) in table">
fd4a69e4	150	<td :class="{toto: players[i].prenom=='Toto'}">{{ players[i].prenom }} {{ players[i].nom }}</td>
1d2d7593	151	<td class="score"><span v-show="sessions[index].length > 0">{{ sessions[index][j] }}</span></td>
7a00c409	152	</tr>
7a00c409 BA	153	</table>
	154	</div>
	155	<div v-if="unpaired.length>0" class="pairing unpaired">
	156	<p>Exempts</p>
	157	<div v-for="i in unpaired">
	158	{{ players[i].prenom }} {{ players[i].nom }}
	159	</div>
	160	</div>
	161	</div>
	162	<div id="scoreInput" v-if="currentIndex >= 0">
	163	<table>
	164	<tr v-for="(index,i) in tables[currentIndex]">
fd4a69e4 BA	165	<td :class="{toto: players[tables[currentIndex][i]].prenom=='Toto'}">
	166	{{ players[tables[currentIndex][i]].prenom }} {{ players[tables[currentIndex][i]].nom }}
	167	</td>
1d2d7593	168	<td><input type="text" v-model="sessions[currentIndex][i]" value="0"/></td>
7a00c409 BA	169	</tr>
7a00c409 BA	170	</table>
1369a09d BA	171	<div class="button-container-horizontal">
	172	<button class="btn validate" @click="setScore()">Enregistrer</button>
	173	<button class="btn" @click="currentIndex = -1">Fermer</button>
	174	</div>
	175	<div v-if="scored[currentIndex]" class="warning">
	176	Attention: un score a déjà été enregistré.
	177	Les points indiqués ici s'ajouteront : il faut d'abord
	178	<span class="link" @click="document.getElementById('restoreBtn').click()">restaurer l'état précédent.</span>
	179	Si c'est déjà fait, ignorer ce message :)
7a00c409 BA	180	</div>
	181	</div>
	182	</div>
	183	`,
	184	methods: {
	185	doPairings: function() {
	186	// Simple case first: 4 by 4
	187	let tables = [];
	188	let currentTable = [];
ade10194	189	let ordering = _.shuffle(_.range(this.players.length));
7a00c409 BA	190	for (let i=0; i<ordering.length; i++)
	191	{
	192	if ( ! this.players[ordering[i]].available )
	193	continue;
	194	if (currentTable.length >= 4)
	195	{
	196	tables.push(currentTable);
	197	currentTable = [];
	198	}
	199	currentTable.push(ordering[i]);
	200	}
	201	// Analyse remainder
	202	this.unpaired = [];
	203	if (currentTable.length != 0)
	204	{
	205	if (currentTable.length < 3)
	206	{
	207	let missingPlayers = 3 - currentTable.length;
	208	// Pick players from 'missingPlayers' random different tables, if possible
	209	if (tables.length >= missingPlayers)
	210	{
	211	let tblNums = _.sample(_.range(tables.length), missingPlayers);
	212	tblNums.forEach( num => {
	213	currentTable.push(tables[num].pop());
	214	});
	215	}
	216	}
	217	if (currentTable.length >= 3)
	218	tables.push(currentTable);
	219	else
	220	this.unpaired = currentTable;
	221	}
fd4a69e4 BA	222	// Ensure that all tables have 4 players
	223	tables.forEach( t => {
	224	if (t.length < 4)
	225	t.push(0); //index of "Toto", ghost player
	226	});
7a00c409	227	this.tables = tables;
1d2d7593	228	this.sessions = tables.map( t => { return []; }); //empty sessions
1369a09d BA	229	this.scored = tables.map( t => { return false; }); //nothing scored yet
1369a09d BA	230	this.currentIndex = -1; //required if reset while scoring
7a00c409 BA	231	},
7a00c409 BA	232	showScoreForm: function(table,index) {
1369a09d BA	233	if (this.sessions[index].length == 0)
1369a09d BA	234	this.sessions[index] = _.times(table.length, _.constant(0));
7a00c409 BA	235	this.currentIndex = index;
	236	},
	237	setScore: function() {
1d2d7593	238	let sortedSessions = this.sessions[this.currentIndex]
7a00c409 BA	239	.map( (s,i) => { return {value:s, index:i}; })
7a00c409 BA	240	.sort( (a,b) => { return parseInt(b.value) - parseInt(a.value); });
1369a09d BA	241	let pdts = [4, 2, 1, 0];
	242	// NOTE: take care of ex-aequos (spread points subtotal)
	243	let curSum = 0, curCount = 0, start = 0;
	244	for (let i=0; i<4; i++)
7a00c409	245	{
1369a09d BA	246	// Update pdts:
	247	curSum += pdts[i];
	248	curCount++;
	249	if (i==3 \|\| sortedSessions[i].value > sortedSessions[i+1].value)
	250	{
	251	let pdt = curSum / curCount;
	252	for (let j=start; j<=i; j++)
	253	this.players[this.tables[this.currentIndex][sortedSessions[j].index]].pdt += pdt;
	254	curSum = 0;
	255	curCount = 0;
	256	start = i+1;
	257	}
	258	// Update sessions:
1d2d7593	259	this.players[this.tables[this.currentIndex][i]].session += parseInt(this.sessions[this.currentIndex][i]);
7a00c409	260	}
1369a09d	261	this.scored[this.currentIndex] = true;
7a00c409 BA	262	this.currentIndex = -1;
	263	this.writeScoreToDb();
	264	},
7a00c409 BA	265	},
	266	},
	267	},
	268	created: function() {
	269	let xhr = new XMLHttpRequest();
	270	let self = this;
	271	xhr.onreadystatechange = function() {
	272	if (this.readyState == 4 && this.status == 200)
	273	{
	274	let players = JSON.parse(xhr.responseText);
	275	players.forEach( p => {
1369a09d	276	p.pdt = !!p.pdt ? parseFloat(p.pdt) : 0;
1d2d7593	277	p.session = !!p.session ? parseInt(p.session) : 0;
7a00c409 BA	278	p.available = !!p.available ? p.available : 1; //use integer for fputcsv PHP func
7a00c409 BA	279	});
fd4a69e4 BA	280	players.unshift({ //add ghost 4th player for 3-players tables
	281	prenom: "Toto",
	282	nom: "",
fd4a69e4	283	pdt: 0,
1d2d7593	284	session: 0,
fd4a69e4 BA	285	available: 0,
fd4a69e4 BA	286	});
7a00c409 BA	287	self.players = players;
	288	}
	289	};
	290	xhr.open("GET", "scripts/rw_players.php", true);
	291	xhr.send(null);
	292	},
ade10194	293	methods: {
1369a09d	294	// Used both in ranking and pairings:
ade10194 BA	295	sortByScore: function(a,b) {
	296	return b.pdt - a.pdt + (Math.atan(b.session - a.session) / (Math.PI/2)) / 2;
	297	},
1369a09d BA	298	writeScoreToDb: function() {
	299	let xhr = new XMLHttpRequest();
	300	xhr.open("POST", "scripts/rw_players.php");
	301	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	302	let orderedPlayers = this.players
	303	.slice(1) //discard Toto
	304	.map( p => { return Object.assign({}, p); }) //deep (enough) copy
	305	.sort(this.sortByScore);
	306	xhr.send("players="+encodeURIComponent(JSON.stringify(orderedPlayers)));
	307	},
ade10194	308	},
7a00c409	309	});