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

feat(#46): Add tooltip to my boxes page

Browse Source
This commit is contained in:
Josh Creek
2024-07-17 18:01:10 +01:00
parent c97347722a
commit 9d4ed604a8
1 changed files with 53 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/mydex/boxes/+page.svelte
+53 -29
View File
@@ -4,11 +4,9 @@
import { type User } from '@supabase/auth-js'; import { type User } from '@supabase/auth-js';
import { type CatchRecord } from '$lib/models/CatchRecord'; import { type CatchRecord } from '$lib/models/CatchRecord';
import { type CombinedData } from '$lib/models/CombinedData'; import { type CombinedData } from '$lib/models/CombinedData';
import PokedexEntryCatchRecord from '$lib/components/pokedex/PokedexEntryCatchRecord.svelte';
import Pagination from '$lib/components/Pagination.svelte';
import { browser } from '$app/environment';
import type { PokedexEntry } from '$lib/models/PokedexEntry'; import type { PokedexEntry } from '$lib/models/PokedexEntry';
import PokemonSprite from '$lib/components/PokemonSprite.svelte'; import PokemonSprite from '$lib/components/PokemonSprite.svelte';
import Tooltip from '$lib/components/Tooltip.svelte';
let combinedData = null as CombinedData[] | null; let combinedData = null as CombinedData[] | null;
let failedToLoad = false; let failedToLoad = false;
@@ -38,8 +36,10 @@
await getData(); await getData();
} }
async function getData() { async function getData(setCombinedDataToNull = true) {
combinedData = null; if (setCombinedDataToNull) {
combinedData = null;
}
const response = await fetch(`/api/combined-data/all?enableForms=${showForms}`); const response = await fetch(`/api/combined-data/all?enableForms=${showForms}`);
const data = await response.json(); const data = await response.json();
@@ -60,6 +60,28 @@
}); });
$: currentPlacement = showForms ? 'boxPlacementForms' : 'boxPlacement'; $: 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;';
}
}
}
</script> </script>
<svelte:head> <svelte:head>
@@ -88,27 +110,34 @@
{#each combinedData as { pokedexEntry, catchRecord }} {#each combinedData as { pokedexEntry, catchRecord }}
{#if pokedexEntry[currentPlacement].box === boxNumber} {#if pokedexEntry[currentPlacement].box === boxNumber}
<div <div
class="pokemon-box" class="pokemon-box {cellBackgroundColourClass(catchRecord)}"
style="grid-column-start: {pokedexEntry[currentPlacement] style="grid-column-start: {pokedexEntry[currentPlacement]
.column}; grid-row-start: {pokedexEntry[currentPlacement].row}" .column}; grid-row-start: {pokedexEntry[currentPlacement].row};
{cellBackgroundColourStyle(pokedexEntry, catchRecord)}"
> >
<PokemonSprite <Tooltip>
pokemonName={pokedexEntry.pokemon} <div slot="hover-target">
pokedexNumber={pokedexEntry.pokedexNumber} <PokemonSprite
form={pokedexEntry.form} pokemonName={pokedexEntry.pokemon}
shiny={showShiny} pokedexNumber={pokedexEntry.pokedexNumber}
/> form={pokedexEntry.form}
<!-- {pokedexEntry.form ? `(${pokedexEntry.form})` : ''} --> shiny={showShiny}
<!-- <div class="font-bold"> />
{pokedexEntry.pokemon} <span class="md:hidden">&#9432;</span>
{pokedexEntry.form ? `(${pokedexEntry.form})` : ''} </div>
</div> --> <div slot="tooltip">
<!-- <div>{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</div> --> <div class="font-bold">
<!-- <div> {pokedexEntry.pokemon}
Caught: {catchRecord.caught ? 'Yes' : 'No'} <br /> {pokedexEntry.form ? `(${pokedexEntry.form})` : ''}
Needs to Evolve: {catchRecord.haveToEvolve ? 'Yes' : 'No'} <br /> </div>
In Home: {catchRecord.inHome ? 'Yes' : 'No'} <div>{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</div>
</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> </div>
{/if} {/if}
{/each} {/each}
@@ -134,10 +163,5 @@
.pokemon-box { .pokemon-box {
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 1rem; padding: 1rem;
background-color: #f9f9f9;
}
.pokemon-box:nth-child(even) {
background-color: #ffffff;
} }
</style> </style>