feat(*): Make mydex use combined data

This commit is contained in:
Josh Creek
2024-07-14 12:07:15 +01:00
parent 308753d2e5
commit 953524cecf
3 changed files with 117 additions and 98 deletions
+15 -10
View File
@@ -16,14 +16,19 @@
}
</script>
<div>
<button on:click={previousPage} disabled={currentPage === 1}>Previous</button>
<button on:click={nextPage} disabled={currentPage === totalPages}>Next</button>
<label for="itemsPerPage">Items per page:</label>
<select id="itemsPerPage" on:change={setItemsPerPage}>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<div class="join mb-4">
<button class="join-item btn" on:click={previousPage} disabled={currentPage === 1}>«</button>
<button class="join-item btn">Page {currentPage} of {totalPages}</button>
<button class="join-item btn" on:click={nextPage} disabled={currentPage === totalPages}>»</button>
</div>
<label for="itemsPerPage">Items per page:</label>
<select
id="itemsPerPage"
class="select select-bordered w-full max-w-xs text-black"
on:change={setItemsPerPage}
>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
@@ -17,7 +17,7 @@
</script>
<div
class="container bg-red-500 text-white rounded-lg shadow-md p-6 flex flex-col md:flex-row gap-4"
class="dex-entry bg-primary/90 text-primary-content rounded-lg shadow-md p-6 flex flex-col md:flex-row gap-4 mb-4"
>
<div class="dex-column pokedex-entry-container">
<div class="flex mb-2">
@@ -31,7 +31,7 @@
/> -->
</div>
<div class="pl-2">
<h3 class="text-xl font-bold pt-1">{pokedexEntry.pokemon}</h3>
<h3 class="text-xl font-bold pt-1 text-secondary">{pokedexEntry.pokemon}</h3>
<sub class="text-gray-200">#{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</sub>
</div>
</div>
@@ -57,45 +57,53 @@
<div class="dex-column catch-record-container bg-white text-black rounded-lg p-4 mb-4 md:mb-0">
<div class="flex items-center">
<label class="block font-bold mr-2" for={`caughtInput-${catchRecord._id}`}>Caught:</label>
<input
type="checkbox"
id={`caughtInput-${catchRecord._id}`}
bind:checked={catchRecord.caught}
class="form-checkbox"
/>
<div class="form-control">
<label class="cursor-pointer label">
<span class="block font-bold mr-2">Caught:</span>
<input
type="checkbox"
bind:checked={catchRecord.caught}
class="checkbox checkbox-primary border-black"
/>
</label>
</div>
</div>
<div class="flex items-center">
<label class="block font-bold mr-2" for={`haveToEvolveInput-${catchRecord._id}`}
>Needs to evolve:</label
>
<input
type="checkbox"
id={`haveToEvolveInput-${catchRecord._id}`}
bind:checked={catchRecord.haveToEvolve}
class="form-checkbox"
/>
<div class="form-control">
<label class="cursor-pointer label">
<span class="block font-bold mr-2">Needs to evolve:</span>
<input
type="checkbox"
bind:checked={catchRecord.haveToEvolve}
class="checkbox checkbox-primary border-black"
/>
</label>
</div>
</div>
<div class="flex items-center">
<label class="block font-bold mr-2" for={`inHomeInput-${catchRecord._id}`}>In home:</label>
<input
type="checkbox"
id={`inHomeInput-${catchRecord._id}`}
bind:checked={catchRecord.inHome}
class="form-checkbox"
/>
<div class="form-control">
<label class="cursor-pointer label">
<span class="block font-bold mr-2">In home:</span>
<input
type="checkbox"
bind:checked={catchRecord.inHome}
class="checkbox checkbox-primary border-black"
/>
</label>
</div>
</div>
{#if pokedexEntry.canGigantamax && showForms}
<div class="flex items-center">
<label class="block font-bold mr-2" for={`hasGigantamaxedInput-${catchRecord._id}`}
>Has Gigantamaxed:</label
>
<input
type="checkbox"
id={`hasGigantamaxedInput-${catchRecord._id}`}
bind:checked={catchRecord.hasGigantamaxed}
class="form-checkbox"
/>
<div class="form-control">
<label class="cursor-pointer label">
<span class="block font-bold mr-2">Has Gigantamaxed:</span>
<input
type="checkbox"
bind:checked={catchRecord.hasGigantamaxed}
class="checkbox checkbox-primary border-black"
/>
</label>
</div>
</div>
{/if}
<p>
@@ -132,19 +140,10 @@
</div>
<style>
.container {
max-width: 1000px;
margin: 10px;
}
.dex-column {
width: 300px;
}
.pokedex-entry-container h3 {
color: #ffd700; /* Gold color */
}
.sprite-container {
width: 68px;
height: 68px;