Merge pull request #72 from jcreek/63-suggestions-for-box-view-improvements

feat(#63): Improve the box view

src/lib/components/pokedex/PokedexEntryCatchRecord.svelte

@@ -32,6 +32,24 @@
 	function updateCatchRecord() {
 		dispatch('updateCatch', { pokedexEntry, catchRecord });
 	}
+
+	function onCaughtChange() {
+		if (!catchRecord) return;
+		// Mutually exclusive with "needs to evolve"
+		if (catchRecord.caught) {
+			catchRecord.haveToEvolve = false;
+		}
+		updateCatchRecord();
+	}
+
+	function onNeedsToEvolveChange() {
+		if (!catchRecord) return;
+		// Mutually exclusive with "caught"
+		if (catchRecord.haveToEvolve) {
+			catchRecord.caught = false;
+		}
+		updateCatchRecord();
+	}
 </script>
 
 <div
@@ -84,7 +102,7 @@
 							type="checkbox"
 							bind:checked={catchRecord.caught}
 							class="checkbox checkbox-primary border-black"
-							on:change={updateCatchRecord}
+							on:change={onCaughtChange}
 						/>
 					</label>
 				</div>
@@ -97,7 +115,7 @@
 							type="checkbox"
 							bind:checked={catchRecord.haveToEvolve}
 							class="checkbox checkbox-primary border-black"
-							on:change={updateCatchRecord}
+							on:change={onNeedsToEvolveChange}
 						/>
 					</label>
 				</div>
@@ -105,7 +123,7 @@
 			<div class="flex items-center">
 				<div class="form-control">
 					<label class="cursor-pointer label">
-						<span class="block font-bold mr-2">In home:</span>
+						<span class="block font-bold mr-2">In Home:</span>
 						<input
 							type="checkbox"
 							bind:checked={catchRecord.inHome}

src/lib/components/pokedex/PokedexViewBoxes.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import type { CatchRecord } from '$lib/models/CatchRecord';
 	import type { CombinedData } from '$lib/models/CombinedData';
 	import { calculateBoxPlacement } from '$lib/utils/boxPlacement';
@@ -19,14 +20,61 @@
 	export let createCatchRecords = () => {};
 	export let onPokemonClick: (pokemon: CombinedData) => void = () => {};
 
-	function cellBackgroundColourClass(catchRecord: CatchRecord | null) {
+	const BOX_VIEW_LAYOUT_STORAGE_KEY = 'livingdex:boxViewLayout:v1';
-		if (catchRecord?.caught) {
+	type BoxViewLayout = 'comfortable' | 'compact' | 'ultra';
-			return 'bg-green-100/50';
+	let boxViewLayout: BoxViewLayout = 'comfortable';
-		} else if (catchRecord?.haveToEvolve) {
+
-			return 'bg-yellow-100/50';
+	onMount(() => {
-		} else {
+		try {
-			return '';
+			const stored = localStorage.getItem(BOX_VIEW_LAYOUT_STORAGE_KEY);
+			if (stored === 'comfortable' || stored === 'compact' || stored === 'ultra') {
+				boxViewLayout = stored;
+			}
+		} catch {
+			// ignore (privacy mode / disabled storage)
 		}
+	});
+
+	function persistBoxViewLayout(next: BoxViewLayout) {
+		boxViewLayout = next;
+		try {
+			localStorage.setItem(BOX_VIEW_LAYOUT_STORAGE_KEY, next);
+		} catch {
+			// ignore
+		}
+	}
+
+	function onBoxViewLayoutChange(event: Event) {
+		const next = (event.currentTarget as HTMLSelectElement).value;
+		if (next === 'comfortable' || next === 'compact' || next === 'ultra') {
+			persistBoxViewLayout(next);
+		}
+	}
+
+	$: boxesPerRow = boxViewLayout === 'comfortable' ? 2 : boxViewLayout === 'compact' ? 3 : 4;
+	$: cellPaddingRem =
+		boxViewLayout === 'comfortable' ? 1 : boxViewLayout === 'compact' ? 0.6 : 0.45;
+	$: spriteSizePx = boxViewLayout === 'comfortable' ? 64 : boxViewLayout === 'compact' ? 52 : 44;
+
+	function cellStatusClasses(catchRecord: CatchRecord | null) {
+		// Keep borders/layout unchanged; rely on clearer fills + badges instead.
+		if (catchRecord?.caught) {
+			// Match legend (green-600) while keeping sprites readable.
+			return 'bg-green-600/15';
+		}
+		if (catchRecord?.haveToEvolve) {
+			// Match legend (yellow-500) while keeping sprites readable.
+			return 'bg-yellow-500/20';
+		}
+		return '';
+	}
+
+	function statusLabel(catchRecord: CatchRecord | null) {
+		const parts: string[] = [];
+		if (catchRecord?.caught) parts.push('Caught');
+		if (catchRecord?.haveToEvolve) parts.push('Needs to evolve');
+		if (catchRecord?.inHome) parts.push('In HOME');
+		return parts.length ? parts.join(', ') : 'Not caught';
 	}
 
 	function cellBackgroundColourStyle(index: number, catchRecord: CatchRecord | null) {
@@ -47,9 +95,90 @@
 	<div class="max-w-fit mx-auto">
 		{#if combinedData && combinedData.length > 0}
 			<div class="container mx-auto">
-				<div class="flex flex-wrap -mx-2">
+				<div class="flex flex-col gap-3 mb-4">
+					<div class="flex flex-wrap items-center gap-3">
+						<label class="label p-0" for="box-view-layout">
+							<span class="label-text font-semibold">Box view layout</span>
+						</label>
+						<select
+							id="box-view-layout"
+							class="select select-bordered select-sm"
+							bind:value={boxViewLayout}
+							on:change={onBoxViewLayoutChange}
+							aria-label="Choose box view layout density"
+						>
+							<option value="comfortable">Comfortable (2 boxes/row)</option>
+							<option value="compact">Compact (3 boxes/row)</option>
+							<option value="ultra">Ultra (4 boxes/row)</option>
+						</select>
+
+						<div class="flex flex-wrap items-center gap-2 text-sm">
+							<span class="font-semibold">Legend:</span>
+							<span
+								class="inline-flex items-center gap-1 rounded-full border border-green-700 bg-green-600 px-2 py-0.5 text-white"
+							>
+								<span class="status-badge status-badge--caught" aria-hidden="true">
+									<svg
+										class="status-icon"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="#ffffff"
+										stroke-width="3"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path d="M5 13l4 4L19 7" />
+									</svg>
+								</span>
+								<span>Caught</span>
+							</span>
+							<span
+								class="inline-flex items-center gap-1 rounded-full border border-yellow-700 bg-yellow-500 px-2 py-0.5 text-white"
+							>
+								<span class="status-badge status-badge--evolve" aria-hidden="true">
+									<svg
+										class="status-icon"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="#ffffff"
+										stroke-width="3"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path d="M12 19V5" />
+										<path d="M5 12l7-7 7 7" />
+									</svg>
+								</span>
+								<span>Caught but needs to evolve</span>
+							</span>
+							<span
+								class="inline-flex items-center gap-1 rounded-full border border-sky-700 bg-sky-600 px-2 py-0.5 text-white"
+							>
+								<span class="status-badge status-badge--home" aria-hidden="true">
+									<svg
+										class="status-icon"
+										viewBox="0 0 24 24"
+										fill="#ffffff"
+										stroke="#ffffff"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path d="M12 3 3 10.5V21a1 1 0 0 0 1 1h5v-6h6v6h5a1 1 0 0 0 1-1V10.5L12 3Z" />
+									</svg>
+								</span>
+								<span>In Home</span>
+							</span>
+						</div>
+					</div>
+				</div>
+
+				<div
+					class="boxes-grid"
+					style="--boxes-per-row: {boxesPerRow}; --cell-padding: {cellPaddingRem}rem; --sprite-size: {spriteSizePx}px;"
+				>
 					{#each boxNumbers as boxNumber}
-						<div class="mb-8 md:w-1/2 px-2">
+						<div class="mb-8">
 							<h2 class="text-xl font-bold mb-4">Box {boxNumber}</h2>
 							<button class="btn" on:click={() => markBoxAsNotCaught(boxNumber)}>
 								Mark box as not 'caught'
@@ -57,44 +186,104 @@
 							<button class="btn" on:click={() => markBoxAsCaught(boxNumber)}>
 								Mark box as 'caught'
 							</button>
-							<button class="btn" on:click={() => markBoxAsNeedsToEvolve(boxNumber)}
+							<button class="btn" on:click={() => markBoxAsNeedsToEvolve(boxNumber)}>
-								>Mark box as 'needs to evolve'</button
+								Mark box as 'needs to evolve'
-							>
+							</button>
-							<button class="btn" on:click={() => markBoxAsInHome(boxNumber)}
+							<button class="btn" on:click={() => markBoxAsInHome(boxNumber)}>
-								>Mark box as 'in Home'</button
+								Mark box as 'in Home'
-							>
+							</button>
-							<button class="btn" on:click={() => markBoxAsNotInHome(boxNumber)}
+							<button class="btn" on:click={() => markBoxAsNotInHome(boxNumber)}>
-								>Mark box as not 'in Home'</button
+								Mark box as not 'in Home'
-							>
+							</button>
 							<div class="grid grid-cols-6">
 								{#each combinedData as { pokedexEntry, catchRecord }, index}
 									{@const placement = calculateBoxPlacement(index)}
 									{#if placement.box === boxNumber}
 										<button
 											type="button"
-											class="pokemon-box {cellBackgroundColourClass(
+											class="pokemon-box {cellStatusClasses(
 												catchRecord
 											)} hover:scale-105 hover:shadow-lg hover:z-50 transition-all cursor-pointer relative"
 											style="grid-column-start: {placement.column}; grid-row-start: {placement.row};
-																{cellBackgroundColourStyle(index, catchRecord)}"
+															{cellBackgroundColourStyle(index, catchRecord)}"
 											on:click={() => onPokemonClick({ pokedexEntry, catchRecord })}
-											aria-label="View details for {pokedexEntry.pokemon}"
+											aria-label="View details for {pokedexEntry.pokemon}. Status: {statusLabel(
+												catchRecord
+											)}"
 										>
 											<Tooltip>
-												<div slot="hover-target">
+												<div slot="hover-target" class="w-full h-full">
+													{#if catchRecord?.caught}
+														<span
+															class="status-badge status-badge--caught absolute left-0.5 status-badge-top z-10"
+															title="Caught"
+														>
+															<svg
+																class="status-icon"
+																viewBox="0 0 24 24"
+																fill="none"
+																stroke="currentColor"
+																stroke-width="3"
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																aria-hidden="true"
+															>
+																<path d="M5 13l4 4L19 7" />
+															</svg>
+															<span class="sr-only">Caught</span>
+														</span>
+													{:else if catchRecord?.haveToEvolve}
+														<span
+															class="status-badge status-badge--evolve absolute left-0.5 status-badge-top z-10"
+															title="Caught but needs to evolve"
+														>
+															<svg
+																class="status-icon"
+																viewBox="0 0 24 24"
+																fill="none"
+																stroke="currentColor"
+																stroke-width="3"
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																aria-hidden="true"
+															>
+																<path d="M12 19V5" />
+																<path d="M5 12l7-7 7 7" />
+															</svg>
+															<span class="sr-only">Caught but needs to evolve</span>
+														</span>
+													{/if}
 													{#if catchRecord?.inHome}
 														<span
-															class="absolute -top-5 -right-4 z-2 p-1 text-secondary text-lg font-extrabold"
+															class="status-badge status-badge--home absolute right-0.5 status-badge-top z-10"
-															>&#10003;</span
+															title="In Pokémon HOME"
 														>
+															<svg
+																class="status-icon"
+																viewBox="0 0 24 24"
+																fill="currentColor"
+																stroke="currentColor"
+																stroke-width="2"
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																aria-hidden="true"
+															>
+																<path
+																	d="M12 3 3 10.5V21a1 1 0 0 0 1 1h5v-6h6v6h5a1 1 0 0 0 1-1V10.5L12 3Z"
+																/>
+															</svg>
+															<span class="sr-only">In HOME</span>
+														</span>
 													{/if}
-													<PokemonSprite
+													<div class="pokemon-box-inner">
-														pokemonName={pokedexEntry.pokemon}
+														<PokemonSprite
-														pokedexNumber={pokedexEntry.pokedexNumber}
+															pokemonName={pokedexEntry.pokemon}
-														form={pokedexEntry.form}
+															pokedexNumber={pokedexEntry.pokedexNumber}
-														shiny={showShiny}
+															form={pokedexEntry.form}
-													/>
+															shiny={showShiny}
-													<span class="md:hidden">&#9432;</span>
+														/>
+														<span class="md:hidden">&#9432;</span>
+													</div>
 												</div>
 												<div slot="tooltip">
 													<div class="font-bold">
@@ -104,7 +293,8 @@
 													<div>{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</div>
 													<div>
 														Caught: {catchRecord?.caught ? 'Yes' : 'No'} <br />
-														Needs to Evolve: {catchRecord?.haveToEvolve ? 'Yes' : 'No'} <br />
+														Caught but needs to Evolve: {catchRecord?.haveToEvolve ? 'Yes' : 'No'}
+														<br />
 														In Home: {catchRecord?.inHome ? 'Yes' : 'No'}
 													</div>
 												</div>
@@ -142,8 +332,73 @@
 </main>
 
 <style>
+	.boxes-grid {
+		display: grid;
+		grid-template-columns: repeat(1, minmax(0, 1fr));
+		gap: 1rem;
+	}
+
+	@media (min-width: 768px) {
+		.boxes-grid {
+			grid-template-columns: repeat(var(--boxes-per-row), minmax(0, 1fr));
+		}
+	}
+
 	.pokemon-box {
 		border: 1px solid #ddd;
-		padding: 1rem;
+		padding: 0;
+		border-radius: 0;
+	}
+
+	.pokemon-box-inner {
+		padding: var(--cell-padding, 1rem);
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+	}
+
+	.pokemon-box :global(img) {
+		width: var(--sprite-size, 64px);
+		height: var(--sprite-size, 64px);
+		object-fit: contain;
+	}
+
+	.status-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.15rem;
+		height: 1.15rem;
+		border-radius: 0.35rem;
+		font-weight: 900;
+		font-size: 0.8rem;
+		line-height: 1;
+		border: none;
+		background: transparent;
+	}
+
+	.status-badge-top {
+		top: 0.7rem;
+	}
+
+	.status-icon {
+		width: 1rem;
+		height: 1rem;
+		display: block;
+	}
+
+	.status-badge--caught {
+		color: #16a34a; /* green-600 */
+	}
+
+	.status-badge--evolve {
+		color: #eab308; /* yellow-500 */
+	}
+
+	.status-badge--home {
+		color: #0284c7; /* sky-600 */
 	}
 </style>

src/routes/pokedex/[id]/+page.svelte

@@ -104,6 +104,14 @@
 	async function updateACatch(event: any) {
 		if (!pokedexId) return;
 		const { catchRecord } = event.detail;
+		// Enforce mutual exclusivity (should be impossible to have both true).
+		const sanitizedCatchRecord: CatchRecord = { ...catchRecord };
+		if (sanitizedCatchRecord.caught) {
+			sanitizedCatchRecord.haveToEvolve = false;
+		}
+		if (sanitizedCatchRecord.haveToEvolve) {
+			sanitizedCatchRecord.caught = false;
+		}
 		if (!localUser?.id) {
 			alert('User not signed in');
 			return;
@@ -114,7 +122,7 @@
 			headers: {
 				'Content-Type': 'application/json'
 			},
-			body: JSON.stringify(catchRecord),
+			body: JSON.stringify(sanitizedCatchRecord),
 			credentials: 'include' as RequestCredentials
 		};