mirror of
https://github.com/jcreek/LivingDexTracker.git
synced 2026-07-13 11:03:44 +00:00
feat(#46): Componentise the boxes view
This commit is contained in:
Josh Creek
@@ -0,0 +1,107 @@
|
||||
<script lang="ts">
|
||||
export let showForms = true;
|
||||
export let showOrigins = true;
|
||||
export let showShiny = false;
|
||||
export let catchRegion = '';
|
||||
export let catchGame = '';
|
||||
export let toggleForms = () => {};
|
||||
export let toggleOrigins = () => {};
|
||||
export let toggleShiny = () => {};
|
||||
export let getData = () => {};
|
||||
</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"
|
||||
>
|
||||
<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={toggleForms}>
|
||||
Toggle Forms (Currently {showForms ? 'On' : 'Off'})
|
||||
</button>
|
||||
</li>
|
||||
<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>
|
||||
</aside>
|
||||
@@ -0,0 +1,143 @@
|
||||
<script lang="ts">
|
||||
import type { CatchRecord } from '$lib/models/CatchRecord';
|
||||
import type { CombinedData } from '$lib/models/CombinedData';
|
||||
import type { PokedexEntry } from '$lib/models/PokedexEntry';
|
||||
import PokemonSprite from '$lib/components/PokemonSprite.svelte';
|
||||
import Tooltip from '$lib/components/Tooltip.svelte';
|
||||
|
||||
export let showShiny = false;
|
||||
export let combinedData: CombinedData[] | null;
|
||||
export let boxNumbers = Array<number>;
|
||||
export let currentPlacement = 'boxPlacementForms';
|
||||
export let creatingRecords = false;
|
||||
export let totalRecordsCreated = 0;
|
||||
export let failedToLoad = false;
|
||||
export let markBoxAsNotCaught = (boxNumber: number) => {};
|
||||
export let markBoxAsCaught = (boxNumber: number) => {};
|
||||
export let markBoxAsNeedsToEvolve = (boxNumber: number) => {};
|
||||
export let markBoxAsInHome = (boxNumber: number) => {};
|
||||
export let markBoxAsNotInHome = (boxNumber: number) => {};
|
||||
export let createCatchRecords = () => {};
|
||||
|
||||
function cellBackgroundColourClass(catchRecord: CatchRecord) {
|
||||
if (catchRecord.caught) {
|
||||
return 'bg-green-100/50';
|
||||
} else if (catchRecord.haveToEvolve) {
|
||||
return 'bg-yellow-100/50';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function cellBackgroundColourStyle(pokedexEntry: PokedexEntry, catchRecord: CatchRecord) {
|
||||
if (catchRecord.caught || catchRecord.haveToEvolve) {
|
||||
return '';
|
||||
} else {
|
||||
if (pokedexEntry.boxPlacementForms.column % 2 === 0) {
|
||||
return 'background-color: #ffffff';
|
||||
} else {
|
||||
return 'background-color: #f9f9f9;';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="flex-1 p-4 w-full">
|
||||
<div class="max-w-fit mx-auto">
|
||||
{#if combinedData && combinedData.length > 0}
|
||||
<div class="container mx-auto">
|
||||
<div class="flex flex-wrap -mx-2">
|
||||
{#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)}>
|
||||
Mark box as not 'caught'
|
||||
</button>
|
||||
<button class="btn" on:click={markBoxAsCaught(boxNumber)}>
|
||||
Mark box as 'caught'
|
||||
</button>
|
||||
<button class="btn" on:click={markBoxAsNeedsToEvolve(boxNumber)}
|
||||
>Mark box as 'needs to evolve'</button
|
||||
>
|
||||
<button class="btn" on:click={markBoxAsInHome(boxNumber)}
|
||||
>Mark box as 'in Home'</button
|
||||
>
|
||||
<button class="btn" on:click={markBoxAsNotInHome(boxNumber)}
|
||||
>Mark box as not 'in Home'</button
|
||||
>
|
||||
<div class="grid grid-cols-6">
|
||||
{#each combinedData as { pokedexEntry, catchRecord }}
|
||||
{#if pokedexEntry[currentPlacement].box === boxNumber}
|
||||
<div
|
||||
class="pokemon-box {cellBackgroundColourClass(catchRecord)}"
|
||||
style="grid-column-start: {pokedexEntry[currentPlacement]
|
||||
.column}; grid-row-start: {pokedexEntry[currentPlacement].row};
|
||||
{cellBackgroundColourStyle(pokedexEntry, catchRecord)}"
|
||||
>
|
||||
<Tooltip>
|
||||
<div slot="hover-target">
|
||||
{#if catchRecord.inHome}
|
||||
<span
|
||||
class="absolute -top-5 -right-4 z-2 p-1 text-secondary text-lg font-extrabold"
|
||||
>✓</span
|
||||
>
|
||||
{/if}
|
||||
<PokemonSprite
|
||||
pokemonName={pokedexEntry.pokemon}
|
||||
pokedexNumber={pokedexEntry.pokedexNumber}
|
||||
form={pokedexEntry.form}
|
||||
shiny={showShiny}
|
||||
/>
|
||||
<span class="md:hidden">ⓘ</span>
|
||||
</div>
|
||||
<div slot="tooltip">
|
||||
<div class="font-bold">
|
||||
{pokedexEntry.pokemon}
|
||||
{pokedexEntry.form ? `(${pokedexEntry.form})` : ''}
|
||||
</div>
|
||||
<div>{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</div>
|
||||
<div>
|
||||
Caught: {catchRecord.caught ? 'Yes' : 'No'} <br />
|
||||
Needs to Evolve: {catchRecord.haveToEvolve ? 'Yes' : 'No'} <br />
|
||||
In Home: {catchRecord.inHome ? 'Yes' : 'No'}
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{: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>
|
||||
|
||||
<style>
|
||||
.pokemon-box {
|
||||
border: 1px solid #ddd;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user