feat: improve the website

src/components/DropMember.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import DropFile from 'svelte-parts/DropFile.svelte';
-	import { data_store, workbook_store } from '../store';
+	import { data_store, leader_store, workbook_store } from '../store';
 	import { read } from 'xlsx';
 
 	import { loadFromSheet } from '$lib/utils/sheetService';
@@ -10,7 +10,8 @@
 		const raw_sheet = await file.arrayBuffer();
 		const workbook = read(raw_sheet);
 		workbook_store.set(workbook);
-		data_store.set(loadFromSheet(workbook));
+		data_store.set(loadFromSheet(workbook, 'database'));
+		leader_store.set(loadFromSheet(workbook, 'leader'));
 	}
 </script>
 

src/components/Footer.svelte

@@ -1 +1 @@
-<footer class="bg-purple-500/50  0 mt-10 py-5 text-center text-2xl font-bold content-end">Powered by J. & JomnoiZ</footer>
+<footer class="bg-orange-400  0 mt-10 py-5 text-center text-2xl font-bold content-end">Powered by J. & JomnoiZ</footer>

src/components/ForbiddenPair.svelte

@@ -43,10 +43,10 @@
 </script>
 
 <div class="py-5 flex-col items-center">
-	<h1 class="pt-10 pb-5 text-4xl font-bold text-center">Forbidden Pairs</h1>
-	<ol class="flex flex-col items-center">
+	<h1 class="pt-4 pb-5 text-4xl font-bold text-center">Forbidden Pairs</h1>
+	<ol class="flex flex-col justify-center">
 		{#each forbiddenPairs as pair}
-			<li class="text-xl py-3 flex justify-between items-center border rounded-xl my-4">
+			<li class="text-xl py-1 grid grid-cols-3 justify-items-center items-center border rounded-xl mt-2">
 				<span class="px-5 text-nowrap">{pair[0]}</span>
 				<span class="px-5 text-no-wrap">{pair[1]}</span>
 				<button
@@ -55,9 +55,9 @@
 				>
 			</li>
 		{/each}
-		<li class="text-xl py-3 flex justify-between border rounded-xl my-4">
+		<li class="text-xl py-1 grid grid-cols-3 justify-items-center border rounded-xl my-2">
 			<select
-				class="mx-2 p-2 rounded"
+				class="mx-2 p-2 rounded w-[90%]"
 				placeholder="name1"
 				disabled={$data_store.length === 0}
 				bind:value={cur_first}
@@ -67,7 +67,7 @@
 				{/each}
 			</select>
 			<select
-				class="mx-2 p-2 rounded"
+				class="mx-2 p-2 rounded w-[90%]"
 				placeholder="name2"
 				disabled={$data_store.length === 0 || cur_first === ''}
 				bind:value={cur_second}

src/components/GroupInformation.svelte

@@ -5,55 +5,60 @@
 	export let day: number;
 	export let disableGenerateControlSheet: boolean;
 	export let enableForbiddenPairs: boolean;
-	const PRIMES = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29];
+	const PRIMES = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
 </script>
 
