Expand website and game trackers

src/lib/catch-em-all/PokemonDetails.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+	import { pokemonImage } from '$lib/game-tracker/game-art';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { NativeSelect } from '$lib/components/ui/native-select/index.js';
+	import * as Table from '$lib/components/ui/table/index.js';
+	let moveSearch = $state('');
+	let moveMethod = $state('all');
+
 	import { resolve } from '$app/paths';
 	import { enhance } from '$app/forms';
 	import {
@@ -71,7 +78,7 @@
 	{@const species = current.pokemon}
 	<div class="flex flex-wrap items-center gap-5">
 		<img
-			src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/{species.number}.png"
+			src={pokemonImage(species.number, 'artwork')}
 			alt=""
 			width="120"
 			height="120"
@@ -88,6 +95,114 @@
 		</div>
 	</div>
 
+	<section class="mt-6 rounded-xl border p-4">
+		<h3 class="font-semibold">Base stats</h3>
+		<div class="mt-3 grid gap-2">
+			{#each current.stats as stat (stat.name)}<div
+					class="grid grid-cols-[5rem_2rem_1fr] items-center gap-3 text-xs"
+				>
+					<span>{stat.name}</span><span class="font-semibold tabular-nums">{stat.value}</span>
+					<div class="h-2 overflow-hidden rounded-full bg-muted">
+						<div
+							class="h-full rounded-full bg-emerald-500/70"
+							style:width={`${(stat.value / 255) * 100}%`}
+						></div>
+					</div>
+				</div>{/each}
+		</div>
+		<p class="mt-3 text-xs text-muted-foreground">
+			Total: {current.stats.reduce((sum, s) => sum + s.value, 0)} · default form, current catalog values
+		</p>
+	</section>
+	{#if current.facts}
+		<section class="mt-5">
+			<h3 class="font-semibold">Species research</h3>
+			<dl class="mt-3 grid grid-cols-2 gap-4 text-sm">
+				<div>
+					<dt class="text-muted-foreground">Abilities</dt>
+					<dd>
+						{current.facts.abilities
+							.map((a) => `${a.name}${a.hidden ? ' (hidden)' : ''}`)
+							.join(', ')}
+					</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">Height / weight</dt>
+					<dd>{current.facts.height / 10} m · {current.facts.weight / 10} kg</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">Egg groups</dt>
+					<dd>{current.facts.eggGroups.join(', ')}</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">Growth rate</dt>
+					<dd>{current.facts.growthRate}</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">Catch rate / base friendship</dt>
+					<dd>{current.facts.captureRate} / {current.facts.baseHappiness ?? '—'}</dd>
+				</div>
+				<div>
+					<dt class="text-muted-foreground">EV yield</dt>
+					<dd>
+						{current.facts.evYield
+							.map((v, i) => (v ? `${v} ${current.stats[i]?.name}` : ''))
+							.filter(Boolean)
+							.join(', ') || 'None'}
+					</dd>
+				</div>
+			</dl>
+		</section>
+	{/if}
+	<section class="mt-6">
+		<h3 class="font-semibold">Moves in {current.entry?.game ?? 'this game'}</h3>
+		{#if current.learnset.length}
+			<div class="mt-3 grid grid-cols-2 gap-3">
+				<Input
+					type="search"
+					aria-label="Search moves"
+					placeholder="Search moves…"
+					bind:value={moveSearch}
+				/><NativeSelect aria-label="Learn method" class="w-full" bind:value={moveMethod}
+					><option value="all">All methods</option
+					>{#each [...new Set(current.learnset.map((m) => m.method))] as method (method)}<option
+							value={method}>{method}</option
+						>{/each}</NativeSelect
+				>
+			</div>
+			<div class="mt-3 max-h-72 overflow-auto">
+				<Table.Root
+					><Table.Header
+						><Table.Row
+							><Table.Head>Move</Table.Head><Table.Head>Learn</Table.Head><Table.Head
+								>Power</Table.Head
+							><Table.Head>Accuracy</Table.Head><Table.Head>PP</Table.Head></Table.Row
+						></Table.Header
+					><Table.Body
+						>{#each current.learnset.filter((m) => (moveMethod === 'all' || moveMethod === m.method) && `${m.name} ${m.type}`
+									.toLowerCase()
+									.includes(moveSearch.toLowerCase())) as move, i (`${move.id}-${move.method}-${move.level}-${i}`)}<Table.Row
+								><Table.Cell
+									><span class="font-medium">{move.name}</span><span
+										class="block text-xs text-muted-foreground">{move.type} · {move.category}</span
+									></Table.Cell
+								><Table.Cell>{move.method}{move.level ? ` · Lv. ${move.level}` : ''}</Table.Cell
+								><Table.Cell>{move.power ?? '—'}</Table.Cell><Table.Cell
+									>{move.accuracy === null ? '—' : `${move.accuracy}%`}</Table.Cell
+								><Table.Cell>{move.pp ?? '—'}</Table.Cell></Table.Row
+							>{/each}</Table.Body
+					></Table.Root
+				>
+			</div>
+			<p class="mt-2 text-xs text-muted-foreground">
+				Learning methods are game-specific. Move power, accuracy and PP use the current catalog
+				snapshot.
+			</p>
+		{:else}<p class="mt-2 text-sm text-muted-foreground">
+				No learnset is recorded for this game.
+			</p>{/if}
+	</section>
+
 	{#if current.entry}
 		<section class="mt-6">
 			<h3 class="font-semibold">in {current.entry.game}</h3>
@@ -191,7 +306,7 @@
 			<div class="mt-3 grid gap-3 sm:grid-cols-[12rem_minmax(0,1fr)]">
 				<label class="block"
 					>availability
-					<select
+					<NativeSelect
 						name="availability"
 						value={current.entry.availability}
 						class="mt-1 block w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
@@ -199,7 +314,7 @@
 						{#each availabilityValues as value (value)}<option {value}
 								>{availabilityLabels[value]}</option
 							>{/each}
-					</select>
+					</NativeSelect>
 				</label>
 				<label class="block"
 					>note