feat(#11): Add sprite component

src/lib/components/PokemonSprite.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	export let pokedexNumber: string | number;
+	export let form: string | undefined;
+
+	let imagePath = null as string | null;
+
+	async function fetchImagePath() {
+		try {
+			let url = `/api/sprite?pokedexNumber=${pokedexNumber}`;
+			if (form) {
+				url += `&form=${form}`;
+			}
+
+			const response = await fetch(url);
+
+			if (!response.ok) {
+				throw new Error('Failed to fetch image path');
+			}
+			const data = await response.json();
+
+			imagePath = `./sprites/regular/${data.spriteFileName}`;
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	onMount(fetchImagePath);
+</script>
+
+{#if imagePath}
+	<img src={imagePath} alt="sprite" />
+{:else}
+	<p>Loading...</p>
+{/if}

src/routes/+page.svelte

@@ -3,6 +3,7 @@
 	import SignUp from '$lib/components/SignUp.svelte';
 	import SignIn from '$lib/components/SignIn.svelte';
 	import SignOut from '$lib/components/SignOut.svelte';
+	import PokemonSprite from '$lib/components/PokemonSprite.svelte';
 
 	export let data;
 	let { supabase } = data;
@@ -51,3 +52,9 @@
 <SignIn {supabase} on:signedIn={setUserEmail} />
 <br />
 <SignOut {supabase} on:signedOut={setUserEmail} />
+
+<div>
+	<PokemonSprite pokedexNumber={666} form={'poke-ball'} />
+	<PokemonSprite pokedexNumber={666} form={''} />
+	<PokemonSprite pokedexNumber={'003'} form={''} />
+</div>

src/routes/api/sprite/+server.ts

@@ -0,0 +1,67 @@
+import { json } from '@sveltejs/kit';
+import sprites from '$lib/helpers/sprites.json';
+
+interface PokemonSpritesData {
+	[key: string]: {
+		forms: {
+			[key: string]: {
+				is_prev_gen_icon?: boolean;
+				is_alias_of?: string;
+			};
+		};
+	};
+}
+
+export async function GET({ url }) {
+	const pokedexNumber = url.searchParams.get('pokedexNumber');
+	const form = url.searchParams.get('form') ?? undefined;
+
+	if (!pokedexNumber) {
+		return json({
+			status: 400,
+			error: 'Pokédex number is required'
+		});
+	}
+
+	const spriteFileName = getPokemonSpriteFileName(pokedexNumber, form);
+
+	if (spriteFileName) {
+		// If spriteUrl is found, return it with status 200
+		return json({
+			status: 200,
+			spriteFileName: spriteFileName
+		});
+	} else {
+		// If spriteUrl is not found, return 404
+		return json({
+			status: 404,
+			error: `Sprite URL not found for the specified Pokémon with Pokédex number ${pokedexNumber} and form ${form}`
+		});
+	}
+}
+
+function getPokemonSpriteFileName(number: string, form?: string): string | undefined {
+	const spritesData: PokemonSpritesData = sprites;
+
+	// Check if the Pokémon number exists in the sprites JSON
+	if (spritesData[number] && spritesData[number]['gen-8']) {
+		const forms = spritesData[number]['gen-8'].forms;
+		let formName = '$';
+
+		// If a form is provided and it exists for the Pokémon, set the form name
+		if (form && forms[form]) {
+			formName = form;
+		}
+
+		// Check if the form has an alias
+		if (forms[formName].is_alias_of) {
+			formName = forms[formName].is_alias_of;
+		}
+
+		const fileName = `${spritesData[number].slug.eng.toLowerCase()}${formName !== '$' ? '-' + formName : ''}.png`;
+		return fileName;
+	}
+
+	// If the Pokémon number doesn't exist or doesn't have gen-8 sprites, return undefined
+	return undefined;
+}