-<div class="flex flex-col justify-center gap-3">
-	<label class="py-3 text-xl flex font-bold" for="n_member">Number of members :</label>
-	<input
-		type="number"
-		bind:value={$data_store.length}
-		disabled
-		class="p-2 ml-2 rounded grow disabled: bg-gray-100"
-		id="n_member"
-	/>
-	<label class="py-3 text-xl flex font-bold" for="n_group">Number of groups :</label>
-	<select
-		bind:value={group_cnt}
-		disabled={!$data_store.length}
-		class="p-2 ml-2 rounded grow disabled: bg-gray-100"
-		id="n_group"
-	>
-		{#each PRIMES as prime}
-			<option value={prime}>{prime}</option>
-		{/each}
-	</select>
-	<label class="py-3 text-xl flex font-bold" for="n_day">Number of days :</label>
-	<input
-		type="number"
-		bind:value={day}
-		disabled={!group_cnt}
-		min="1"
-		max={group_cnt - 1}
-		class="p-2 ml-2 rounded grow disabled: bg-gray-100"
-		id="n_day"
-	/>
-	<div class="flex justify-between gap-4 items-center">
+<div class="flex flex-col justify-center">
+	<div class="grid grid-cols-2 gap-4 mt-12">
+		<label class="py-3 text-xl flex font-bold" for="n_member">Number of members :</label>
+		<input
+			type="number"
+			bind:value={$data_store.length}
+			disabled
+			class="p-2 ml-2 rounded grow disabled: bg-gray-100"
+			id="n_member"
+		/>
+
+		<label class="py-3 text-xl flex font-bold" for="n_group">Number of groups :</label>
+		<select
+			bind:value={group_cnt}
+			disabled={!$data_store.length}
+			class="p-2 ml-2 rounded grow disabled: bg-gray-100"
+			id="n_group"
+		>
+			{#each PRIMES as prime}
+				<option value={prime}>{prime}</option>
+			{/each}
+		</select>
+
+		<label class="py-3 text-xl flex font-bold" for="n_day">Number of days :</label>
+		<input
+			type="number"
+			bind:value={day}
+			disabled={!group_cnt}
+			min="1"
+			max={group_cnt - 1}
+			class="p-2 ml-2 rounded grow disabled: bg-gray-100"
+			id="n_day"
+		/>
+	</div>
+
+	<!-- <div class="flex flex-row mt-4 gap-6 items-center">
 		<input
 			type="checkbox"
 			bind:checked={disableGenerateControlSheet}
 			disabled={!group_cnt}
-			class="p-2 ml-2 rounded grow mt-1"
+			class="p-2 ml-2 rounded mt-1"
 			id="control_sheet"
 		/>
 		<label class="py-3 text-xl flex font-bold" for="control_sheet">Download minimal version</label>
-	</div>
-	<div class="flex justify-between gap-4 items-center">
+	</div> -->
+	<div class="flex flex-row my-2 gap-6 items-center">
 		<input
 			type="checkbox"
 			bind:checked={enableForbiddenPairs}
 			disabled={!group_cnt}
-			class="p-2 ml-2 rounded grow mt-1"
+			class="p-2 ml-2 rounded mt-1"
 			id="forbiddenPairs"
 		/>
 		<label class="py-3 text-xl flex font-bold" for="forbiddenPairs">Enable Forbidden Pairs</label>

src/lib/utils/groupService.ts

@@ -6,10 +6,11 @@ export class GroupService {
 	readonly DAY: number;
 	readonly TOTAL_GROUP: number;
 	readonly MAX_GROUP_SIZE: number;
+	leader: Person[];
 	newData: Person[];
 	leftMaxGroupSize: number; // Count number of groups that can have maximum group size
 
-	constructor(data: Person[], forbiddenPairs: string[][], DAY: number, TOTAL_GROUP: number) {
+	constructor(data: Person[], leader: Person[], forbiddenPairs: string[][], DAY: number, TOTAL_GROUP: number) {
 		shuffle(data);
 		this.data = data;
 		this.forbiddenPairs = forbiddenPairs;
@@ -19,6 +20,7 @@ export class GroupService {
 		this.newData = [];
 		this.leftMaxGroupSize =
 			this.data.length - this.TOTAL_GROUP * Math.floor(this.data.length / this.TOTAL_GROUP);
+		this.leader = leader;
 	}
 
 	randomGroup() {
@@ -53,8 +55,11 @@ export class GroupService {
 		this.newData = this.data.map((person: Person) => ({ ...person }));
 		const basis = Array.from({ length: this.TOTAL_GROUP }, () => []) as Person[][];
 
+		// insert leader
+		this.insertLeader(basis);
+
 		// insert all forbidden pairs
-		this.insertForbiddenPairs(basis);
+		if (this.leader.length > 0) this.insertForbiddenPairs(basis);
 
 		// fill leftover slots with random people
 		this.fillWithRandom(basis);
@@ -71,14 +76,25 @@ export class GroupService {
 		}
 	}
 
+	insertLeader(basis: Person[][]) {
+		for (let g = 0; g < basis.length; g++) {
+			const leader = this.getRandomPerson(this.leader);
+			const person1 = this.newData.find((person) => person.name === leader.name);
+			if (person1) {
+				basis[g].push(person1);
+				this.newData = this.newData.filter((p) => p.id !== person1.id);
+				this.leader = this.leader.filter((p) => p.name !== leader.name);
+			}
+		}
+	}
+
 	insertForbiddenPairs(basis: Person[][]) {
 		let g = 0;
 		this.forbiddenPairs.forEach((pair) => {
 			let person1 = this.newData.find((person) => person.name === pair[0]);
 			let person2 = this.newData.find((person) => person.name === pair[1]);
 			if (person1 && person2) {
-				// Current version only allow upto 2 people with forbidden pairs
-				if (basis[g].length === 0) {
+				if (this.checkInsertSize(2, basis[g])) {
 					this.newData = this.newData.filter(
 						(person) => person.id !== person1?.id && person.id !== person2?.id
 					);

src/lib/utils/sheetService.ts

@@ -4,12 +4,12 @@ import { type WorkBook, writeFile, utils, type CellObject } from 'xlsx';
 const GROUP_ASSIGN_SHEET_NAME = 'group_assign';
 const CONTROL_SHEET_NAME = 'control';
 
-export function loadFromSheet(workbook: WorkBook) {
+export function loadFromSheet(workbook: WorkBook, sheetName: string) {
 	const data: Person[] = [];
 	for (let i = 2; ; i++) {
-		if (!workbook.Sheets['database'][`A${i}`]) break;
+		if (!workbook.Sheets[sheetName][`A${i}`]) break;
 		data.push({
-			name: workbook.Sheets['database'][`A${i}`].v,
+			name: workbook.Sheets[sheetName][`A${i}`].v,
 			id: i - 1
 		});
 	}
@@ -30,9 +30,9 @@ export function handleDownload(
 		origin: 'B2'
 	});
 
-	if (!disableGenerateControlSheet) {
-		createControlSheet(out_wb, groupOfMembers.length, groupOfMembers[0].length);
-	}
+	// if (!disableGenerateControlSheet) {
+	// 	createControlSheet(out_wb, groupOfMembers.length, groupOfMembers[0].length);
+	// }
 
 	writeFile(out_wb, 'output.xlsx');
 }

src/routes/+page.svelte

@@ -4,14 +4,13 @@
 	import Background from '../components/Background.svelte';
 	import DownloadButton from '../components/DownloadButton.svelte';
 	import DropMember from '../components/DropMember.svelte';
-	import Footer from '../components/Footer.svelte';
 	import ForbiddenPair from '../components/ForbiddenPair.svelte';
 	import GroupInformation from '../components/GroupInformation.svelte';
-	import { data_store, workbook_store } from '../store';
+	import { data_store, leader_store, workbook_store } from '../store';
 
 	let group_cnt = 0;
 	let day = 1;
-	let disableGenerateControlSheet: boolean = false;
+	let disableGenerateControlSheet: boolean = true;
 	let forbiddenPairs: string[][] = [];
 	let enableForbiddenPairs: boolean = false;
 
@@ -21,7 +20,7 @@
 	}
 
 	function handleDownloadButton() {
-		const groupService = new GroupService($data_store, forbiddenPairs, day, group_cnt);
+		const groupService = new GroupService($data_store, $leader_store, forbiddenPairs, day, group_cnt);
 		const { groups, groupOfMembers } = groupService.randomGroup();
 		const errors = groupService.getGroupError(groups) as string[] | undefined;
 		if (errors && errors.length > 0) {
@@ -36,11 +35,11 @@
 </script>
 
 <Background />
-<div class="absolute top-2 right-2">
+<div class="absolute top-6 right-6">
 	<a
 		href="https://github.com/khajornritdacha/group-randomizer/tree/main?tab=readme-ov-file#group-randomizer"
 		target="_blank"
-		class="rounded-full inline-block leading-[0] font-bold text-center text-2xl bg-orange-primary hover:bg-orange-primary-darken text-white-secondary p-5"
+		class="rounded-xl inline-block leading-[0] font-bold text-center text-2xl bg-orange-primary hover:bg-orange-primary-darken text-white-secondary p-7 font-scaryHalloween"
 		>How to Use</a
 	>
 </div>
@@ -60,7 +59,7 @@
 				Random
 			</h1>
 		</div>
-		<div class="min-h-max w-[80%] z-10">
+		<div class="min-h-max w-[80%] z-10 bg-orange-200 rounded-3xl">
 			<DropMember />
 		</div>
 	</div>

src/store.ts

@@ -3,5 +3,6 @@ import type { Person } from '$lib/types';
 import type { WorkBook } from 'xlsx';
 
 export const data_store = writable<Person[]>([]);
+export const leader_store = writable<Person[]>([]);
 
 export const workbook_store = writable<WorkBook | null>(null);