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

Merge pull request #75 from jcreek/59-add-outlines-to-cells-in-box-view-even-if-there-is-no-pokemon-to-show-there

Browse Source 
feat(#59): Add outlines to empty box cells
This commit is contained in:
Josh Creek
2026-01-10 10:32:25 +00:00
committed by GitHub
parent fc09b5f2f1 84c6de6b62
commit 845cc1c739
1 changed files with 36 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/pokedex/PokedexViewBoxes.svelte
+36 -5
View File
@@ -191,6 +191,9 @@
const checked = (event.currentTarget as HTMLInputElement).checked; const checked = (event.currentTarget as HTMLInputElement).checked;
if (checked) filterInHome = false; if (checked) filterInHome = false;
} }
const POKEMON_PER_BOX = 30;
const BOX_POSITIONS = Array.from({ length: POKEMON_PER_BOX }, (_, i) => i);
</script> </script>
<main class="flex-1 p-4 w-full"> <main class="flex-1 p-4 w-full">
@@ -435,18 +438,22 @@
</div> </div>
</div> </div>
<div class="grid grid-cols-6"> <div class="grid grid-cols-6">
{#each combinedData as { pokedexEntry, catchRecord }, index} {#each BOX_POSITIONS as positionInBox}
{@const placement = calculateBoxPlacement(index)} {@const globalIndex = (boxNumber - 1) * POKEMON_PER_BOX + positionInBox}
{@const placement = calculateBoxPlacement(globalIndex)}
{@const entry = combinedData?.[globalIndex]}
{@const pokedexEntry = entry?.pokedexEntry}
{@const catchRecord = entry?.catchRecord ?? null}
{@const isFilteredOut = {@const isFilteredOut =
filtersActive && !!filtersKey && !matchesFilters(catchRecord)} !!entry && filtersActive && !!filtersKey && !matchesFilters(catchRecord)}
{#if placement.box === boxNumber} {#if entry && pokedexEntry}
<button <button
type="button" type="button"
class="pokemon-box {cellStatusClasses(catchRecord)} {isFilteredOut class="pokemon-box {cellStatusClasses(catchRecord)} {isFilteredOut
? 'pokemon-box--filtered-out' ? 'pokemon-box--filtered-out'
: 'hover:scale-105 hover:shadow-lg hover:z-50'} transition-all cursor-pointer relative" : '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}; style="grid-column-start: {placement.column}; grid-row-start: {placement.row};
{cellBackgroundColourStyle(index, catchRecord)}" {cellBackgroundColourStyle(globalIndex, catchRecord)}"
aria-disabled={isFilteredOut} aria-disabled={isFilteredOut}
on:click={() => { on:click={() => {
if (!isFilteredOut) onPokemonClick({ pokedexEntry, catchRecord }); if (!isFilteredOut) onPokemonClick({ pokedexEntry, catchRecord });
@@ -544,6 +551,19 @@
</div> </div>
</Tooltip> </Tooltip>
</button> </button>
{:else}
<button
type="button"
class="pokemon-box pokemon-box--empty"
disabled
style="grid-column-start: {placement.column}; grid-row-start: {placement.row};
{cellBackgroundColourStyle(globalIndex, null)}"
aria-label="Empty box slot"
>
<div class="pokemon-box-inner" aria-hidden="true">
<span class="sprite-placeholder" />
</div>
</button>
{/if} {/if}
{/each} {/each}
</div> </div>
@@ -600,6 +620,11 @@
cursor: default; cursor: default;
} }
.pokemon-box--empty {
opacity: 0.55;
cursor: default;
}
.pokemon-box-inner { .pokemon-box-inner {
padding: var(--cell-padding, 1rem); padding: var(--cell-padding, 1rem);
width: 100%; width: 100%;
@@ -616,6 +641,12 @@
object-fit: contain; object-fit: contain;
} }
.sprite-placeholder {
width: var(--sprite-size, 64px);
height: var(--sprite-size, 64px);
display: block;
}
.status-badge { .status-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;