feat(#22): Add sprites

src/lib/components/PokemonSprite.svelte

@@ -1,35 +1,97 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import pokeApiPokemon from '$lib/helpers/pokeapi-pokemon.json';
 
+	export let pokemonName: string;
 	export let pokedexNumber: string | number;
 	export let form: string | undefined;
+	export let shiny: boolean | undefined = false;
 
 	let imagePath = null as string | null;
+	let blah = '';
 
-	async function fetchImagePath() {
-		try {
-			let url = `/api/sprite?pokedexNumber=${pokedexNumber}`;
-			if (form) {
-				url += `&form=${form}`;
-			}
+	function setImagePath() {
+		let rootFolder =
+			'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home';
+		// let rootFolder = 'sprites/home';
 
-			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);
+		if (form === 'Female') {
+			rootFolder += '/female';
 		}
+
+		if (shiny) {
+			rootFolder += '/shiny';
+		}
+
+		// Remove leading zeros
+		const strippedPokedexNumber = pokedexNumber.toString().replace(/^0+/, '');
+
+		// Sanitise the pokemon name by making it all lowercase and replacing any spaces with hyphens and removing other characters
+		let sanitisedPokemonName = pokemonName.toLowerCase().replace(/[^a-z]/g, '');
+
+		// Get the PokeApi id for the pokemon
+		let pokeApiId;
+		if (form && form.length > 0 && form !== 'Female') {
+			// Sanitise the form by making it all lowercase and replacing spaces with hyphens
+			let sanitisedForm = form
+				.toLowerCase()
+				.replaceAll(' ', '-')
+				.replaceAll('2', 'two')
+				.replaceAll('3', 'three')
+				.replaceAll('4', 'four');
+
+			switch (sanitisedForm) {
+				case 'alolan':
+					sanitisedForm = 'alola';
+					break;
+				case 'galarian':
+					sanitisedForm = 'galar';
+					break;
+				case 'hisuian':
+					sanitisedForm = 'hisui';
+					break;
+				// case 'rainbow-ribbon':
+				// 	sanitisedForm = 'rainbow-swirl-ribbon-sweet';
+				// 	break;
+				default:
+					break;
+			}
+
+			if (strippedPokedexNumber == '869') {
+				console.log(sanitisedPokemonName, sanitisedForm);
+			}
+
+			// If the form is contained in the identifier, use that
+			if (
+				pokeApiPokemon.find(
+					(pokemon) => pokemon.identifier === sanitisedPokemonName + '-' + sanitisedForm
+				)
+			) {
+				pokeApiId = pokeApiPokemon.find(
+					(pokemon) => pokemon.identifier === sanitisedPokemonName + '-' + sanitisedForm
+				)?.id;
+			} else {
+				// If the form is not contained in the identifier, use the species_id
+				pokeApiId = pokeApiPokemon.find(
+					(pokemon) => pokemon.species_id.toString() === strippedPokedexNumber
+				)?.id;
+			}
+		} else {
+			pokeApiId = pokeApiPokemon.find(
+				(pokemon) => pokemon.species_id.toString() === strippedPokedexNumber
+			)?.id;
+		}
+
+		imagePath = `${rootFolder}/${pokeApiId}.png`;
+		blah = `${pokeApiId}.png`;
+		// blah = `${strippedPokedexNumber}${form?.length && form !== 'Female' ? '-' + form : ''}.png`;
 	}
 
-	onMount(fetchImagePath);
+	onMount(setImagePath);
 </script>
 
 {#if imagePath}
+	<!-- {blah} -->
 	<img src={imagePath} alt="sprite" />
 {:else}
 	<span class="loading loading-spinner loading-xs"></span>