From 1a283a0764e0870ba83c7f176d899f1f1902db45 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 28 Mar 2024 05:08:14 -0700
Subject: feat(tools): hololive birthdays

---
 src/lib/Tools/HololiveBirthdays.svelte | 95 ++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 src/lib/Tools/HololiveBirthdays.svelte

(limited to 'src/lib/Tools/HololiveBirthdays.svelte')

diff --git a/src/lib/Tools/HololiveBirthdays.svelte b/src/lib/Tools/HololiveBirthdays.svelte
new file mode 100644
index 00000000..059a1f91
--- /dev/null
+++ b/src/lib/Tools/HololiveBirthdays.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	import { clearAllParameters, parseOrDefault } from '../Utility/parameters';
+	import Message from '$lib/Loading/Message.svelte';
+	import locale from '$stores/locale';
+	import birthdays from '$lib/Data/Static/hololiveBirthdays.json';
+
+	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
+	let date = new Date();
+	let month = parseOrDefault(urlParameters, 'month', date.getMonth() + 1);
+	let day = parseOrDefault(urlParameters, 'day', date.getDate());
+
+	$: todaysBirthdays = birthdays.filter(
+		(birthday) => birthday.month === month && birthday.day === day
+	);
+
+	$: {
+		month = Math.min(month, 12);
+		month = Math.max(month, 1);
+		day = Math.min(day, new Date(new Date().getFullYear(), month, 0).getDate());
+		day = Math.max(day, 1);
+
+		if (browser) {
+			$page.url.searchParams.set('month', month.toString());
+			$page.url.searchParams.set('day', day.toString());
+			clearAllParameters(['month', 'day']);
+			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
+		}
+	}
+
+	onMount(() => clearAllParameters(['month', 'day']));
+</script>
+
+<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: new Date(new Date().getFullYear(), month, 0).getDate() }, (_, i) => i + 1) as day}
+			<option value={day}>{day}</option>
+		{/each}
+	</select>
+</p>
+
+{#if todaysBirthdays.length === 0}
+	<Message
+		message={`No birthdays for ${$locale().dayFormatter(
+			new Date(new Date().getFullYear(), month - 1, day)
+		)}.`}
+		fullscreen={false}
+		loader="ripple"
+	/>
+{:else}
+	<div class="characters">
+		{#each todaysBirthdays as birthday}
+			<div class="card card-small">
+				<a
+					href={`https://anilist.co/search/characters?search=${encodeURIComponent(
+						birthday.name
+					).replace(/%20/g, '+')}`}
+					target="_blank"
+				>
+					{birthday.name}
+					<img src={birthday.image} alt="Character" class="character-image" />
+				</a>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style lang="scss">
+	.characters {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+		gap: 1rem;
+		grid-row-gap: 1rem;
+		align-items: start;
+
+		img {
+			width: 100%;
+			height: auto;
+			object-fit: cover;
+			border-radius: 8px;
+			margin-top: 0.5rem;
+			box-shadow: 0 4px 30px var(--base01);
+		}
+	}
+</style>
-- 
cgit v1.2.3