jcreek/LivingDexTracker
1
0
Fork 0
mirror of https://github.com/jcreek/LivingDexTracker.git synced 2026-07-14 11:33:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(#46): Componentise the boxes view

Browse Source
This commit is contained in:
Josh Creek
2024-07-17 21:11:58 +01:00
parent e4ca722de7
commit 4d9d5e74d7
5 changed files with 332 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/api/combined-data/all/+server.ts
+3 -1
View File
@@ -4,11 +4,13 @@ import CombinedDataRepository from '$lib/repositories/CombinedDataRepository';
export const GET = async ({ url }) => {
const enableForms = url.searchParams.get('enableForms') === 'true';
const region = url.searchParams.get('region');
const game = url.searchParams.get('game');
try {
await dbConnect();
const repo = new CombinedDataRepository();
const combinedData = await repo.findAllCombinedData(enableForms);
const combinedData = await repo.findAllCombinedData(enableForms, region, game);
if (combinedData.length === 0) {
return json({ error: 'No combined data found' }, { status: 404 });
src/routes/mydex/boxes/+page.svelte
+58 -118
View File
@@ -5,8 +5,8 @@
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';
import PokedexSidebar from '$lib/components/pokedex/PokedexSidebar.svelte';
import PokedexViewBoxes from '$lib/components/pokedex/PokedexViewBoxes.svelte';
let combinedData = null as CombinedData[] | null;
let failedToLoad = false;
@@ -17,16 +17,26 @@
});
onDestroy(unsubscribe);
let showOrigins = true;
let showForms = true;
let showShiny = false;
let currentPlacement = 'boxPlacementForms';
let boxNumbers = Array<any>;
let drawerOpen = false;
let catchRegion = '';
let catchGame = '';
let creatingRecords = false;
function toggleOrigins() {
showOrigins = !showOrigins;
}
async function toggleForms() {
showForms = !showForms;
await getData();
}
let showShiny = false;
let currentPlacement = 'boxPlacementForms';
let boxNumbers = Array<any>;
async function toggleShiny() {
showShiny = !showShiny;
if (showShiny) {
@@ -41,7 +51,9 @@
combinedData = null;
}
const response = await fetch(`/api/combined-data/all?enableForms=${showForms}`);
const response = await fetch(
`/api/combined-data/all?enableForms=${showForms}&region=${catchRegion}&game=${catchGame}`
);
const data = await response.json();
if (data.error) {
@@ -61,28 +73,6 @@
$: currentPlacement = showForms ? 'boxPlacementForms' : 'boxPlacement';
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;';
}
}
}
async function updateCatchRecords(
boxNumber: number,
caught: boolean,
@@ -151,95 +141,45 @@
<!-- <PokemonSprite pokemonName={'Raichu'} pokedexNumber={26} form={'Alolan'} /> -->
<div class="container mx-auto">
{#if !localUser}
<p>Please <a href="/signin" class="underline text-primary hover:text-secondary">sign in</a></p>
{:else if combinedData && combinedData.length > 0}
<button class="btn" on:click={toggleForms}>
{showForms ? 'Hide Forms' : 'Show Forms'}
</button>
<button class="btn" on:click={toggleShiny}>
{showShiny ? 'Hide Shiny' : 'Show Shiny'}
</button>
<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"
>&#10003;</span
>
{/if}
<PokemonSprite
pokemonName={pokedexEntry.pokemon}
pokedexNumber={pokedexEntry.pokedexNumber}
form={pokedexEntry.form}
shiny={showShiny}
/>
<span class="md:hidden">&#9432;</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}
{#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>
<PokedexViewBoxes
bind:showShiny
bind:combinedData
bind:boxNumbers
bind:currentPlacement
bind:creatingRecords
bind:failedToLoad
{markBoxAsNotCaught}
{markBoxAsCaught}
{markBoxAsNeedsToEvolve}
{markBoxAsInHome}
{markBoxAsNotInHome}
/>
</div>
{:else if failedToLoad}
<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
visiting the <a href="/mydex" class="underline text-primary hover:text-secondary">My Dex</a> page.
</p>
{:else}
<div class="min-w-max mx-auto">
<h1>Loading Pokédex</h1>
<span class="loading loading-spinner loading-xl"></span>
<div class="drawer-side lg:relative">
<label for="my-drawer" class="drawer-overlay lg:hidden"></label>
<PokedexSidebar
bind:showForms
bind:showOrigins
bind:showShiny
bind:catchRegion
bind:catchGame
{getData}
{toggleForms}
{toggleOrigins}
{toggleShiny}
/>
</div>
{/if}
</div>
<style>
.pokemon-box {
border: 1px solid #ddd;
padding: 1rem;
}
</style>
</div>
{/if}