feat(tools): grid and avatar for birthdays

3 files changed, 42 insertions, 29 deletions

diff --git a/src/lib/AniList/character.ts b/src/lib/AniList/character.ts
index 27caef99..1a5cb3c4 100644
--- a/src/lib/AniList/character.ts
+++ b/src/lib/AniList/character.ts
@@ -3,6 +3,9 @@ export interface Character {
 		full: string;
 	};
 	id: number;
+	image: {
+		large: string;
+	};
 }
 
 export interface CharactersPage {
@@ -27,7 +30,7 @@ const charactersPage = async (page: number): Promise<CharactersPage> =>
 			},
 			body: JSON.stringify({
 				query: `{ Page(page: ${page}, perPage: 50) {
-				characters(isBirthday: true) { name { full } id }
+				characters(isBirthday: true) { name { full } id image { large } }
 				pageInfo { hasNextPage currentPage }
 			} }`
 			})
@@ -44,6 +47,9 @@ export const todaysCharacterBirthdays = async (): Promise<Character[]> => {
 			id: character['id'],
 			name: {
 				full: character['name']['full']
+			},
+			image: {
+				large: character['image']['large']
 			}
 		});
 	}
@@ -54,6 +60,9 @@ export const todaysCharacterBirthdays = async (): Promise<Character[]> => {
 				id: character['id'],
 				name: {
 					full: character['name']['full']
+				},
+				image: {
+					large: character['image']['large']
 				}
 			});
 		}
diff --git a/src/lib/Error.svelte b/src/lib/Error.svelte
index affbb429..a78fceb4 100644
--- a/src/lib/Error.svelte
+++ b/src/lib/Error.svelte
@@ -1,10 +1,12 @@
+<script lang="ts">
+	export let type = 'Media';
+</script>
+
 <ul>
 	<li>
 		<p>
-			Media could not be loaded. You might have been <a
-				href="https://en.wikipedia.org/wiki/Rate_limiting"
-				target="_blank">rate limited</a
-			>.
+			{type} 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
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>