jcreek/LivingDexTracker
1
0
Fork 0
mirror of https://github.com/jcreek/LivingDexTracker.git synced 2026-07-13 02:53:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(*): Add improvements to the UX and the data seeding

Browse Source
This commit is contained in:
Josh Creek
2026-01-07 20:13:07 +00:00
parent b9a49686c1
commit 28bb39d558
18 changed files with 1069 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/PokemonSprite.svelte
+18 -14
View File
@@ -31,13 +31,20 @@
// 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
/**
* Sprite Resolution Strategy:
* 1. For forms with PokeAPI entries (regional forms): Use PokeAPI ID (e.g., 10107.png)
* 2. For forms without PokeAPI entries (Unown, Burmy, etc.): Use {pokedexNumber}-{form} (e.g., 201-a.png)
* 3. For base forms: Use PokeAPI ID matching species_id
*/
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('!', 'exclamation')
.replaceAll('?', 'question')
.replaceAll('2', 'two')
.replaceAll('3', 'three')
.replaceAll('4', 'four');
@@ -59,20 +66,17 @@
break;
}
// 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;
// Try to find by PokeAPI identifier (e.g., "meowth-alola" -> 10107)
const pokeApiEntry = pokeApiPokemon.find(
(pokemon) => pokemon.identifier === sanitisedPokemonName + '-' + sanitisedForm
);
if (pokeApiEntry) {
// Pattern 1: Use PokeAPI ID (e.g., 10107.png for Meowth-Alola)
pokeApiId = pokeApiEntry.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;
// Pattern 2: Use {pokedexNumber}-{form} (e.g., 201-a.png for Unown-A)
pokeApiId = `${strippedPokedexNumber}-${sanitisedForm}`;
}
} else {
pokeApiId = pokeApiPokemon.find(
src/lib/components/pokedex/PokedexEntryCatchRecord.svelte
+3 -1
View File
@@ -139,6 +139,7 @@
bind:value={catchRecord.personalNotes}
id={`personalNotesInput-${catchRecord._id || pokedexEntry._id}`}
class="form-textarea w-full p-2 border rounded"
style="min-height: 120px;"
on:change={updateCatchRecord}
></textarea>
</p>
@@ -199,7 +200,8 @@
<style>
.dex-column {
width: 300px;
flex: 1;
min-width: 250px;
}
.sprite-container {
src/lib/components/pokedex/PokedexForm.svelte
+34 -8
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { onMount } from 'svelte';
import type { Pokedex } from '$lib/models/Pokedex';
export let pokedex: Partial<Pokedex> = {
@@ -14,6 +15,26 @@
export let onSubmit: () => void;
export let onCancel: () => void;
let games: string[] = [];
let loadingGames = true;
// Fetch available games from the database
onMount(async () => {
try {
const response = await fetch('/api/games');
if (response.ok) {
const data = await response.json();
games = data.games || [];
} else {
console.error('Failed to fetch games');
}
} catch (error) {
console.error('Error fetching games:', error);
} finally {
loadingGames = false;
}
});
// Validation
$: hasAtLeastOneType =
pokedex.isLivingDex || pokedex.isShinyDex || pokedex.isOriginDex || pokedex.isFormDex;
@@ -83,15 +104,20 @@
<label class="label" for="game-scope">
<span class="label-text">Game Scope</span>
</label>
<select id="game-scope" class="select select-bordered" bind:value={pokedex.gameScope}>
<select
id="game-scope"
class="select select-bordered"
bind:value={pokedex.gameScope}
disabled={loadingGames}
>
<option value={null}>All Games</option>
<option value="Scarlet">Scarlet</option>
<option value="Violet">Violet>
<option value="Sword">Sword</option>
<option value="Shield">Shield</option>
<option value="Brilliant Diamond">Brilliant Diamond</option>
<option value="Shining Pearl">Shining Pearl</option>
<option value="Legends: Arceus">Legends: Arceus</option>
{#if loadingGames}
<option disabled>Loading games...</option>
{:else}
{#each games as game}
<option value={game}>{game}</option>
{/each}
{/if}
</select>
</div>
src/lib/components/pokedex/PokedexModal.svelte
+109
View File
@@ -0,0 +1,109 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
export let isOpen: boolean;
export let onClose: () => void;
function handleBackdropClick() {
onClose();
}
function handleKeyDown(event: KeyboardEvent) {
if (event.key === 'Escape' && isOpen) {
onClose();
}
}
onMount(() => {
window.addEventListener('keydown', handleKeyDown);
});
onDestroy(() => {
window.removeEventListener('keydown', handleKeyDown);
});
</script>
{#if isOpen}
<div class="modal modal-open" role="dialog" aria-modal="true">
<div class="modal-box-custom">
<button class="close-button" on:click={onClose} aria-label="Close"> ✕ </button>
<div class="modal-content">
<slot />
</div>
</div>
<div
class="modal-backdrop bg-black/50"
on:click={handleBackdropClick}
on:keydown={() => {}}
></div>
</div>
{/if}
<style>
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal-box-custom {
max-width: 72rem;
width: 100%;
max-height: 90vh;
background-color: rgba(220, 38, 38, 0.95);
border: none;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
outline: none;
position: relative;
border-radius: 1rem;
padding: 0.5rem;
overflow-y: auto;
box-sizing: border-box;
}
.close-button {
position: absolute;
right: 1rem;
top: 1rem;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
z-index: 10;
line-height: 1;
}
.close-button:hover {
background-color: rgba(0, 0, 0, 0.5);
border-color: rgba(255, 255, 255, 0.5);
transform: scale(1.1);
}
.modal-content {
width: 100%;
}
/* Remove margin and background from card inside modal */
.modal-content :global(.dex-entry) {
margin-bottom: 0;
background-color: transparent !important;
box-shadow: none;
}
@media (min-width: 768px) {
.modal-box-custom {
width: 91.666667%;
}
}
</style>
src/lib/components/pokedex/PokedexSidebar.svelte
-149
View File
@@ -1,149 +0,0 @@
<script lang="ts">
import Pagination from '$lib/components/Pagination.svelte';
import type { Pokedex } from '$lib/models/Pokedex';
export let pokedex: Pokedex | null = null;
export let viewAsBoxes = false;
export let currentPage = 1;
export let itemsPerPage = 20;
export let totalPages = 0;
export let showOrigins = true;
export let showShiny = false;
export let catchRegion = '';
export let catchGame = '';
export let toggleOrigins = () => {};
export let toggleShiny = () => {};
export let getData = () => {};
export let toggleViewAsBoxes = () => {};
// Get active type badges
$: typeBadges = pokedex
? [
pokedex.isLivingDex && 'Living',
pokedex.isShinyDex && 'Shiny',
pokedex.isOriginDex && 'Origin',
pokedex.isFormDex && 'Form'
].filter(Boolean)
: [];
</script>
<aside
class="menu bg-gray-800 text-white min-h-full w-64 p-4 lg:fixed xs:top-0 lg:left-0 h-full lg:h-5/6"
>
<!-- Pokédex Info Section -->
{#if pokedex}
<div class="mb-6 pb-4 border-b border-gray-700">
<h2 class="text-xl font-semibold mb-2">{pokedex.name}</h2>
<div class="flex flex-wrap gap-1 mb-2">
{#each typeBadges as badge}
<span class="badge badge-sm badge-primary">{badge}</span>
{/each}
</div>
{#if pokedex.gameScope}
<p class="text-sm text-gray-400">Game: {pokedex.gameScope}</p>
{/if}
<a href="/my-pokedexes" class="btn btn-ghost btn-sm mt-2 w-full"> Manage Pokédexes </a>
</div>
{/if}
<h2 class="text-2xl font-semibold mb-4">Views</h2>
<ul>
<li class="mb-2">
<button class="block p-2 hover:bg-gray-700 rounded" on:click={toggleViewAsBoxes}>
{viewAsBoxes ? 'Switch to List View' : 'Switch to Box View'}
</button>
</li>
</ul>
<h2 class="text-2xl font-semibold mb-4">Filters</h2>
<ul>
<li class="mb-2">
<button class="block p-2 hover:bg-gray-700 rounded" on:click={toggleOrigins}>
Toggle Origins (Currently {showOrigins ? 'On' : 'Off'})
</button>
</li>
<li class="mb-2">
<button class="block p-2 hover:bg-gray-700 rounded" on:click={toggleShiny}>
Toggle Shiny (Currently {showShiny ? 'On' : 'Off'})
</button>
</li>
</ul>
<div class="mb-4">
<label for="catchRegionSelect">Region to catch in:</label>
<select
id="catchRegionSelect"
class="select select-bordered w-full max-w-xs text-black"
bind:value={catchRegion}
on:change={getData}
>
<option value="">All</option>
<option value="Kanto">Kanto (Red, Blue, Yellow, LG: Pikachu, LG: Eevee)</option>
<option value="Johto">Johto (Gold, Silver, Crystal, HG, SS)</option>
<option value="Hoenn">Hoenn (Ruby, Sapphire, Emerald, OR, AS)</option>
<option value="Sinnoh">Sinnoh (Diamond, Pearl, Platinum, BD, SP)</option>
<option value="Unova">Unova (Black, White, Black2, White2, Dream Radar)</option>
<option value="Kalos">Kalos (X, Y)</option>
<option value="Alola">Alola (Sun, Moon, Moon Demo, US, UM)</option>
<option value="Galar">Galar (Sword, Shield)</option>
<option value="Hisui">Hisui (PLA)</option>
<option value="Paldea">Paldea (Scarlet, Violet)</option>
<option value="Unknown">Unknown (Home, Go)</option>
</select>
</div>
<div class="mb-4">
<label for="catchGameSelect">Game to catch in: {catchGame}</label>
<select
id="catchGameSelect"
class="select select-bordered w-full max-w-xs text-black"
bind:value={catchGame}
on:change={getData}
>
<option value="">All</option>
<option value="Red">Red (Kanto)</option>
<option value="Blue">Blue (Kanto)</option>
<option value="Yellow">Yellow (Kanto)</option>
<option value="LG: Pikachu">LG: Pikachu (Kanto)</option>
<option value="LG: Eevee">LG: Eevee (Kanto)</option>
<option value="Gold">Gold (Johto)</option>
<option value="Silver">Silver (Johto)</option>
<option value="Crystal">Crystal (Johto)</option>
<option value="HG">HG (Johto)</option>
<option value="SS">SS (Johto)</option>
<option value="Ruby">Ruby (Hoenn)</option>
<option value="Sapphire">Sapphire (Hoenn)</option>
<option value="Emerald">Emerald (Hoenn)</option>
<option value="OR">OR (Hoenn)</option>
<option value="AS">AS (Hoenn)</option>
<option value="Diamond">Diamond (Sinnoh)</option>
<option value="Pearl">Pearl (Sinnoh)</option>
<option value="Platinum">Platinum (Sinnoh)</option>
<option value="BD">BD (Sinnoh)</option>
<option value="SP">SP (Sinnoh)</option>
<option value="Black">Black (Unova)</option>
<option value="White">White (Unova)</option>
<option value="Black2">Black2 (Unova)</option>
<option value="White2">White2 (Unova)</option>
<option value="Dream Radar">Dream Radar (Unova)</option>
<option value="X">X (Kalos)</option>
<option value="Y">Y (Kalos)</option>
<option value="Sun">Sun (Alola)</option>
<option value="Moon">Moon (Alola)</option>
<option value="Moon Demo">Moon Demo (Alola)</option>
<option value="US">US (Alola)</option>
<option value="UM">UM (Alola)</option>
<option value="Sword">Sword (Galar)</option>
<option value="Shield">Shield (Galar)</option>
<option value="PLA">PLA (Hisui)</option>
<option value="Scarlet">Scarlet (Paldea)</option>
<option value="Violet">Violet (Paldea)</option>
<option value="Home">Home (Unknown)</option>
<option value="Go">Go (Unknown)</option>
</select>
</div>
{#if !viewAsBoxes}
<h2 class="text-2xl font-semibold mb-4">Paging</h2>
<div>
<Pagination bind:currentPage bind:itemsPerPage bind:totalPages />
</div>
{/if}
</aside>
src/lib/components/pokedex/PokedexViewBoxes.svelte
+12 -8
View File
@@ -18,6 +18,7 @@
export let markBoxAsInHome = (boxNumber: number) => {};
export let markBoxAsNotInHome = (boxNumber: number) => {};
export let createCatchRecords = () => {};
export let onPokemonClick: (pokemon: CombinedData) => void = () => {};
function cellBackgroundColourClass(catchRecord: CatchRecord | null) {
if (catchRecord?.caught) {
@@ -51,19 +52,19 @@
{#each boxNumbers as boxNumber}
<div class="mb-8 md:w-1/2 px-2">
<h2 class="text-xl font-bold mb-4">Box {boxNumber}</h2>
<button class="btn" on:click={markBoxAsNotCaught(boxNumber)}>
<button class="btn" on:click={() => markBoxAsNotCaught(boxNumber)}>
Mark box as not 'caught'
</button>
<button class="btn" on:click={markBoxAsCaught(boxNumber)}>
<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
>
<button class="btn" on:click={markBoxAsInHome(boxNumber)}
<button class="btn" on:click={() => markBoxAsInHome(boxNumber)}
>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
>
<div class="grid grid-cols-6">
@@ -72,10 +73,13 @@
? pokedexEntry.boxPlacementForms
: pokedexEntry.boxPlacement}
{#if placement.box === boxNumber}
<div
class="pokemon-box {cellBackgroundColourClass(catchRecord)}"
<button
type="button"
class="pokemon-box {cellBackgroundColourClass(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(pokedexEntry, catchRecord)}"
on:click={() => onPokemonClick({ pokedexEntry, catchRecord })}
aria-label="View details for {pokedexEntry.pokemon}"
>
<Tooltip>
<div slot="hover-target">
@@ -106,7 +110,7 @@
</div>
</div>
</Tooltip>
</div>
</button>
{/if}
{/each}
</div>
src/lib/components/pokedex/PokedexViewList.svelte
-55
View File
@@ -1,55 +0,0 @@
<script lang="ts">
import PokedexEntryCatchRecord from './PokedexEntryCatchRecord.svelte';
import type { CombinedData } from '$lib/models/CombinedData';
export let showOrigins = true;
export let showForms = true;
export let showShiny = false;
export let combinedData: CombinedData[] | null;
export let creatingRecords = false;
export let totalRecordsCreated = 0;
export let failedToLoad = false;
export let updateACatch = (event: any) => {};
export let createCatchRecords = () => {};
export let userId: string | null = null;
export let pokedexId: string;
</script>
<main class="flex-1 p-4 w-full">
<div class="max-w-min mx-auto">
{#if combinedData && combinedData.length > 0}
{#each combinedData as { pokedexEntry, catchRecord }}
<PokedexEntryCatchRecord
{pokedexEntry}
{showOrigins}
{showForms}
{showShiny}
{userId}
{pokedexId}
bind:catchRecord
on:updateCatch={updateACatch}
/>
{/each}
{:else if failedToLoad}
{#if creatingRecords && totalRecordsCreated > 0}
<p>Processed {totalRecordsCreated} Pokédex entries so far...</p>
<p>Please be patient, this may take some time.</p>
{:else if creatingRecords}
<p>Processing...</p>
<p>Please be patient, this may take some time.</p>
{:else}
<h1>Failed to load</h1>
<p>
If you're seeing this, you probably haven't created your Pokédex data yet. Please do so by
clicking this button.
</p>
<button class="btn" on:click={createCatchRecords}>Create Pokédex data</button>
{/if}
{:else}
<div class="min-w-max mx-auto">
<h1>Loading Pokédex</h1>
<span class="loading loading-spinner loading-xl"></span>
</div>
{/if}
</div>
</main>
src/lib/models/PokedexEntry.ts
+2 -34
View File
@@ -12,23 +12,7 @@ export interface PokedexEntry {
regionToEvolveIn: string;
evolutionInformation: string;
catchInformation: string[];
// Regional dex numbers
kantoDexNumber?: number;
johtoDexNumber?: number;
hoennDexNumber?: number;
sinnohDexNumber?: number;
unovaBwDexNumber?: number;
unovaB2w2DexNumber?: number;
kalosCentralDexNumber?: number;
kalosCoastalDexNumber?: number;
kalosMountainDexNumber?: number;
alolaSmDexNumber?: number;
alolaUsumDexNumber?: number;
galarDexNumber?: number;
galarIsleOfArmorDexNumber?: number;
galarCrownTundraDexNumber?: number;
hisuiDexNumber?: number;
paldeaDexNumber?: number;
// Note: Regional dex numbers stored in separate regional_dex_numbers table
}
// Database record type for Supabase
@@ -43,23 +27,7 @@ export interface PokedexEntryDB {
regionToEvolveIn: string | null;
evolutionInformation: string | null;
catchInformation: string[] | null;
// Regional dex numbers - snake_case to match database
kanto_dex_number: number | null;
johto_dex_number: number | null;
hoenn_dex_number: number | null;
sinnoh_dex_number: number | null;
unova_bw_dex_number: number | null;
unova_b2w2_dex_number: number | null;
kalos_central_dex_number: number | null;
kalos_coastal_dex_number: number | null;
kalos_mountain_dex_number: number | null;
alola_sm_dex_number: number | null;
alola_usum_dex_number: number | null;
galar_dex_number: number | null;
galar_isle_of_armor_dex_number: number | null;
galar_crown_tundra_dex_number: number | null;
hisui_dex_number: number | null;
paldea_dex_number: number | null;
// Note: Regional dex numbers stored in separate regional_dex_numbers table
createdAt: string;
updatedAt: string;
}
src/lib/repositories/CombinedDataRepository.ts
+14 -57
View File
@@ -2,8 +2,6 @@ import { type PokedexEntry, type PokedexEntryDB } from '$lib/models/PokedexEntry
import { type CatchRecord, type CatchRecordDB } from '$lib/models/CatchRecord';
import { type CombinedData } from '$lib/models/CombinedData';
import type { SupabaseClient } from '@supabase/supabase-js';
import { getRegionalDexColumnName } from '$lib/utils/regionalDexMapping';
import { calculateBoxPlacement } from '$lib/utils/boxPlacement';
class CombinedDataRepository {
constructor(
@@ -27,23 +25,8 @@ class CombinedDataRepository {
catchInformation: entry.catchInformation || [],
// Box placement will be calculated dynamically after sorting
boxPlacementForms: { box: 0, row: 0, column: 0 },
boxPlacement: { box: 0, row: 0, column: 0 },
kantoDexNumber: entry.kanto_dex_number ?? undefined,
johtoDexNumber: entry.johto_dex_number ?? undefined,
hoennDexNumber: entry.hoenn_dex_number ?? undefined,
sinnohDexNumber: entry.sinnoh_dex_number ?? undefined,
unovaBwDexNumber: entry.unova_bw_dex_number ?? undefined,
unovaB2w2DexNumber: entry.unova_b2w2_dex_number ?? undefined,
kalosCentralDexNumber: entry.kalos_central_dex_number ?? undefined,
kalosCoastalDexNumber: entry.kalos_coastal_dex_number ?? undefined,
kalosMountainDexNumber: entry.kalos_mountain_dex_number ?? undefined,
alolaSmDexNumber: entry.alola_sm_dex_number ?? undefined,
alolaUsumDexNumber: entry.alola_usum_dex_number ?? undefined,
galarDexNumber: entry.galar_dex_number ?? undefined,
galarIsleOfArmorDexNumber: entry.galar_isle_of_armor_dex_number ?? undefined,
galarCrownTundraDexNumber: entry.galar_crown_tundra_dex_number ?? undefined,
hisuiDexNumber: entry.hisui_dex_number ?? undefined,
paldeaDexNumber: entry.paldea_dex_number ?? undefined
boxPlacement: { box: 0, row: 0, column: 0 }
// Note: Regional dex numbers are stored in separate regional_dex_numbers table
};
}
@@ -71,8 +54,8 @@ class CombinedDataRepository {
// Apply filters
if (!enableForms) {
// Filter to only base forms (form is NULL)
query = query.is('form', null);
// Filter to only base forms (form is NULL) OR Unown "A" (since Unown has no base form)
query = query.or('form.is.null,and(pokemon.eq.Unown,form.eq.A)');
}
if (region) {
@@ -83,22 +66,9 @@ class CombinedDataRepository {
query = query.contains('gamesToCatchIn', [game]);
}
// Determine ordering strategy based on game filter
if (game) {
const regionalColumn = getRegionalDexColumnName(game);
if (regionalColumn) {
// Order by regional dex with national dex fallback for NULLs
query = query
.order(regionalColumn, { ascending: true, nullsFirst: false })
.order('pokedexNumber', { ascending: true });
} else {
// Game specified but has no regional dex mapping
query = query.order('pokedexNumber', { ascending: true });
}
} else {
// No game filter - order by national dex number
query = query.order('pokedexNumber', { ascending: true });
}
// Always order by national dex number
// Note: Regional dex ordering would require joining with regional_dex_numbers table
query = query.order('pokedexNumber', { ascending: true });
const { data: entries, error: entriesError } = await query;
@@ -162,8 +132,8 @@ class CombinedDataRepository {
// Apply filters
if (!enableForms) {
// Filter to only base forms (form is NULL)
query = query.is('form', null);
// Filter to only base forms (form is NULL) OR Unown "A" (since Unown has no base form)
query = query.or('form.is.null,and(pokemon.eq.Unown,form.eq.A)');
}
if (region) {
@@ -174,22 +144,9 @@ class CombinedDataRepository {
query = query.contains('gamesToCatchIn', [game]);
}
// Determine ordering strategy based on game filter
if (game) {
const regionalColumn = getRegionalDexColumnName(game);
if (regionalColumn) {
// Order by regional dex with national dex fallback for NULLs
query = query
.order(regionalColumn, { ascending: true, nullsFirst: false })
.order('pokedexNumber', { ascending: true });
} else {
// Game specified but has no regional dex mapping
query = query.order('pokedexNumber', { ascending: true });
}
} else {
// No game filter - order by national dex number
query = query.order('pokedexNumber', { ascending: true });
}
// Always order by national dex number
// Note: Regional dex ordering would require joining with regional_dex_numbers table
query = query.order('pokedexNumber', { ascending: true });
const { data: entries, error: entriesError } = await query;
@@ -247,8 +204,8 @@ class CombinedDataRepository {
// Apply same filters as in findCombinedData
if (!enableForms) {
// Filter to only base forms (form is NULL)
query = query.is('form', null);
// Filter to only base forms (form is NULL) OR Unown "A" (since Unown has no base form)
query = query.or('form.is.null,and(pokemon.eq.Unown,form.eq.A)');
}
if (region) {
src/routes/api/games/+server.ts
+32
View File
@@ -0,0 +1,32 @@
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
/**
* GET /api/games
* Returns all games from the games table, sorted by release year descending (newest first)
*/
export const GET: RequestHandler = async ({ locals }) => {
const { supabase } = locals;
try {
// Query games table for all games, sorted by release year descending
const { data, error } = await supabase
.from('games')
.select('displayName, releaseYear')
.order('releaseYear', { ascending: false })
.order('displayName', { ascending: true }); // Secondary sort by name for same year
if (error) {
console.error('Error fetching games:', error);
return json({ error: 'Failed to fetch games' }, { status: 500 });
}
// Extract just the display names
const gameNames = data.map((row) => row.displayName);
return json({ games: gameNames });
} catch (err) {
console.error('Unexpected error fetching games:', err);
return json({ error: 'Internal server error' }, { status: 500 });
}
};
src/routes/pokedex/[id]/+page.svelte
+143 -75
View File
@@ -5,9 +5,9 @@
import { type CombinedData } from '$lib/models/CombinedData';
import { browser } from '$app/environment';
import type { PokedexEntry } from '$lib/models/PokedexEntry';
import PokedexSidebar from '$lib/components/pokedex/PokedexSidebar.svelte';
import PokedexViewList from '$lib/components/pokedex/PokedexViewList.svelte';
import PokedexViewBoxes from '$lib/components/pokedex/PokedexViewBoxes.svelte';
import PokedexModal from '$lib/components/pokedex/PokedexModal.svelte';
import PokedexEntryCatchRecord from '$lib/components/pokedex/PokedexEntryCatchRecord.svelte';
import type { PageData } from './$types';
export let data: PageData;
@@ -23,40 +23,49 @@
let creatingRecords = false;
let totalRecordsCreated = 0;
let failedToLoad = false;
let catchRegion = '';
let catchGame = '';
let localUser: User | null;
let showOrigins = true;
let showShiny = false;
let drawerOpen = false;
let viewAsBoxes = false;
let boxNumbers: number[] = [];
let showModal = false;
let selectedPokemon: CombinedData | null = null;
// Derive from pokedex config
$: showOrigins = pokedex.isOriginDex;
$: showShiny = pokedex.isShinyDex;
const unsubscribe = user.subscribe((value) => {
localUser = value;
});
onDestroy(unsubscribe);
function toggleOrigins() {
showOrigins = !showOrigins;
function openPokemonModal(pokemon: CombinedData) {
selectedPokemon = pokemon;
showModal = true;
}
async function toggleShiny() {
showShiny = !showShiny;
await getData();
function closePokemonModal() {
showModal = false;
selectedPokemon = null;
}
async function toggleViewAsBoxes() {
viewAsBoxes = !viewAsBoxes;
await getData();
async function handleModalCatchUpdate(event: any) {
await updateACatch(event); // Existing handler
// Sync modal with refreshed data
if (selectedPokemon && combinedData) {
const updated = combinedData.find(
(cd) => cd.pokedexEntry._id === selectedPokemon!.pokedexEntry._id
);
if (updated) {
selectedPokemon = updated;
}
}
}
async function getData(setCombinedDataToNull = true) {
if (setCombinedDataToNull) {
combinedData = null;
}
// Use new pokédex-scoped endpoint
let endpoint = `/api/pokedexes/${pokedexId}/combined-data?page=${currentPage}&limit=${viewAsBoxes ? 9999 : itemsPerPage}&enableForms=${pokedex.isFormDex}&region=${catchRegion}&game=${catchGame}`;
// Use new pokédex-scoped endpoint - always fetch all data for box view
let endpoint = `/api/pokedexes/${pokedexId}/combined-data?page=${currentPage}&limit=9999&enableForms=${pokedex.isFormDex}`;
const response = await fetch(endpoint);
const fetchedData = await response.json();
@@ -66,7 +75,8 @@
}
combinedData = fetchedData.combinedData;
totalPages = fetchedData.totalPages || 0;
if (viewAsBoxes) {
// Always extract box numbers for box view
if (combinedData) {
boxNumbers = [
...new Set(
combinedData.map(({ pokedexEntry }) =>
@@ -116,6 +126,8 @@
needsToEvolve: boolean,
inHome: boolean | null = null
) {
if (!combinedData) return;
let catchRecordsToUpdate = combinedData
.filter(({ pokedexEntry }) =>
(pokedex.isFormDex ? pokedexEntry.boxPlacementForms.box : pokedexEntry.boxPlacement.box) ===
@@ -260,63 +272,119 @@
{#if !localUser}
<p>Please <a href="/signin" class="underline text-primary hover:text-secondary">sign in</a></p>
{:else}
<div class="drawer lg:drawer-open">
<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} />
<div class="drawer-content flex flex-col items-center justify-center md:ml-64">
<label
for="my-drawer"
class="btn btn-secondary drawer-button lg:hidden fixed -left-10 top-1/2 -rotate-90"
>
{drawerOpen ? 'Close Filters' : 'Open Filters'}
</label>
<div class="container mx-auto p-4 max-w-screen-2xl">
<!-- Pokédex Header -->
<div class="card bg-base-100 shadow-xl mb-6">
<div class="card-body">
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
<!-- Left side: Title and metadata -->
<div class="flex-1">
<h1 class="card-title text-3xl mb-3">{pokedex.name}</h1>
{#if viewAsBoxes}
<PokedexViewBoxes
bind:showShiny
showForms={pokedex.isFormDex}
bind:combinedData
bind:boxNumbers
bind:creatingRecords
bind:failedToLoad
{markBoxAsNotCaught}
{markBoxAsCaught}
{markBoxAsNeedsToEvolve}
{markBoxAsInHome}
{markBoxAsNotInHome}
/>
{:else}
<PokedexViewList
bind:showOrigins
showForms={pokedex.isFormDex}
bind:showShiny
bind:combinedData
bind:creatingRecords
bind:totalRecordsCreated
bind:failedToLoad
userId={localUser?.id}
pokedexId={pokedexId}
{updateACatch}
{createCatchRecords}
/>
{/if}
</div>
<div class="drawer-side lg:relative">
<label for="my-drawer" class="drawer-overlay lg:hidden"></label>
<PokedexSidebar
{pokedex}
bind:viewAsBoxes
bind:currentPage
bind:itemsPerPage
bind:totalPages
bind:showOrigins
bind:showShiny
bind:catchRegion
bind:catchGame
{getData}
{toggleOrigins}
{toggleShiny}
{toggleViewAsBoxes}
/>
<div class="flex flex-wrap items-center gap-3">
<!-- Type badges -->
{#if pokedex.isLivingDex}
<div class="badge badge-primary badge-lg gap-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
Living
</div>
{/if}
{#if pokedex.isShinyDex}
<div class="badge badge-secondary badge-lg gap-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
Shiny
</div>
{/if}
{#if pokedex.isOriginDex}
<div class="badge badge-accent badge-lg gap-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
Origin
</div>
{/if}
{#if pokedex.isFormDex}
<div class="badge badge-info badge-lg gap-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
</svg>
Form
</div>
{/if}
<!-- Game scope -->
{#if pokedex.gameScope}
<div class="divider divider-horizontal mx-0"></div>
<div class="flex items-center gap-2 text-base-content/70">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
</svg>
<span class="font-semibold">{pokedex.gameScope}</span>
</div>
{:else}
<div class="divider divider-horizontal mx-0"></div>
<div class="flex items-center gap-2 text-base-content/70">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd" />
</svg>
<span class="font-semibold">All Games</span>
</div>
{/if}
</div>
{#if pokedex.description}
<p class="text-sm text-base-content/70 mt-3">{pokedex.description}</p>
{/if}
</div>
<!-- Right side: Actions -->
<div class="flex flex-row lg:flex-col gap-2">
<a href="/my-pokedexes" class="btn btn-outline btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
</svg>
My Pokédexes
</a>
</div>
</div>
</div>
</div>
<!-- Box View -->
<PokedexViewBoxes
{showShiny}
showForms={pokedex.isFormDex}
bind:combinedData
bind:boxNumbers
bind:creatingRecords
bind:failedToLoad
{markBoxAsNotCaught}
{markBoxAsCaught}
{markBoxAsNeedsToEvolve}
{markBoxAsInHome}
{markBoxAsNotInHome}
{createCatchRecords}
onPokemonClick={openPokemonModal}
/>
</div>
{#if showModal && selectedPokemon}
<PokedexModal isOpen={showModal} onClose={closePokemonModal}>
<PokedexEntryCatchRecord
pokedexEntry={selectedPokemon.pokedexEntry}
bind:catchRecord={selectedPokemon.catchRecord}
{showOrigins}
showForms={pokedex.isFormDex}
{showShiny}
userId={localUser?.id}
pokedexId={pokedexId}
on:updateCatch={handleModalCatchUpdate}
/>
</PokedexModal>
{/if}
{/if}