From 054fe6ddee1ecbbf336c1ec9fbce08ebd0a54ebd Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Thu, 15 Dec 2022 18:22:09 -0600
Subject: fix mayor skin + move sections dir

---
 src/routes/election/+page.svelte                   |   2 +-
 src/routes/player/[player]/[profile]/+page.svelte  |  38 +++----
 .../[profile]/sections/AccessoryBagUpgrades.svelte | 100 +++++++++++++++++++
 .../[profile]/sections/Achievements.svelte         |  87 ++++++++++++++++
 .../[player]/[profile]/sections/Armor.svelte       |  14 +++
 .../[player]/[profile]/sections/Auctions.svelte    | 109 +++++++++++++++++++++
 .../player/[player]/[profile]/sections/Bank.svelte |  89 +++++++++++++++++
 .../[player]/[profile]/sections/Claimed.svelte     |  33 +++++++
 .../[player]/[profile]/sections/Collections.svelte |  62 ++++++++++++
 .../player/[player]/[profile]/sections/Coop.svelte |  79 +++++++++++++++
 .../[player]/[profile]/sections/Essence.svelte     |  27 +++++
 .../[profile]/sections/FarmingContests.svelte      |  62 ++++++++++++
 .../player/[player]/[profile]/sections/Harp.svelte |  72 ++++++++++++++
 .../[player]/[profile]/sections/Infobox.svelte     |  83 ++++++++++++++++
 .../[player]/[profile]/sections/Inventories.svelte | 105 ++++++++++++++++++++
 .../[profile]/sections/Leaderboards.svelte         |  46 +++++++++
 .../[player]/[profile]/sections/Minions.svelte     |  40 ++++++++
 .../player/[player]/[profile]/sections/Pets.svelte |  79 +++++++++++++++
 .../[player]/[profile]/sections/Skills.svelte      |  87 ++++++++++++++++
 .../[player]/[profile]/sections/Slayers.svelte     |  74 ++++++++++++++
 .../[player]/[profile]/sections/StatList.svelte    |  48 +++++++++
 .../[player]/[profile]/sections/Zones.svelte       |  42 ++++++++
 22 files changed, 1358 insertions(+), 20 deletions(-)
 create mode 100644 src/routes/player/[player]/[profile]/sections/AccessoryBagUpgrades.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Achievements.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Armor.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Auctions.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Bank.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Claimed.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Collections.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Coop.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Essence.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/FarmingContests.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Harp.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Infobox.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Inventories.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Leaderboards.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Minions.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Pets.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Skills.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Slayers.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/StatList.svelte
 create mode 100644 src/routes/player/[player]/[profile]/sections/Zones.svelte

(limited to 'src/routes')

diff --git a/src/routes/election/+page.svelte b/src/routes/election/+page.svelte
index dc4719e..54ac668 100644
--- a/src/routes/election/+page.svelte
+++ b/src/routes/election/+page.svelte
@@ -4,7 +4,7 @@
 	import { colorCodes, formattingCodeToHtml, millisecondsToTime, skyblockTime } from '$lib/utils'
 	import type { ElectionData } from '$lib/APITypes'
 	import { onDestroy, onMount } from 'svelte'
-	import MayorSkin from '$lib/MayorSkin.svelte'
+	import MayorSkin from '../../lib/MayorSkin.svelte'
 	import { invalidate } from '$app/navigation'
 	import { browser } from '$app/environment'
 
diff --git a/src/routes/player/[player]/[profile]/+page.svelte b/src/routes/player/[player]/[profile]/+page.svelte
index 247619d..8a3adbb 100644
--- a/src/routes/player/[player]/[profile]/+page.svelte
+++ b/src/routes/player/[player]/[profile]/+page.svelte
@@ -1,31 +1,31 @@
 <script lang="ts">
 	import { inventoryIconMap, skyblockItemToUrl } from '$lib/minecraft/inventory'
-	import FarmingContests from '$lib/sections/FarmingContests.svelte'
-	import Leaderboards from '$lib/sections/Leaderboards.svelte'
-	import Achievements from '$lib/sections/Achievements.svelte'
-	import Inventories from '$lib/sections/Inventories.svelte'
-	import Collections from '$lib/sections/Collections.svelte'
+	import FarmingContests from './sections/FarmingContests.svelte'
+	import Leaderboards from './sections/Leaderboards.svelte'
+	import Achievements from './sections/Achievements.svelte'
+	import Inventories from './sections/Inventories.svelte'
+	import Collections from './sections/Collections.svelte'
 	import { chooseDefaultBackground } from '$lib/backgrounds'
 	import BackgroundImage from '$lib/BackgroundImage.svelte'
 	import type { CleanMemberProfile } from '$lib/APITypes'
 	import Username from '$lib/minecraft/Username.svelte'
-	import StatList from '$lib/sections/StatList.svelte'
-	import Auctions from '$lib/sections/Auctions.svelte'
-	import Infobox from '$lib/sections/Infobox.svelte'
-	import Minions from '$lib/sections/Minions.svelte'
-	import Essence from '$lib/sections/Essence.svelte'
-	import Slayers from '$lib/sections/Slayers.svelte'
+	import StatList from './sections/StatList.svelte'
+	import Auctions from './sections/Auctions.svelte'
+	import Infobox from './sections/Infobox.svelte'
+	import Minions from './sections/Minions.svelte'
+	import Essence from './sections/Essence.svelte'
+	import Slayers from './sections/Slayers.svelte'
 	import type { MatcherFile } from 'skyblock-assets'
-	import Claimed from '$lib/sections/Claimed.svelte'
+	import Claimed from './sections/Claimed.svelte'
 	import Collapsible from '$lib/Collapsible.svelte'
