[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 id="active">
						<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">
						<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','rankPeople'],
			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>
			`,
			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;
				},
			},
		},
		'my-pairings': {
			props: ['players','sortByScore'],
			data: function() {
				return {
					unpaired: [],
					tables: [], //array of arrays of players indices
					pdts: [], //"points de table" for each table
					sessions: [], //"mini-points" for each table
					currentIndex: -1, //table index for scoring
				};
			},
			template: `
				<div id="pairings">
					<div v-show="currentIndex < 0">
						<button class="block btn" @click="shuffle()">Appariement</button>
						<div class="pairing" v-for="(table,index) in tables" :class="{scored: pdts[index].length > 0}"
								@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">
							<button class="btn" @click="setScore()">Enregistrer</button>
							<button class="btn cancel" @click="resetScore()">Annuler</button>
						</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.pdts = tables.map( t => { return []; }); //empty pdts
					this.sessions = tables.map( t => { return []; }); //empty sessions
				},
				shuffle: function() {
					this.doPairings();
				},
				showScoreForm: function(table,index) {
					if (this.pdts[index].length > 0)
						return; //already scored
					this.pdts[index] = _.times(table.length, _.constant(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]; //TODO: ex-aequos ?!
					for (let i=0; i<this.tables[this.currentIndex].length; i++)
					{
						this.players[this.tables[this.currentIndex][sortedSessions[i].index]].pdt += pdts[i];
						this.players[this.tables[this.currentIndex][i]].session += parseInt(this.sessions[this.currentIndex][i]);
					}
					this.currentIndex = -1;
					this.writeScoreToDb();
				},
				resetScore: function() {
					this.pdts[this.currentIndex] = [];
					this.sessions[this.currentIndex] = [];
					this.currentIndex = -1;
				},
				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)));
				},
			},
		},
	},
	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 ? parseInt(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: {
		rankPeople: function() {
			return this.players
				.slice(1) //discard Toto
				.map( p => { return Object.assign({}, p); }) //to not alter original array
				.sort(this.sortByScore);
		},
		sortByScore: function(a,b) {
			return b.pdt - a.pdt + (Math.atan(b.session - a.session) / (Math.PI/2)) / 2;
		},
	},
});
Commit	Line	Data
	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">
	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>
	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': {
	49	props: ['players','sortByScore','rankPeople'],
	50	template: `
	51	<div id="ranking">
	52	<table class="ranking">
	53	<tr class="title">
	54	<th>Rang</th>
	55	<th>Joueur</th>
	56	<th>Points</th>
	57	<th>Mini-pts</th>
	58	</tr>
	59	<tr v-for="p in sortedPlayers">
	60	<td>{{ p.rank }}</td>
	61	<td>{{ p.prenom }} {{ p.nom }}</td>
	62	<td>{{ p.pdt }}</td>
	63	<td>{{ p.session }}</td>
	64	</tr>
	65	</table>
	66	</div>
	67	`,
	68	computed: {
	69	sortedPlayers: function() {
	70	let res = this.rankPeople();
	71	// Add rank information (taking care of ex-aequos)
	72	let rank = 1;
	73	for (let i=0; i<res.length; i++)
	74	{
	75	if (i==0 \|\| this.sortByScore(res[i],res[i-1]) == 0)
	76	res[i].rank = rank;
	77	else //strictly lower scoring
	78	res[i].rank = ++rank;
	79	}
	80	return res;
	81	},
	82	},
	83	},
	84	'my-pairings': {
	85	props: ['players','sortByScore'],
	86	data: function() {
	87	return {
	88	unpaired: [],
	89	tables: [], //array of arrays of players indices
	90	pdts: [], //"points de table" for each table
	91	sessions: [], //"mini-points" for each table
	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>
	99	<div class="pairing" v-for="(table,index) in tables" :class="{scored: pdts[index].length > 0}"
	100	@click="showScoreForm(table,index)">
	101	<p>Table {{ index+1 }}</p>
	102	<table>
	103	<tr v-for="(i,j) in table">
	104	<td :class="{toto: players[i].prenom=='Toto'}">{{ players[i].prenom }} {{ players[i].nom }}</td>
	105	<td class="score"><span v-show="sessions[index].length > 0">{{ sessions[index][j] }}</span></td>
	106	</tr>
	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]">
	119	<td :class="{toto: players[tables[currentIndex][i]].prenom=='Toto'}">
	120	{{ players[tables[currentIndex][i]].prenom }} {{ players[tables[currentIndex][i]].nom }}
	121	</td>
	122	<td><input type="text" v-model="sessions[currentIndex][i]" value="0"/></td>
	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 = [];
	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.pdts = tables.map( t => { return []; }); //empty pdts
	177	this.sessions = tables.map( t => { return []; }); //empty sessions
	178	},
	179	shuffle: function() {
	180	this.doPairings();
	181	},
	182	showScoreForm: function(table,index) {
	183	if (this.pdts[index].length > 0)
	184	return; //already scored
	185	this.pdts[index] = _.times(table.length, _.constant(0));
	186	this.sessions[index] = _.times(table.length, _.constant(0));
	187	this.currentIndex = index;
	188	},
	189	setScore: function() {
	190	let sortedSessions = this.sessions[this.currentIndex]
	191	.map( (s,i) => { return {value:s, index:i}; })
	192	.sort( (a,b) => { return parseInt(b.value) - parseInt(a.value); });
	193	let pdts = [4, 2, 1, 0]; //TODO: ex-aequos ?!
	194	for (let i=0; i<this.tables[this.currentIndex].length; i++)
	195	{
	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]);
	198	}
	199	this.currentIndex = -1;
	200	this.writeScoreToDb();
	201	},
	202	resetScore: function() {
	203	this.pdts[this.currentIndex] = [];
	204	this.sessions[this.currentIndex] = [];
	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
	213	.slice(1) //discard Toto
	214	.map( p => { return Object.assign({}, p); }) //deep (enough) copy
	215	.sort(this.sortByScore);
	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 => {
	229	p.pdt = !!p.pdt ? parseInt(p.pdt) : 0;
	230	p.session = !!p.session ? parseInt(p.session) : 0;
	231	p.available = !!p.available ? p.available : 1; //use integer for fputcsv PHP func
	232	});
	233	players.unshift({ //add ghost 4th player for 3-players tables
	234	prenom: "Toto",
	235	nom: "",
	236	pdt: 0,
	237	session: 0,
	238	available: 0,
	239	});
	240	self.players = players;
	241	}
	242	};
	243	xhr.open("GET", "scripts/rw_players.php", true);
	244	xhr.send(null);
	245	},
	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	},
	257	});