diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/APITypes.d.ts | 39 | ||||
| -rw-r--r-- | src/lib/sections/Pets.svelte | 79 | ||||
| -rw-r--r-- | src/routes/player/[player]/[profile].svelte | 10 |
3 files changed, 128 insertions, 0 deletions
diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts index a78da0d..926072c 100644 --- a/src/lib/APITypes.d.ts +++ b/src/lib/APITypes.d.ts @@ -1,3 +1,6 @@ +import type typedHypixelApi from 'typed-hypixel-api' + + export interface CleanMemberProfile { member: CleanMemberProfilePlayer profile: CleanFullProfileBasicMembers @@ -276,3 +279,39 @@ export interface ClaimedSkyBlockItem { name: string timestamp: number } + +export interface Pet { + id: string + xp: number + level: number + tier: typedHypixelApi.Pet['tier'] + skin: string | null + item: ItemListItem | null +} +export interface PetsData { + active: Pet | null + list: Pet[] + missingIds: string[] +} + +export interface ItemRequirement { + dungeon: { + type: string + level: number + } +} +export interface ItemListItem { + id: string + vanillaId: string + tier: string | null + display: { + name: string + glint: boolean + } + npcSellPrice: number | null + requirements: ItemRequirement | null +} +export interface ItemListData { + lastUpdated: number + list: ItemListItem[] +} diff --git a/src/lib/sections/Pets.svelte b/src/lib/sections/Pets.svelte new file mode 100644 index 0000000..7f660c4 --- /dev/null +++ b/src/lib/sections/Pets.svelte @@ -0,0 +1,79 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import { cleanId, toRomanNumerals, toTitleCase } from '$lib/utils' + + export let data: CleanMemberProfile + + // we convert it to a set to remove duplicates + const petsAcquiredCount = new Set(data.member.pets.list.map(p => p.id)).size + const totalPetsCount = data.member.pets.missingIds.length + petsAcquiredCount +</script> + +{#if data.member.zones} + <p class="zones-visited-text"> + Pets acquired: + <span class="zones-visited-number"> + <b>{petsAcquiredCount}</b>/{totalPetsCount} + </span> + </p> + <div class="pets-list"> + {#each data.member.pets.list as pet} + <div class="individual-pet-data"> + <h3>{cleanId(pet.id.toLowerCase())}</h3> + <p>Level: <b>{pet.level.toLocaleString()}</b></p> + <p>Tier: <b>{toTitleCase(pet.tier)}</b></p> + {#if pet.item} + <p>Item: <b>{pet.item.display.name}</b></p> + {/if} + </div> + {/each} + </div> + {#if data.member.pets.missingIds.length > 0} + <h3 class="missing-pets-title">Missing</h3> + <ul> + {#each data.member.pets.missingIds as petId} + <li class="missing-pet">{toTitleCase(cleanId(petId.toLowerCase()))}</li> + {/each} + </ul> + {/if} +{/if} + +<style> + p { + margin: 0; + } + .zones-visited-text { + color: var(--theme-darker-text); + margin: 0.5em 0; + } + .zones-visited-number { + color: var(--theme-main-text); + } + .missing-pet { + opacity: 0.5; + } + .individual-pet-data { + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.1); + padding: 0.75em; + border-radius: 1em; + width: 9rem; + } + + .pets-list { + display: flex; + flex-wrap: wrap; + max-width: 40rem; + column-gap: 0.5rem; + row-gap: 0.5rem; + } + + .missing-pets-title { + margin-top: 1rem; + } + + ul { + padding-left: 1em; + margin: 0; + } +</style> diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte index 848bfb4..6a720ce 100644 --- a/src/routes/player/[player]/[profile].svelte +++ b/src/routes/player/[player]/[profile].svelte @@ -50,6 +50,7 @@ import Toc from '$lib/Toc.svelte' import Harp from '$lib/sections/Harp.svelte' import Claimed from '$lib/sections/Claimed.svelte' + import Pets from '$lib/sections/Pets.svelte' export let data: CleanMemberProfile export let pack: MatcherFile @@ -71,6 +72,7 @@ if (data.profile.bank.balance !== undefined) categories.push('bank') if (data.member.harp.selected !== null) categories.push('harp') if (data.member.claimed && data.member.claimed.length > 0) categories.push('claimed') + if (data.member.pets.list.length > 0) categories.push('pets') categories.push('leaderboards') } @@ -218,6 +220,14 @@ </Collapsible> </section> {/if} + {#if categories.includes('pets')} + <section> + <Collapsible id="pets"> + <h2 slot="title">Pets</h2> + <Pets {data} /> + </Collapsible> + </section> + {/if} <section> <Collapsible id="leaderboards"> <h2 slot="title">Leaderboards</h2> |