1 files changed, 100 insertions, 0 deletions
diff --git a/src/lib/Schedule/Crunchyroll.svelte b/src/lib/Schedule/Crunchyroll.svelte
new file mode 100644
index 00000000..9b6b0509
--- /dev/null
+++ b/src/lib/Schedule/Crunchyroll.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import crunchyroll from '$lib/Data/crunchyroll.json';
+	import './container.css';
+
+	interface CrunchyrollMedia<T = number | 'soon' | 'continuing'> {
+		year: number;
+		month: number;
+		day: T;
+		title: string;
+	}
+
+	type KnownMedia = { [key: string]: CrunchyrollMedia<number>[] };
+
+	const days: KnownMedia = crunchyroll
+		.filter((media) => media.day !== 'soon' && media.day !== 'continuing')
+		.reduce((acc: KnownMedia, media) => {
+			const date = new Date(media.year, media.month - 1, media.day as number).toLocaleDateString();
+
+			if (!acc[date]) acc[date] = [];
+
+			acc[date].push(media as CrunchyrollMedia<number>);
+
+			return acc;
+		}, {});
+	const continuing: CrunchyrollMedia<number | string>[] = crunchyroll.filter(
+		(media) => media.day === 'continuing'
+	);
+	const soon: CrunchyrollMedia<number | string>[] = crunchyroll.filter(
+		(media) => media.day === 'soon'
+	);
+
+	$: columnCount = Math.ceil(Object.keys(days).length / 2);
+
+	const ordinalSuffix = (i: number) => {
+		const j = i % 10;
+		const k = i % 100;
+
+		if (j === 1 && k !== 11) return i + 'st';
+		if (j === 2 && k !== 12) return i + 'nd';
+		if (j === 3 && k !== 13) return i + 'rd';
+
+		return i + 'th';
+	};
+</script>
+
+<div class="list-container" id="crunchyroll" style={`column-count: ${columnCount};`}>
+	{#each Object.values(days) as day}
+		{@const date = new Date(day[0].year, day[0].month - 1, day[0].day)}
+
+		<div class="card day">
+			<details open class="details-unstyled">
+				<summary>
+					{date.toLocaleString('default', { month: 'long' })}
+					{ordinalSuffix(day[0].day)}, {day[0].year}
+				</summary>
+				<ol>
+					{#each day as media}
+						<li>{media.title}</li>
+					{/each}
+				</ol>
+			</details>
+		</div>
+
+		<p />
+	{/each}
+
+	<div class="card day">
+		<details open class="details-unstyled">
+			<summary>Coming soon</summary>
+
+			<ol>
+				{#each soon as media}
+					<li>{media.title}</li>
+				{/each}
+			</ol>
+		</details>
+	</div>
+
+	<p />
+
+	<div class="card day">
+		<details open class="details-unstyled">
+			<summary>Continuing from previous season</summary>
+
+			<ol>
+				{#each continuing as media}
+					<li>{media.title}</li>
+				{/each}
+			</ol>
+		</details>
+	</div>
+</div>
+
+<style>
+	.day {
+		overflow-y: auto;
+		break-inside: avoid;
+		page-break-inside: avoid;
+	}
+</style>