-	import Skills from '$lib/sections/Skills.svelte'
+	import Skills from './sections/Skills.svelte'
 	import { generateInfobox } from '$lib/profile'
-	import Zones from '$lib/sections/Zones.svelte'
-	import Armor from '$lib/sections/Armor.svelte'
-	import Harp from '$lib/sections/Harp.svelte'
-	import Pets from '$lib/sections/Pets.svelte'
-	import Coop from '$lib/sections/Coop.svelte'
-	import Bank from '$lib/sections/Bank.svelte'
+	import Zones from './sections/Zones.svelte'
+	import Armor from './sections/Armor.svelte'
+	import Harp from './sections/Harp.svelte'
+	import Pets from './sections/Pets.svelte'
+	import Coop from './sections/Coop.svelte'
+	import Bank from './sections/Bank.svelte'
 	import type { PageData } from './$types'
 	import Header from '$lib/Header.svelte'
 	import Emoji from '$lib/Emoji.svelte'
diff --git a/src/routes/player/[player]/[profile]/sections/AccessoryBagUpgrades.svelte b/src/routes/player/[player]/[profile]/sections/AccessoryBagUpgrades.svelte
new file mode 100644
index 0000000..74530d1
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/AccessoryBagUpgrades.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import Emoji from '$lib/Emoji.svelte'
+	import ListItemWithIcon from '$lib/ListItemWithIcon.svelte'
+	import { cleanId, skyblockTime } from '$lib/utils'
+
+	export let data: CleanMemberProfile
+
+	$: bagData = data.member.accessoryBagUpgrades
+</script>
+
+<span class="accessory-bag-upgrades">
+	<h3>Upgrades</h3>
+	<div class="accessory-bag-info-text">
+		<p>Purchased: <b>{bagData.upgrades.purchased}</b></p>
+		<p>Coins spent: <b>{bagData.upgrades.coinsSpent.toLocaleString()}</b></p>
+		<p>Extra slots: <b>{bagData.upgrades.extraSlots}</b></p>
+	</div>
+
+	<h3>Powers</h3>
+	{#if bagData.powers.selected}
+		<p class="accessory-bag-info-text">
+			Selected: <b>{cleanId(bagData.powers.selected)}</b>
+		</p>
+	{/if}
+	<ul>
+		{#each bagData.powers.list as power}
+			<li>
+				{#if bagData.powers.selected === power}
+					<b>{cleanId(power)}</b>
+				{:else}
+					{cleanId(power)}
+				{/if}
+			</li>
+		{/each}
+	</ul>
+
+	<div class="tuning-templates">
+		{#each bagData.tuningTemplates as template, template_index}
+			<div class="tuning-template">
+				<h3>Template #{template_index + 1}</h3>
+				<div class="accessory-bag-info-text">
+					{#each Object.entries(template) as [statName, statValue]}
+						<p>{cleanId(statName)}: <b>{statValue}</b></p>
+					{/each}
+				</div>
+			</div>
+		{/each}
+	</div>
+</span>
+
+<style>
+	p,
+	ul {
+		margin: 0;
+	}
+	ul {
+		padding-left: 1.5em;
+	}
+	h3 {
+		margin: 0.5em 0 0 0;
+	}
+
+	.accessory-bag-info-text {
+		color: var(--theme-darker-text);
+	}
+	.accessory-bag-info-text b {
+		color: var(--theme-main-text);
+	}
+
+	.tuning-templates {
+		display: flex;
+		flex-wrap: wrap;
+		max-width: 40rem;
+		column-gap: 0.5rem;
+		row-gap: 0.5rem;
+		margin-top: 1rem;
+	}
+	.tuning-template {
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: rgba(0, 0, 0, 0.1);
+		padding: 0.75em;
+		border-radius: 1em;
+	}
+	.tuning-template h3 {
+		margin: 0;
+	}
+
+	.accessory-bag-upgrades {
+		/* width: 5rem; */
+	}
+	@media only screen and (min-width: 1160px) {
+		.accessory-bag-upgrades {
+			display: inline-grid;
+			position: relative;
+			top: -1.5em;
+			left: 0.5em;
+		}
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Achievements.svelte b/src/routes/player/[player]/[profile]/sections/Achievements.svelte
new file mode 100644
index 0000000..92ba468
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Achievements.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import Tooltip from '$lib/Tooltip.svelte'
+	export let data: CleanMemberProfile
+</script>
+
+{#if data.member.achievements}
+	<h3>
+		Tiered
+		<span class="achievement-count">
+			({data.member.achievements.tiered.filter(a => a.amount).length}/{data.member.achievements
+				.tiered.length})
+		</span>
+	</h3>
+	<ul>
+		{#each data.member.achievements.tiered as achievement}
+			<li class="achievement">
+				<Tooltip>
+					<span slot="tooltip">
+						{achievement.description}
+					</span>
+
+					<span class:achievement-locked={achievement.amount === 0}>
+						{achievement.name}: {#if achievement.next}
+							<b class="achievement-amount">{achievement.amount}</b>/{achievement.next}
+						{:else}
+							<span class="achievement-amount achievement-amount-maxed">{achievement.amount}</span>
+						{/if}
+					</span>
+				</Tooltip>
+			</li>
+		{/each}
+	</ul>
+
+	<h3>
+		Challenge
+		<span class="achievement-count">
+			({data.member.achievements.challenge.filter(a => a.unlocked).length}/{data.member.achievements
+				.challenge.length})
+		</span>
+	</h3>
+	<ul>
+		{#each data.member.achievements.challenge as achievement}
+			<li class="achievement">
+				<Tooltip>
+					<span slot="tooltip">
+						{achievement.description}
+					</span>
+
+					{#if achievement.unlocked}
+						<span>
+							{achievement.name}
+						</span>
+					{:else}
+						<span class="achievement-locked">
+							{achievement.name}
+						</span>
+					{/if}
+				</Tooltip>
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	ul {
+		margin: 0;
+		padding-left: 1em;
+	}
+
+	.achievement-locked {
+		opacity: 0.5;
+	}
+
+	.achievement-count {
+		color: var(--theme-darker-text);
+		font-weight: normal;
+	}
+
+	.achievement-amount {
+		opacity: 0.9;
+	}
+	.achievement-amount-maxed {
+		color: #0e0;
+		opacity: 1;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Armor.svelte b/src/routes/player/[player]/[profile]/sections/Armor.svelte
new file mode 100644
index 0000000..285a898
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Armor.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import Inventory from '$lib/minecraft/Inventory.svelte'
+	import type { MatcherFile } from 'skyblock-assets'
+
+	export let data: CleanMemberProfile
+	export let pack: MatcherFile
+</script>
+
+{#if data.member.inventories}
+	<span>
+		<Inventory items={data.member.inventories.armor} name="armor" groupLimit={1} {pack} />
+	</span>
+{/if}
diff --git a/src/routes/player/[player]/[profile]/sections/Auctions.svelte b/src/routes/player/[player]/[profile]/sections/Auctions.svelte
new file mode 100644
index 0000000..50d47b6
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Auctions.svelte
@@ -0,0 +1,109 @@
+<!-- 
+	@component
+
+	A list of the player's past auctions, and their auction stats.
+-->
+<script lang="ts">
+	import { cleanId, millisecondsToTime } from '$lib/utils'
+	import type { CleanMemberProfile, StatItem } from '$lib/APITypes'
+	import { fetchApi } from '$lib/api'
+	import type { MatcherFile } from 'skyblock-assets'
+	import Auction from '$lib/Auction.svelte'
+
+	export let data: CleanMemberProfile
+	export let stats: StatItem[]
+	export let pack: MatcherFile
+
+	let onlyThisProfile = true
+
+	let auctions: any[] = []
+	let loading = true
+
+	let page = 0
+	let totalPages: number | undefined = undefined
+
+	async function updateAuctions() {
+		loading = true
+		const thisPage = page
+		page += 1
+		const auctionsResponse = await fetchApi(
+			`playerauctions/${data.member.uuid}?page=${thisPage}`,
+			fetch
+		).then(r => r.json())
+		loading = false
+		auctions = [...auctions, ...auctionsResponse.auctions]
+		totalPages = auctionsResponse.pages
+	}
+
+	updateAuctions()
+</script>
+
+<div class="auction-stats-and-list-container">
+	<ul>
+		{#each stats.sort((a, b) => b.value - a.value) as stat}
+			<li>
+				<span class="stat-name">{cleanId(stat.categorizedName)}:</span>
+				<span class="stat-value">
+					{#if stat.unit === 'time'}
+						{millisecondsToTime(stat.value)}
+					{:else}
+						{stat.value.toLocaleString()}
+					{/if}
+				</span>
+			</li>
+		{/each}
+	</ul>
+
+	<div class="player-auctions-list-container">
+		{#if loading || auctions.length > 0}
+			<h3>Auctions sold</h3>
+		{/if}
+		{#if auctions.length > 0}
+			<div class="player-auctions-list">
+				{#each auctions as auction}
+					{#if !onlyThisProfile || auction.sellerProfileUuid == data.profile.uuid}
+						<Auction {auction} {pack} />
+					{/if}
+				{/each}
+			</div>
+			{#if !loading && page != totalPages}
+				<button on:click={updateAuctions}>Show more</button>
+			{/if}
+		{/if}
+		{#if loading}
+			Loading...
+		{/if}
+	</div>
+</div>
+
+<style>
+	li {
+		position: relative;
+	}
+	ul {
+		padding-left: 1em;
+		margin-top: 0.5em;
+		width: max-content;
+	}
+	.auction-stats-and-list-container {
+		display: grid;
+		grid-template-columns: 1fr auto;
+	}
+
+	@media (max-width: 600px) {
+		.auction-stats-and-list-container {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	.player-auctions-list {
+		display: flex;
+		flex-wrap: wrap;
+		column-gap: 0.5rem;
+		row-gap: 0.5rem;
+	}
+	.player-auctions-list-container {
+		margin-top: 0.5em;
+		margin-left: 0.5em;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Bank.svelte b/src/routes/player/[player]/[profile]/sections/Bank.svelte
new file mode 100644
index 0000000..9bd2b8f
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Bank.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import Tooltip from '$lib/Tooltip.svelte'
+	import ConditionalLink from '$lib/ConditionalLink.svelte'
+	import {
+		colorCodeCharacter,
+		formattingCodeToHtml,
+		millisecondsToTime,
+		removeFormattingCode,
+	} from '$lib/utils'
+
+	export let data: CleanMemberProfile
+</script>
+
+{#if data.profile.bank}
+	<div class="bank-main-current-balance">
+		<p>
+			Current bank balance:
+			<span class="bank-main-current-balance-value">
+				<b>{data.profile.bank.balance?.toLocaleString()}</b> coins
+			</span>
+		</p>
+		<p>
+			Purse:
+			<span class="bank-main-current-balance-value">
+				<b>{data.member.purse.toLocaleString()}</b> coins
+			</span>
+		</p>
+	</div>
+	{#each data.profile.bank.history as transaction}
+		<div>
+			<span class="transaction-player">
+				<ConditionalLink
+					href="/player/{removeFormattingCode(transaction.name)}"
+					isWrapped={transaction.name.startsWith(colorCodeCharacter)}
+				>
+					{@html formattingCodeToHtml(transaction.name)}
+				</ConditionalLink>
+			</span>
+			<Tooltip>
+				<span slot="tooltip">
+					New balance: <b>{transaction.total.toLocaleString()}</b>
+				</span>
+				<span
+					class:difference-positive={transaction.change > 0}
+					class:difference-negative={transaction.change < 0}
+				>
+					{transaction.change > 0
+						? '+' + transaction.change.toLocaleString()
+						: transaction.change.toLocaleString()}
+				</span>
+			</Tooltip>
+
+			<span class="transaction-timeago">
+				{millisecondsToTime(Date.now() - transaction.timestamp)} ago
+			</span>
+		</div>
+	{/each}
+{/if}
+
+<style>
+	.difference-positive {
+		color: #0f0;
+	}
+	.difference-negative {
+		color: red;
+	}
+
+	.transaction-timeago {
+		color: var(--theme-darker-text);
+	}
+
+	.transaction-player {
+		font-family: Minecraft, 'Atkinson Hyperlegible', sans-serif;
+		font-size: 0.8em;
+	}
+
+	.bank-main-current-balance {
+		margin: 0.5em 0;
+		color: var(--theme-darker-text);
+	}
+
+	.bank-main-current-balance-value {
+		color: var(--theme-main-text);
+	}
+	p {
+		margin: 0;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Claimed.svelte b/src/routes/player/[player]/[profile]/sections/Claimed.svelte
new file mode 100644
index 0000000..8f44796
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Claimed.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import { cleanId, millisecondsToTime, toTitleCase } from '$lib/utils'
+
+	export let data: CleanMemberProfile
+</script>
+
+{#if data.member.claimed && data.member.claimed.length > 0}
+	<ul>
+		{#each data.member.claimed as claimed}
+			<li>
+				<b class="claimed-item-name">{toTitleCase(cleanId(claimed.id))}</b>
+				<span class="claimed-item-timestamp">
+					{millisecondsToTime(Date.now() - claimed.timestamp)} ago
+				</span>
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	p {
+		margin: 0;
+	}
+
+	ul {
+		margin: 0.5em 0;
+	}
+
+	.claimed-item-timestamp {
+		color: var(--theme-darker-text);
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Collections.svelte b/src/routes/player/[player]/[profile]/sections/Collections.svelte
new file mode 100644
index 0000000..4baa660
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Collections.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { CleanMemberProfile, Collection } from '$lib/APITypes'
+	import { skyblockItemToUrl } from '$lib/minecraft/inventory'
+	import ListItemWithIcon from '$lib/ListItemWithIcon.svelte'
+	import type { MatcherFile } from 'skyblock-assets'
+	import Tooltip from '$lib/Tooltip.svelte'
+	import { cleanId } from '$lib/utils'
+
+	export let data: CleanMemberProfile
+	export let pack: MatcherFile
+
+	const categories: Record<string, Collection[]> = {}
+	if (data.member.collections)
+		for (const collection of data.member.collections) {
+			if (!categories[collection.category]) categories[collection.category] = []
+			categories[collection.category].push(collection)
+		}
+</script>
+
+{#if data.member.collections}
+	{#each Object.keys(categories).sort() as categoryName}
+		{@const collections = categories[categoryName]}
+		<h3>{cleanId(categoryName)}</h3>
+		<ul>
+			{#each collections as collection}
+				<ListItemWithIcon
+					src={skyblockItemToUrl(collection.name, pack)}
+					alt={cleanId(collection.name)}
+				>
+					<Tooltip>
+						<span slot="tooltip">
+							Amount: {collection.amount.toLocaleString()}
+						</span>
+						{cleanId(collection.name)}
+						<span class="coll-level">{collection.level}</span>
+					</Tooltip>
+				</ListItemWithIcon>
+			{/each}
+		</ul>
+	{/each}
+{/if}
+
+<style>
+	ul {
+		margin: 0;
+		display: flex;
+		flex-wrap: wrap;
+		width: fit-content;
+		/* this ensures there's at most 2 lines */
+		max-width: 30em;
+	}
+
+	ul > :global(li) {
+		width: 12em;
+		height: 1.5em;
+		text-overflow: ellipsis;
+	}
+
+	h3 {
+		margin: 0.5em 0 0.5em 0.5em;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Coop.svelte b/src/routes/player/[player]/[profile]/sections/Coop.svelte
new file mode 100644
index 0000000..ff858f1
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Coop.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import Username from '$lib/minecraft/Username.svelte'
+	import { millisecondsToTime } from '$lib/utils'
+	export let data: CleanMemberProfile
+
+	$: isProfileCreator = data.member.coopInvitation?.invitedBy?.uuid == data.member.uuid
+</script>
+
+{#if data.member.coopInvitation}
+	<div class="info-text primary-info-text">
+		{#if isProfileCreator}
+			<p><b class="info-text-value">Created co-op</b></p>
+		{:else}
+			<p>
+				Invited by {#if data.member.coopInvitation.invitedBy}
+					<Username player={data.member.coopInvitation.invitedBy} prefix />
+				{:else}
+					<b>Unknown player</b>
+				{/if}
+			</p>
+		{/if}
+		<p>
+			{isProfileCreator ? 'Began creation' : 'Invited'}:
+			<span class="info-text-value coop-invited-timeago">
+				<b>{millisecondsToTime(Date.now() - data.member.coopInvitation.invitedTimestamp)}</b> ago
+			</span>
+		</p>
+		{#if data.member.coopInvitation.acceptedTimestamp}
+			<p>
+				{isProfileCreator ? 'Finished creation' : 'Accepted invite'}:
+				<span class="info-text-value coop-accepted-invite-after">
+					after <b>
+						{millisecondsToTime(
+							data.member.coopInvitation.acceptedTimestamp -
+								data.member.coopInvitation.invitedTimestamp
+						)}
+					</b>
+				</span>
+			</p>
+		{/if}
+	</div>
+	<h3>Members</h3>
+	{#each data.profile.members.filter(m => !m.left) as player}
+		<span class="member">
+			<Username {player} headType="2d" hyperlinkToProfile />
+		</span>
+	{/each}
+	{#if data.profile.members.filter(m => m.left).length > 0}
+		<h3 class="former-members-title">Former members</h3>
+		{#each data.profile.members.filter(m => m.left) as player}
+			<span class="member">
+				<Username {player} headType="2d" hyperlinkToProfile={data.profile.uuid} />
+			</span>
+		{/each}
+	{/if}
+{/if}
+
+<style>
+	p {
+		margin: 0;
+	}
+	.primary-info-text {
+		margin: 0.5em 0;
+	}
+	.info-text {
+		color: var(--theme-darker-text);
+	}
+	.info-text .info-text-value {
+		color: var(--theme-main-text);
+	}
+
+	.member {
+		display: block;
+	}
+	.former-members-title {
+		margin-top: 0.5rem;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Essence.svelte b/src/routes/player/[player]/[profile]/sections/Essence.svelte
new file mode 100644
index 0000000..244dbcd
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Essence.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import { cleanId, toTitleCase } from '$lib/utils'
+
+	export let data: CleanMemberProfile
+</script>
+
+{#if data.member.essence.types.length > 0}
+	<ul>
+		{#each data.member.essence.types as essenceType}
+			<li>
+				{toTitleCase(cleanId(essenceType.id))}:
+				<b class="essence-type-amount">{essenceType.amount.toLocaleString()}</b>
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	p {
+		margin: 0;
+	}
+
+	ul {
+		margin: 0.5em 0;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/FarmingContests.svelte b/src/routes/player/[player]/[profile]/sections/FarmingContests.svelte
new file mode 100644
index 0000000..8eef53d
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/FarmingContests.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import Emoji from '$lib/Emoji.svelte'
+	import ListItemWithIcon from '$lib/ListItemWithIcon.svelte'
+	import { skyblockItemToUrl } from '$lib/minecraft/inventory'
+	import { skyblockTime } from '$lib/utils'
+
+	export let data: CleanMemberProfile
+
+	let cachedItemUrls: Record<string, string> = {}
+	function cachedSkyblockItemToUrl(item: string) {
+		if (!cachedItemUrls[item]) cachedItemUrls[item] = skyblockItemToUrl(item)
+		return cachedItemUrls[item]
+	}
+</script>
+
+<div class="info-text primary-info-text">
+	<p>Talked to Jacob: <Emoji value={data.member.farmingContests.talkedToJacob ? '✅' : '❌'} /></p>
+</div>
+<div class="farming-contests-list">
+	{#each data.member.farmingContests.list as farmingContest}
+		<div class="farming-contest">
+			<p class="farming-contest-date">
+				{new Date(
+					skyblockTime(farmingContest.year, farmingContest.month, farmingContest.day)
+				).toUTCString()}
+			</p>
+			<ul>
+				{#each farmingContest.crops as crop}
+					<ListItemWithIcon src={cachedSkyblockItemToUrl(crop.item)}>
+						<b>{crop.amount.toLocaleString()}</b> collected
+						{#if crop.position}
+							<span class="farming-contest-item-placement">
+								(#{crop.position}/{crop.participants})
+							</span>
+						{/if}
+					</ListItemWithIcon>
+				{/each}
+			</ul>
+		</div>
+	{/each}
+</div>
+
+<style>
+	p,
+	ul {
+		margin: 0;
+	}
+
+	.primary-info-text {
+		margin: 0.5em 0;
+	}
+
+	.info-text {
+		color: var(--theme-darker-text);
+	}
+
+	.farming-contest-item-placement,
+	.farming-contest-date {
+		color: var(--theme-darker-text);
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Harp.svelte b/src/routes/player/[player]/[profile]/sections/Harp.svelte
new file mode 100644
index 0000000..6a5c9cc
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Harp.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import Emoji from '$lib/Emoji.svelte'
+	import { cleanId, millisecondsToTime, toTitleCase } from '$lib/utils'
+
+	export let data: CleanMemberProfile
+</script>
+
+<div class="info-text primary-info-text">
+	<p>Claimed Melody's hair: <Emoji value={data.member.harp.claimedMelodysHair ? '✅' : '❌'} /></p>
+	{#if data.member.harp.selected}
+		<p>
+			Selected song:
+			<b class="info-text-value">{toTitleCase(cleanId(data.member.harp.selected.id))}</b>
+			<span class="harp-selection-timeago">
+				{millisecondsToTime(Date.now() - data.member.harp.selected.timestamp)} ago
+			</span>
+		</p>
+	{/if}
+</div>
+<div class="harp-songs-list">
+	{#each data.member.harp.songs as song}
+		<div class="harp-song" class:selected-harp-song={song.id === data.member.harp.selected?.id}>
+			<h3>{toTitleCase(cleanId(song.id))}</h3>
+			<div class="info-text">
+				{#if song.completions}
+					<p>Completions: <b class="info-text-value">{song.completions}</b></p>
+				{/if}
+				{#if song.perfectCompletions}
+					<p>Perfect completions: <b class="info-text-value">{song.perfectCompletions}</b></p>
+				{:else}
+					<p>Progress: <b class="info-text-value">{Math.floor(song.progress * 100)}%</b></p>
+				{/if}
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	p {
+		margin: 0;
+	}
+
+	.primary-info-text {
+		margin: 0.5em 0;
+	}
+
+	.info-text {
+		color: var(--theme-darker-text);
+	}
+	.info-text .info-text-value {
+		color: var(--theme-main-text);
+	}
+
+	.harp-songs-list {
+		display: flex;
+		flex-wrap: wrap;
+		max-width: 40rem;
+		column-gap: 0.5rem;
+		row-gap: 0.5rem;
+	}
+	.harp-song {
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: rgba(0, 0, 0, 0.1);
+		padding: 0.75em;
+		border-radius: 1em;
+		width: 12em;
+	}
+	.selected-harp-song {
+		border: 1px solid rgba(255, 255, 255, 0.2);
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Infobox.svelte b/src/routes/player/[player]/[profile]/sections/Infobox.svelte
new file mode 100644
index 0000000..f8d2889
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Infobox.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { generateInfobox } from '$lib/profile'
+	import Username from '$lib/minecraft/Username.svelte'
+	import Emoji from '$lib/Emoji.svelte'
+
+	export let data
+</script>
+
+<div id="infobox-container">
+	<div id="infobox">
+		<h2>
+			<Username player={data.member} prefix /> ({data.member.left
+				? 'Removed'
+				: data.member.profileName})
+		</h2>
+		{#each generateInfobox(data) as item}
+			<!-- hack so fairy souls is clickable to get to the leaderboards -->
+			{#if item.includes('Fairy souls')}
+				<a href="/leaderboards/fairy_souls" class="fairy-souls-leaderboard"
+					><p><Emoji value={item} /></p></a
+				>
+			{:else}
+				<p><Emoji value={item} /></p>
+			{/if}
+		{/each}
+	</div>
+	<div id="infobox-extra">
+		<p>Player UUID:</p>
+		<b><code>{data.member.uuid}</code></b>
+		<p>Profile UUID:</p>
+		<b><code>{data.profile.uuid}</code></b>
+	</div>
+</div>
+
+<style>
+	#infobox-container {
+		float: right;
+		max-width: 95%;
+		width: 20em;
+	}
+	#infobox {
+		background-color: rgba(20, 20, 20, 0.4);
+		padding: 1em;
+		margin-top: 2em;
+		border-radius: 0.5em;
+		box-shadow: 0 0 1em #000;
+	}
+	#infobox-extra {
+		opacity: 0.5;
+		margin-top: 0.5rem;
+	}
+	#infobox-extra p {
+		margin: 0;
+	}
+	p {
+		margin: 0 0 0.25em 0;
+	}
+	.fairy-souls-leaderboard {
+		color: inherit;
+		text-decoration: none;
+	}
+	@media only screen and (max-width: 600px) {
+		#infobox {
+			position: relative;
+			right: -2em;
+			margin-top: 0;
+		}
+	}
+	@media only screen and (max-width: 550px) {
+		#infobox {
+			position: unset;
+			box-shadow: none;
+			float: none;
+			border: 1px solid var(--theme-lighter-background);
+		}
+	}
+	@media only screen and (max-width: 460px) {
+		#infobox-container {
+			max-width: 100%;
+			float: left;
+		}
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Inventories.svelte b/src/routes/player/[player]/[profile]/sections/Inventories.svelte
new file mode 100644
index 0000000..1dd7d28
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Inventories.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { inventoryIconMap, skyblockItemToUrl, type Item } from '$lib/minecraft/inventory'
+	import Inventory from '$lib/minecraft/Inventory.svelte'
+	import type { MatcherFile } from 'skyblock-assets'
+	import { cleanId } from '$lib/utils'
+	import AccessoryBagUpgrades from './AccessoryBagUpgrades.svelte'
+	import type { CleanMemberProfile } from '$lib/APITypes'
+
+	export let data: CleanMemberProfile
+	export let pack: MatcherFile
+
+	let displayingInventories: string[] = []
+	for (const inventoryName in data.member.inventories)
+		if (inventoryName !== 'armor') displayingInventories.push(inventoryName)
+
+	let selectedInventoryName: string = displayingInventories[0]
+</script>
+
+{#if displayingInventories.length > 1}
+	<div id="inventory-tabs">
+		{#each displayingInventories as inventoryName}
+			<button
+				class="inventory-tab"
+				class:inventory-tab-active={inventoryName === selectedInventoryName}
+				on:click={() => (selectedInventoryName = inventoryName)}
+			>
+				{#if inventoryName in inventoryIconMap}
+					<img
+						class="inventory-tab-icon"
+						loading="lazy"
+						src={skyblockItemToUrl(inventoryIconMap[inventoryName], pack, 50)}
+						alt={cleanId(inventoryName)}
+					/>
+				{/if}
+				<span class="inventory-tab-name">{cleanId(inventoryName)}</span>
+			</button>
+		{/each}
+	</div>
+{/if}
+{#if data.member.inventories}
+	{#each displayingInventories as inventoryName}
+		{#if inventoryName === selectedInventoryName}
+			<span id={inventoryName} class="inventory-content">
+				<Inventory items={data.member.inventories[inventoryName]} {pack} name={inventoryName} />
+			</span>
+			{#if inventoryName == 'accessory_bag'}
+				<AccessoryBagUpgrades {data} />
+			{/if}
+		{/if}
+	{/each}
+{/if}
+
+<style>
+	#inventory-tabs {
+		margin-bottom: 1em;
+		overflow: hidden;
+		border-radius: 1em;
+		max-width: 40em;
+		/* box-shadow: 0 0 1em #000; */
+	}
+	.inventory-tab {
+		/* background-color: var(--theme-lighter-background); */
+		background-color: rgba(20, 20, 20, 0.4);
+		color: var(--theme-main-text);
+		border: none;
+		border-radius: 0;
+		padding: 0 0.5em;
+		cursor: pointer;
+		transition-duration: 200ms;
+		height: 2.5em;
+		vertical-align: middle;
+	}
+	.inventory-tab-icon {
+		height: 1.5em;
+		width: 1.5em;
+		vertical-align: text-bottom;
+		position: relative;
+		top: 0.1em;
+		image-rendering: crisp-edges;
+		image-rendering: pixelated;
+	}
+	.inventory-tab-name {
+		vertical-align: text-top;
+	}
+	.inventory-tab:hover,
+	.inventory-tab-active {
+		background-color: rgba(40, 40, 40, 0.9);
+	}
+
+	.inventory-content {
+		display: inline-grid;
+	}
+
+	@media only screen and (max-width: 480px) {
+		.inventory-content :global(.item) {
+			/* there's no good way to override the existing 32px size without !important :( */
+			font-size: 24px !important;
+		}
+	}
+	@media only screen and (max-width: 350px) {
+		.inventory-content :global(.item) {
+			font-size: 16px !important;
+		}
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Leaderboards.svelte b/src/routes/player/[player]/[profile]/sections/Leaderboards.svelte
new file mode 100644
index 0000000..817f59a
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Leaderboards.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { fetchApi } from '$lib/api'
+
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import Emoji from '$lib/Emoji.svelte'
+	import { cleanId, formatNumberFromUnit } from '$lib/utils'
+
+	export let data: CleanMemberProfile
+</script>
+
+{#await fetchApi(`player/${data.member.uuid}/${data.profile.uuid}/leaderboards`, fetch).then( r => r.json() )}
+	Loading...
+{:then leaderboards}
+	{#if leaderboards.length > 0}
+		<ul>
+			{#each leaderboards as leaderboard}
+				<li class="leaderboard-item">
+					<a href="/leaderboard/{leaderboard.name}" class="leaderboard-item-anchor">
+						{leaderboard.positionIndex + 1}) <b>{cleanId(leaderboard.name)}</b>: {formatNumberFromUnit(
+							leaderboard.value,
+							leaderboard.unit ?? null
+						)}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{:else}
+		<p>This player isn't in any leaderboards. <Emoji value="😦" /></p>
+	{/if}
+{/await}
+
+<style>
+	.leaderboard-item-anchor {
+		color: inherit;
+	}
+	.leaderboard-item {
+		list-style-type: none;
+	}
+	ul {
+		padding-left: 0;
+		margin-top: 0.5em;
+	}
+	p {
+		margin: 0.5rem 0;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Minions.svelte b/src/routes/player/[player]/[profile]/sections/Minions.svelte
new file mode 100644
index 0000000..856d8f0
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Minions.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import { cleanId, toRomanNumerals } from '$lib/utils'
+
+	export let data: CleanMemberProfile
+</script>
+
+<p class="unique-minions-text">
+	Unique minions:
+	<span class="minions-fraction">
+		<b>{data.profile.minionCount}</b>/{data.profile.maxUniqueMinions}
+	</span>
+</p>
+<table>
+	{#each data.profile.minions as minion}
+		<tr>
+			<th>{cleanId(minion.name)}</th>
+			{#each minion.levels as unlocked, i}
+				<td class="minion-table-item" class:unlocked>
+					{toRomanNumerals(i + 1)}
+				</td>
+			{/each}
+		</tr>
+	{/each}
+</table>
+
+<style>
+	.unique-minions-text {
+		color: var(--theme-darker-text);
+	}
+	.minions-fraction {
+		color: var(--theme-main-text);
+	}
+	.minion-table-item:not(.unlocked) {
+		opacity: 0.2;
+	}
+	.minion-table-item.unlocked {
+		color: #3e3;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Pets.svelte b/src/routes/player/[player]/[profile]/sections/Pets.svelte
new file mode 100644
index 0000000..7f660c4
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/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]/sections/Skills.svelte b/src/routes/player/[player]/[profile]/sections/Skills.svelte
new file mode 100644
index 0000000..8fc5aaf
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Skills.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	import Emoji from '$lib/Emoji.svelte'
+
+	import Tooltip from '$lib/Tooltip.svelte'
+	import { cleanId, formatNumber } from '$lib/utils'
+
+	const skillImages = {
+		runecrafting: '/skill-icons/runecrafting.webp',
+		alchemy: '/skill-icons/herblore.webp',
+		combat: '/skill-icons/attack.webp',
+		enchanting: '/skill-icons/magic.webp',
+		foraging: '/skill-icons/woodcutting.webp',
+		mining: '/skill-icons/mining.webp',
+		taming: '/skill-icons/hunter.webp',
+		farming: '/skill-icons/farming.webp',
+		fishing: '/skill-icons/fishing.webp',
+		carpentry: '/skill-icons/construction.webp',
+		social: '/skill-icons/agility.webp',
+	}
+
+	export let data
+</script>
+
+{#if !data.member.skills.apiEnabled}
+	<p class="skills-api-warning">
+		<Emoji value="⚠" /> Skills API is disabled for this profile, so the values shown may be inaccurate.
+	</p>
+{/if}
+<ul>
+	{#each data.member.skills.list as skill}
+		<li
+			class="list-item-with-icon"
+			style="background: url({skillImages[skill.id]}) 0 0/1em no-repeat"
+		>
+			<Tooltip>
+				<span slot="tooltip">
+					{#if skill.levelXpRequired !== null}
+						{Math.round((skill.levelXp / skill.levelXpRequired) * 100)}% to next level, {Math.round(
+							skill.levelXp
+						).toLocaleString()}/{formatNumber(skill.levelXpRequired, 3)} xp
+					{:else}
+						{Math.round(skill.levelXp).toLocaleString()} extra xp
+					{/if}
+				</span>
+				<span>
+					{cleanId(skill.id)}
+					<span class="skill-level" class:skill-maxed={skill.level === skill.maxLevel}>
+						{skill.level}
+					</span>
+				</span>
+			</Tooltip>
+		</li>
+	{/each}
+</ul>
+
+<style>
+	.skill-level {
+		opacity: 0.9;
+	}
+	.skill-maxed {
+		color: #0e0;
+		opacity: 1;
+	}
+	.list-item-with-icon {
+		list-style: none;
+		padding-left: 1.2em;
+		position: relative;
+		right: 1.2em;
+		image-rendering: crisp-edges;
+		image-rendering: pixelated;
+	}
+
+	.skills-api-warning {
+		margin-top: 0;
+	}
+
+	ul {
+		margin-top: 0;
+		display: flex;
+		flex-wrap: wrap;
+		max-width: 30em;
+	}
+	ul > li {
+		width: 10em;
+		margin: 0.25em 0.25em 0 0;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Slayers.svelte b/src/routes/player/[player]/[profile]/sections/Slayers.svelte
new file mode 100644
index 0000000..40fa67d
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Slayers.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import { cleanId, toRomanNumerals } from '$lib/utils'
+
+	export let data: CleanMemberProfile
+</script>
+
+{#if data.member.slayers}
+	<div class="slayer-info-text total-slayer-info-text">
+		<p>Xp: <b>{data.member.slayers.xp}</b></p>
+		<p>Kills: <b>{data.member.slayers.kills}</b></p>
+	</div>
+	<div class="slayers-list">
+		{#each data.member.slayers.bosses as slayer}
+			<div class="individual-slayer-data">
+				<h3>{slayer.name ? cleanId(slayer.name) : cleanId(slayer.rawName)}</h3>
+				<div class="slayer-info-text">
+					<p>Xp: <b>{slayer.xp.toLocaleString()}</b></p>
+					<p>Level: <b>{slayer.level}</b></p>
+				</div>
+				<table>
+					<tr>
+						{#each slayer.tiers as tier}
+							<th>Tier {toRomanNumerals(tier.tier)}</th>
+						{/each}
+					</tr>
+					<tr>
+						{#each slayer.tiers as tier}
+							<td class="slayer-tier-kills">
+								{tier.kills.toLocaleString()}
+							</td>
+						{/each}
+					</tr>
+				</table>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	p {
+		margin: 0;
+	}
+
+	.total-slayer-info-text {
+		margin: 0.5em 0;
+	}
+
+	.slayer-tier-kills {
+		text-align: center;
+	}
+
+	.slayer-info-text {
+		color: var(--theme-darker-text);
+	}
+	.slayer-info-text b {
+		color: var(--theme-main-text);
+	}
+
+	.individual-slayer-data {
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: rgba(0, 0, 0, 0.1);
+		padding: 0.75em;
+		border-radius: 1em;
+	}
+
+	.slayers-list {
+		display: flex;
+		flex-wrap: wrap;
+		max-width: 40rem;
+		column-gap: 0.5rem;
+		row-gap: 0.5rem;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/StatList.svelte b/src/routes/player/[player]/[profile]/sections/StatList.svelte
new file mode 100644
index 0000000..38604d7
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/StatList.svelte
@@ -0,0 +1,48 @@
+<!-- 
+	@component
+
+	A sorted list of a user's stats, with the total sometimes being at the top.
+-->
+<script lang="ts">
+	import { cleanId, millisecondsToTime } from '$lib/utils'
+	import type { StatItem } from '$lib/APITypes'
+
+	export let stats: StatItem[]
+</script>
+
+<ul>
+	{#each stats.sort((a, b) => b.value - a.value) as stat}
+		<li class:total-stat={stat.categorizedName === 'total'}>
+			<span class="stat-name">{cleanId(stat.categorizedName)}:</span>
+			<span class="stat-value">
+				{#if stat.unit === 'time'}
+					{millisecondsToTime(stat.value)}
+				{:else}
+					{stat.value.toLocaleString()}
+				{/if}
+			</span>
+		</li>
+	{/each}
+</ul>
+
+<style>
+	.total-stat .stat-name {
+		color: var(--theme-darker-text);
+	}
+	.total-stat .stat-value {
+		font-weight: bold;
+	}
+
+	.total-stat {
+		list-style-type: none;
+		padding: 0 0 0.5em 0;
+		right: 1em;
+	}
+	li {
+		position: relative;
+	}
+	ul {
+		margin-top: 0.5em;
+		padding-left: 1em;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/sections/Zones.svelte b/src/routes/player/[player]/[profile]/sections/Zones.svelte
new file mode 100644
index 0000000..f7e993b
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/sections/Zones.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import { cleanId } from '$lib/utils'
+
+	export let data: CleanMemberProfile
+
+	let zonesVisitedCount = data.member.zones ? data.member.zones?.filter(z => z.visited).length : 0
+</script>
+
+{#if data.member.zones}
+	<p class="zones-visited-text">
+		Zones visited:
+		<span class="zones-visited-number">
+			<b>{zonesVisitedCount}</b>/{data.member.zones.length}
+		</span>
+	</p>
+	<ul>
+		{#each data.member.zones.filter(z => z.visited) as zone}
+			<li>{cleanId(zone.name)}</li>
+		{/each}
+		{#each data.member.zones.filter(z => !z.visited) as zone}
+			<li class="unvisited-zone">{cleanId(zone.name)}</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	.zones-visited-text {
+		color: var(--theme-darker-text);
+		margin: 0.5em 0;
+	}
+	.zones-visited-number {
+		color: var(--theme-main-text);
+	}
+	.unvisited-zone {
+		opacity: 0.5;
+	}
+	ul {
+		padding-left: 1em;
+		margin: 0;
+	}
+</style>
-- 
cgit