feat(*): Add support for catch records to My Dex page

src/lib/components/pokedex/PokedexEntryCatchRecord.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	import type { CatchRecord } from '$lib/models/CatchRecord';
+	import type { PokedexEntry } from '$lib/models/PokedexEntry';
+	import PokemonSprite from '../PokemonSprite.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	export let pokedexEntry: PokedexEntry;
+	export let catchRecord: CatchRecord;
+
+	const dispatch = createEventDispatcher();
+
+	function save() {
+		dispatch('updateCatch', { pokedexEntry, catchRecord });
+	}
+</script>
+
+<div
+	class="container bg-red-500 text-white rounded-lg shadow-md p-6 flex flex-col md:flex-row gap-4"
+>
+	<div class="dex-column pokedex-entry-container">
+		<div class="flex mb-2">
+			<div class="sprite-container flex justify-center items-center bg-white rounded-lg p-2">
+				<!-- <PokemonSprite
+					pokedexNumber={pokedexEntry.pokedexNumber.toString().padStart(3, '0')}
+					form={pokedexEntry.form
+						.replace(/[^a-zA-Z ]/g, '')
+						.trim()
+						.replace(/ /g, '-')}
+				/> -->
+			</div>
+			<div class="pl-2">
+				<h3 class="text-xl font-bold pt-1">{pokedexEntry.pokemon}</h3>
+				<sub class="text-gray-200">#{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</sub>
+			</div>
+		</div>
+
+		<div class="bg-white text-black rounded-lg p-4 mb-2">
+			<p><strong>Form:</strong> {pokedexEntry.form ? pokedexEntry.form : '-'}</p>
+		</div>
+
+		<div class="bg-white text-black rounded-lg p-4">
+			<p><strong>Box:</strong> {pokedexEntry.boxPlacement.box}</p>
+			<p><strong>Row:</strong> {pokedexEntry.boxPlacement.row}</p>
+			<p><strong>Column:</strong> {pokedexEntry.boxPlacement.column}</p>
+			<p><strong>Can Gigantamax:</strong> {pokedexEntry.canGigantamax ? 'Yes' : 'No'}</p>
+			<p><strong>Notes:</strong> {pokedexEntry.notes}</p>
+		</div>
+	</div>
+
+	<div class="dex-column catch-record-container bg-white text-black rounded-lg p-4 mb-4 md:mb-0">
+		<div class="flex items-center">
+			<label class="block font-bold mr-2" for={`caughtInput-${catchRecord._id}`}>Caught:</label>
+			<input
+				type="checkbox"
+				id={`caughtInput-${catchRecord._id}`}
+				bind:checked={catchRecord.caught}
+				class="form-checkbox"
+			/>
+		</div>
+		<div class="flex items-center">
+			<label class="block font-bold mr-2" for={`haveToEvolveInput-${catchRecord._id}`}
+				>Needs to evolve:</label
+			>
+			<input
+				type="checkbox"
+				id={`haveToEvolveInput-${catchRecord._id}`}
+				bind:checked={catchRecord.haveToEvolve}
+				class="form-checkbox"
+			/>
+		</div>
+		<div class="flex items-center">
+			<label class="block font-bold mr-2" for={`inHomeInput-${catchRecord._id}`}>In home:</label>
+			<input
+				type="checkbox"
+				id={`inHomeInput-${catchRecord._id}`}
+				bind:checked={catchRecord.inHome}
+				class="form-checkbox"
+			/>
+		</div>
+		{#if pokedexEntry.canGigantamax}
+			<div class="flex items-center">
+				<label class="block font-bold mr-2" for={`hasGigantamaxedInput-${catchRecord._id}`}
+					>Has Gigantamaxed:</label
+				>
+				<input
+					type="checkbox"
+					id={`hasGigantamaxedInput-${catchRecord._id}`}
+					bind:checked={catchRecord.hasGigantamaxed}
+					class="form-checkbox"
+				/>
+			</div>
+		{/if}
+		<p>
+			<label class="block font-bold mb-1" for={`personalNotesInput-${catchRecord._id}`}
+				>Notes:</label
+			>
+			<textarea
+				bind:value={catchRecord.personalNotes}
+				id={`personalNotesInput-${catchRecord._id}`}
+				class="form-textarea w-full p-2 border rounded"
+			></textarea>
+		</p>
+	</div>
+
+	<div class="dex-column additional-details-container">
+		<div class="bg-white text-black rounded-lg p-4 mb-2">
+			<p><strong>Region to Catch In:</strong> {pokedexEntry.regionToCatchIn}</p>
+			<p><strong>Games to catch in:</strong></p>
+			<ul class="list-disc list-inside">
+				{#each pokedexEntry.gamesToCatchIn as game}
+					<li>{game}</li>
+				{/each}
+			</ul>
+			{#if pokedexEntry.regionToEvolveIn}
+				<p><strong>Region to Evolve In:</strong> {pokedexEntry.regionToEvolveIn}</p>
+			{/if}
+		</div>
+		<div class="bg-white text-black rounded-lg p-4">
+			<button on:click={save}>Save</button>
+		</div>
+	</div>
+</div>
+
+<style>
+	.container {
+		max-width: 1000px;
+		margin: 10px;
+	}
+
+	.dex-column {
+		width: 300px;
+	}
+
+	.pokedex-entry-container h3 {
+		color: #ffd700; /* Gold color */
+	}
+
+	.sprite-container {
+		width: 68px;
+		height: 68px;
+	}
+
+	.form-checkbox {
+		appearance: none;
+		background-color: #fff;
+		border: 2px solid #000;
+		border-radius: 0.25rem;
+		width: 1.5rem;
+		height: 1.5rem;
+		display: inline-block;
+		position: relative;
+	}
+
+	.form-checkbox:checked {
+		background-color: #00bfff;
+		background-size: 100% 100%;
+		background-position: center center;
+		background-repeat: no-repeat;
+	}
+
+	.form-textarea {
+		min-height: 3rem;
+		background-color: #fff;
+	}
+</style>