PhiLhoSoft/Tournoi.css

## readme.md

      
    Raw
  

              readme.md
            
          
    Somebody on Twitter created a tournament (of drawings) without limiting the amount of users.
So they end up having a number of participants which is not a power of two,
so they have to make groups of 2, 3 or 4 participants on the first turn.
I made a quickly whipped up generator taking a list of participants (one per line, no holes!) and generating the groups,
creating groups of 3 or 4 if needed.
Users can sort or shuffle the names if they want.
No fancy code here, primitive CSS, simple JS (ES6), no frameworks / libraries, just barebone Dom.
Made for French users, so texts are in French...

  
## Tournoi.css
body
{
	display: flex;
	flex-direction: column;
}

#ParticipantList
{
	max-width: 500px;
}

#Actions
{
	margin: 16px 0;
}

## Tournoi.html
<!doctype html>

<html lang="fr">
	<head>
		<meta charset="UTF-8">

		<title>Générateur de groupes au premier tour d'un tournoi</title>
		<link rel="stylesheet" href="Tournoi.css">
	</head>

	<body>
		<h1>Générateur de groupes au premier tour d'un tournoi</h1>
		<h2>Liste des participants</h2>
		<textarea id="ParticipantList" cols="50" rows="30"
				placeholder="Coller ici la liste des participants, un par ligne"></textarea>
		<div id="Actions">
			<button id="Sort">Trier</button>
			<button id="Shuffle">Mélanger</button>
			<button id="Generate">Générer</button>
		</div>
		<div id="Result"></div>

		<script src="Tournoi.js"></script>
	</body>
</html>

## Tournoi.js
(() =>
{
	document.addEventListener("DOMContentLoaded", (event) =>
	{
		const participantListTA = document.getElementById('ParticipantList');
		const resultDiv = document.getElementById('Result');
		const sortButton = document.getElementById('Sort');
		const shuffleButton = document.getElementById('Shuffle');
		const generateButton = document.getElementById('Generate');
		//console.log("Tournoi", sortButton, shuffleButton, generateButton);
		sortButton.addEventListener('click', () =>
		{
			//console.log("Participants", participantListTA.value);
			let participantList = participantListTA.value.trim().split('\n');
			participantList = participantList.sort();
			participantListTA.value = participantList.join('\n');
		});
		shuffleButton.addEventListener('click', () =>
		{
			let participantList = participantListTA.value.trim().split('\n');
			participantList = participantList.sort((a, b) =>
			{
				let rnd = Math.random();
				if (rnd < 0.5) return -1;
				return 1;
			});
			participantListTA.value = participantList.join('\n');
		});
		generateButton.addEventListener('click', () =>
		{
			const participantList = participantListTA.value.trim().split('\n');
			const participantNumber = participantList.length;
			let groupNumber = 1;
			while (participantNumber / groupNumber > 2)
			{
				groupNumber *= 2;
			}
			if (groupNumber * 2 !== participantNumber)
			{
				groupNumber /= 2;
			}
			let groups = [];
			for (let i = 0; i < groupNumber; i++)
			{
				groups[i] = [];
				groups[i][0] = participantList.pop();
				groups[i][1] = participantList.pop();
			}
			while (participantList.length > 0)
			{
				let i = 0;
				while (participantList.length > 0 && i < groups.length)
				{
					groups[i++].push(participantList.pop());
				}
			}
			console.log("Participants", participantNumber, groupNumber, groups);
			let listing = `<h2>Participants au tournoi (${participantNumber})</h2>\n`;
			for (let i = 0; i < groupNumber; i++)
			{
				listing += `<h3>Groupe ${i + 1}</h3>\n<ul>\n`;
				for (let j = 0; j < groups[i].length; j++)
				{
					listing += `<li>${groups[i][j]}</li>\n`;

				}
				listing += `</ul>\n`;
			}
			resultDiv.innerHTML = listing;
		});
	});
})();
	body
	{
	display: flex;
	flex-direction: column;
	}

	#ParticipantList
	{
	max-width: 500px;
	}

	#Actions
	{
	margin: 16px 0;
	}
	<!doctype html>

	<html lang="fr">
	<head>
	<meta charset="UTF-8">

	<title>Générateur de groupes au premier tour d'un tournoi</title>
	<link rel="stylesheet" href="Tournoi.css">
	</head>

	<body>
	<h1>Générateur de groupes au premier tour d'un tournoi</h1>
	<h2>Liste des participants</h2>
	<textarea id="ParticipantList" cols="50" rows="30"
	placeholder="Coller ici la liste des participants, un par ligne"></textarea>
	<div id="Actions">
	<button id="Sort">Trier</button>
	<button id="Shuffle">Mélanger</button>
	<button id="Generate">Générer</button>
	</div>
	<div id="Result"></div>

	<script src="Tournoi.js"></script>
	</body>
	</html>
	(() =>
	{
	document.addEventListener("DOMContentLoaded", (event) =>
	{
	const participantListTA = document.getElementById('ParticipantList');
	const resultDiv = document.getElementById('Result');
	const sortButton = document.getElementById('Sort');
	const shuffleButton = document.getElementById('Shuffle');
	const generateButton = document.getElementById('Generate');
	//console.log("Tournoi", sortButton, shuffleButton, generateButton);
	sortButton.addEventListener('click', () =>
	{
	//console.log("Participants", participantListTA.value);
	let participantList = participantListTA.value.trim().split('\n');
	participantList = participantList.sort();
	participantListTA.value = participantList.join('\n');
	});
	shuffleButton.addEventListener('click', () =>
	{
	let participantList = participantListTA.value.trim().split('\n');
	participantList = participantList.sort((a, b) =>
	{
	let rnd = Math.random();
	if (rnd < 0.5) return -1;
	return 1;
	});
	participantListTA.value = participantList.join('\n');
	});
	generateButton.addEventListener('click', () =>
	{
	const participantList = participantListTA.value.trim().split('\n');
	const participantNumber = participantList.length;
	let groupNumber = 1;
	while (participantNumber / groupNumber > 2)
	{
	groupNumber *= 2;
	}
	if (groupNumber * 2 !== participantNumber)
	{
	groupNumber /= 2;
	}
	let groups = [];
	for (let i = 0; i < groupNumber; i++)
	{
	groups[i] = [];
	groups[i][0] = participantList.pop();
	groups[i][1] = participantList.pop();
	}
	while (participantList.length > 0)
	{
	let i = 0;
	while (participantList.length > 0 && i < groups.length)
	{
	groups[i++].push(participantList.pop());
	}
	}
	console.log("Participants", participantNumber, groupNumber, groups);
	let listing = `<h2>Participants au tournoi (${participantNumber})</h2>\n`;
	for (let i = 0; i < groupNumber; i++)
	{
	listing += `<h3>Groupe ${i + 1}</h3>\n<ul>\n`;
	for (let j = 0; j < groups[i].length; j++)
	{
	listing += `<li>${groups[i][j]}</li>\n`;

	}
	listing += `</ul>\n`;
	}
	resultDiv.innerHTML = listing;
	});
	});
	})();