From c265f90879e9781dbdec08d7b297e0e2ce9bd76c Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Mon, 28 Mar 2022 17:57:41 +0000
Subject: add pets category

---
 src/lib/APITypes.d.ts                       | 39 ++++++++++++++
 src/lib/sections/Pets.svelte                | 79 +++++++++++++++++++++++++++++
 src/routes/player/[player]/[profile].svelte | 10 ++++
 3 files changed, 128 insertions(+)
 create mode 100644 src/lib/sections/Pets.svelte

(limited to 'src')

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>
-- 
cgit