From 2725f7783c0bb62de6572733c870063028c3e46f Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 12 Nov 2023 20:21:47 -0800
Subject: feat(tools): grid and avatar for birthdays

---
 src/routes/tools/+page.svelte | 50 ++++++++++++++++++++++---------------------
 1 file changed, 26 insertions(+), 24 deletions(-)

(limited to 'src/routes/tools')

diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index 5114efa5..80777c98 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -5,6 +5,7 @@
 	import { browser } from '$app/environment';
 	import EpisodeDiscussionCollector from '$lib/Tools/EpisodeDiscussionCollector.svelte';
 	import { onMount } from 'svelte';
+	import Error from '$lib/Error.svelte';
 
 	export let data;
 
@@ -51,36 +52,37 @@
 {:else if tool === 'episode_discussion_collector'}
 	<EpisodeDiscussionCollector />
 {:else if tool === 'todays_character_birthdays'}
-	<ul>
-		{#await todaysCharacterBirthdays()}
-			<li>Loading ...</li>
-		{:then birthdays}
+	{#await todaysCharacterBirthdays()}
+		Loading ...
+	{:then birthdays}
+		<div id="characters">
 			{#each birthdays as birthday}
-				<li>
-					<a href={`https://anilist.co/character/${birthday.id}`} target="_blank"
-						>{birthday.name.full}</a
-					>
-				</li>
+				<div>
+					<a href={`https://anilist.co/character/${birthday.id}`} target="_blank">
+						{birthday.name.full}
+						<img src={birthday.image.large} alt="Character (Large)" class="character-image" />
+					</a>
+				</div>
 			{/each}
-		{:catch}
-			<li>
-				<p>
-					Characters could not be loaded. You might have been <a
-						href="https://en.wikipedia.org/wiki/Rate_limiting"
-						target="_blank">rate limited</a
-					>.
-				</p>
-				<p>
-					Try again in a few minutes. If the problem persists, please contact
-					<a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList.
-				</p>
-			</li>
-		{/await}
-	</ul>
+		</div>
+	{:catch}
+		<Error type="Character" />
+	{/await}
 {/if}
 
 <style>
 	#wrapped {
 		width: 980px;
 	}
+
+	#characters {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
+		grid-gap: 0;
+		grid-row-gap: 1rem;
+	}
+
+	.character-image {
+		height: 20vh;
+	}
 </style>
-- 
cgit v1.2.3