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 1c207455fb
commit 6c9ec0239c
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 CatchRecord } from '$lib/models/CatchRecord';
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 PokemonSprite from '$lib/components/PokemonSprite.svelte';
import Tooltip from '$lib/components/Tooltip.svelte';
let combinedData = null as CombinedData[] | null;
let failedToLoad = false;
@@ -38,8 +36,10 @@
await getData();
}
async function getData() {
combinedData = null;
async function getData(setCombinedDataToNull = true) {
if (setCombinedDataToNull) {
combinedData = null;
}
const response = await fetch(`/api/combined-data/all?enableForms=${showForms}`);
const data = await response.json();
@@ -60,6 +60,28 @@
});
$: 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>
<svelte:head>
@@ -88,27 +110,34 @@
{#each combinedData as { pokedexEntry, catchRecord }}
{#if pokedexEntry[currentPlacement].box === boxNumber}
<div
class="pokemon-box"
class="pokemon-box {cellBackgroundColourClass(catchRecord)}"
style="grid-column-start: {pokedexEntry[currentPlacement]
.column}; grid-row-start: {pokedexEntry[currentPlacement].row}"
.column}; grid-row-start: {pokedexEntry[currentPlacement].row};
{cellBackgroundColourStyle(pokedexEntry, catchRecord)}"
>
<PokemonSprite
pokemonName={pokedexEntry.pokemon}
pokedexNumber={pokedexEntry.pokedexNumber}
form={pokedexEntry.form}
shiny={showShiny}
/>
<!-- {pokedexEntry.form ? `(${pokedexEntry.form})` : ''} -->
<!-- <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> -->
<Tooltip>
<div slot="hover-target">
<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}
@@ -134,10 +163,5 @@
.pokemon-box {
border: 1px solid #ddd;
padding: 1rem;
background-color: #f9f9f9;
}
.pokemon-box:nth-child(even) {
background-color: #ffffff;
}
</style>