feat(birthdays): birthday selector

1 files changed, 21 insertions, 3 deletions

diff --git a/src/lib/Tools/CharacterBirthdays.svelte b/src/lib/Tools/CharacterBirthdays.svelte
index 2f37fc1b..7723432e 100644
--- a/src/lib/Tools/CharacterBirthdays.svelte
+++ b/src/lib/Tools/CharacterBirthdays.svelte
@@ -14,10 +14,12 @@
 	let month = date.getMonth() + 1;
 	let day = date.getDate();
 	let anisearchBirthdays: Promise<aniSearchBirthday[]>;
+	let acdbBirthdays: Promise<ACDBBirthday[]>;
 
-	onMount(async () => {
+	$: {
 		anisearchBirthdays = aniSearchBirthdays(month, day);
-	});
+		acdbBirthdays = ACDBBirthdays(month, day);
+	}
 
 	function normalizeName(name: string): string {
 		return name.toLowerCase().split(' ').sort().join(' ');
@@ -54,7 +56,7 @@
 	}
 </script>
 
-{#await ACDBBirthdays(month, day)}
+{#await acdbBirthdays}
 	<p>Loading set one ...</p>
 {:then acdbBirthdays}
 	{#await anisearchBirthdays}
@@ -62,6 +64,22 @@
 	{:then anisearch}
 		{@const birthdays = combineBirthdaySources(acdbBirthdays, anisearch)}
 
+		<p>
+			<select bind:value={month}>
+				{#each Array.from({ length: 12 }, (_, i) => i + 1) as month}
+					<option value={month}>
+						{new Date(0, month - 1).toLocaleString('default', { month: 'long' })}
+					</option>
+				{/each}
+			</select>
+
+			<select bind:value={day}>
+				{#each Array.from({ length: 31 }, (_, i) => i + 1) as day}
+					<option value={day}>{day}</option>
+				{/each}
+			</select>
+		</p>
+
 		<div id="characters">
 			{#each birthdays as birthday}
 				<div>