From 6e723aadf6de45a79b4ef64d288ea275628232c5 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Thu, 15 Dec 2022 14:59:56 -0600
Subject: start updating to sveltekit v1

---
 src/app.html                                      |  27 +-
 src/hooks.ts                                      |   2 +-
 src/lib/AuctionPriceScatterplot.svelte            |   2 +-
 src/lib/BackgroundImage.svelte                    |   2 +-
 src/lib/Collapsible.svelte                        |   2 +-
 src/lib/layout/Loader.svelte                      |   2 +-
 src/lib/minecraft/inventory.ts                    |   2 +-
 src/params/username.ts                            |   5 +
 src/routes/+error.svelte                          |  43 +++
 src/routes/+layout.svelte                         |  10 +
 src/routes/+page.svelte                           | 128 +++++++
 src/routes/+page.ts                               |   7 +
 src/routes/[player=username]/+page.ts             |  11 +
 src/routes/[player].ts                            |  14 -
 src/routes/__error.svelte                         |  53 ---
 src/routes/__layout.svelte                        |  10 -
 src/routes/auctionprices.svelte                   | 213 -----------
 src/routes/auctionprices/+page.svelte             | 198 ++++++++++
 src/routes/auctionprices/+page.ts                 |  13 +
 src/routes/chat.svelte                            |  85 -----
 src/routes/chat/+page.svelte                      |  85 +++++
 src/routes/election.svelte                        | 257 -------------
 src/routes/election/+page.svelte                  | 257 +++++++++++++
 src/routes/index.svelte                           | 138 -------
 src/routes/items.svelte                           | 216 -----------
 src/routes/items/+page.svelte                     | 216 +++++++++++
 src/routes/leaderboard/+page.ts                   |  10 +
 src/routes/leaderboard/[name].ts                  |  12 -
 src/routes/leaderboard/[name]/+page.ts            |  12 +
 src/routes/leaderboard/index.ts                   |  11 -
 src/routes/leaderboards/+page.svelte              |  40 ++
 src/routes/leaderboards/+page.ts                  |   6 +
 src/routes/leaderboards/[name].svelte             | 108 ------
 src/routes/leaderboards/[name]/+page.svelte       |  89 +++++
 src/routes/leaderboards/[name]/+page.ts           |  16 +
 src/routes/leaderboards/index.svelte              |  55 ---
 src/routes/loggedin.ts                            |  37 --
 src/routes/loggedin/+page.ts                      |  37 ++
 src/routes/login.ts                               |  36 --
 src/routes/login/+page.ts                         |  36 ++
 src/routes/logout.ts                              |  28 --
 src/routes/logout/+page.ts                        |  28 ++
 src/routes/player/+page.server.ts                 |  16 +
 src/routes/player/[player]/+page.svelte           | 135 +++++++
 src/routes/player/[player]/+page.ts               |  24 ++
 src/routes/player/[player]/[profile].svelte       | 434 ----------------------
 src/routes/player/[player]/[profile]/+page.svelte | 383 +++++++++++++++++++
 src/routes/player/[player]/[profile]/+page.ts     |  48 +++
 src/routes/player/[player]/index.svelte           | 166 ---------
 src/routes/player/index.ts                        |  14 -
 src/routes/profile/index.svelte                   |   2 +-
 src/routes/verify.svelte                          |  66 ----
 src/routes/verify.ts                              |  75 ----
 src/routes/verify/+page.server.ts                 |  75 ++++
 src/routes/verify/+page.svelte                    |  66 ++++
 55 files changed, 2016 insertions(+), 2047 deletions(-)
 create mode 100644 src/params/username.ts
 create mode 100644 src/routes/+error.svelte
 create mode 100644 src/routes/+layout.svelte
 create mode 100644 src/routes/+page.svelte
 create mode 100644 src/routes/+page.ts
 create mode 100644 src/routes/[player=username]/+page.ts
 delete mode 100644 src/routes/[player].ts
 delete mode 100644 src/routes/__error.svelte
 delete mode 100644 src/routes/__layout.svelte
 delete mode 100644 src/routes/auctionprices.svelte
 create mode 100644 src/routes/auctionprices/+page.svelte
 create mode 100644 src/routes/auctionprices/+page.ts
 delete mode 100644 src/routes/chat.svelte
 create mode 100644 src/routes/chat/+page.svelte
 delete mode 100644 src/routes/election.svelte
 create mode 100644 src/routes/election/+page.svelte
 delete mode 100644 src/routes/index.svelte
 delete mode 100644 src/routes/items.svelte
 create mode 100644 src/routes/items/+page.svelte
 create mode 100644 src/routes/leaderboard/+page.ts
 delete mode 100644 src/routes/leaderboard/[name].ts
 create mode 100644 src/routes/leaderboard/[name]/+page.ts
 delete mode 100644 src/routes/leaderboard/index.ts
 create mode 100644 src/routes/leaderboards/+page.svelte
 create mode 100644 src/routes/leaderboards/+page.ts
 delete mode 100644 src/routes/leaderboards/[name].svelte
 create mode 100644 src/routes/leaderboards/[name]/+page.svelte
 create mode 100644 src/routes/leaderboards/[name]/+page.ts
 delete mode 100644 src/routes/leaderboards/index.svelte
 delete mode 100644 src/routes/loggedin.ts
 create mode 100644 src/routes/loggedin/+page.ts
 delete mode 100644 src/routes/login.ts
 create mode 100644 src/routes/login/+page.ts
 delete mode 100644 src/routes/logout.ts
 create mode 100644 src/routes/logout/+page.ts
 create mode 100644 src/routes/player/+page.server.ts
 create mode 100644 src/routes/player/[player]/+page.svelte
 create mode 100644 src/routes/player/[player]/+page.ts
 delete mode 100644 src/routes/player/[player]/[profile].svelte
 create mode 100644 src/routes/player/[player]/[profile]/+page.svelte
 create mode 100644 src/routes/player/[player]/[profile]/+page.ts
 delete mode 100644 src/routes/player/[player]/index.svelte
 delete mode 100644 src/routes/player/index.ts
 delete mode 100644 src/routes/verify.svelte
 delete mode 100644 src/routes/verify.ts
 create mode 100644 src/routes/verify/+page.server.ts
 create mode 100644 src/routes/verify/+page.svelte

(limited to 'src')

diff --git a/src/app.html b/src/app.html
index e0a73a9..b9273a6 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-		<meta name="theme-color" content="#010101">
-		<meta property="og:site_name" content="Hypixel SkyBlock Stats">
-		<meta property="og:type" content="website"/>
-		%svelte.head%
-	</head>
-	<body>
-		%svelte.body%
-	</body>
-</html>
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#010101">
+	<meta property="og:site_name" content="Hypixel SkyBlock Stats">
+	<meta property="og:type" content="website" />
+	%sveltekit.head%
+</head>
+
+<body>
+	%sveltekit.body%
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/hooks.ts b/src/hooks.ts
index 3fa9299..457e8ae 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -1,5 +1,5 @@
 import cookie from 'cookie'
-import type { ExternalFetch, GetSession, Handle } from '@sveltejs/kit'
+import type { Handle } from '@sveltejs/kit'
 
 
 export const handle: Handle = async ({ event, resolve }) => {
diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index da1aed2..17a09f1 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/env'
+	import { browser } from '$app/environment'
 
 	import type { ItemAuctionsSchema, SimpleAuctionSchema } from './APITypes'
 	import type { PreviewedAuctionData } from './utils'
diff --git a/src/lib/BackgroundImage.svelte b/src/lib/BackgroundImage.svelte
index 0b2f043..17d8705 100644
--- a/src/lib/BackgroundImage.svelte
+++ b/src/lib/BackgroundImage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte'
-	import { browser } from '$app/env'
+	import { browser } from '$app/environment'
 
 	export let url: string
 	let styleHtml = `<style class="background-image-style">:root{--background:url(${url})}</style>`
diff --git a/src/lib/Collapsible.svelte b/src/lib/Collapsible.svelte
index a7b6105..68fee79 100644
--- a/src/lib/Collapsible.svelte
+++ b/src/lib/Collapsible.svelte
@@ -4,7 +4,7 @@
 	Collapsible content that works without JS but is enhanced by it.
  -->
 <script lang="ts">
-	import { browser } from '$app/env'
+	import { browser } from '$app/environment'
 	import { onMount } from 'svelte'
 	import { cleanId } from './utils'
 
diff --git a/src/lib/layout/Loader.svelte b/src/lib/layout/Loader.svelte
index 3884e55..dd04924 100644
--- a/src/lib/layout/Loader.svelte
+++ b/src/lib/layout/Loader.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/env'
+	import { browser } from '$app/environment'
 	import { navigating } from '$app/stores'
 
 	let progress = 0
diff --git a/src/lib/minecraft/inventory.ts b/src/lib/minecraft/inventory.ts
index 227ed0c..5bd79c2 100644
--- a/src/lib/minecraft/inventory.ts
+++ b/src/lib/minecraft/inventory.ts
@@ -1,6 +1,6 @@
 import * as skyblockAssets from 'skyblock-assets'
 import { vanilla } from '$lib/packs'
-import { browser } from '$app/env'
+import { browser } from '$app/environment'
 
 export interface Item {
     id?: string
diff --git a/src/params/username.ts b/src/params/username.ts
new file mode 100644
index 0000000..855481a
--- /dev/null
+++ b/src/params/username.ts
@@ -0,0 +1,5 @@
+import type { ParamMatcher } from '@sveltejs/kit'
+
+export const match = ((param) => {
+	return /^\w{2,16}$/.test(param)
+}) satisfies ParamMatcher
\ No newline at end of file
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..83b4407
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import Header from '$lib/Header.svelte'
+	import Head from '$lib/Head.svelte'
+
+	import { page } from '$app/stores'
+
+	// sveltekit bug: types of error and status say they can be null but they can't
+	let error = $page.error!
+	let status = $page.status!
+</script>
+
+<Head title={error.message} />
+<Header />
+
+<main>
+	<div>
+		<h1>{status}</h1>
+		<p>{error.message}</p>
+		<a href="/" data-sveltekit-preload-data="hover">Home</a>
+	</div>
+</main>
+
+<style>
+	main {
+		height: calc(100% - 4rem);
+		/* vertical align */
+		display: grid;
+		align-items: center;
+		justify-content: center;
+	}
+
+	h1 {
+		font-size: 3em;
+		margin: 0;
+	}
+	p {
+		margin: 0;
+	}
+	a {
+		display: block;
+		margin-top: 0.5rem;
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..74e29b9
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import '../app.css'
+	import GlobalTooltip from '$lib/layout/GlobalTooltip.svelte'
+	import Loader from '$lib/layout/Loader.svelte'
+</script>
+
+<Loader />
+<GlobalTooltip />
+<nav />
+<slot />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..3c518fb
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+	import Username from '$lib/minecraft/Username.svelte'
+	import SearchUser from '$lib/SearchUser.svelte'
+	import donators from '../_donators.json'
+	import Head from '$lib/Head.svelte'
+	import Emoji from '$lib/Emoji.svelte'
+	import LoginButton from '$lib/LoginButton.svelte'
+	import type { PageData } from './$types'
+
+	export const hydrate = false
+
+	export let data: PageData
+	export let loggedIn: boolean = data.loggedIn
+</script>
+
+<svelte:head>
+	<title>SkyBlock Stats</title>
+</svelte:head>
+
+<Head
+	title="SkyBlock Stats"
+	description="Check SkyBlock stats, see leaderboards, mayors, and way more."
+/>
+<a class="github" href="https://github.com/skyblockstats/skyblock-stats">
+	<img src="/github-mark-light.png" alt="View source on GitHub" />
+</a>
+
+<main>
+	<LoginButton {loggedIn} />
+	<section class="title-section">
+		<h1>SkyBlock Stats</h1>
+		<SearchUser>
+			<button>View Profiles</button>
+		</SearchUser>
+	</section>
+
+	<hr style="margin: 25vh 0 2em 0" />
+
+	<section>
+		<h2>Other SkyBlock tools</h2>
+		<ul id="other-tools-list">
+			<li><a href="/auctionprices">Auction prices</a></li>
+			<li><a href="/leaderboards">Leaderboards</a></li>
+			<li><a>Bazaar (coming soon)</a></li>
+			<li><a href="/chat">Fake chat generator</a></li>
+			<li><a href="https://skyblock-npcs.matdoes.dev">NPC Skin Stealer</a></li>
+			<li><a href="/election">Mayor Election Status</a></li>
+			<li><a href="/items">Item List</a></li>
+		</ul>
+	</section>
+
+	<section id="donators">
+		<h2>Donators</h2>
+		<p>
+			Thank you to these people for
+			<a href="https://ko-fi.com/matdoesdev" target="_blank">donating</a>. <Emoji value="❤" />
+		</p>
+		<ul>
+			{#each donators as donator}
+				<li><Username player={donator} headType="2d" hyperlinkToProfile /></li>
+			{/each}
+		</ul>
+	</section>
+	<section>
+		<h2>Info</h2>
+		<p>Website made by <a href="https://matdoes.dev">mat</a>.</p>
+		<p>
+			Official hangout/support Discord:
+			<a href="//discord.gg/KtscNUnh4f">discord.gg/KtscNUnh4f</a>.
+		</p>
+		<p>
+			Resource packs: <a href="//furfsky.net">Furfsky Reborn</a> (default),
+			<a href="//packshq.com">PacksHQ</a>,
+			<a href="//hypixel.net/threads/2138599">Furfsky</a>,
+			<a href="//hypixel.net/threads/2239953">Ectoplasm</a>,
+			<a href="//hypixel.net/threads/3470904">RNBW</a>,
+			<a href="//hypixel.net/threads/4174260">Hypixel+</a>,
+			<a href="//hypixel.net/threads/3597207">Worlds and Beyond</a>.
+		</p>
+		<p>
+			Minecraft skin APIs: <a href="//mc-heads.net">mc-heads.net</a> for 3d renders and
+			<a href="//mc-crafatar.com">crafatar.com</a> for 2d heads.
+		</p>
+		<p>Emojis: <a href="//twemoji.twitter.com/">Twemoji</a>.</p>
+		<p>Font: <a href="//brailleinstitute.org/freefont">Atkinson Hyperlegible</a>.</p>
+		<p class="secret">Thank you to Duckie Cousin Gaming for the idea to add harp leaderboards.</p>
+	</section>
+</main>
+
+<style>
+	h1 {
+		text-align: center;
+	}
+
+	.title-section {
+		margin: 0 auto;
+		width: fit-content;
+	}
+
+	#donators p {
+		margin: 0;
+	}
+
+	li {
+		padding: 0.2em 0;
+	}
+
+	.github {
+		position: absolute;
+		top: 0.5rem;
+		left: 0.5rem;
+		opacity: 0.2;
+		transition: opacity 200ms;
+	}
+	.github:hover {
+		opacity: 0.9;
+	}
+	.github > img {
+		width: 2rem;
+	}
+
+	.secret {
+		color: var(--theme-main-background);
+		margin: 0;
+		font-size: 6pt;
+		margin-top: -0.5rem;
+	}
+</style>
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
new file mode 100644
index 0000000..cd45f69
--- /dev/null
+++ b/src/routes/+page.ts
@@ -0,0 +1,7 @@
+import type { PageData } from './$types'
+
+export const load = (({ session }) => {
+	return {
+		loggedIn: session.sid !== undefined,
+	}
+}) satisfies PageData
diff --git a/src/routes/[player=username]/+page.ts b/src/routes/[player=username]/+page.ts
new file mode 100644
index 0000000..c846929
--- /dev/null
+++ b/src/routes/[player=username]/+page.ts
@@ -0,0 +1,11 @@
+import type { PageLoad } from './$types'
+
+
+export const get = (({ params }) => {
+	return {
+		status: 303,
+		headers: {
+			location: `/player/${params.player}`
+		}
+	}
+}) satisfies PageLoad
\ No newline at end of file
diff --git a/src/routes/[player].ts b/src/routes/[player].ts
deleted file mode 100644
index 3f79368..0000000
--- a/src/routes/[player].ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { ParamMatcher, RequestHandler } from '@sveltejs/kit'
-
-export const match: ParamMatcher = (param) => {
-	return /^\w{2,16}$/.test(param)
-}
-
-export const get: RequestHandler = async ({ params }) => {
-	return {
-		status: 303,
-		headers: {
-			location: `/player/${params.player}`
-		}
-	}
-}
\ No newline at end of file
diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
deleted file mode 100644
index 3057f19..0000000
--- a/src/routes/__error.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-
-	export const load: Load = async ({ error, status }) => {
-		return {
-			props: {
-				error,
-				status,
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import Header from '$lib/Header.svelte'
-	import Head from '$lib/Head.svelte'
-
-	export let status: number
-	export let error: Error
-</script>
-
-<Head title={error.message} />
-<Header />
-
-<main>
-	<div>
-		<h1>{status}</h1>
-		<p>{error.message}</p>
-		<a href="/" sveltekit:prefetch>Home</a>
-	</div>
-</main>
-
-<style>
-	main {
-		height: calc(100% - 4rem);
-		/* vertical align */
-		display: grid;
-		align-items: center;
-		justify-content: center;
-	}
-
-	h1 {
-		font-size: 3em;
-		margin: 0;
-	}
-	p {
-		margin: 0;
-	}
-	a {
-		display: block;
-		margin-top: 0.5rem;
-	}
-</style>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
deleted file mode 100644
index 74e29b9..0000000
--- a/src/routes/__layout.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-	import '../app.css'
-	import GlobalTooltip from '$lib/layout/GlobalTooltip.svelte'
-	import Loader from '$lib/layout/Loader.svelte'
-</script>
-
-<Loader />
-<GlobalTooltip />
-<nav />
-<slot />
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte
deleted file mode 100644
index ac75c86..0000000
--- a/src/routes/auctionprices.svelte
+++ /dev/null
@@ -1,213 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	import { fetchApi } from '$lib/api'
-
-	export const load: Load = async ({ params, fetch }) => {
-		const auctionItemsPromise = fetchApi(`auctionitems`, fetch).then(r => r.json())
-		const data = await fetchApi(`auctionprices`, fetch).then(r => r.json())
-		const auctionItems = await auctionItemsPromise
-
-		return {
-			props: {
-				data,
-				auctionItems,
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import Header from '$lib/Header.svelte'
-	import Head from '$lib/Head.svelte'
-	import { cleanId, removeFormattingCode, toTitleCase, type PreviewedAuctionData } from '$lib/utils'
-	import type { ItemAuctionsSchema } from '$lib/APITypes'
-	import AuctionPriceScatterplot from '$lib/AuctionPriceScatterplot.svelte'
-	import AuctionPreviewTooltip from '$lib/AuctionPreviewTooltip.svelte'
-	import { browser } from '$app/env'
-	import Item from '$lib/minecraft/Item.svelte'
-	import furfskyReborn from 'skyblock-assets/matchers/furfsky_reborn.json'
-
-	export let data: ItemAuctionsSchema[]
-	export let auctionItems: Record<string, { display: { name: string }; vanillaId?: string }>
-
-	let currentlyPreviewedAuction: PreviewedAuctionData | null = null
-
-	let query: string = ''
-
-	$: queryNormalized = query.toLowerCase()
-
-	let allMatchingItemIds: string[]
-	$: {
-		pageNumber = 0
-		allMatchingItemIds = Object.entries(auctionItems)
-			.filter(a => removeFormattingCode(a[1]?.display.name.toLowerCase()).includes(queryNormalized))
-			.map(a => a[0])
-	}
-	$: {
-		if (browser) fetchAndSetItems(allMatchingItemIds.slice(0, 100))
-	}
-
-	async function fetchAndSetItems(itemIds: string[]) {
-		const localQuery = query
-		const localData = await fetchItems(query.length > 0 ? itemIds : null)
-		// if the query hasn't changed, update the data
-		if (query === localQuery) data = localData
-	}
-	async function fetchItems(itemIds: null | string[]): Promise<ItemAuctionsSchema[]> {
-		let url = `auctionprices`
-		if (itemIds !== null) {
-			if (itemIds.length === 0) return []
-			url += `?items=${itemIds.join(',')}`
-		}
-		return await fetchApi(url, fetch).then(r => r.json())
-	}
-
-	let pageHeight = 0
-	$: {
-		pageHeight = 0
-	}
-
-	// 0 indexed
-	let pageNumber = 0
-	let loadingPage = false
-
-	async function checkScroll() {
-		if (loadingPage) return
-
-		let pageHeightTemp = window.scrollY + window.innerHeight
-		if (pageHeightTemp <= pageHeight) return
-		pageHeight = pageHeightTemp
-		if (pageHeight >= document.body.scrollHeight - 1000) {
-			loadingPage = true
-			pageNumber++
-			const itemIds = allMatchingItemIds.slice(pageNumber * 100, (pageNumber + 1) * 100)
-			if (itemIds.length > 0) {
-				const shownIds = data.map(d => d.id)
-				const items = (await fetchItems(itemIds)).filter(i => !shownIds.includes(i.id))
-				if (items.length > 0) data = [...data, ...items]
-			}
-			loadingPage = false
-		}
-	}
-
-	$: {
-		if (browser && !currentlyPreviewedAuction) {
-			for (const el of document.getElementsByClassName('selected-auction'))
-				el.classList.remove('selected-auction')
-		}
-	}
-</script>
-
-<Head
-	title="SkyBlock Auction Prices"
-	description="View how many coins every SkyBlock item costs in the auction house."
-/>
-<Header />
-
-<svelte:window on:scroll={checkScroll} />
-
-<AuctionPreviewTooltip bind:preview={currentlyPreviewedAuction} />
-
-<main>
-	<h1>SkyBlock Auction Prices</h1>
-	<div class="filter-items-settings">
-		<input type="text" id="filter-items-tier" placeholder="Search..." bind:value={query} />
-	</div>
-	<div class="item-list">
-		{#each data as item (item.id)}
-			{@const binAuctions = item.auctions.filter(i => i.bin)}
-			{@const normalAuctions = item.auctions.filter(i => !i.bin)}
-			{@const itemData = auctionItems[item.sbId]}
-			<div class="item-container">
-				{#if itemData && itemData.vanillaId}
-					<div class="item-slot-container">
-						<Item item={{ ...itemData, id: item.id }} pack={furfskyReborn} headSize={50} isslot />
-					</div>
-				{/if}
-				<h2>
-					{removeFormattingCode(
-						auctionItems[item.id]?.display.name ?? toTitleCase(cleanId(item.id.toLowerCase()))
-					)}
-				</h2>
-				<div class="auctions-info-text">
-					{#if binAuctions.length > 0}
-						<p>
-							Cheapest recent BIN: <b>
-								{binAuctions.reduce((a, b) => (a.coins < b.coins ? a : b)).coins.toLocaleString()} coins
-							</b>
-						</p>
-					{/if}
-					{#if normalAuctions.length > 0}
-						<p>
-							Cheapest recent auction: <b>
-								{normalAuctions
-									.reduce((a, b) => (a.coins < b.coins ? a : b))
-									.coins.toLocaleString()} coins
-							</b>
-						</p>
-					{/if}
-					{#if item.auctions.length >= 2}
-						<p>
-							Median:
-							<b>
-								{[...item.auctions]
-									.sort((a, b) => a.coins - b.coins)
-									[Math.floor(item.auctions.length / 2)].coins.toLocaleString()} coins
-							</b>
-						</p>
-						<p>
-							Volume:
-							<b>
-								{parseFloat(
-									(
-										(24 * 60 * 60) /
-										((Date.now() / 1000 - item.auctions[0].ts) / item.auctions.length)
-									).toPrecision(2)
-								).toLocaleString()}/day
-							</b>
-						</p>
-					{/if}
-				</div>
-				<div class="item-scatterplot">
-					<AuctionPriceScatterplot {item} bind:currentlyPreviewedAuction />
-				</div>
-			</div>
-		{/each}
-		{#if data.length === 0}
-			No results
-		{/if}
-	</div>
-</main>
-
-<style>
-	p {
-		margin: 0;
-	}
-	.item-list {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
-		grid-gap: 1em;
-		margin-top: 1em;
-	}
-	.item-container {
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		background: rgba(0, 0, 0, 0.1);
-		padding: 0.75em;
-		border-radius: 1em;
-	}
-
-	.item-scatterplot {
-		margin-top: 1em;
-	}
-
-	.auctions-info-text {
-		color: var(--theme-darker-text);
-	}
-	.auctions-info-text b {
-		color: var(--theme-main-text);
-	}
-
-	.item-slot-container {
-		float: right;
-	}
-</style>
diff --git a/src/routes/auctionprices/+page.svelte b/src/routes/auctionprices/+page.svelte
new file mode 100644
index 0000000..844af04
--- /dev/null
+++ b/src/routes/auctionprices/+page.svelte
@@ -0,0 +1,198 @@
+<script lang="ts">
+	import Header from '$lib/Header.svelte'
+	import Head from '$lib/Head.svelte'
+	import { cleanId, removeFormattingCode, toTitleCase, type PreviewedAuctionData } from '$lib/utils'
+	import type { ItemAuctionsSchema } from '$lib/APITypes'
+	import AuctionPriceScatterplot from '$lib/AuctionPriceScatterplot.svelte'
+	import AuctionPreviewTooltip from '$lib/AuctionPreviewTooltip.svelte'
+	import { browser } from '$app/environment'
+	import Item from '$lib/minecraft/Item.svelte'
+	import furfskyReborn from 'skyblock-assets/matchers/furfsky_reborn.json'
+	import type { PageData } from './$types'
+	import { fetchApi } from '$lib/api'
+
+	export let data: PageData
+	let auctionPrices: ItemAuctionsSchema[] = data.prices
+	let auctionItems: Record<string, { display: { name: string }; vanillaId?: string }> = data.items
+
+	let currentlyPreviewedAuction: PreviewedAuctionData | null = null
+
+	let query: string = ''
+
+	$: queryNormalized = query.toLowerCase()
+
+	let allMatchingItemIds: string[]
+	$: {
+		pageNumber = 0
+		allMatchingItemIds = Object.entries(auctionItems)
+			.filter(a => removeFormattingCode(a[1]?.display.name.toLowerCase()).includes(queryNormalized))
+			.map(a => a[0])
+	}
+	$: {
+		if (browser) fetchAndSetItems(allMatchingItemIds.slice(0, 100))
+	}
+
+	async function fetchAndSetItems(itemIds: string[]) {
+		const localQuery = query
+		const localData = await fetchItems(query.length > 0 ? itemIds : null)
+		// if the query hasn't changed, update the data
+		if (query === localQuery) data = localData
+	}
+	async function fetchItems(itemIds: null | string[]): Promise<ItemAuctionsSchema[]> {
+		let url = `auctionprices`
+		if (itemIds !== null) {
+			if (itemIds.length === 0) return []
+			url += `?items=${itemIds.join(',')}`
+		}
+		return await fetchApi(url, fetch).then(r => r.json())
+	}
+
+	let pageHeight = 0
+	$: {
+		pageHeight = 0
+	}
+
+	// 0 indexed
+	let pageNumber = 0
+	let loadingPage = false
+
+	async function checkScroll() {
+		if (loadingPage) return
+
+		let pageHeightTemp = window.scrollY + window.innerHeight
+		if (pageHeightTemp <= pageHeight) return
+		pageHeight = pageHeightTemp
+		if (pageHeight >= document.body.scrollHeight - 1000) {
+			loadingPage = true
+			pageNumber++
+			const itemIds = allMatchingItemIds.slice(pageNumber * 100, (pageNumber + 1) * 100)
+			if (itemIds.length > 0) {
+				const shownIds = data.map(d => d.id)
+				const items = (await fetchItems(itemIds)).filter(i => !shownIds.includes(i.id))
+				if (items.length > 0) data = [...data, ...items]
+			}
+			loadingPage = false
+		}
+	}
+
+	$: {
+		if (browser && !currentlyPreviewedAuction) {
+			for (const el of document.getElementsByClassName('selected-auction'))
+				el.classList.remove('selected-auction')
+		}
+	}
+</script>
+
+<Head
+	title="SkyBlock Auction Prices"
+	description="View how many coins every SkyBlock item costs in the auction house."
+/>
+<Header />
+
+<svelte:window on:scroll={checkScroll} />
+
+<AuctionPreviewTooltip bind:preview={currentlyPreviewedAuction} />
+
+<main>
+	<h1>SkyBlock Auction Prices</h1>
+	<div class="filter-items-settings">
+		<input type="text" id="filter-items-tier" placeholder="Search..." bind:value={query} />
+	</div>
+	<div class="item-list">
+		{#each data as item (item.id)}
+			{@const binAuctions = item.auctions.filter(i => i.bin)}
+			{@const normalAuctions = item.auctions.filter(i => !i.bin)}
+			{@const itemData = auctionItems[item.sbId]}
+			<div class="item-container">
+				{#if itemData && itemData.vanillaId}
+					<div class="item-slot-container">
+						<Item item={{ ...itemData, id: item.id }} pack={furfskyReborn} headSize={50} isslot />
+					</div>
+				{/if}
+				<h2>
+					{removeFormattingCode(
+						auctionItems[item.id]?.display.name ?? toTitleCase(cleanId(item.id.toLowerCase()))
+					)}
+				</h2>
+				<div class="auctions-info-text">
+					{#if binAuctions.length > 0}
+						<p>
+							Cheapest recent BIN: <b>
+								{binAuctions.reduce((a, b) => (a.coins < b.coins ? a : b)).coins.toLocaleString()} coins
+							</b>
+						</p>
+					{/if}
+					{#if normalAuctions.length > 0}
+						<p>
+							Cheapest recent auction: <b>
+								{normalAuctions
+									.reduce((a, b) => (a.coins < b.coins ? a : b))
+									.coins.toLocaleString()} coins
+							</b>
+						</p>
+					{/if}
+					{#if item.auctions.length >= 2}
+						<p>
+							Median:
+							<b>
+								{[...item.auctions]
+									.sort((a, b) => a.coins - b.coins)
+									[Math.floor(item.auctions.length / 2)].coins.toLocaleString()} coins
+							</b>
+						</p>
+						<p>
+							Volume:
+							<b>
+								{parseFloat(
+									(
+										(24 * 60 * 60) /
+										((Date.now() / 1000 - item.auctions[0].ts) / item.auctions.length)
+									).toPrecision(2)
+								).toLocaleString()}/day
+							</b>
+						</p>
+					{/if}
+				</div>
+				<div class="item-scatterplot">
+					<AuctionPriceScatterplot {item} bind:currentlyPreviewedAuction />
+				</div>
+			</div>
+		{/each}
+		{#if data.length === 0}
+			No results
+		{/if}
+	</div>
+</main>
+
+<style>
+	p {
+		margin: 0;
+	}
+	.item-list {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
+		grid-gap: 1em;
+		margin-top: 1em;
+	}
+	.item-container {
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: rgba(0, 0, 0, 0.1);
+		padding: 0.75em;
+		border-radius: 1em;
+	}
+
+	.item-scatterplot {
+		margin-top: 1em;
+	}
+
+	.auctions-info-text {
+		color: var(--theme-darker-text);
+	}
+	.auctions-info-text b {
+		color: var(--theme-main-text);
+	}
+
+	.item-slot-container {
+		float: right;
+	}
+</style>
diff --git a/src/routes/auctionprices/+page.ts b/src/routes/auctionprices/+page.ts
new file mode 100644
index 0000000..8166a3c
--- /dev/null
+++ b/src/routes/auctionprices/+page.ts
@@ -0,0 +1,13 @@
+import type { PageData } from './$types'
+import { fetchApi } from '$lib/api'
+
+export const load = (async ({ fetch }) => {
+	const auctionItemsPromise = fetchApi(`auctionitems`, fetch).then(r => r.json())
+	const prices = await fetchApi(`auctionprices`, fetch).then(r => r.json())
+	const items = await auctionItemsPromise
+
+	return {
+		prices,
+		items,
+	}
+}) satisfies PageData
diff --git a/src/routes/chat.svelte b/src/routes/chat.svelte
deleted file mode 100644
index df7aeee..0000000
--- a/src/routes/chat.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script lang="ts">
-	import Head from '$lib/Head.svelte'
-
-	import Header from '$lib/Header.svelte'
-
-	let data = ''
-	let ign = ''
-	let transparentBackground = false
-	let modeId: string
-
-	let generatedUrl = ''
-
-	$: modeUsesData = !['fr', 'f', 'fdeny', 'gdisband', 'pinvite'].includes(modeId)
-	$: modeUsesIgn = !['custom'].includes(modeId)
-
-	let imageDisplay: 'none' | 'block' = 'none'
-
-	function generateImage() {
-		let url = 'https://fake-chat.matdoes.dev/render.png?'
-		url = url + `m=${modeId}`
-		if (modeUsesIgn) url += `&u=${ign}`
-		if (modeUsesData) url += '&d=' + encodeURIComponent(data)
-		if (transparentBackground) url += '&t=1'
-
-		generatedUrl = url
-		imageDisplay = 'none'
-	}
-</script>
-
-<Head title="Hypixel Fake Chat Generator" />
-<Header />
-
-<main>
-	<h1>Hypixel Fake Chat Generator</h1>
-	<select id="modes" bind:value={modeId}>
-		<option value="chat">Public chat</option>
-		<option value="dm">Private message</option>
-		<option value="fr">Friend request</option>
-		<option value="f">Friend accept</option>
-		<option value="fdeny">Friend deny</option>
-		<option value="gchat">Guild chat</option>
-		<option value="gdisband">Guild disband</option>
-		<option value="pchat">Party chat</option>
-		<option value="pinvite">Party invite</option>
-		<option value="custom">Custom</option>
-	</select>
-	{#if modeUsesIgn}
-		<input id="ign" placeholder="Enter user" bind:value={ign} />
-	{/if}
-	{#if modeUsesData}
-		<input id="data" placeholder="Enter message" bind:value={data} />
-	{/if}
-	<label>
-		<input type="checkbox" id="transparent-background" bind:checked={transparentBackground} /> Transparent
-		background
-	</label>
-	<button id="generate" on:click={generateImage}>Generate image</button>
-	<!-- svelte-ignore a11y-missing-attribute -->
-	<img
-		src={generatedUrl}
-		id="outputImage"
-		style="display:{imageDisplay}"
-		on:load={() => (imageDisplay = 'block')}
-	/>
-</main>
-
-<style>
-	input {
-		border: 1px solid rgba(255, 255, 255, 0.2);
-	}
-	button {
-		background-color: #222;
-		border: 1px solid rgba(255, 255, 255, 0.2);
-		color: #aaa;
-	}
-	select,
-	input,
-	button {
-		display: block;
-		margin-bottom: 0.5em;
-	}
-	#transparent-background {
-		display: inline-block;
-	}
-</style>
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
new file mode 100644
index 0000000..df7aeee
--- /dev/null
+++ b/src/routes/chat/+page.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+	import Head from '$lib/Head.svelte'
+
+	import Header from '$lib/Header.svelte'
+
+	let data = ''
+	let ign = ''
+	let transparentBackground = false
+	let modeId: string
+
+	let generatedUrl = ''
+
+	$: modeUsesData = !['fr', 'f', 'fdeny', 'gdisband', 'pinvite'].includes(modeId)
+	$: modeUsesIgn = !['custom'].includes(modeId)
+
+	let imageDisplay: 'none' | 'block' = 'none'
+
+	function generateImage() {
+		let url = 'https://fake-chat.matdoes.dev/render.png?'
+		url = url + `m=${modeId}`
+		if (modeUsesIgn) url += `&u=${ign}`
+		if (modeUsesData) url += '&d=' + encodeURIComponent(data)
+		if (transparentBackground) url += '&t=1'
+
+		generatedUrl = url
+		imageDisplay = 'none'
+	}
+</script>
+
+<Head title="Hypixel Fake Chat Generator" />
+<Header />
+
+<main>
+	<h1>Hypixel Fake Chat Generator</h1>
+	<select id="modes" bind:value={modeId}>
+		<option value="chat">Public chat</option>
+		<option value="dm">Private message</option>
+		<option value="fr">Friend request</option>
+		<option value="f">Friend accept</option>
+		<option value="fdeny">Friend deny</option>
+		<option value="gchat">Guild chat</option>
+		<option value="gdisband">Guild disband</option>
+		<option value="pchat">Party chat</option>
+		<option value="pinvite">Party invite</option>
+		<option value="custom">Custom</option>
+	</select>
+	{#if modeUsesIgn}
+		<input id="ign" placeholder="Enter user" bind:value={ign} />
+	{/if}
+	{#if modeUsesData}
+		<input id="data" placeholder="Enter message" bind:value={data} />
+	{/if}
+	<label>
+		<input type="checkbox" id="transparent-background" bind:checked={transparentBackground} /> Transparent
+		background
+	</label>
+	<button id="generate" on:click={generateImage}>Generate image</button>
+	<!-- svelte-ignore a11y-missing-attribute -->
+	<img
+		src={generatedUrl}
+		id="outputImage"
+		style="display:{imageDisplay}"
+		on:load={() => (imageDisplay = 'block')}
+	/>
+</main>
+
+<style>
+	input {
+		border: 1px solid rgba(255, 255, 255, 0.2);
+	}
+	button {
+		background-color: #222;
+		border: 1px solid rgba(255, 255, 255, 0.2);
+		color: #aaa;
+	}
+	select,
+	input,
+	button {
+		display: block;
+		margin-bottom: 0.5em;
+	}
+	#transparent-background {
+		display: inline-block;
+	}
+</style>
diff --git a/src/routes/election.svelte b/src/routes/election.svelte
deleted file mode 100644
index ad869a1..0000000
--- a/src/routes/election.svelte
+++ /dev/null
@@ -1,257 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	import { fetchApi } from '$lib/api'
-
-	export const load: Load = async ({ params, fetch }) => {
-		const data = await fetchApi(`election?t=${Math.floor(Date.now() / 1000)}`, fetch).then(r =>
-			r.json()
-		)
-
-		return {
-			props: {
-				data,
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import Header from '$lib/Header.svelte'
-	import Head from '$lib/Head.svelte'
-	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 { invalidate } from '$app/navigation'
-	import { browser } from '$app/env'
-
-	export let data: ElectionData
-
-	let destroyed = false
-
-	let currentTime = Date.now()
-	// update currentTime every animation frame
-	function updateTime() {
-		currentTime = Date.now()
-		if (!destroyed) requestAnimationFrame(updateTime)
-	}
-
-	$: nextSpecialMayorYear = Math.ceil(((data.current?.year || data.previous.year) + 1) / 8) * 8
-	const specialMayors = ['Scorpius', 'Derpy', 'Jerry']
-
-	let autoInvalidateTimeout: null | NodeJS.Timeout = null
-
-	// invalidate at the end of every minute
-	async function autoInvalidate(first: boolean) {
-		// don't invalidate the first time the function is called
-		if (!first) await invalidate('')
-
-		const lastUpdatedAgo = Date.now() - data.lastUpdated
-		autoInvalidateTimeout = setTimeout(() => autoInvalidate(false), lastUpdatedAgo + 10 * 60 * 1000)
-	}
-
-	if (browser) autoInvalidate(true)
-
-	onMount(() => {
-		destroyed = false
-		updateTime()
-	})
-
-	onDestroy(() => {
-		destroyed = true
-		if (autoInvalidateTimeout) clearTimeout(autoInvalidateTimeout)
-	})
-</script>
-
-<Head title="SkyBlock Mayor Election Status" />
-<Header />
-
-<main>
-	{#if data.current}
-		<div class="next-mayor-update">
-			<p>
-				<b>Last API update:</b>
-				{millisecondsToTime(currentTime - data.lastUpdated, {
-					smallestUnit: 1,
-					parts: 1,
-				})} ago
-			</p>
-			<p>
-				<b>Next API update:</b>
-				{millisecondsToTime(10 * 60 * 1000 - (currentTime - data.lastUpdated), {
-					smallestUnit: 1,
-					parts: 1,
-				})}
-			</p>
-		</div>
-	{/if}
-	<h1>SkyBlock Mayor Election Status</h1>
-	<p>
-		<b>Next election:</b>
-		{millisecondsToTime(skyblockTime(data.previous.year + 1, 6, 27) - currentTime, {
-			parts: 3,
-			smallestUnit: 1,
-		})}
-	</p>
-
-	{#if data.current}
-		<h2>Ongoing election <span class="candidate-year">(Year {data.current.year})</span></h2>
-		<p class="election-ends-in-text">
-			<b>Ends in:</b>
-			{millisecondsToTime(skyblockTime(data.previous.year + 1, 3, 27) - currentTime)}
-		</p>
-		<div class="mayor-candidates">
-			{#each data.current.candidates.sort((a, b) => a.votes - b.votes) as candidate}
-				{@const color = candidate.color ? colorCodes[candidate.color] : null}
-				<div class="mayor">
-					<div>
-						<h3 style={color ? `color: ${color}` : undefined}>{candidate.name}</h3>
-						<p class="mayor-vote-count">
-							<span class="mayor-vote-count-number" style={color ? `color: ${color}` : undefined}>
-								{candidate.votes.toLocaleString()}
-							</span> votes
-						</p>
-						<MayorSkin name={candidate.name} />
-					</div>
-					<ul class="mayor-perks">
-						{#each candidate.perks as perk}
-							<div class="mayor-perk">
-								<h4 style={color ? `color: ${color}` : undefined}>{perk.name}</h4>
-								<p>{@html formattingCodeToHtml(perk.description)}</p>
-							</div>
-						{/each}
-					</ul>
-				</div>
-			{/each}
-		</div>
-	{/if}
-
-	<h2>
-		Previous election <span class="candidate-year">(Year {data.previous.year})</span>
-	</h2>
-	<div class="mayor-candidates">
-		{#each data.previous.candidates.sort((a, b) => b.votes - a.votes) as candidate}
-			{@const color = candidate.color ? colorCodes[candidate.color] : null}
-			<div class="mayor">
-				<div>
-					<h3 style={color ? `color: ${color}` : undefined}>{candidate.name}</h3>
-					<p class="mayor-vote-count">
-						<span class="mayor-vote-count-number" style={color ? `color: ${color}` : undefined}>
-							{candidate.votes.toLocaleString()}
-						</span> votes
-					</p>
-					{#if candidate.name == data.previous.winner}
-						<p class="mayor-winner">Winner</p>
-					{/if}
-					<MayorSkin name={candidate.name} />
-				</div>
-				<ul class="mayor-perks">
-					{#each candidate.perks as perk}
-						<div class="mayor-perk">
-							<h4 style={color ? `color: ${color}` : undefined}>{perk.name}</h4>
-							<p>{@html formattingCodeToHtml(perk.description)}</p>
-						</div>
-					{/each}
-				</ul>
-			</div>
-		{/each}
-	</div>
-
-	<!-- {%- set nextSpecialMayorYear = (((data.current.year or data.previous.year) + 1) / 8)|round(0, 'ceil') * 8 -%}
-	{%- set specialMayors = ['Scorpius', 'Derpy', 'Jerry'] -%}
-	<h2>Upcoming special mayors</h2>
-	<ul>
-		{%- for i in range(3) -%}
-		<li><b>{{ specialMayors[((nextSpecialMayorYear / 8) + i) % 3] }}</b> <span class="next-special-mayor-time">({{ skyblockYear(nextSpecialMayorYear + 8 * i, 6, 27) }})</span></li>
-		{%- endfor -%}
-	</ul> -->
-
-	<h2>Upcoming special mayors</h2>
-	<ul>
-		<!-- for i in range(3) -->
-		{#each Array(3) as _, i}
-			<li>
-				<b>{specialMayors[(nextSpecialMayorYear / 8 + i) % 3]}</b>
-				<span class="next-special-mayor-time">
-					({millisecondsToTime(
-						skyblockTime(nextSpecialMayorYear + 8 * i + 1, 3, 27) - currentTime
-					)})
-				</span>
-			</li>
-		{/each}
-	</ul>
-</main>
-
-<style>
-	.mayor-grid {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		grid-column-gap: 1em;
-		grid-row-gap: 1em;
-		margin-top: 1em;
-		margin-bottom: 1em;
-	}
-	.mayor {
-		display: inline-block;
-		width: 12em;
-		margin-right: 1em;
-		vertical-align: top;
-	}
-	.mayor h3 {
-		filter: brightness(1.5);
-		text-align: center;
-	}
-	.mayor img {
-		display: block;
-		width: 5em;
-		margin: 0 auto;
-	}
-	.mayor-vote-count-number {
-		filter: brightness(1.2);
-	}
-	.mayor-vote-count {
-		text-align: center;
-		width: 100%;
-		margin: 0 0 0.5em 0;
-	}
-	.mayor-perk h4 {
-		margin-bottom: 0;
-	}
-	.mayor-perk p {
-		margin: 0;
-	}
-	.mayor-candidates {
-		/* display: ; */
-		/* everything next to each other */
-		/* grid-template-columns: repeat(5, 1fr); */
-		max-width: fit-content;
-	}
-	.mayor-perks {
-		list-style-type: none;
-		padding: 0;
-	}
-	.candidate-year {
-		font-weight: normal;
-		color: var(--theme-darker-text);
-	}
-	.mayor-winner {
-		color: var(--theme-yellow);
-		font-weight: bold;
-		margin: 0;
-		text-align: center;
-		font-size: 1em;
-	}
-	.next-special-mayor-time {
-		color: var(--theme-darker-text);
-	}
-	.election-ends-in-text {
-		margin-top: 0;
-	}
-	.next-mayor-update {
-		float: right;
-		color: var(--theme-darker-text);
-	}
-	.next-mayor-update p {
-		margin: 0;
-	}
-</style>
diff --git a/src/routes/election/+page.svelte b/src/routes/election/+page.svelte
new file mode 100644
index 0000000..1754655
--- /dev/null
+++ b/src/routes/election/+page.svelte
@@ -0,0 +1,257 @@
+<script lang="ts" context="module">
+	import type { Load } from '@sveltejs/kit'
+	import { fetchApi } from '$lib/api'
+
+	export const load: Load = async ({ params, fetch }) => {
+		const data = await fetchApi(`election?t=${Math.floor(Date.now() / 1000)}`, fetch).then(r =>
+			r.json()
+		)
+
+		return {
+			props: {
+				data,
+			},
+		}
+	}
+</script>
+
+<script lang="ts">
+	import Header from '$lib/Header.svelte'
+	import Head from '$lib/Head.svelte'
+	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 { invalidate } from '$app/navigation'
+	import { browser } from '$app/environment'
+
+	export let data: ElectionData
+
+	let destroyed = false
+
+	let currentTime = Date.now()
+	// update currentTime every animation frame
+	function updateTime() {
+		currentTime = Date.now()
+		if (!destroyed) requestAnimationFrame(updateTime)
+	}
+
+	$: nextSpecialMayorYear = Math.ceil(((data.current?.year || data.previous.year) + 1) / 8) * 8
+	const specialMayors = ['Scorpius', 'Derpy', 'Jerry']
+
+	let autoInvalidateTimeout: null | NodeJS.Timeout = null
+
+	// invalidate at the end of every minute
+	async function autoInvalidate(first: boolean) {
+		// don't invalidate the first time the function is called
+		if (!first) await invalidate('')
+
+		const lastUpdatedAgo = Date.now() - data.lastUpdated
+		autoInvalidateTimeout = setTimeout(() => autoInvalidate(false), lastUpdatedAgo + 10 * 60 * 1000)
+	}
+
+	if (browser) autoInvalidate(true)
+
+	onMount(() => {
+		destroyed = false
+		updateTime()
+	})
+
+	onDestroy(() => {
+		destroyed = true
+		if (autoInvalidateTimeout) clearTimeout(autoInvalidateTimeout)
+	})
+</script>
+
+<Head title="SkyBlock Mayor Election Status" />
+<Header />
+
+<main>
+	{#if data.current}
+		<div class="next-mayor-update">
+			<p>
+				<b>Last API update:</b>
+				{millisecondsToTime(currentTime - data.lastUpdated, {
+					smallestUnit: 1,
+					parts: 1,
+				})} ago
+			</p>
+			<p>
+				<b>Next API update:</b>
+				{millisecondsToTime(10 * 60 * 1000 - (currentTime - data.lastUpdated), {
+					smallestUnit: 1,
+					parts: 1,
+				})}
+			</p>
+		</div>
+	{/if}
+	<h1>SkyBlock Mayor Election Status</h1>
+	<p>
+		<b>Next election:</b>
+		{millisecondsToTime(skyblockTime(data.previous.year + 1, 6, 27) - currentTime, {
+			parts: 3,
+			smallestUnit: 1,
+		})}
+	</p>
+
+	{#if data.current}
+		<h2>Ongoing election <span class="candidate-year">(Year {data.current.year})</span></h2>
+		<p class="election-ends-in-text">
+			<b>Ends in:</b>
+			{millisecondsToTime(skyblockTime(data.previous.year + 1, 3, 27) - currentTime)}
+		</p>
+		<div class="mayor-candidates">
+			{#each data.current.candidates.sort((a, b) => a.votes - b.votes) as candidate}
+				{@const color = candidate.color ? colorCodes[candidate.color] : null}
+				<div class="mayor">
+					<div>
+						<h3 style={color ? `color: ${color}` : undefined}>{candidate.name}</h3>
+						<p class="mayor-vote-count">
+							<span class="mayor-vote-count-number" style={color ? `color: ${color}` : undefined}>
+								{candidate.votes.toLocaleString()}
+							</span> votes
+						</p>
+						<MayorSkin name={candidate.name} />
+					</div>
+					<ul class="mayor-perks">
+						{#each candidate.perks as perk}
+							<div class="mayor-perk">
+								<h4 style={color ? `color: ${color}` : undefined}>{perk.name}</h4>
+								<p>{@html formattingCodeToHtml(perk.description)}</p>
+							</div>
+						{/each}
+					</ul>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<h2>
+		Previous election <span class="candidate-year">(Year {data.previous.year})</span>
+	</h2>
+	<div class="mayor-candidates">
+		{#each data.previous.candidates.sort((a, b) => b.votes - a.votes) as candidate}
+			{@const color = candidate.color ? colorCodes[candidate.color] : null}
+			<div class="mayor">
+				<div>
+					<h3 style={color ? `color: ${color}` : undefined}>{candidate.name}</h3>
+					<p class="mayor-vote-count">
+						<span class="mayor-vote-count-number" style={color ? `color: ${color}` : undefined}>
+							{candidate.votes.toLocaleString()}
+						</span> votes
+					</p>
+					{#if candidate.name == data.previous.winner}
+						<p class="mayor-winner">Winner</p>
+					{/if}
+					<MayorSkin name={candidate.name} />
+				</div>
+				<ul class="mayor-perks">
+					{#each candidate.perks as perk}
+						<div class="mayor-perk">
+							<h4 style={color ? `color: ${color}` : undefined}>{perk.name}</h4>
+							<p>{@html formattingCodeToHtml(perk.description)}</p>
+						</div>
+					{/each}
+				</ul>
+			</div>
+		{/each}
+	</div>
+
+	<!-- {%- set nextSpecialMayorYear = (((data.current.year or data.previous.year) + 1) / 8)|round(0, 'ceil') * 8 -%}
+	{%- set specialMayors = ['Scorpius', 'Derpy', 'Jerry'] -%}
+	<h2>Upcoming special mayors</h2>
+	<ul>
+		{%- for i in range(3) -%}
+		<li><b>{{ specialMayors[((nextSpecialMayorYear / 8) + i) % 3] }}</b> <span class="next-special-mayor-time">({{ skyblockYear(nextSpecialMayorYear + 8 * i, 6, 27) }})</span></li>
+		{%- endfor -%}
+	</ul> -->
+
+	<h2>Upcoming special mayors</h2>
+	<ul>
+		<!-- for i in range(3) -->
+		{#each Array(3) as _, i}
+			<li>
+				<b>{specialMayors[(nextSpecialMayorYear / 8 + i) % 3]}</b>
+				<span class="next-special-mayor-time">
+					({millisecondsToTime(
+						skyblockTime(nextSpecialMayorYear + 8 * i + 1, 3, 27) - currentTime
+					)})
+				</span>
+			</li>
+		{/each}
+	</ul>
+</main>
+
+<style>
+	.mayor-grid {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		grid-column-gap: 1em;
+		grid-row-gap: 1em;
+		margin-top: 1em;
+		margin-bottom: 1em;
+	}
+	.mayor {
+		display: inline-block;
+		width: 12em;
+		margin-right: 1em;
+		vertical-align: top;
+	}
+	.mayor h3 {
+		filter: brightness(1.5);
+		text-align: center;
+	}
+	.mayor img {
+		display: block;
+		width: 5em;
+		margin: 0 auto;
+	}
+	.mayor-vote-count-number {
+		filter: brightness(1.2);
+	}
+	.mayor-vote-count {
+		text-align: center;
+		width: 100%;
+		margin: 0 0 0.5em 0;
+	}
+	.mayor-perk h4 {
+		margin-bottom: 0;
+	}
+	.mayor-perk p {
+		margin: 0;
+	}
+	.mayor-candidates {
+		/* display: ; */
+		/* everything next to each other */
+		/* grid-template-columns: repeat(5, 1fr); */
+		max-width: fit-content;
+	}
+	.mayor-perks {
+		list-style-type: none;
+		padding: 0;
+	}
+	.candidate-year {
+		font-weight: normal;
+		color: var(--theme-darker-text);
+	}
+	.mayor-winner {
+		color: var(--theme-yellow);
+		font-weight: bold;
+		margin: 0;
+		text-align: center;
+		font-size: 1em;
+	}
+	.next-special-mayor-time {
+		color: var(--theme-darker-text);
+	}
+	.election-ends-in-text {
+		margin-top: 0;
+	}
+	.next-mayor-update {
+		float: right;
+		color: var(--theme-darker-text);
+	}
+	.next-mayor-update p {
+		margin: 0;
+	}
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
deleted file mode 100644
index 851f70e..0000000
--- a/src/routes/index.svelte
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-
-	export const load: Load = async ({ params, fetch, session }) => {
-		return {
-			props: {
-				loggedIn: session.sid !== undefined,
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import Username from '$lib/minecraft/Username.svelte'
-	import SearchUser from '$lib/SearchUser.svelte'
-	import donators from '../_donators.json'
-	import Head from '$lib/Head.svelte'
-	import Emoji from '$lib/Emoji.svelte'
-	import LoginButton from '$lib/LoginButton.svelte'
-
-	export const hydrate = false
-
-	export let loggedIn: boolean
-</script>
-
-<svelte:head>
-	<title>SkyBlock Stats</title>
-</svelte:head>
-
-<Head
-	title="SkyBlock Stats"
-	description="Check SkyBlock stats, see leaderboards, mayors, and way more."
-/>
-<a class="github" href="https://github.com/skyblockstats/skyblock-stats">
-	<img src="/github-mark-light.png" alt="View source on GitHub" />
-</a>
-
-<main>
-	<LoginButton {loggedIn} />
-	<section class="title-section">
-		<h1>SkyBlock Stats</h1>
-		<SearchUser>
-			<button>View Profiles</button>
-		</SearchUser>
-	</section>
-
-	<hr style="margin: 25vh 0 2em 0" />
-
-	<section>
-		<h2>Other SkyBlock tools</h2>
-		<ul id="other-tools-list">
-			<li><a href="/auctionprices">Auction prices</a></li>
-			<li><a href="/leaderboards">Leaderboards</a></li>
-			<li><a>Bazaar (coming soon)</a></li>
-			<li><a href="/chat">Fake chat generator</a></li>
-			<li><a href="https://skyblock-npcs.matdoes.dev">NPC Skin Stealer</a></li>
-			<li><a href="/election">Mayor Election Status</a></li>
-			<li><a href="/items">Item List</a></li>
-		</ul>
-	</section>
-
-	<section id="donators">
-		<h2>Donators</h2>
-		<p>
-			Thank you to these people for
-			<a href="https://ko-fi.com/matdoesdev" target="_blank">donating</a>. <Emoji value="❤" />
-		</p>
-		<ul>
-			{#each donators as donator}
-				<li><Username player={donator} headType="2d" hyperlinkToProfile /></li>
-			{/each}
-		</ul>
-	</section>
-	<section>
-		<h2>Info</h2>
-		<p>Website made by <a href="https://matdoes.dev">mat</a>.</p>
-		<p>
-			Official hangout/support Discord:
-			<a href="//discord.gg/KtscNUnh4f">discord.gg/KtscNUnh4f</a>.
-		</p>
-		<p>
-			Resource packs: <a href="//furfsky.net">Furfsky Reborn</a> (default),
-			<a href="//packshq.com">PacksHQ</a>,
-			<a href="//hypixel.net/threads/2138599">Furfsky</a>,
-			<a href="//hypixel.net/threads/2239953">Ectoplasm</a>,
-			<a href="//hypixel.net/threads/3470904">RNBW</a>,
-			<a href="//hypixel.net/threads/4174260">Hypixel+</a>,
-			<a href="//hypixel.net/threads/3597207">Worlds and Beyond</a>.
-		</p>
-		<p>
-			Minecraft skin APIs: <a href="//mc-heads.net">mc-heads.net</a> for 3d renders and
-			<a href="//mc-crafatar.com">crafatar.com</a> for 2d heads.
-		</p>
-		<p>Emojis: <a href="//twemoji.twitter.com/">Twemoji</a>.</p>
-		<p>Font: <a href="//brailleinstitute.org/freefont">Atkinson Hyperlegible</a>.</p>
-		<p class="secret">Thank you to Duckie Cousin Gaming for the idea to add harp leaderboards.</p>
-	</section>
-</main>
-
-<style>
-	h1 {
-		text-align: center;
-	}
-
-	.title-section {
-		margin: 0 auto;
-		width: fit-content;
-	}
-
-	#donators p {
-		margin: 0;
-	}
-
-	li {
-		padding: 0.2em 0;
-	}
-
-	.github {
-		position: absolute;
-		top: 0.5rem;
-		left: 0.5rem;
-		opacity: 0.2;
-		transition: opacity 200ms;
-	}
-	.github:hover {
-		opacity: 0.9;
-	}
-	.github > img {
-		width: 2rem;
-	}
-
-	.secret {
-		color: var(--theme-main-background);
-		margin: 0;
-		font-size: 6pt;
-		margin-top: -0.5rem;
-	}
-</style>
diff --git a/src/routes/items.svelte b/src/routes/items.svelte
deleted file mode 100644
index 82b3ee3..0000000
--- a/src/routes/items.svelte
+++ /dev/null
@@ -1,216 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	import { fetchApi } from '$lib/api'
-
-	export const load: Load = async ({ params, fetch }) => {
-		const data = await fetchApi(`items`, fetch).then(r => r.json())
-
-		return {
-			props: {
-				data,
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import Header from '$lib/Header.svelte'
-	import Head from '$lib/Head.svelte'
-	import { millisecondsToTime, TIER_COLORS, colorCodes, cleanId, toTitleCase } from '$lib/utils'
-	import type { ItemListData, ItemListItem } from '$lib/APITypes'
-	import Item from '$lib/minecraft/Item.svelte'
-	import furfskyReborn from 'skyblock-assets/matchers/furfsky_reborn.json'
-
-	export let data: ItemListData
-
-	let now = Date.now()
-
-	let query: string = ''
-	let filterCategory = 'any'
-	let filterTier = 'any'
-	// this is pre-calculated here so we don't have to keep lowercasing it
-	$: normalizedQuery = query.toLowerCase().replace(/_/g, ' ')
-
-	$: filteredItems = data.list
-		.filter(
-			i =>
-				i.display.name.toLowerCase().replace(/_/g, ' ').includes(normalizedQuery) ||
-				i.id.toLowerCase().replace(/_/g, ' ').includes(normalizedQuery)
-		)
-		.filter(i => filterCategory === 'any' || i.category === filterCategory)
-		.filter(i => filterTier === 'any' || i.tier === filterTier)
-
-	let pageHeight = 0
-	let filteredItemsSliced: ItemListItem[]
-	$: {
-		filteredItemsSliced = filteredItems.slice(0, 200)
-		pageHeight = 0
-	}
-
-	function checkScroll() {
-		let pageHeightTemp = window.scrollY + window.innerHeight
-		if (pageHeightTemp <= pageHeight) return
-		pageHeight = pageHeightTemp
-		if (pageHeight >= document.body.scrollHeight - 1000) {
-			filteredItemsSliced = filteredItems.slice(0, filteredItemsSliced.length + 200)
-		}
-	}
-
-	let categories: Set<string> = new Set()
-	let tiers: Set<string> = new Set()
-	for (const i of data.list) {
-		if (i.category) categories.add(i.category)
-		if (i.tier) tiers.add(i.tier)
-	}
-</script>
-
-<Head title="SkyBlock Item List" />
-<Header />
-
-<svelte:window on:scroll={checkScroll} />
-
-<main>
-	<div class="last-updated">
-		Last updated: <a href="https://github.com/mat-1/skyblock-items-history/commits/main"
-			><time datetime="${data.lastUpdated}">
-				{millisecondsToTime(now - data.lastUpdated)} ago
-			</time></a
-		>
-	</div>
-	<h1>SkyBlock Item List</h1>
-	<p class="results-count">{filteredItems.length.toLocaleString()} items</p>
-	<div class="filter-items-settings">
-		<input type="text" id="filter-items-tier" placeholder="Search..." bind:value={query} />
-
-		<label for="filter-items-tier">Tier:</label>
-		<select id="filter-items-tier" class="filter-items-tier" bind:value={filterTier}>
-			<option value="any" selected>Any</option>
-			{#each Array.from(tiers) as tier}
-				<option value={tier}>{cleanId(tier.toLowerCase())}</option>
-			{/each}
-		</select>
-
-		<label for="filter-items-category">Category:</label>
-		<select id="filter-items-category" class="filter-items-category" bind:value={filterCategory}>
-			<option value="any" selected>Any</option>
-			{#each Array.from(categories) as category}
-				<option value={category}>{cleanId(category)}</option>
-			{/each}
-		</select>
-	</div>
-	<div class="item-list">
-		{#each filteredItemsSliced as item (item.id)}
-			<div class="item-container">
-				<span class="item-slot-container"><Item {item} pack={furfskyReborn} /></span>
-				<a href="https://wiki.hypixel.net/{item.display.name.replace(/ /g, '_')}"
-					><h3
-						class="item-name"
-						style={item.tier ? `color: ${colorCodes[TIER_COLORS[item.tier]]}` : undefined}
-					>
-						{item.display.name}
-					</h3></a
-				>
-				<div>
-					{#if item.museum}
-						<p>
-							<span class="item-info-label">Museum</span>
-						</p>
-					{/if}
-					{#if item.soulbound}
-						<p>
-							<span class="item-info-label">Soulbound</span>
-						</p>
-					{/if}
-					{#if item.category}
-						<p>
-							<span class="item-info-label">Category:</span>
-							<span class="item-info-value">
-								{toTitleCase(cleanId(item.category))}
-							</span>
-						</p>
-					{/if}
-					{#if item.npcSellPrice}
-						<p>
-							<span class="item-info-label">NPC sell price:</span>
-							<span class="item-info-value">
-								{#if item.npcSellPrice == 1}1 coin{:else}
-									{item.npcSellPrice.toLocaleString()} coins{/if}
-							</span>
-						</p>
-					{/if}
-					{#if Object.keys(item.requirements).length > 0}
-						<div>
-							<span class="item-info-label">Requirements:</span>
-							<ul>
-								{#if item.requirements.dungeon}
-									<li>
-										{cleanId(item.requirements.dungeon.type)}
-										{item.requirements.dungeon.level}
-									</li>
-								{/if}
-								{#if item.requirements.skill}
-									<li>
-										{cleanId(item.requirements.skill.type)}
-										{item.requirements.skill.level}
-									</li>
-								{/if}
-								{#if item.requirements.slayer}
-									<li>
-										{cleanId(item.requirements.slayer.boss)}
-										Slayer
-										{item.requirements.slayer.level}
-									</li>
-								{/if}
-							</ul>
-						</div>
-					{/if}
-				</div>
-			</div>
-		{/each}
-		{#if filteredItems.length === 0}
-			No results!
-		{/if}
-	</div>
-</main>
-
-<style>
-	.last-updated {
-		float: right;
-		color: var(--theme-darker-text);
-	}
-
-	p,
-	ul {
-		margin: 0;
-	}
-	li {
-		position: relative;
-		left: -1rem;
-	}
-	.results-count {
-		position: relative;
-		top: -1em;
-	}
-	.item-slot-container {
-		float: right;
-	}
-	.item-list {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-		grid-gap: 1em;
-		margin-top: 1em;
-	}
-	.item-container {
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		background: rgba(0, 0, 0, 0.1);
-		padding: 0.75em;
-		border-radius: 1em;
-	}
-
-	.item-info-label {
-		color: var(--theme-darker-text);
-	}
-	.item-info-value {
-		color: var(--theme-main-text);
-	}
-</style>
diff --git a/src/routes/items/+page.svelte b/src/routes/items/+page.svelte
new file mode 100644
index 0000000..82b3ee3
--- /dev/null
+++ b/src/routes/items/+page.svelte
@@ -0,0 +1,216 @@
+<script lang="ts" context="module">
+	import type { Load } from '@sveltejs/kit'
+	import { fetchApi } from '$lib/api'
+
+	export const load: Load = async ({ params, fetch }) => {
+		const data = await fetchApi(`items`, fetch).then(r => r.json())
+
+		return {
+			props: {
+				data,
+			},
+		}
+	}
+</script>
+
+<script lang="ts">
+	import Header from '$lib/Header.svelte'
+	import Head from '$lib/Head.svelte'
+	import { millisecondsToTime, TIER_COLORS, colorCodes, cleanId, toTitleCase } from '$lib/utils'
+	import type { ItemListData, ItemListItem } from '$lib/APITypes'
+	import Item from '$lib/minecraft/Item.svelte'
+	import furfskyReborn from 'skyblock-assets/matchers/furfsky_reborn.json'
+
+	export let data: ItemListData
+
+	let now = Date.now()
+
+	let query: string = ''
+	let filterCategory = 'any'
+	let filterTier = 'any'
+	// this is pre-calculated here so we don't have to keep lowercasing it
+	$: normalizedQuery = query.toLowerCase().replace(/_/g, ' ')
+
+	$: filteredItems = data.list
+		.filter(
+			i =>
+				i.display.name.toLowerCase().replace(/_/g, ' ').includes(normalizedQuery) ||
+				i.id.toLowerCase().replace(/_/g, ' ').includes(normalizedQuery)
+		)
+		.filter(i => filterCategory === 'any' || i.category === filterCategory)
+		.filter(i => filterTier === 'any' || i.tier === filterTier)
+
+	let pageHeight = 0
+	let filteredItemsSliced: ItemListItem[]
+	$: {
+		filteredItemsSliced = filteredItems.slice(0, 200)
+		pageHeight = 0
+	}
+
+	function checkScroll() {
+		let pageHeightTemp = window.scrollY + window.innerHeight
+		if (pageHeightTemp <= pageHeight) return
+		pageHeight = pageHeightTemp
+		if (pageHeight >= document.body.scrollHeight - 1000) {
+			filteredItemsSliced = filteredItems.slice(0, filteredItemsSliced.length + 200)
+		}
+	}
+
+	let categories: Set<string> = new Set()
+	let tiers: Set<string> = new Set()
+	for (const i of data.list) {
+		if (i.category) categories.add(i.category)
+		if (i.tier) tiers.add(i.tier)
+	}
+</script>
+
+<Head title="SkyBlock Item List" />
+<Header />
+
+<svelte:window on:scroll={checkScroll} />
+
+<main>
+	<div class="last-updated">
+		Last updated: <a href="https://github.com/mat-1/skyblock-items-history/commits/main"
+			><time datetime="${data.lastUpdated}">
+				{millisecondsToTime(now - data.lastUpdated)} ago
+			</time></a
+		>
+	</div>
+	<h1>SkyBlock Item List</h1>
+	<p class="results-count">{filteredItems.length.toLocaleString()} items</p>
+	<div class="filter-items-settings">
+		<input type="text" id="filter-items-tier" placeholder="Search..." bind:value={query} />
+
+		<label for="filter-items-tier">Tier:</label>
+		<select id="filter-items-tier" class="filter-items-tier" bind:value={filterTier}>
+			<option value="any" selected>Any</option>
+			{#each Array.from(tiers) as tier}
+				<option value={tier}>{cleanId(tier.toLowerCase())}</option>
+			{/each}
+		</select>
+
+		<label for="filter-items-category">Category:</label>
+		<select id="filter-items-category" class="filter-items-category" bind:value={filterCategory}>
+			<option value="any" selected>Any</option>
+			{#each Array.from(categories) as category}
+				<option value={category}>{cleanId(category)}</option>
+			{/each}
+		</select>
+	</div>
+	<div class="item-list">
+		{#each filteredItemsSliced as item (item.id)}
+			<div class="item-container">
+				<span class="item-slot-container"><Item {item} pack={furfskyReborn} /></span>
+				<a href="https://wiki.hypixel.net/{item.display.name.replace(/ /g, '_')}"
+					><h3
+						class="item-name"
+						style={item.tier ? `color: ${colorCodes[TIER_COLORS[item.tier]]}` : undefined}
+					>
+						{item.display.name}
+					</h3></a
+				>
+				<div>
+					{#if item.museum}
+						<p>
+							<span class="item-info-label">Museum</span>
+						</p>
+					{/if}
+					{#if item.soulbound}
+						<p>
+							<span class="item-info-label">Soulbound</span>
+						</p>
+					{/if}
+					{#if item.category}
+						<p>
+							<span class="item-info-label">Category:</span>
+							<span class="item-info-value">
+								{toTitleCase(cleanId(item.category))}
+							</span>
+						</p>
+					{/if}
+					{#if item.npcSellPrice}
+						<p>
+							<span class="item-info-label">NPC sell price:</span>
+							<span class="item-info-value">
+								{#if item.npcSellPrice == 1}1 coin{:else}
+									{item.npcSellPrice.toLocaleString()} coins{/if}
+							</span>
+						</p>
+					{/if}
+					{#if Object.keys(item.requirements).length > 0}
+						<div>
+							<span class="item-info-label">Requirements:</span>
+							<ul>
+								{#if item.requirements.dungeon}
+									<li>
+										{cleanId(item.requirements.dungeon.type)}
+										{item.requirements.dungeon.level}
+									</li>
+								{/if}
+								{#if item.requirements.skill}
+									<li>
+										{cleanId(item.requirements.skill.type)}
+										{item.requirements.skill.level}
+									</li>
+								{/if}
+								{#if item.requirements.slayer}
+									<li>
+										{cleanId(item.requirements.slayer.boss)}
+										Slayer
+										{item.requirements.slayer.level}
+									</li>
+								{/if}
+							</ul>
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/each}
+		{#if filteredItems.length === 0}
+			No results!
+		{/if}
+	</div>
+</main>
+
+<style>
+	.last-updated {
+		float: right;
+		color: var(--theme-darker-text);
+	}
+
+	p,
+	ul {
+		margin: 0;
+	}
+	li {
+		position: relative;
+		left: -1rem;
+	}
+	.results-count {
+		position: relative;
+		top: -1em;
+	}
+	.item-slot-container {
+		float: right;
+	}
+	.item-list {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+		grid-gap: 1em;
+		margin-top: 1em;
+	}
+	.item-container {
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: rgba(0, 0, 0, 0.1);
+		padding: 0.75em;
+		border-radius: 1em;
+	}
+
+	.item-info-label {
+		color: var(--theme-darker-text);
+	}
+	.item-info-value {
+		color: var(--theme-main-text);
+	}
+</style>
diff --git a/src/routes/leaderboard/+page.ts b/src/routes/leaderboard/+page.ts
new file mode 100644
index 0000000..871f4bc
--- /dev/null
+++ b/src/routes/leaderboard/+page.ts
@@ -0,0 +1,10 @@
+import type { PageLoad } from './$types'
+
+export const load = (() => {
+    return {
+        status: 303,
+        headers: {
+            location: '/leaderboards'
+        }
+    }
+}) satisfies PageLoad
diff --git a/src/routes/leaderboard/[name].ts b/src/routes/leaderboard/[name].ts
deleted file mode 100644
index 11f3468..0000000
--- a/src/routes/leaderboard/[name].ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit'
-
-// The route /leaderboard/<name> was moved to /leaderboards/<name> for
-// consistency.
-export const get: RequestHandler = ({ params }) => {
-    return {
-        status: 303,
-        headers: {
-            location: `/leaderboards/${params.name}`
-        }
-    }
-}
diff --git a/src/routes/leaderboard/[name]/+page.ts b/src/routes/leaderboard/[name]/+page.ts
new file mode 100644
index 0000000..c4b668e
--- /dev/null
+++ b/src/routes/leaderboard/[name]/+page.ts
@@ -0,0 +1,12 @@
+import type { PageLoad } from './$types'
+
+// The route /leaderboard/<name> was moved to /leaderboards/<name> for
+// consistency.
+export const get = (({ params }) => {
+    return {
+        status: 303,
+        headers: {
+            location: `/leaderboards/${params.name}`
+        }
+    }
+}) satisfies PageLoad
diff --git a/src/routes/leaderboard/index.ts b/src/routes/leaderboard/index.ts
deleted file mode 100644
index e904469..0000000
--- a/src/routes/leaderboard/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit'
-
-
-export const get: RequestHandler = () => {
-    return {
-        status: 303,
-        headers: {
-            location: '/leaderboards'
-        }
-    }
-}
diff --git a/src/routes/leaderboards/+page.svelte b/src/routes/leaderboards/+page.svelte
new file mode 100644
index 0000000..1d66ef5
--- /dev/null
+++ b/src/routes/leaderboards/+page.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Header from '$lib/Header.svelte'
+	import Head from '$lib/Head.svelte'
+	import Toc from '$lib/Toc.svelte'
+	import Collapsible from '$lib/Collapsible.svelte'
+	import { skyblockItemToUrl } from '$lib/minecraft/inventory'
+	import { cleanId } from '$lib/utils'
+	import ListItemWithIcon from '$lib/ListItemWithIcon.svelte'
+
+	export let data: { [category: string]: string[] }
+</script>
+
+<Head title="Hypixel SkyBlock Leaderboards" />
+<Header />
+
+<main>
+	<h1>SkyBlock Leaderboards</h1>
+	<Toc categories={Object.keys(data)} />
+
+	{#each Object.entries(data) as [category, leaderboards]}
+		<section>
+			<Collapsible id={category} lazy={false}>
+				<ul>
+					{#each leaderboards as leaderboard}
+						{@const imageUrl = leaderboard.startsWith('collection_')
+							? skyblockItemToUrl(leaderboard.slice(11))
+							: null}
+						{#if imageUrl}
+							<ListItemWithIcon src={imageUrl}>
+								<a href="/leaderboards/{leaderboard}">{cleanId(leaderboard)}</a>
+							</ListItemWithIcon>
+						{:else}
+							<li><a href="/leaderboards/{leaderboard}">{cleanId(leaderboard)}</a></li>
+						{/if}
+					{/each}
+				</ul>
+			</Collapsible>
+		</section>
+	{/each}
+</main>
diff --git a/src/routes/leaderboards/+page.ts b/src/routes/leaderboards/+page.ts
new file mode 100644
index 0000000..d5a8480
--- /dev/null
+++ b/src/routes/leaderboards/+page.ts
@@ -0,0 +1,6 @@
+import type { PageData } from './$types'
+import { fetchApi } from '$lib/api'
+
+export const load = (async ({ fetch }) => {
+	return await fetchApi(`leaderboards`, fetch).then(r => r.json())
+}) satisfies PageData
diff --git a/src/routes/leaderboards/[name].svelte b/src/routes/leaderboards/[name].svelte
deleted file mode 100644
index 75000a9..0000000
--- a/src/routes/leaderboards/[name].svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	import { fetchApi } from '$lib/api'
-
-	export const load: Load = async ({ params, fetch }) => {
-		const dataText = await fetchApi(`leaderboards/${params.name}`, fetch).then(r => r.text())
-
-		const data = JSON.parse(dataText)
-
-		if (data.list.length === 0) return { status: 404, error: 'Unknown leaderboard' }
-
-		return {
-			props: {
-				data,
-			},
-		} as any
-	}
-</script>
-
-<script lang="ts">
-	import Header from '$lib/Header.svelte'
-	import Head from '$lib/Head.svelte'
-	import { skyblockItemToUrl } from '$lib/minecraft/inventory'
-	import { cleanId, formatNumberFromUnit, toTitleCase } from '$lib/utils'
-	import Username from '$lib/minecraft/Username.svelte'
-	import type { MemberLeaderboard, ProfileLeaderboard } from '$lib/APITypes'
-
-	export let data: MemberLeaderboard | ProfileLeaderboard
-
-	$: imageUrl = data.name.startsWith('collection_') ? skyblockItemToUrl(data.name.slice(11)) : null
-</script>
-
-<Head title={`${cleanId(data.name)} - SkyBlock Leaderboards`} />
-<Header backArrowHref="/leaderboards" />
-
-<main>
-	<h1>
-		{#if imageUrl}
-			<img src={imageUrl} alt={cleanId(data.name.slice(11))} />
-		{/if}
-		{toTitleCase(cleanId(data.name))} Leaderboard
-	</h1>
-	{#if data.info}
-		<p class="leaderboard-info">
-			<span class="leaderboard-info-icon">ⓘ</span>
-			<span class="leaderboard-info-content">{@html data.info}</span>
-		</p>
-	{/if}
-
-	<ol class="leaderboard-profile-list">
-		{#each data.list as leaderboardItem, i}
-			<li
-				value={i > 0 && leaderboardItem.value === data.list[i - 1].value
-					? data.list.map(i => i.value).indexOf(leaderboardItem.value) + 1
-					: i + 1}
-			>
-				<span>
-					{formatNumberFromUnit(
-						leaderboardItem.value,
-						data.unit ?? cleanId(data.name).toLowerCase()
-					)}
-				</span>
-				{#if 'player' in leaderboardItem}
-					<Username
-						player={leaderboardItem.player}
-						headType="2d"
-						hyperlinkToProfile={leaderboardItem.profileUuid}
-					/>
-				{:else if leaderboardItem.players}
-					{#each leaderboardItem.players as player}
-						<span class="leaderboard-profile-player">
-							<Username {player} headType="2d" hyperlinkToProfile />
-						</span>
-					{/each}
-				{:else}
-					Unknown player
-				{/if}
-			</li>
-		{/each}
-	</ol>
-</main>
-
-<style>
-	h1 > img {
-		height: 1em;
-		vertical-align: text-top;
-	}
-
-	.leaderboard-profile-player {
-		margin-right: 0.5em;
-	}
-
-	.leaderboard-info {
-		background-color: var(--theme-lighter-background);
-		padding: 0.5em 0.7em;
-		border-radius: 0.5rem;
-		width: fit-content;
-
-		box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
-	}
-	.leaderboard-info-content {
-		font-style: italic;
-	}
-
-	.leaderboard-profile-list {
-		width: fit-content;
-	}
-</style>
diff --git a/src/routes/leaderboards/[name]/+page.svelte b/src/routes/leaderboards/[name]/+page.svelte
new file mode 100644
index 0000000..cfb7311
--- /dev/null
+++ b/src/routes/leaderboards/[name]/+page.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+	import Header from '$lib/Header.svelte'
+	import Head from '$lib/Head.svelte'
+	import { skyblockItemToUrl } from '$lib/minecraft/inventory'
+	import { cleanId, formatNumberFromUnit, toTitleCase } from '$lib/utils'
+	import Username from '$lib/minecraft/Username.svelte'
+	import type { MemberLeaderboard, ProfileLeaderboard } from '$lib/APITypes'
+
+	export let data: MemberLeaderboard | ProfileLeaderboard
+
+	$: imageUrl = data.name.startsWith('collection_') ? skyblockItemToUrl(data.name.slice(11)) : null
+</script>
+
+<Head title={`${cleanId(data.name)} - SkyBlock Leaderboards`} />
+<Header backArrowHref="/leaderboards" />
+
+<main>
+	<h1>
+		{#if imageUrl}
+			<img src={imageUrl} alt={cleanId(data.name.slice(11))} />
+		{/if}
+		{toTitleCase(cleanId(data.name))} Leaderboard
+	</h1>
+	{#if data.info}
+		<p class="leaderboard-info">
+			<span class="leaderboard-info-icon">ⓘ</span>
+			<span class="leaderboard-info-content">{@html data.info}</span>
+		</p>
+	{/if}
+
+	<ol class="leaderboard-profile-list">
+		{#each data.list as leaderboardItem, i}
+			<li
+				value={i > 0 && leaderboardItem.value === data.list[i - 1].value
+					? data.list.map(i => i.value).indexOf(leaderboardItem.value) + 1
+					: i + 1}
+			>
+				<span>
+					{formatNumberFromUnit(
+						leaderboardItem.value,
+						data.unit ?? cleanId(data.name).toLowerCase()
+					)}
+				</span>
+				{#if 'player' in leaderboardItem}
+					<Username
+						player={leaderboardItem.player}
+						headType="2d"
+						hyperlinkToProfile={leaderboardItem.profileUuid}
+					/>
+				{:else if leaderboardItem.players}
+					{#each leaderboardItem.players as player}
+						<span class="leaderboard-profile-player">
+							<Username {player} headType="2d" hyperlinkToProfile />
+						</span>
+					{/each}
+				{:else}
+					Unknown player
+				{/if}
+			</li>
+		{/each}
+	</ol>
+</main>
+
+<style>
+	h1 > img {
+		height: 1em;
+		vertical-align: text-top;
+	}
+
+	.leaderboard-profile-player {
+		margin-right: 0.5em;
+	}
+
+	.leaderboard-info {
+		background-color: var(--theme-lighter-background);
+		padding: 0.5em 0.7em;
+		border-radius: 0.5rem;
+		width: fit-content;
+
+		box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
+	}
+	.leaderboard-info-content {
+		font-style: italic;
+	}
+
+	.leaderboard-profile-list {
+		width: fit-content;
+	}
+</style>
diff --git a/src/routes/leaderboards/[name]/+page.ts b/src/routes/leaderboards/[name]/+page.ts
new file mode 100644
index 0000000..78f3f6b
--- /dev/null
+++ b/src/routes/leaderboards/[name]/+page.ts
@@ -0,0 +1,16 @@
+import type { PageData } from './$types'
+import { fetchApi } from '$lib/api'
+
+export const load = (async ({ params, fetch }) => {
+	const dataText = await fetchApi(`leaderboards/${params.name}`, fetch).then(r => r.text())
+
+	const data = JSON.parse(dataText)
+
+	if (data.list.length === 0) return { status: 404, error: 'Unknown leaderboard' }
+
+	return {
+		props: {
+			data,
+		},
+	} as any
+}) satisfies PageData
diff --git a/src/routes/leaderboards/index.svelte b/src/routes/leaderboards/index.svelte
deleted file mode 100644
index 50687c8..0000000
--- a/src/routes/leaderboards/index.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	import { fetchApi } from '$lib/api'
-
-	export const load: Load = async ({ fetch }) => {
-		const data = await fetchApi(`leaderboards`, fetch).then(r => r.json())
-
-		return {
-			props: {
-				data,
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import Header from '$lib/Header.svelte'
-	import Head from '$lib/Head.svelte'
-	import Toc from '$lib/Toc.svelte'
-	import Collapsible from '$lib/Collapsible.svelte'
-	import { skyblockItemToUrl } from '$lib/minecraft/inventory'
-	import { cleanId } from '$lib/utils'
-	import ListItemWithIcon from '$lib/ListItemWithIcon.svelte'
-
-	export let data: { [category: string]: string[] }
-</script>
-
-<Head title="Hypixel SkyBlock Leaderboards" />
-<Header />
-
-<main>
-	<h1>SkyBlock Leaderboards</h1>
-	<Toc categories={Object.keys(data)} />
-
-	{#each Object.entries(data) as [category, leaderboards]}
-		<section>
-			<Collapsible id={category} lazy={false}>
-				<ul>
-					{#each leaderboards as leaderboard}
-						{@const imageUrl = leaderboard.startsWith('collection_')
-							? skyblockItemToUrl(leaderboard.slice(11))
-							: null}
-						{#if imageUrl}
-							<ListItemWithIcon src={imageUrl}>
-								<a href="/leaderboards/{leaderboard}">{cleanId(leaderboard)}</a>
-							</ListItemWithIcon>
-						{:else}
-							<li><a href="/leaderboards/{leaderboard}">{cleanId(leaderboard)}</a></li>
-						{/if}
-					{/each}
-				</ul>
-			</Collapsible>
-		</section>
-	{/each}
-</main>
diff --git a/src/routes/loggedin.ts b/src/routes/loggedin.ts
deleted file mode 100644
index 9ae28ef..0000000
--- a/src/routes/loggedin.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { fetchApi } from '$lib/api'
-import type { RequestHandler } from '@sveltejs/kit'
-
-export const get: RequestHandler = async ({ url }) => {
-	const code = url.searchParams.get('code')
-	const redirectUri = `${url.protocol}//${url.host}/loggedin`
-	const response = await fetchApi(`accounts/createsession`, fetch, {
-		method: 'POST',
-		headers: {
-			'content-type': 'application/json',
-		},
-		body: JSON.stringify({
-			code,
-			redirectUri: redirectUri
-		}),
-	}).then(res => {
-		if (res.status !== 200)
-			throw new Error(res.statusText)
-		return res.json()
-	})
-
-	if (response.ok) {
-		return {
-			status: 303,
-			headers: {
-				location: '/verify',
-				'Set-Cookie': `sid=${response.session_id}; Max-Age=31536000000; Path=/; HttpOnly`
-			}
-		}
-	}
-	return {
-		status: 303,
-		headers: {
-			location: '/login',
-		}
-	}
-}
diff --git a/src/routes/loggedin/+page.ts b/src/routes/loggedin/+page.ts
new file mode 100644
index 0000000..9ae28ef
--- /dev/null
+++ b/src/routes/loggedin/+page.ts
@@ -0,0 +1,37 @@
+import { fetchApi } from '$lib/api'
+import type { RequestHandler } from '@sveltejs/kit'
+
+export const get: RequestHandler = async ({ url }) => {
+	const code = url.searchParams.get('code')
+	const redirectUri = `${url.protocol}//${url.host}/loggedin`
+	const response = await fetchApi(`accounts/createsession`, fetch, {
+		method: 'POST',
+		headers: {
+			'content-type': 'application/json',
+		},
+		body: JSON.stringify({
+			code,
+			redirectUri: redirectUri
+		}),
+	}).then(res => {
+		if (res.status !== 200)
+			throw new Error(res.statusText)
+		return res.json()
+	})
+
+	if (response.ok) {
+		return {
+			status: 303,
+			headers: {
+				location: '/verify',
+				'Set-Cookie': `sid=${response.session_id}; Max-Age=31536000000; Path=/; HttpOnly`
+			}
+		}
+	}
+	return {
+		status: 303,
+		headers: {
+			location: '/login',
+		}
+	}
+}
diff --git a/src/routes/login.ts b/src/routes/login.ts
deleted file mode 100644
index 1cd9b23..0000000
--- a/src/routes/login.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit'
-import env from '$lib/env'
-
-
-export const get: RequestHandler = async ({ request, platform }) => {
-	const host = request.headers.get('host')
-
-	const clientId = env(platform).DISCORD_CLIENT_ID
-
-	if (!clientId)
-		return {
-			status: 500,
-			headers: {
-				'content-type': 'text/plain',
-			},
-			body: 'DISCORD_CLIENT_ID is not set as an environment variable. Please contact the owner of the website if this was expected to work.',
-		}
-
-	if (!host)
-		return {
-			status: 400,
-			headers: {
-				'content-type': 'text/plain',
-			},
-			body: 'Host header is required.',
-		}
-
-	const protocol = request.url.startsWith('https') ? 'https' : 'http'
-
-	return {
-		status: 303,
-		headers: {
-			location: `https://discord.com/oauth2/authorize?client_id=${clientId}&redirect_uri=${protocol}://${host}%2Floggedin&response_type=code&scope=identify`
-		}
-	}
-}
diff --git a/src/routes/login/+page.ts b/src/routes/login/+page.ts
new file mode 100644
index 0000000..1cd9b23
--- /dev/null
+++ b/src/routes/login/+page.ts
@@ -0,0 +1,36 @@
+import type { RequestHandler } from '@sveltejs/kit'
+import env from '$lib/env'
+
+
+export const get: RequestHandler = async ({ request, platform }) => {
+	const host = request.headers.get('host')
+
+	const clientId = env(platform).DISCORD_CLIENT_ID
+
+	if (!clientId)
+		return {
+			status: 500,
+			headers: {
+				'content-type': 'text/plain',
+			},
+			body: 'DISCORD_CLIENT_ID is not set as an environment variable. Please contact the owner of the website if this was expected to work.',
+		}
+
+	if (!host)
+		return {
+			status: 400,
+			headers: {
+				'content-type': 'text/plain',
+			},
+			body: 'Host header is required.',
+		}
+
+	const protocol = request.url.startsWith('https') ? 'https' : 'http'
+
+	return {
+		status: 303,
+		headers: {
+			location: `https://discord.com/oauth2/authorize?client_id=${clientId}&redirect_uri=${protocol}://${host}%2Floggedin&response_type=code&scope=identify`
+		}
+	}
+}
diff --git a/src/routes/logout.ts b/src/routes/logout.ts
deleted file mode 100644
index 25be86c..0000000
--- a/src/routes/logout.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { fetchApi } from '$lib/api'
-import type { RequestHandler } from '@sveltejs/kit'
-
-export const get: RequestHandler = async ({ locals, url }) => {
-	// if the sid is wrong, nothing to do
-	if (url.searchParams.has('sid') && url.searchParams.get('sid') === locals.sid) {
-		await fetchApi(`accounts/session`, fetch, {
-			method: 'DELETE',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			body: JSON.stringify({
-				uuid: locals.sid
-			}),
-		}).then(res => {
-			if (res.status !== 200)
-				throw new Error(res.statusText)
-		})
-	}
-	return {
-		status: 303,
-		headers: {
-			location: '/',
-			'Set-Cookie': 'sid=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;'
-		}
-	}
-
-}
diff --git a/src/routes/logout/+page.ts b/src/routes/logout/+page.ts
new file mode 100644
index 0000000..25be86c
--- /dev/null
+++ b/src/routes/logout/+page.ts
@@ -0,0 +1,28 @@
+import { fetchApi } from '$lib/api'
+import type { RequestHandler } from '@sveltejs/kit'
+
+export const get: RequestHandler = async ({ locals, url }) => {
+	// if the sid is wrong, nothing to do
+	if (url.searchParams.has('sid') && url.searchParams.get('sid') === locals.sid) {
+		await fetchApi(`accounts/session`, fetch, {
+			method: 'DELETE',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				uuid: locals.sid
+			}),
+		}).then(res => {
+			if (res.status !== 200)
+				throw new Error(res.statusText)
+		})
+	}
+	return {
+		status: 303,
+		headers: {
+			location: '/',
+			'Set-Cookie': 'sid=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;'
+		}
+	}
+
+}
diff --git a/src/routes/player/+page.server.ts b/src/routes/player/+page.server.ts
new file mode 100644
index 0000000..3a1b069
--- /dev/null
+++ b/src/routes/player/+page.server.ts
@@ -0,0 +1,16 @@
+import type { Actions } from './$types'
+
+export const actions: Actions = {
+    default: async ({ request }) => {
+        const form = await request.formData()
+
+        const player = form.get('user-search')
+
+        return {
+            status: 303,
+            headers: {
+                location: `/player/${player}`
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/player/[player]/+page.svelte b/src/routes/player/[player]/+page.svelte
new file mode 100644
index 0000000..6711864
--- /dev/null
+++ b/src/routes/player/[player]/+page.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+	import type { CleanPlayer, CleanProfile, CleanUser } from '$lib/APITypes'
+	import BackgroundImage from '$lib/BackgroundImage.svelte'
+	import Username from '$lib/minecraft/Username.svelte'
+	import Header from '$lib/Header.svelte'
+	import Head from '$lib/Head.svelte'
+	import { chooseDefaultBackground } from '$lib/backgrounds'
+	import Emoji from '$lib/Emoji.svelte'
+	import { MODE_EMOJIS, DEFAULT_MODE_EMOJI } from '$lib/profile'
+	import Tooltip from '$lib/Tooltip.svelte'
+	import { cleanId } from '$lib/utils'
+	import type { PageData } from './$types'
+
+	export let data: PageData
+
+	let activeProfile: CleanProfile | null = null
+	let activeProfileLastSave: number = 0
+	let isActiveProfileOnline: boolean
+
+	function updateActiveProfile() {
+		activeProfileLastSave = 0
+		if (data.profiles)
+			for (const profile of data.profiles) {
+				if (profile.members)
+					for (const member of profile.members) {
+						if (member.uuid === data.player?.uuid && member.lastSave > activeProfileLastSave) {
+							activeProfile = profile
+							activeProfileLastSave = member.lastSave
+						}
+					}
+			}
+
+		isActiveProfileOnline = Date.now() - 60 < activeProfileLastSave
+	}
+
+	let backgroundUrl: string | null
+
+	$: {
+		data
+		backgroundUrl = data.customization?.backgroundUrl ?? chooseDefaultBackground(data.player.uuid)
+		updateActiveProfile()
+	}
+</script>
+
+{#if backgroundUrl}
+	<BackgroundImage url={backgroundUrl} />
+{/if}
+
+<Head title={data.player ? `${data.player.username}'s SkyBlock profiles` : 'Invalid player'} />
+<Header />
+
+<main>
+	<h1>
+		<Username player={data.player} headType="3d" />'s profiles
+	</h1>
+
+	{#if data.profiles && data.profiles.length > 0}
+		<ul class="profile-list">
+			{#each data.profiles ?? [] as profile}
+				<li
+					class="profile-list-item"
+					class:profile-list-item-active={profile.uuid === activeProfile?.uuid}
+					class:profile-list-item-online={profile.uuid === activeProfile?.uuid &&
+						isActiveProfileOnline}
+				>
+					<a
+						class="profile-name"
+						href="/player/{data.player?.username}/{profile.name}"
+						data-sveltekit-preload-data="hover"
+					>
+						{profile.name}
+					</a>
+					{#if profile.mode !== 'normal'}
+						<Tooltip>
+							<span slot="tooltip">
+								{cleanId(profile.mode)} mode
+							</span>
+							<Emoji value={MODE_EMOJIS[profile.mode] ?? DEFAULT_MODE_EMOJI} />
+						</Tooltip>
+					{/if}
+					<span class="profile-members">
+						{#if (profile.members?.length ?? 0) > 1}
+							{#each profile.members?.filter(m => !m.left) ?? [] as player}
+								<span class="member">
+									<Username
+										{player}
+										headType="2d"
+										hyperlinkToProfile={player.uuid != data.player?.uuid}
+									/>
+								</span>
+							{/each}
+							{#each profile.members?.filter(m => m.left) ?? [] as player}
+								<span class="member">
+									<Username {player} headType="2d" hyperlinkToProfile={profile.uuid} disabled />
+								</span>
+							{/each}
+						{:else}
+							Solo
+						{/if}
+					</span>
+				</li>
+			{/each}
+		</ul>
+	{:else}
+		<p>This player has no profiles. <Emoji value="😦" /></p>
+	{/if}
+</main>
+
+<style>
+	.profile-members {
+		margin-left: 0.5em;
+		color: var(--theme-main-text);
+	}
+	.profile-members > .member {
+		margin-right: 0.35em;
+	}
+
+	.profile-list {
+		font-size: 1.5em;
+		display: inline-flex;
+		flex-wrap: wrap;
+	}
+
+	.profile-list-item {
+		margin-bottom: 0.5em;
+		color: var(--theme-darker-text);
+		width: 100%;
+	}
+	.profile-list-item-active {
+		color: #fff;
+	}
+	.profile-list-item-online {
+		color: #0e0;
+	}
+</style>
diff --git a/src/routes/player/[player]/+page.ts b/src/routes/player/[player]/+page.ts
new file mode 100644
index 0000000..bd7c002
--- /dev/null
+++ b/src/routes/player/[player]/+page.ts
@@ -0,0 +1,24 @@
+import type { PageLoad } from './$types'
+import { fetchApi } from '$lib/api'
+
+export const load = (async ({ params, fetch }) => {
+	const player: string = params.player!
+
+	const data = await fetchApi(`player/${player}?customization=true`, fetch).then(r => r.json())
+
+	if (!data.player) {
+		return {
+			status: 404,
+			error: 'Unknown player',
+		}
+	}
+
+	if (data.player.username !== player) {
+		return {
+			redirect: `/player/${data.player.username}`,
+			status: 302,
+		} as any
+	}
+
+	return data
+}) satisfies PageLoad
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
deleted file mode 100644
index e686164..0000000
--- a/src/routes/player/[player]/[profile].svelte
+++ /dev/null
@@ -1,434 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	import { loadPack } from '$lib/packs'
-	import { fetchApi } from '$lib/api'
-
-	export const load: Load = async ({ params, fetch }) => {
-		const player: string = params.player
-		const profile: string = params.profile
-		const data: CleanMemberProfile = await fetchApi(
-			`player/${player}/${profile}?customization=true`,
-			fetch
-		).then(async r => {
-			const text = await r.text()
-			try {
-				return JSON.parse(text)
-			} catch (e) {
-				throw new Error(`Invalid JSON: ${text}`)
-			}
-		})
-
-		if (!data.member) {
-			return {
-				status: 404,
-				error: 'Unknown profile',
-			}
-		}
-
-		if (data.member.username !== player) {
-			return {
-				redirect: `/player/${data.member.username}/${data.profile.name}`,
-				status: 302,
-			} as any
-		}
-		if (!data.member.left && data.profile.name !== profile) {
-			return {
-				redirect: `/player/${data.member.username}/${data.profile.name}`,
-				status: 302,
-			} as any
-		}
-
-		const packName = params.pack ?? data?.customization?.pack
-
-		let pack = await loadPack(packName)
-
-		return {
-			props: {
-				data,
-				pack,
-			},
-		}
-	}
-</script>
-
-<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 Inventories from '$lib/sections/Inventories.svelte'
-	import Collections from '$lib/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 Infobox from '$lib/sections/Infobox.svelte'
-	import Minions from '$lib/sections/Minions.svelte'
-	import Slayers from '$lib/sections/Slayers.svelte'
-	import type { MatcherFile } from 'skyblock-assets'
-	import Claimed from '$lib/sections/Claimed.svelte'
-	import Collapsible from '$lib/Collapsible.svelte'
-	import Skills from '$lib/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 Header from '$lib/Header.svelte'
-	import Emoji from '$lib/Emoji.svelte'
-	import { cleanId } from '$lib/utils'
-	import Head from '$lib/Head.svelte'
-	import Toc from '$lib/Toc.svelte'
-	import Achievements from '$lib/sections/Achievements.svelte'
-	import Essence from '$lib/sections/Essence.svelte'
-	import Auctions from '$lib/sections/Auctions.svelte'
-
-	export let data: CleanMemberProfile
-	export let pack: MatcherFile
-
-	let categories: string[] = []
-	function setCategories() {
-		categories = []
-		if (data.member.stats?.find(s => s.category === 'deaths')) categories.push('deaths')
-		if (data.member.stats?.find(s => s.category === 'kills')) categories.push('kills')
-		if (data.member.stats?.find(s => s.category === 'auctions')) categories.push('auctions')
-		if (data.member.stats?.find(s => s.category === 'fishing')) categories.push('fishing')
-		if (data.member.stats?.find(s => s.category === 'races')) categories.push('races')
-		if (data.member.stats?.find(s => s.category === 'misc')) categories.push('misc')
-		if (data.member.minions.some(m => m.levels.some(l => l))) categories.push('minions')
-		if (data.member.slayers && data.member.slayers.xp > 0) categories.push('slayers')
-		categories.push('zones')
-		if (data.member.collections && data.member.collections.length > 0)
-			categories.push('collections')
-		if (data.profile.bank.balance !== undefined) categories.push('bank')
-		if (data.member.harp.selected !== null) categories.push('harp')
-		if (data.member.essence.types.length > 0) categories.push('essence')
-		if (data.member.claimed && data.member.claimed.length > 0) categories.push('claimed')
-		if (data.member.pets.list.length > 0) categories.push('pets')
-		if (data.member.farmingContests.list.length > 0) categories.push('farming_contests')
-		if (data.member.coopInvitation) categories.push('co-op')
-		if (data.member.achievements) categories.push('achievements')
-		categories.push('leaderboards')
-	}
-
-	$: [data, setCategories()]
-	$: backgroundUrl = data.customization?.backgroundUrl ?? chooseDefaultBackground(data.member.uuid)
-	$: showingInventories =
-		data.member.inventories?.inventory || data.member.inventories?.personal_vault
-
-	$: profileName = data.member.left ? 'Removed' : data.member.profileName
-</script>
-
-{#if backgroundUrl}
-	<BackgroundImage url={backgroundUrl} />
-{/if}
-
-<Head
-	title="{data.member.username}'s SkyBlock profile ({profileName})"
-	description={generateInfobox(data).join('\n')}
-	metaTitle={(data.member.rank.name ? `[${data.member.rank.name}] ` : '') +
-		`${data.member.username}\'s SkyBlock profile (${profileName})`}
-/>
-<Header
-	backArrowHref="/player/{data.member.username}"
-	blurred={data.customization?.blurBackground ?? false}
-/>
-
-<main class:has-blurred-background={data.customization?.blurBackground && backgroundUrl}>
-	{#if data.customization?.blurBackground && backgroundUrl}
-		<div class="blurred-background-container-container">
-			<div class="blurred-background-container">
-				<img class="blurred-background" src={backgroundUrl} alt="Background" />
-			</div>
-		</div>
-	{/if}
-
-	<h1>
-		<!-- this is weird like this so svelte doesn't add whitespace -->
-		<Username player={data.member} headType="3d" />{#if data.customization?.emoji}<span
-				class="profile-emoji"><Emoji value={data.customization.emoji} /></span
-			>
-		{/if}
-		({profileName})
-	</h1>
-
-	<!-- technoblade -->
-	{#if data.member.uuid == 'b876ec32e396476ba1158438d83c67d4'}
-		<div class="technoblade-never-dies">
-			<a href="https://www.curesarcoma.org">Technoblade never dies. <Emoji value="🕊️" /></a>
-		</div>
-	{/if}
-
-	<Infobox {data} />
-
-	<Toc {categories} />
-
-	{#if data.member.skills && data.member.skills.list.length > 0}
-		<section id="skills" class="profile-skills">
-			<div class="skill-heading-container">
-				<h2 class="inline-heading">Skills</h2>
-				<span class="average-skill">
-					{data.member.skills.average} avg.
-				</span>
-			</div>
-			<Skills {data} />
-		</section>
-	{/if}
-
-	<br />
-
-	<div>
-		<div id="categories">
-			{#if data.member.inventories?.armor}
-				<section id="armor" class:armor-float={showingInventories}>
-					<h2>Armor</h2>
-					<Armor {data} {pack} />
-				</section>
-			{/if}
-			{#if showingInventories}
-				<section id="inventories">
-					<h2>
-						{#if data.member.inventories?.inventory}
-							Inventories
-						{:else}
-							<img
-								class="inventory-tab-icon"
-								loading="lazy"
-								src={skyblockItemToUrl(inventoryIconMap.personal_vault, pack)}
-								alt={cleanId('personal_vault')}
-							/>
-							Personal Vault
-						{/if}
-					</h2>
-					<Inventories {data} {pack} />
-				</section>
-			{/if}
-			{#if data.member.stats}
-				{#each categories as category}
-					{#if data.member.stats?.find(s => s.category === category)}
-						<section>
-							<Collapsible id={category}>
-								<h2 slot="title">{cleanId(category)}</h2>
-								{#if category == 'auctions'}
-									<Auctions
-										stats={data.member.stats.filter(s => s.category === category)}
-										{data}
-										{pack}
-									/>
-								{:else}
-									<StatList stats={data.member.stats.filter(s => s.category === category)} />
-								{/if}
-							</Collapsible>
-						</section>
-					{/if}
-				{/each}
-			{/if}
-			{#if categories.includes('minions')}
-				<section>
-					<Collapsible id="minions">
-						<h2 slot="title">Minions</h2>
-						<Minions {data} />
-					</Collapsible>
-				</section>
-			{/if}
-			{#if categories.includes('slayers')}
-				<section>
-					<Collapsible id="slayers">
-						<h2 slot="title">Slayers</h2>
-						<Slayers {data} />
-					</Collapsible>
-				</section>
-			{/if}
-			<section>
-				<Collapsible id="zones">
-					<h2 slot="title">Zones</h2>
-					<Zones {data} />
-				</Collapsible>
-			</section>
-			{#if categories.includes('collections')}
-				<section>
-					<Collapsible id="collections">
-						<h2 slot="title">Collections</h2>
-						<Collections {data} {pack} />
-					</Collapsible>
-				</section>
-			{/if}
-			{#if categories.includes('bank')}
-				<section>
-					<Collapsible id="bank">
-						<h2 slot="title">Bank</h2>
-						<Bank {data} />
-					</Collapsible>
-				</section>
-			{/if}
-			{#if categories.includes('harp')}
-				<section>
-					<Collapsible id="harp">
-						<h2 slot="title">Harp</h2>
-						<Harp {data} />
-					</Collapsible>
-				</section>
-			{/if}
-			{#if categories.includes('essence')}
-				<section>
-					<Collapsible id="essence">
-						<h2 slot="title">Essence</h2>
-						<Essence {data} />
-					</Collapsible>
-				</section>
-			{/if}
-			{#if categories.includes('claimed')}
-				<section>
-					<Collapsible id="claimed">
-						<h2 slot="title">Claimed</h2>
-						<Claimed {data} />
-					</Collapsible>
-				</section>
-			{/if}
-			{#if categories.includes('pets')}
-				<section>
-					<Collapsible id="pets">
-						<h2 slot="title">Pets</h2>
-						<Pets {data} />
-					</Collapsible>
-				</section>
-			{/if}
-			{#if categories.includes('farming_contests')}
-				<section>
-					<Collapsible id="farming-contests">
-						<h2 slot="title">Farming Contests</h2>
-						<FarmingContests {data} />
-					</Collapsible>
-				</section>
-			{/if}
-			{#if categories.includes('co-op')}
-				<section>
-					<Collapsible id="co-op">
-						<h2 slot="title">Co-op</h2>
-						<Coop {data} />
-					</Collapsible>
-				</section>
-			{/if}
-			{#if categories.includes('achievements')}
-				<section>
-					<Collapsible id="achievements">
-						<h2 slot="title">Achievements</h2>
-						<Achievements {data} />
-					</Collapsible>
-				</section>
-			{/if}
-			<section>
-				<Collapsible id="leaderboards">
-					<h2 slot="title">Leaderboards</h2>
-					<Leaderboards {data} />
-				</Collapsible>
-			</section>
-		</div>
-	</div>
-</main>
-
-<style>
-	main {
-		position: relative;
-	}
-	.profile-emoji {
-		display: inline;
-	}
-	.profile-skills {
-		display: inline-block;
-		position: absolute;
-		margin: 0.75em 1em 1em 1em;
-	}
-
-	#armor.armor-float {
-		float: left;
-	}
-
-	#armor {
-		margin-right: 2em;
-		height: 16em;
-	}
-
-	#inventories {
-		display: inline-block;
-		min-height: 16em;
-	}
-
-	section {
-		max-width: fit-content;
-	}
-
-	.blurred-background-container-container {
-		position: absolute;
-		width: 47rem;
-		height: calc(100% + 1em);
-		z-index: -9;
-		overflow: hidden;
-		clip: rect(-1em, auto, auto, -2em);
-	}
-	.blurred-background {
-		position: fixed;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		z-index: -10;
-		object-fit: cover;
-		background-blend-mode: overlay;
-		filter: blur(1em) brightness(0.6);
-	}
-	@media only screen and (max-width: 1400px) {
-		.blurred-background-container-container {
-			left: calc(5em + 5%);
-			width: 90%;
-			clip: rect(-1.7em, auto, auto, -10em);
-		}
-		main {
-			margin-top: 0.75em;
-		}
-	}
-	@media only screen and (max-width: 1040px) {
-		.profile-skills {
-			position: unset;
-			display: block;
-			width: max-content;
-		}
-		.blurred-background-container-container {
-			left: 0 !important;
-			width: 100vw !important;
-		}
-	}
-
-	.skill-heading-container {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: fit-content;
-	}
-	.skill-heading-container h2 {
-		display: inline-block;
-		margin-right: 0.4em;
-		margin-bottom: 0;
-	}
-	.average-skill {
-		color: var(--theme-darker-text);
-		font-size: 0.9rem;
-	}
-
-	.has-blurred-background #categories {
-		width: 47rem;
-	}
-
-	.technoblade-never-dies {
-		border: 1px solid rgba(255, 255, 255, 0.1);
-		background: rgba(0, 0, 0, 0.1);
-		padding: 0.75em;
-		border-radius: 1em;
-
-		width: fit-content;
-		position: relative;
-		top: -1em;
-	}
-</style>
diff --git a/src/routes/player/[player]/[profile]/+page.svelte b/src/routes/player/[player]/[profile]/+page.svelte
new file mode 100644
index 0000000..247619d
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/+page.svelte
@@ -0,0 +1,383 @@
+<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 { 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 type { MatcherFile } from 'skyblock-assets'
+	import Claimed from '$lib/sections/Claimed.svelte'
+	import Collapsible from '$lib/Collapsible.svelte'
+	import Skills from '$lib/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 type { PageData } from './$types'
+	import Header from '$lib/Header.svelte'
+	import Emoji from '$lib/Emoji.svelte'
+	import { cleanId } from '$lib/utils'
+	import Head from '$lib/Head.svelte'
+	import Toc from '$lib/Toc.svelte'
+
+	export let data: PageData & CleanMemberProfile
+
+	export let pack: MatcherFile = data.pack
+
+	let categories: string[] = []
+	function setCategories() {
+		categories = []
+		if (data.member.stats?.find(s => s.category === 'deaths')) categories.push('deaths')
+		if (data.member.stats?.find(s => s.category === 'kills')) categories.push('kills')
+		if (data.member.stats?.find(s => s.category === 'auctions')) categories.push('auctions')
+		if (data.member.stats?.find(s => s.category === 'fishing')) categories.push('fishing')
+		if (data.member.stats?.find(s => s.category === 'races')) categories.push('races')
+		if (data.member.stats?.find(s => s.category === 'misc')) categories.push('misc')
+		if (data.member.minions.some(m => m.levels.some(l => l))) categories.push('minions')
+		if (data.member.slayers && data.member.slayers.xp > 0) categories.push('slayers')
+		categories.push('zones')
+		if (data.member.collections && data.member.collections.length > 0)
+			categories.push('collections')
+		if (data.profile.bank.balance !== undefined) categories.push('bank')
+		if (data.member.harp.selected !== null) categories.push('harp')
+		if (data.member.essence.types.length > 0) categories.push('essence')
+		if (data.member.claimed && data.member.claimed.length > 0) categories.push('claimed')
+		if (data.member.pets.list.length > 0) categories.push('pets')
+		if (data.member.farmingContests.list.length > 0) categories.push('farming_contests')
+		if (data.member.coopInvitation) categories.push('co-op')
+		if (data.member.achievements) categories.push('achievements')
+		categories.push('leaderboards')
+	}
+
+	$: [data, setCategories()]
+	$: backgroundUrl = data.customization?.backgroundUrl ?? chooseDefaultBackground(data.member.uuid)
+	$: showingInventories =
+		data.member.inventories?.inventory || data.member.inventories?.personal_vault
+
+	$: profileName = data.member.left ? 'Removed' : data.member.profileName
+</script>
+
+{#if backgroundUrl}
+	<BackgroundImage url={backgroundUrl} />
+{/if}
+
+<Head
+	title="{data.member.username}'s SkyBlock profile ({profileName})"
+	description={generateInfobox(data).join('\n')}
+	metaTitle={(data.member.rank.name ? `[${data.member.rank.name}] ` : '') +
+		`${data.member.username}\'s SkyBlock profile (${profileName})`}
+/>
+<Header
+	backArrowHref="/player/{data.member.username}"
+	blurred={data.customization?.blurBackground ?? false}
+/>
+
+<main class:has-blurred-background={data.customization?.blurBackground && backgroundUrl}>
+	{#if data.customization?.blurBackground && backgroundUrl}
+		<div class="blurred-background-container-container">
+			<div class="blurred-background-container">
+				<img class="blurred-background" src={backgroundUrl} alt="Background" />
+			</div>
+		</div>
+	{/if}
+
+	<h1>
+		<!-- this is weird like this so svelte doesn't add whitespace -->
+		<Username player={data.member} headType="3d" />{#if data.customization?.emoji}<span
+				class="profile-emoji"><Emoji value={data.customization.emoji} /></span
+			>
+		{/if}
+		({profileName})
+	</h1>
+
+	<!-- technoblade -->
+	{#if data.member.uuid == 'b876ec32e396476ba1158438d83c67d4'}
+		<div class="technoblade-never-dies">
+			<a href="https://www.curesarcoma.org">Technoblade never dies. <Emoji value="🕊️" /></a>
+		</div>
+	{/if}
+
+	<Infobox {data} />
+
+	<Toc {categories} />
+
+	{#if data.member.skills && data.member.skills.list.length > 0}
+		<section id="skills" class="profile-skills">
+			<div class="skill-heading-container">
+				<h2 class="inline-heading">Skills</h2>
+				<span class="average-skill">
+					{data.member.skills.average} avg.
+				</span>
+			</div>
+			<Skills {data} />
+		</section>
+	{/if}
+
+	<br />
+
+	<div>
+		<div id="categories">
+			{#if data.member.inventories?.armor}
+				<section id="armor" class:armor-float={showingInventories}>
+					<h2>Armor</h2>
+					<Armor {data} {pack} />
+				</section>
+			{/if}
+			{#if showingInventories}
+				<section id="inventories">
+					<h2>
+						{#if data.member.inventories?.inventory}
+							Inventories
+						{:else}
+							<img
+								class="inventory-tab-icon"
+								loading="lazy"
+								src={skyblockItemToUrl(inventoryIconMap.personal_vault, pack)}
+								alt={cleanId('personal_vault')}
+							/>
+							Personal Vault
+						{/if}
+					</h2>
+					<Inventories {data} {pack} />
+				</section>
+			{/if}
+			{#if data.member.stats}
+				{#each categories as category}
+					{#if data.member.stats?.find(s => s.category === category)}
+						<section>
+							<Collapsible id={category}>
+								<h2 slot="title">{cleanId(category)}</h2>
+								{#if category == 'auctions'}
+									<Auctions
+										stats={data.member.stats.filter(s => s.category === category)}
+										{data}
+										{pack}
+									/>
+								{:else}
+									<StatList stats={data.member.stats.filter(s => s.category === category)} />
+								{/if}
+							</Collapsible>
+						</section>
+					{/if}
+				{/each}
+			{/if}
+			{#if categories.includes('minions')}
+				<section>
+					<Collapsible id="minions">
+						<h2 slot="title">Minions</h2>
+						<Minions {data} />
+					</Collapsible>
+				</section>
+			{/if}
+			{#if categories.includes('slayers')}
+				<section>
+					<Collapsible id="slayers">
+						<h2 slot="title">Slayers</h2>
+						<Slayers {data} />
+					</Collapsible>
+				</section>
+			{/if}
+			<section>
+				<Collapsible id="zones">
+					<h2 slot="title">Zones</h2>
+					<Zones {data} />
+				</Collapsible>
+			</section>
+			{#if categories.includes('collections')}
+				<section>
+					<Collapsible id="collections">
+						<h2 slot="title">Collections</h2>
+						<Collections {data} {pack} />
+					</Collapsible>
+				</section>
+			{/if}
+			{#if categories.includes('bank')}
+				<section>
+					<Collapsible id="bank">
+						<h2 slot="title">Bank</h2>
+						<Bank {data} />
+					</Collapsible>
+				</section>
+			{/if}
+			{#if categories.includes('harp')}
+				<section>
+					<Collapsible id="harp">
+						<h2 slot="title">Harp</h2>
+						<Harp {data} />
+					</Collapsible>
+				</section>
+			{/if}
+			{#if categories.includes('essence')}
+				<section>
+					<Collapsible id="essence">
+						<h2 slot="title">Essence</h2>
+						<Essence {data} />
+					</Collapsible>
+				</section>
+			{/if}
+			{#if categories.includes('claimed')}
+				<section>
+					<Collapsible id="claimed">
+						<h2 slot="title">Claimed</h2>
+						<Claimed {data} />
+					</Collapsible>
+				</section>
+			{/if}
+			{#if categories.includes('pets')}
+				<section>
+					<Collapsible id="pets">
+						<h2 slot="title">Pets</h2>
+						<Pets {data} />
+					</Collapsible>
+				</section>
+			{/if}
+			{#if categories.includes('farming_contests')}
+				<section>
+					<Collapsible id="farming-contests">
+						<h2 slot="title">Farming Contests</h2>
+						<FarmingContests {data} />
+					</Collapsible>
+				</section>
+			{/if}
+			{#if categories.includes('co-op')}
+				<section>
+					<Collapsible id="co-op">
+						<h2 slot="title">Co-op</h2>
+						<Coop {data} />
+					</Collapsible>
+				</section>
+			{/if}
+			{#if categories.includes('achievements')}
+				<section>
+					<Collapsible id="achievements">
+						<h2 slot="title">Achievements</h2>
+						<Achievements {data} />
+					</Collapsible>
+				</section>
+			{/if}
+			<section>
+				<Collapsible id="leaderboards">
+					<h2 slot="title">Leaderboards</h2>
+					<Leaderboards {data} />
+				</Collapsible>
+			</section>
+		</div>
+	</div>
+</main>
+
+<style>
+	main {
+		position: relative;
+	}
+	.profile-emoji {
+		display: inline;
+	}
+	.profile-skills {
+		display: inline-block;
+		position: absolute;
+		margin: 0.75em 1em 1em 1em;
+	}
+
+	#armor.armor-float {
+		float: left;
+	}
+
+	#armor {
+		margin-right: 2em;
+		height: 16em;
+	}
+
+	#inventories {
+		display: inline-block;
+		min-height: 16em;
+	}
+
+	section {
+		max-width: fit-content;
+	}
+
+	.blurred-background-container-container {
+		position: absolute;
+		width: 47rem;
+		height: calc(100% + 1em);
+		z-index: -9;
+		overflow: hidden;
+		clip: rect(-1em, auto, auto, -2em);
+	}
+	.blurred-background {
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -10;
+		object-fit: cover;
+		background-blend-mode: overlay;
+		filter: blur(1em) brightness(0.6);
+	}
+	@media only screen and (max-width: 1400px) {
+		.blurred-background-container-container {
+			left: calc(5em + 5%);
+			width: 90%;
+			clip: rect(-1.7em, auto, auto, -10em);
+		}
+		main {
+			margin-top: 0.75em;
+		}
+	}
+	@media only screen and (max-width: 1040px) {
+		.profile-skills {
+			position: unset;
+			display: block;
+			width: max-content;
+		}
+		.blurred-background-container-container {
+			left: 0 !important;
+			width: 100vw !important;
+		}
+	}
+
+	.skill-heading-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: fit-content;
+	}
+	.skill-heading-container h2 {
+		display: inline-block;
+		margin-right: 0.4em;
+		margin-bottom: 0;
+	}
+	.average-skill {
+		color: var(--theme-darker-text);
+		font-size: 0.9rem;
+	}
+
+	.has-blurred-background #categories {
+		width: 47rem;
+	}
+
+	.technoblade-never-dies {
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: rgba(0, 0, 0, 0.1);
+		padding: 0.75em;
+		border-radius: 1em;
+
+		width: fit-content;
+		position: relative;
+		top: -1em;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile]/+page.ts b/src/routes/player/[player]/[profile]/+page.ts
new file mode 100644
index 0000000..e97cbfc
--- /dev/null
+++ b/src/routes/player/[player]/[profile]/+page.ts
@@ -0,0 +1,48 @@
+import type { CleanMemberProfile } from '$lib/APITypes'
+import type { PageLoad } from './$types'
+import { loadPack } from '$lib/packs'
+import { fetchApi } from '$lib/api'
+
+export const load = (async ({ params, fetch, url }) => {
+	const player: string = params.player
+	const profile: string = params.profile
+	const data: CleanMemberProfile = await fetchApi(
+		`player/${player}/${profile}?customization=true`,
+		fetch
+	).then(async r => {
+		const text = await r.text()
+		try {
+			return JSON.parse(text)
+		} catch (e) {
+			throw new Error(`Invalid JSON: ${text}`)
+		}
+	})
+
+	if (!data.member) {
+		return {
+			status: 404,
+			error: 'Unknown profile',
+		}
+	}
+
+	if (data.member.username !== player) {
+		return {
+			redirect: `/player/${data.member.username}/${data.profile.name}`,
+			status: 302,
+		} as any
+	}
+	if (!data.member.left && data.profile.name !== profile) {
+		return {
+			redirect: `/player/${data.member.username}/${data.profile.name}`,
+			status: 302,
+		} as any
+	}
+
+	const packName = url.searchParams.get('pack') ?? data?.customization?.pack
+	const pack = await loadPack(packName)
+
+	return {
+		...data,
+		pack,
+	}
+}) satisfies PageLoad
diff --git a/src/routes/player/[player]/index.svelte b/src/routes/player/[player]/index.svelte
deleted file mode 100644
index 5a51816..0000000
--- a/src/routes/player/[player]/index.svelte
+++ /dev/null
@@ -1,166 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	import { fetchApi } from '$lib/api'
-
-	export const load: Load = async ({ params, fetch }) => {
-		const player: string = params.player
-
-		const data = await fetchApi(`player/${player}?customization=true`, fetch).then(r => r.json())
-
-		if (!data.player) {
-			return {
-				status: 404,
-				error: 'Unknown player',
-			}
-		}
-
-		if (data.player.username !== player) {
-			return {
-				redirect: `/player/${data.player.username}`,
-				status: 302,
-			} as any
-		}
-
-		return {
-			props: {
-				data,
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import type { CleanPlayer, CleanProfile, CleanUser } from '$lib/APITypes'
-	import BackgroundImage from '$lib/BackgroundImage.svelte'
-	import Username from '$lib/minecraft/Username.svelte'
-	import Header from '$lib/Header.svelte'
-	import Head from '$lib/Head.svelte'
-	import { chooseDefaultBackground } from '$lib/backgrounds'
-	import Emoji from '$lib/Emoji.svelte'
-	import { MODE_EMOJIS, DEFAULT_MODE_EMOJI } from '$lib/profile'
-	import Tooltip from '$lib/Tooltip.svelte'
-	import { cleanId } from '$lib/utils'
-	import { navigating } from '$app/stores'
-
-	export let data: CleanUser & { player: CleanPlayer }
-
-	let activeProfile: CleanProfile | null = null
-	let activeProfileLastSave: number = 0
-	let isActiveProfileOnline: boolean
-
-	function updateActiveProfile() {
-		activeProfileLastSave = 0
-		if (data.profiles)
-			for (const profile of data.profiles) {
-				if (profile.members)
-					for (const member of profile.members) {
-						if (member.uuid === data.player?.uuid && member.lastSave > activeProfileLastSave) {
-							activeProfile = profile
-							activeProfileLastSave = member.lastSave
-						}
-					}
-			}
-
-		isActiveProfileOnline = Date.now() - 60 < activeProfileLastSave
-	}
-
-	let backgroundUrl: string | null
-
-	$: {
-		data
-		backgroundUrl = data.customization?.backgroundUrl ?? chooseDefaultBackground(data.player.uuid)
-		updateActiveProfile()
-	}
-</script>
-
-{#if backgroundUrl}
-	<BackgroundImage url={backgroundUrl} />
-{/if}
-
-<Head title={data.player ? `${data.player.username}'s SkyBlock profiles` : 'Invalid player'} />
-<Header />
-
-<main>
-	<h1>
-		<Username player={data.player} headType="3d" />'s profiles
-	</h1>
-
-	{#if data.profiles && data.profiles.length > 0}
-		<ul class="profile-list">
-			{#each data.profiles ?? [] as profile}
-				<li
-					class="profile-list-item"
-					class:profile-list-item-active={profile.uuid === activeProfile?.uuid}
-					class:profile-list-item-online={profile.uuid === activeProfile?.uuid &&
-						isActiveProfileOnline}
-				>
-					<a
-						class="profile-name"
-						href="/player/{data.player?.username}/{profile.name}"
-						sveltekit:prefetch
-					>
-						{profile.name}
-					</a>
-					{#if profile.mode !== 'normal'}
-						<Tooltip>
-							<span slot="tooltip">
-								{cleanId(profile.mode)} mode
-							</span>
-							<Emoji value={MODE_EMOJIS[profile.mode] ?? DEFAULT_MODE_EMOJI} />
-						</Tooltip>
-					{/if}
-					<span class="profile-members">
-						{#if (profile.members?.length ?? 0) > 1}
-							{#each profile.members?.filter(m => !m.left) ?? [] as player}
-								<span class="member">
-									<Username
-										{player}
-										headType="2d"
-										hyperlinkToProfile={player.uuid != data.player?.uuid}
-									/>
-								</span>
-							{/each}
-							{#each profile.members?.filter(m => m.left) ?? [] as player}
-								<span class="member">
-									<Username {player} headType="2d" hyperlinkToProfile={profile.uuid} disabled />
-								</span>
-							{/each}
-						{:else}
-							Solo
-						{/if}
-					</span>
-				</li>
-			{/each}
-		</ul>
-	{:else}
-		<p>This player has no profiles. <Emoji value="😦" /></p>
-	{/if}
-</main>
-
-<style>
-	.profile-members {
-		margin-left: 0.5em;
-		color: var(--theme-main-text);
-	}
-	.profile-members > .member {
-		margin-right: 0.35em;
-	}
-
-	.profile-list {
-		font-size: 1.5em;
-		display: inline-flex;
-		flex-wrap: wrap;
-	}
-
-	.profile-list-item {
-		margin-bottom: 0.5em;
-		color: var(--theme-darker-text);
-		width: 100%;
-	}
-	.profile-list-item-active {
-		color: #fff;
-	}
-	.profile-list-item-online {
-		color: #0e0;
-	}
-</style>
diff --git a/src/routes/player/index.ts b/src/routes/player/index.ts
deleted file mode 100644
index 4644499..0000000
--- a/src/routes/player/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit'
-
-export const post: RequestHandler = async ({ request }) => {
-    const form = await request.formData()
-
-    const player = form.get('user-search')
-
-    return {
-        status: 303,
-        headers: {
-            location: `/player/${player}`
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/routes/profile/index.svelte b/src/routes/profile/index.svelte
index 4da4a8f..0d5ad04 100644
--- a/src/routes/profile/index.svelte
+++ b/src/routes/profile/index.svelte
@@ -50,7 +50,7 @@
 
 <script lang="ts">
 	import Emoji from '$lib/Emoji.svelte'
-	import { browser } from '$app/env'
+	import { browser } from '$app/environment'
 	import Tooltip from '$lib/Tooltip.svelte'
 	import { onDestroy, onMount } from 'svelte'
 	import backgroundNames from '../../_backgrounds.json'
diff --git a/src/routes/verify.svelte b/src/routes/verify.svelte
deleted file mode 100644
index 20de403..0000000
--- a/src/routes/verify.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	export const load: Load = async ({ session, url }) => {
-		if (session.sid === undefined) {
-			return { redirect: '/login', status: 303 }
-		}
-		return {
-			props: {
-				errorCode: url.searchParams.get('error'),
-				current: url.searchParams.get('current'),
-				correct: url.searchParams.get('correct'),
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import Emoji from '$lib/Emoji.svelte'
-	import Head from '$lib/Head.svelte'
-	import Header from '$lib/Header.svelte'
-
-	export let errorCode: string | null
-	export let current: string | null
-	export let correct: string | null
-
-	const errorCodes = {
-		NO_IGN: 'Please enter a valid Minecraft username.',
-		NOT_LINKED:
-			'Please link your Discord in Hypixel by doing /profile -> Social media -> Discord. If you just changed it, wait a few minutes and try again.',
-		WRONG_NAME: `You're linked to ${current} on Hypixel. Please change this to ${correct} by doing /profile -> Social media -> Discord. If you just changed it, wait a few minutes and try again.`,
-		NO_KEY:
-			"This instance of skyblock-stats doesn't have a skyblock-api key set. Please contact the owner of the website if you believe this to be a mistake.",
-	}
-</script>
-
-<Head title="Verify Account" />
-<Header />
-
-<main>
-	<h1>Verify Minecraft account</h1>
-	<p>Please enter your Minecraft username to verify that this is your account.</p>
-	<p>
-		This will check with the Hypixel API that your Discord username matches the Discord name set in
-		your Hypixel settings.
-	</p>
-	{#if errorCode && errorCode in errorCodes}
-		<div class="error">
-			<Emoji value="🚫" />
-			{errorCodes[errorCode]}
-		</div>
-	{/if}
-	<form method="post" action="/verify">
-		<input placeholder="Username or UUID" name="ign" required />
-		<input type="submit" value="Enter" />
-	</form>
-</main>
-
-<style>
-	p {
-		margin: 0;
-	}
-	.error {
-		font-weight: bold;
-		margin: 1em 0;
-	}
-</style>
diff --git a/src/routes/verify.ts b/src/routes/verify.ts
deleted file mode 100644
index 3321164..0000000
--- a/src/routes/verify.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { fetchApi } from '$lib/api'
-import type { AccountSchema, CleanUser, SessionSchema } from '$lib/APITypes'
-import type { RequestHandler } from '@sveltejs/kit'
-import env from '$lib/env'
-
-
-function redirect(status: number, location: string) {
-	return {
-		status,
-		headers: {
-			location,
-		},
-	}
-}
-
-export const post: RequestHandler = async ({ request, locals, platform }) => {
-	const key = env(platform).SKYBLOCK_STATS_API_KEY
-	if (!key) {
-		return redirect(303, `/verify?error=NO_KEY`)
-	}
-	if (locals.sid === undefined) {
-		return redirect(303, '/login')
-	}
-
-	const form = await request.formData()
-
-	// username or uuid
-	const playerIdentifier = form.get('ign')
-	if (!playerIdentifier) {
-		return redirect(303, `/verify?error=NO_IGN`)
-	}
-
-	const playerResponse: CleanUser = await fetchApi(`player/${playerIdentifier}`, fetch).then(res => res.json())
-	const sessionResponse: { session: SessionSchema | null, account: AccountSchema | null } = await fetchApi(`accounts/session`, fetch, {
-		method: 'POST',
-		headers: {
-			'Content-Type': 'application/json',
-		},
-		body: JSON.stringify({
-			uuid: locals.sid,
-		}),
-	}).then(r => r.json())
-
-	if (!sessionResponse.session)
-		return redirect(303, '/login')
-
-	const hypixelDiscordName = playerResponse.player?.socials.discord
-
-	if (!hypixelDiscordName)
-		return redirect(303, `/verify?error=NOT_LINKED`)
-
-	const discordUser = sessionResponse.session.discord_user
-	const actualDiscordName = discordUser.name
-	// some people link themselves as <id>#<discrim> instead of <name>#<discrim>
-	const actualDiscordIdDiscrim = `${discordUser.id}#${discordUser.name.split('#')[1]}`
-
-	if (!(hypixelDiscordName === actualDiscordName || hypixelDiscordName === actualDiscordIdDiscrim))
-		return redirect(303, `/verify?error=WRONG_NAME&current=${encodeURIComponent(hypixelDiscordName)}&correct=${encodeURIComponent(actualDiscordName)}`)
-
-	const updatedAccount: AccountSchema = {
-		discordId: sessionResponse.session.discord_user.id,
-		minecraftUuid: playerResponse.player?.uuid
-	}
-
-	await fetchApi(`accounts/update`, fetch, {
-		method: 'POST',
-		headers: {
-			'Content-Type': 'application/json',
-			key: key
-		},
-		body: JSON.stringify(updatedAccount),
-	}).then(r => r.json())
-
-	return redirect(303, '/profile')
-}
\ No newline at end of file
diff --git a/src/routes/verify/+page.server.ts b/src/routes/verify/+page.server.ts
new file mode 100644
index 0000000..3321164
--- /dev/null
+++ b/src/routes/verify/+page.server.ts
@@ -0,0 +1,75 @@
+import { fetchApi } from '$lib/api'
+import type { AccountSchema, CleanUser, SessionSchema } from '$lib/APITypes'
+import type { RequestHandler } from '@sveltejs/kit'
+import env from '$lib/env'
+
+
+function redirect(status: number, location: string) {
+	return {
+		status,
+		headers: {
+			location,
+		},
+	}
+}
+
+export const post: RequestHandler = async ({ request, locals, platform }) => {
+	const key = env(platform).SKYBLOCK_STATS_API_KEY
+	if (!key) {
+		return redirect(303, `/verify?error=NO_KEY`)
+	}
+	if (locals.sid === undefined) {
+		return redirect(303, '/login')
+	}
+
+	const form = await request.formData()
+
+	// username or uuid
+	const playerIdentifier = form.get('ign')
+	if (!playerIdentifier) {
+		return redirect(303, `/verify?error=NO_IGN`)
+	}
+
+	const playerResponse: CleanUser = await fetchApi(`player/${playerIdentifier}`, fetch).then(res => res.json())
+	const sessionResponse: { session: SessionSchema | null, account: AccountSchema | null } = await fetchApi(`accounts/session`, fetch, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify({
+			uuid: locals.sid,
+		}),
+	}).then(r => r.json())
+
+	if (!sessionResponse.session)
+		return redirect(303, '/login')
+
+	const hypixelDiscordName = playerResponse.player?.socials.discord
+
+	if (!hypixelDiscordName)
+		return redirect(303, `/verify?error=NOT_LINKED`)
+
+	const discordUser = sessionResponse.session.discord_user
+	const actualDiscordName = discordUser.name
+	// some people link themselves as <id>#<discrim> instead of <name>#<discrim>
+	const actualDiscordIdDiscrim = `${discordUser.id}#${discordUser.name.split('#')[1]}`
+
+	if (!(hypixelDiscordName === actualDiscordName || hypixelDiscordName === actualDiscordIdDiscrim))
+		return redirect(303, `/verify?error=WRONG_NAME&current=${encodeURIComponent(hypixelDiscordName)}&correct=${encodeURIComponent(actualDiscordName)}`)
+
+	const updatedAccount: AccountSchema = {
+		discordId: sessionResponse.session.discord_user.id,
+		minecraftUuid: playerResponse.player?.uuid
+	}
+
+	await fetchApi(`accounts/update`, fetch, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			key: key
+		},
+		body: JSON.stringify(updatedAccount),
+	}).then(r => r.json())
+
+	return redirect(303, '/profile')
+}
\ No newline at end of file
diff --git a/src/routes/verify/+page.svelte b/src/routes/verify/+page.svelte
new file mode 100644
index 0000000..20de403
--- /dev/null
+++ b/src/routes/verify/+page.svelte
@@ -0,0 +1,66 @@
+<script lang="ts" context="module">
+	import type { Load } from '@sveltejs/kit'
+	export const load: Load = async ({ session, url }) => {
+		if (session.sid === undefined) {
+			return { redirect: '/login', status: 303 }
+		}
+		return {
+			props: {
+				errorCode: url.searchParams.get('error'),
+				current: url.searchParams.get('current'),
+				correct: url.searchParams.get('correct'),
+			},
+		}
+	}
+</script>
+
+<script lang="ts">
+	import Emoji from '$lib/Emoji.svelte'
+	import Head from '$lib/Head.svelte'
+	import Header from '$lib/Header.svelte'
+
+	export let errorCode: string | null
+	export let current: string | null
+	export let correct: string | null
+
+	const errorCodes = {
+		NO_IGN: 'Please enter a valid Minecraft username.',
+		NOT_LINKED:
+			'Please link your Discord in Hypixel by doing /profile -> Social media -> Discord. If you just changed it, wait a few minutes and try again.',
+		WRONG_NAME: `You're linked to ${current} on Hypixel. Please change this to ${correct} by doing /profile -> Social media -> Discord. If you just changed it, wait a few minutes and try again.`,
+		NO_KEY:
+			"This instance of skyblock-stats doesn't have a skyblock-api key set. Please contact the owner of the website if you believe this to be a mistake.",
+	}
+</script>
+
+<Head title="Verify Account" />
+<Header />
+
+<main>
+	<h1>Verify Minecraft account</h1>
+	<p>Please enter your Minecraft username to verify that this is your account.</p>
+	<p>
+		This will check with the Hypixel API that your Discord username matches the Discord name set in
+		your Hypixel settings.
+	</p>
+	{#if errorCode && errorCode in errorCodes}
+		<div class="error">
+			<Emoji value="🚫" />
+			{errorCodes[errorCode]}
+		</div>
+	{/if}
+	<form method="post" action="/verify">
+		<input placeholder="Username or UUID" name="ign" required />
+		<input type="submit" value="Enter" />
+	</form>
+</main>
+
+<style>
+	p {
+		margin: 0;
+	}
+	.error {
+		font-weight: bold;
+		margin: 1em 0;
+	}
+</style>
-- 
cgit 


From 925ad2bfff17f8d9381731fb0050936dcd7e0a72 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Thu, 15 Dec 2022 18:14:46 -0600
Subject: finish migrating to sveltekit v1

hopefully
---
 src/app.d.ts                                  |   8 +-
 src/hooks.server.ts                           |   7 +
 src/hooks.ts                                  |  25 ---
 src/lib/LoginButton.svelte                    |   2 +-
 src/lib/MayorSkin.svelte                      |  21 ++-
 src/routes/+page.server.ts                    |   7 +
 src/routes/+page.ts                           |   7 -
 src/routes/[player=username]/+page.ts         |  11 +-
 src/routes/auctionprices/+page.ts             |   4 +-
 src/routes/election/+page.svelte              |  17 --
 src/routes/election/+page.ts                  |   8 +
 src/routes/items/+page.svelte                 |  15 --
 src/routes/items/+page.ts                     |   6 +
 src/routes/leaderboard/+page.ts               |   8 +-
 src/routes/leaderboard/[name]/+page.ts        |   8 +-
 src/routes/leaderboards/+page.ts              |   4 +-
 src/routes/leaderboards/[name]/+page.ts       |  13 +-
 src/routes/loggedin/+page.ts                  |  37 -----
 src/routes/loggedin/+server.ts                |  30 ++++
 src/routes/login/+page.ts                     |  36 -----
 src/routes/login/+server.ts                   |  18 +++
 src/routes/logout/+page.ts                    |  28 ----
 src/routes/logout/+server.ts                  |  23 +++
 src/routes/player/+page.server.ts             |   8 +-
 src/routes/player/[player]/+page.ts           |  11 +-
 src/routes/player/[player]/[profile]/+page.ts |  16 +-
 src/routes/profile/+page.server.ts            |   7 +
 src/routes/profile/+page.svelte               | 180 +++++++++++++++++++++
 src/routes/profile/+page.ts                   |  44 ++++++
 src/routes/profile/index.svelte               | 219 --------------------------
 src/routes/profile/update.ts                  | 126 ---------------
 src/routes/profile/update/+server.ts          |  95 +++++++++++
 src/routes/verify/+page.server.ts             | 116 +++++++-------
 src/routes/verify/+page.svelte                |  25 +--
 src/routes/verify/+page.ts                    |  13 ++
 35 files changed, 549 insertions(+), 654 deletions(-)
 create mode 100644 src/hooks.server.ts
 delete mode 100644 src/hooks.ts
 create mode 100644 src/routes/+page.server.ts
 delete mode 100644 src/routes/+page.ts
 create mode 100644 src/routes/election/+page.ts
 create mode 100644 src/routes/items/+page.ts
 delete mode 100644 src/routes/loggedin/+page.ts
 create mode 100644 src/routes/loggedin/+server.ts
 delete mode 100644 src/routes/login/+page.ts
 create mode 100644 src/routes/login/+server.ts
 delete mode 100644 src/routes/logout/+page.ts
 create mode 100644 src/routes/logout/+server.ts
 create mode 100644 src/routes/profile/+page.server.ts
 create mode 100644 src/routes/profile/+page.svelte
 create mode 100644 src/routes/profile/+page.ts
 delete mode 100644 src/routes/profile/index.svelte
 delete mode 100644 src/routes/profile/update.ts
 create mode 100644 src/routes/profile/update/+server.ts
 create mode 100644 src/routes/verify/+page.ts

(limited to 'src')

diff --git a/src/app.d.ts b/src/app.d.ts
index b41fa6f..9f4467d 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -3,10 +3,13 @@
 // // See https://kit.svelte.dev/docs/typescript
 // // for information about these interfaces
 declare namespace App {
+	// interface Error { }
+
 	interface Locals {
 		sid: string | undefined
 	}
 
+	// interface PageData { }
 
 	interface Platform {
 		env: {
@@ -18,9 +21,4 @@ declare namespace App {
 		}
 	}
 
-	interface Session {
-		sid: string | undefined
-	}
-
-	// interface Stuff {}
 }
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
new file mode 100644
index 0000000..0d2087b
--- /dev/null
+++ b/src/hooks.server.ts
@@ -0,0 +1,7 @@
+import type { Handle } from '@sveltejs/kit'
+
+export const handle = (async ({ event, resolve }) => {
+	event.locals.sid = event.cookies.get('sid')
+	const response = await resolve(event)
+	return response
+}) satisfies Handle
\ No newline at end of file
diff --git a/src/hooks.ts b/src/hooks.ts
deleted file mode 100644
index 457e8ae..0000000
--- a/src/hooks.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import cookie from 'cookie'
-import type { Handle } from '@sveltejs/kit'
-
-
-export const handle: Handle = async ({ event, resolve }) => {
-	const cookies = cookie.parse(event.request.headers.get('cookie') || '')
-
-	event.locals.sid = cookies.sid
-
-	const response = await resolve(event)
-
-	return response
-}
-
-export const getSession: GetSession = async ({ locals }) => {
-	return {
-		sid: locals.sid
-	}
-}
-
-// export const externalFetch: ExternalFetch = async (request) => {
-// 	const response = await fetch(request)
-
-// 	return response
-// }
\ No newline at end of file
diff --git a/src/lib/LoginButton.svelte b/src/lib/LoginButton.svelte
index bba078e..7ebf5d7 100644
--- a/src/lib/LoginButton.svelte
+++ b/src/lib/LoginButton.svelte
@@ -6,7 +6,7 @@
 	{#if loggedIn}
 		<a href="/profile"><button class="login-button">Edit profile</button></a>
 	{:else}
-		<a href="/login">
+		<a href="/login" rel="external">
 			<button class="login-button"
 				><img src="/discord-mark-light.svg" alt="Discord logo" />Log in with Discord</button
 			>
diff --git a/src/lib/MayorSkin.svelte b/src/lib/MayorSkin.svelte
index ad0a9a8..2360fab 100644
--- a/src/lib/MayorSkin.svelte
+++ b/src/lib/MayorSkin.svelte
@@ -23,14 +23,21 @@
 		faith: '64b39d0756b92b8b7599d1f971580088954e21c5f60c673d0d4f63693fb002b5',
 	}
 
-	let url: string
+	let url: string | undefined
 	$: {
 		if (name.toLowerCase() === 'derpy') url = '/villager.png'
-		else url = `https://mc-heads.net/body/${skinIds[name.toLowerCase()]}`
+		else {
+			const skinId = skinIds[name.toLowerCase()]
+			url = skinId ? `https://mc-heads.net/body/${skinId}` : undefined
+		}
 	}
 </script>
 
-<img src={url} alt="Mayor {toTitleCase(name)}" />
+{#if url}
+	<img src={url} alt="Mayor {toTitleCase(name)}" />
+{:else}
+	<div class="no-skin-found">Unknown mayor</div>
+{/if}
 
 <style>
 	img {
@@ -39,4 +46,12 @@
 		height: 12em;
 		margin: 0 auto;
 	}
+
+	.no-skin-found {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 12em;
+		margin: 0 auto;
+	}
 </style>
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
new file mode 100644
index 0000000..4596c1b
--- /dev/null
+++ b/src/routes/+page.server.ts
@@ -0,0 +1,7 @@
+import type { ServerLoad } from '@sveltejs/kit'
+
+export const load = (({ locals }) => {
+	return {
+		loggedIn: locals.sid !== undefined,
+	}
+}) satisfies ServerLoad
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
deleted file mode 100644
index cd45f69..0000000
--- a/src/routes/+page.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { PageData } from './$types'
-
-export const load = (({ session }) => {
-	return {
-		loggedIn: session.sid !== undefined,
-	}
-}) satisfies PageData
diff --git a/src/routes/[player=username]/+page.ts b/src/routes/[player=username]/+page.ts
index c846929..289cd48 100644
--- a/src/routes/[player=username]/+page.ts
+++ b/src/routes/[player=username]/+page.ts
@@ -1,11 +1,6 @@
+import { redirect } from '@sveltejs/kit'
 import type { PageLoad } from './$types'
 
-
-export const get = (({ params }) => {
-	return {
-		status: 303,
-		headers: {
-			location: `/player/${params.player}`
-		}
-	}
+export const load = (({ params }) => {
+	throw redirect(303, `/player/${params.player}`)
 }) satisfies PageLoad
\ No newline at end of file
diff --git a/src/routes/auctionprices/+page.ts b/src/routes/auctionprices/+page.ts
index 8166a3c..31af8e3 100644
--- a/src/routes/auctionprices/+page.ts
+++ b/src/routes/auctionprices/+page.ts
@@ -1,4 +1,4 @@
-import type { PageData } from './$types'
+import type { PageLoad } from './$types'
 import { fetchApi } from '$lib/api'
 
 export const load = (async ({ fetch }) => {
@@ -10,4 +10,4 @@ export const load = (async ({ fetch }) => {
 		prices,
 		items,
 	}
-}) satisfies PageData
+}) satisfies PageLoad
diff --git a/src/routes/election/+page.svelte b/src/routes/election/+page.svelte
index 1754655..dc4719e 100644
--- a/src/routes/election/+page.svelte
+++ b/src/routes/election/+page.svelte
@@ -1,20 +1,3 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	import { fetchApi } from '$lib/api'
-
-	export const load: Load = async ({ params, fetch }) => {
-		const data = await fetchApi(`election?t=${Math.floor(Date.now() / 1000)}`, fetch).then(r =>
-			r.json()
-		)
-
-		return {
-			props: {
-				data,
-			},
-		}
-	}
-</script>
-
 <script lang="ts">
 	import Header from '$lib/Header.svelte'
 	import Head from '$lib/Head.svelte'
diff --git a/src/routes/election/+page.ts b/src/routes/election/+page.ts
new file mode 100644
index 0000000..e41087d
--- /dev/null
+++ b/src/routes/election/+page.ts
@@ -0,0 +1,8 @@
+import { fetchApi } from '$lib/api'
+import type { PageLoad } from './$types'
+
+export const load = (async ({ fetch }) => {
+	return await fetchApi(`election?t=${Math.floor(Date.now() / 1000)}`, fetch).then(r =>
+		r.json()
+	)
+}) satisfies PageLoad
diff --git a/src/routes/items/+page.svelte b/src/routes/items/+page.svelte
index 82b3ee3..e378bdf 100644
--- a/src/routes/items/+page.svelte
+++ b/src/routes/items/+page.svelte
@@ -1,18 +1,3 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	import { fetchApi } from '$lib/api'
-
-	export const load: Load = async ({ params, fetch }) => {
-		const data = await fetchApi(`items`, fetch).then(r => r.json())
-
-		return {
-			props: {
-				data,
-			},
-		}
-	}
-</script>
-
 <script lang="ts">
 	import Header from '$lib/Header.svelte'
 	import Head from '$lib/Head.svelte'
diff --git a/src/routes/items/+page.ts b/src/routes/items/+page.ts
new file mode 100644
index 0000000..e5bb249
--- /dev/null
+++ b/src/routes/items/+page.ts
@@ -0,0 +1,6 @@
+import { fetchApi } from '$lib/api'
+import type { PageLoad } from './$types'
+
+export const load = (async ({ fetch }) => {
+	return await fetchApi(`items`, fetch).then(r => r.json())
+}) satisfies PageLoad
diff --git a/src/routes/leaderboard/+page.ts b/src/routes/leaderboard/+page.ts
index 871f4bc..68f69ac 100644
--- a/src/routes/leaderboard/+page.ts
+++ b/src/routes/leaderboard/+page.ts
@@ -1,10 +1,6 @@
+import { redirect } from '@sveltejs/kit'
 import type { PageLoad } from './$types'
 
 export const load = (() => {
-    return {
-        status: 303,
-        headers: {
-            location: '/leaderboards'
-        }
-    }
+    throw redirect(303, '/leaderboards')
 }) satisfies PageLoad
diff --git a/src/routes/leaderboard/[name]/+page.ts b/src/routes/leaderboard/[name]/+page.ts
index c4b668e..8de4334 100644
--- a/src/routes/leaderboard/[name]/+page.ts
+++ b/src/routes/leaderboard/[name]/+page.ts
@@ -1,12 +1,8 @@
+import { redirect } from '@sveltejs/kit'
 import type { PageLoad } from './$types'
 
 // The route /leaderboard/<name> was moved to /leaderboards/<name> for
 // consistency.
 export const get = (({ params }) => {
-    return {
-        status: 303,
-        headers: {
-            location: `/leaderboards/${params.name}`
-        }
-    }
+    throw redirect(303, `/leaderboards/${params.name}`)
 }) satisfies PageLoad
diff --git a/src/routes/leaderboards/+page.ts b/src/routes/leaderboards/+page.ts
index d5a8480..f28ac79 100644
--- a/src/routes/leaderboards/+page.ts
+++ b/src/routes/leaderboards/+page.ts
@@ -1,6 +1,6 @@
-import type { PageData } from './$types'
+import type { PageLoad } from './$types'
 import { fetchApi } from '$lib/api'
 
 export const load = (async ({ fetch }) => {
 	return await fetchApi(`leaderboards`, fetch).then(r => r.json())
-}) satisfies PageData
+}) satisfies PageLoad
diff --git a/src/routes/leaderboards/[name]/+page.ts b/src/routes/leaderboards/[name]/+page.ts
index 78f3f6b..735be61 100644
--- a/src/routes/leaderboards/[name]/+page.ts
+++ b/src/routes/leaderboards/[name]/+page.ts
@@ -1,16 +1,13 @@
-import type { PageData } from './$types'
+import type { PageLoad } from './$types'
 import { fetchApi } from '$lib/api'
+import { error } from '@sveltejs/kit'
 
 export const load = (async ({ params, fetch }) => {
 	const dataText = await fetchApi(`leaderboards/${params.name}`, fetch).then(r => r.text())
 
 	const data = JSON.parse(dataText)
 
-	if (data.list.length === 0) return { status: 404, error: 'Unknown leaderboard' }
+	if (data.list.length === 0) throw error(404, 'Unknown leaderboard')
 
-	return {
-		props: {
-			data,
-		},
-	} as any
-}) satisfies PageData
+	return data
+}) satisfies PageLoad
diff --git a/src/routes/loggedin/+page.ts b/src/routes/loggedin/+page.ts
deleted file mode 100644
index 9ae28ef..0000000
--- a/src/routes/loggedin/+page.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { fetchApi } from '$lib/api'
-import type { RequestHandler } from '@sveltejs/kit'
-
-export const get: RequestHandler = async ({ url }) => {
-	const code = url.searchParams.get('code')
-	const redirectUri = `${url.protocol}//${url.host}/loggedin`
-	const response = await fetchApi(`accounts/createsession`, fetch, {
-		method: 'POST',
-		headers: {
-			'content-type': 'application/json',
-		},
-		body: JSON.stringify({
-			code,
-			redirectUri: redirectUri
-		}),
-	}).then(res => {
-		if (res.status !== 200)
-			throw new Error(res.statusText)
-		return res.json()
-	})
-
-	if (response.ok) {
-		return {
-			status: 303,
-			headers: {
-				location: '/verify',
-				'Set-Cookie': `sid=${response.session_id}; Max-Age=31536000000; Path=/; HttpOnly`
-			}
-		}
-	}
-	return {
-		status: 303,
-		headers: {
-			location: '/login',
-		}
-	}
-}
diff --git a/src/routes/loggedin/+server.ts b/src/routes/loggedin/+server.ts
new file mode 100644
index 0000000..4772cf6
--- /dev/null
+++ b/src/routes/loggedin/+server.ts
@@ -0,0 +1,30 @@
+import { fetchApi } from '$lib/api'
+import { redirect, type RequestHandler, } from '@sveltejs/kit'
+
+export const GET = (async ({ url, cookies }) => {
+	const code = url.searchParams.get('code')
+	const redirectUri = `${url.protocol}//${url.host}/loggedin`
+	const response = await fetchApi(`accounts/createsession`, fetch, {
+		method: 'POST',
+		headers: {
+			'content-type': 'application/json',
+		},
+		body: JSON.stringify({
+			code,
+			redirectUri: redirectUri
+		}),
+	}).then(res => {
+		if (res.status !== 200)
+			throw new Error(res.statusText)
+		return res.json()
+	})
+
+	if (response.ok) {
+		cookies.set('sid', response.session_id, {
+			maxAge: 31536000000,
+			httpOnly: true,
+		})
+		throw redirect(303, '/verify')
+	}
+	throw redirect(303, '/login')
+}) satisfies RequestHandler
diff --git a/src/routes/login/+page.ts b/src/routes/login/+page.ts
deleted file mode 100644
index 1cd9b23..0000000
--- a/src/routes/login/+page.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit'
-import env from '$lib/env'
-
-
-export const get: RequestHandler = async ({ request, platform }) => {
-	const host = request.headers.get('host')
-
-	const clientId = env(platform).DISCORD_CLIENT_ID
-
-	if (!clientId)
-		return {
-			status: 500,
-			headers: {
-				'content-type': 'text/plain',
-			},
-			body: 'DISCORD_CLIENT_ID is not set as an environment variable. Please contact the owner of the website if this was expected to work.',
-		}
-
-	if (!host)
-		return {
-			status: 400,
-			headers: {
-				'content-type': 'text/plain',
-			},
-			body: 'Host header is required.',
-		}
-
-	const protocol = request.url.startsWith('https') ? 'https' : 'http'
-
-	return {
-		status: 303,
-		headers: {
-			location: `https://discord.com/oauth2/authorize?client_id=${clientId}&redirect_uri=${protocol}://${host}%2Floggedin&response_type=code&scope=identify`
-		}
-	}
-}
diff --git a/src/routes/login/+server.ts b/src/routes/login/+server.ts
new file mode 100644
index 0000000..684f11e
--- /dev/null
+++ b/src/routes/login/+server.ts
@@ -0,0 +1,18 @@
+import env from '$lib/env'
+import { error, redirect, type RequestHandler } from '@sveltejs/kit'
+
+export const GET = (async ({ request, platform }) => {
+	const host = request.headers.get('host')
+
+	const clientId = env(platform).DISCORD_CLIENT_ID
+
+	if (!clientId)
+		throw error(500, 'DISCORD_CLIENT_ID is not set as an environment variable. Please contact the owner of the website if this was expected to work.')
+
+	if (!host)
+		throw error(400, 'Host header is required.')
+
+	const protocol = request.url.startsWith('https') ? 'https' : 'http'
+
+	throw redirect(303, `https://discord.com/oauth2/authorize?client_id=${clientId}&redirect_uri=${protocol}://${host}%2Floggedin&response_type=code&scope=identify`)
+}) satisfies RequestHandler
diff --git a/src/routes/logout/+page.ts b/src/routes/logout/+page.ts
deleted file mode 100644
index 25be86c..0000000
--- a/src/routes/logout/+page.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { fetchApi } from '$lib/api'
-import type { RequestHandler } from '@sveltejs/kit'
-
-export const get: RequestHandler = async ({ locals, url }) => {
-	// if the sid is wrong, nothing to do
-	if (url.searchParams.has('sid') && url.searchParams.get('sid') === locals.sid) {
-		await fetchApi(`accounts/session`, fetch, {
-			method: 'DELETE',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			body: JSON.stringify({
-				uuid: locals.sid
-			}),
-		}).then(res => {
-			if (res.status !== 200)
-				throw new Error(res.statusText)
-		})
-	}
-	return {
-		status: 303,
-		headers: {
-			location: '/',
-			'Set-Cookie': 'sid=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;'
-		}
-	}
-
-}
diff --git a/src/routes/logout/+server.ts b/src/routes/logout/+server.ts
new file mode 100644
index 0000000..2e0f40d
--- /dev/null
+++ b/src/routes/logout/+server.ts
@@ -0,0 +1,23 @@
+import { fetchApi } from '$lib/api'
+import { redirect, type RequestHandler } from '@sveltejs/kit'
+
+export const GET = (async ({ url, cookies, locals }) => {
+	// if the sid is wrong, nothing to do
+	if (url.searchParams.has('sid') && url.searchParams.get('sid') === locals.sid) {
+		await fetchApi(`accounts/session`, fetch, {
+			method: 'DELETE',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				uuid: locals.sid
+			}),
+		}).then(res => {
+			if (res.status !== 200)
+				throw new Error(res.statusText)
+		})
+	}
+
+	cookies.delete('sid')
+	throw redirect(303, '/')
+}) as RequestHandler
diff --git a/src/routes/player/+page.server.ts b/src/routes/player/+page.server.ts
index 3a1b069..eafae71 100644
--- a/src/routes/player/+page.server.ts
+++ b/src/routes/player/+page.server.ts
@@ -1,3 +1,4 @@
+import { redirect } from '@sveltejs/kit'
 import type { Actions } from './$types'
 
 export const actions: Actions = {
@@ -6,11 +7,6 @@ export const actions: Actions = {
 
         const player = form.get('user-search')
 
-        return {
-            status: 303,
-            headers: {
-                location: `/player/${player}`
-            }
-        }
+        throw redirect(303, `/player/${player}`)
     }
 }
\ No newline at end of file
diff --git a/src/routes/player/[player]/+page.ts b/src/routes/player/[player]/+page.ts
index bd7c002..023c3ff 100644
--- a/src/routes/player/[player]/+page.ts
+++ b/src/routes/player/[player]/+page.ts
@@ -1,5 +1,6 @@
 import type { PageLoad } from './$types'
 import { fetchApi } from '$lib/api'
+import { error, redirect } from '@sveltejs/kit'
 
 export const load = (async ({ params, fetch }) => {
 	const player: string = params.player!
@@ -7,17 +8,11 @@ export const load = (async ({ params, fetch }) => {
 	const data = await fetchApi(`player/${player}?customization=true`, fetch).then(r => r.json())
 
 	if (!data.player) {
-		return {
-			status: 404,
-			error: 'Unknown player',
-		}
+		throw error(404, 'Unknown player')
 	}
 
 	if (data.player.username !== player) {
-		return {
-			redirect: `/player/${data.player.username}`,
-			status: 302,
-		} as any
+		throw redirect(302, `/player/${data.player.username}`)
 	}
 
 	return data
diff --git a/src/routes/player/[player]/[profile]/+page.ts b/src/routes/player/[player]/[profile]/+page.ts
index e97cbfc..34a4e2a 100644
--- a/src/routes/player/[player]/[profile]/+page.ts
+++ b/src/routes/player/[player]/[profile]/+page.ts
@@ -2,6 +2,7 @@ import type { CleanMemberProfile } from '$lib/APITypes'
 import type { PageLoad } from './$types'
 import { loadPack } from '$lib/packs'
 import { fetchApi } from '$lib/api'
+import { error, redirect } from '@sveltejs/kit'
 
 export const load = (async ({ params, fetch, url }) => {
 	const player: string = params.player
@@ -19,23 +20,14 @@ export const load = (async ({ params, fetch, url }) => {
 	})
 
 	if (!data.member) {
-		return {
-			status: 404,
-			error: 'Unknown profile',
-		}
+		throw error(404, 'Unknown profile')
 	}
 
 	if (data.member.username !== player) {
-		return {
-			redirect: `/player/${data.member.username}/${data.profile.name}`,
-			status: 302,
-		} as any
+		throw redirect(302, `/player/${data.member.username}/${data.profile.name}`)
 	}
 	if (!data.member.left && data.profile.name !== profile) {
-		return {
-			redirect: `/player/${data.member.username}/${data.profile.name}`,
-			status: 302,
-		} as any
+		throw redirect(302, `/player/${data.member.username}/${data.profile.name}`)
 	}
 
 	const packName = url.searchParams.get('pack') ?? data?.customization?.pack
diff --git a/src/routes/profile/+page.server.ts b/src/routes/profile/+page.server.ts
new file mode 100644
index 0000000..60c24c1
--- /dev/null
+++ b/src/routes/profile/+page.server.ts
@@ -0,0 +1,7 @@
+import type { ServerLoad } from '@sveltejs/kit'
+
+export const load = (({ locals }) => {
+	return {
+		sid: locals.sid
+	}
+}) satisfies ServerLoad
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
new file mode 100644
index 0000000..244d1a2
--- /dev/null
+++ b/src/routes/profile/+page.svelte
@@ -0,0 +1,180 @@
+<script lang="ts">
+	import Emoji from '$lib/Emoji.svelte'
+	import { browser } from '$app/environment'
+	import Tooltip from '$lib/Tooltip.svelte'
+	import { onDestroy, onMount } from 'svelte'
+	import backgroundNames from '../../_backgrounds.json'
+	import type { AccountCustomization, AccountSchema, CleanUser, SessionSchema } from '$lib/APITypes'
+	import type { PageData } from './$types'
+	import Head from '$lib/Head.svelte'
+	import Header from '$lib/Header.svelte'
+
+	export let data: PageData
+
+	export let session: SessionSchema = data.session
+	export let account: AccountSchema = data.account
+	export let player: CleanUser = data.player
+
+	export let isDonator: boolean = data.isDonator
+
+	let pack: AccountCustomization['pack'] = account?.customization?.pack ?? 'furfsky_reborn'
+	let blurBackground: AccountCustomization['blurBackground'] =
+		account?.customization?.blurBackground ?? false
+	let backgroundName: string | undefined = account?.customization?.backgroundUrl?.replace(
+		/^\/backgrounds\//,
+		''
+	)
+	let emoji: AccountCustomization['emoji'] = account?.customization?.emoji
+
+	let mounted = false
+	onMount(() => {
+		mounted = true
+	})
+	onDestroy(() => {
+		mounted = false
+	})
+
+	let error: string | undefined
+	let loading: boolean = false
+
+	async function updateProfile() {
+		if (!browser || !mounted) return
+		error = undefined
+		loading = true
+		const response = await fetch('/profile/update', {
+			method: 'PATCH',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				pack,
+				blurBackground,
+				backgroundName,
+				emoji,
+			}),
+		})
+			.then(r => {
+				loading = false
+				return r.json()
+			})
+			.catch(e => {
+				loading = false
+				error = e.message
+			})
+		if (!response.ok) {
+			error = response.error
+		}
+	}
+
+	// call updateProfile whenever anything is changed
+	$: [pack, blurBackground, backgroundName, emoji, updateProfile()]
+</script>
+
+<Head title="Customize Profile" />
+<Header />
+
+<main>
+	{#if session && session._id}
+		<a href="/logout?sid={session._id}" class="logout"><button>Log out</button></a>
+	{/if}
+	<h1>Customize Profile</h1>
+	<noscript>
+		<p><Emoji value="⚠" /> Please enable JavaScript to use this page.</p>
+	</noscript>
+
+	<p class="status">
+		{#if error}
+			<Emoji value="🚫" /> {error}
+		{:else if loading}
+			<Emoji value="🔄" /> Loading...
+		{/if}
+	</p>
+
+	<a href="/player/{player.player?.username}">View profile</a>
+	<p>
+		<label for="pack-selector">Pack: </label>
+		<select bind:value={pack} id="pack-selector">
+			<option value="ectoplasm">Ectoplasm</option>
+			<option value="furfsky">Furfsky</option>
+			<option value="furfsky_reborn">Furfsky Reborn</option>
+			<option value="hypixel+">Hypixel+</option>
+			<option value="packshq">PacksHQ</option>
+			<option value="rnbw">RNBW</option>
+			<option value="vanilla">Vanilla</option>
+			<option value="worlds_and_beyond">Worlds and Beyond</option>
+		</select>
+	</p>
+	<p>
+		<label for="blur-background-toggle">Blur and darken background behind content: </label>
+		<input type="checkbox" id="blur-background-toggle" bind:checked={blurBackground} />
+	</p>
+	{#if isDonator}
+		<label for="profile-emoji-selector">Emoji next to username: </label>
+		<input type="text" name="emoji" id="profile-emoji-selector" bind:value={emoji} />
+		<Tooltip width="15em">
+			<span slot="tooltip">
+				<p>Windows: <code>win+.</code></p>
+				<p>Mobile: Emoji keyboard</p>
+			</span>
+			<span>ⓘ</span>
+		</Tooltip>
+	{/if}
+	<h2>Background</h2>
+	<div id="background-selector-list">
+		{#each backgroundNames as thisBackgroundName}
+			<span
+				class="selectable-background-option"
+				class:selected={thisBackgroundName === backgroundName}
+				style="background-image: url(/backgrounds-small/{thisBackgroundName})"
+				title={thisBackgroundName}
+				on:click={() => (backgroundName = thisBackgroundName)}
+				on:keypress={e => {
+					if (e.key === 'Enter') {
+						backgroundName = thisBackgroundName
+					}
+				}}
+			/>
+		{/each}
+	</div>
+</main>
+
+<style>
+	.logout {
+		position: absolute;
+		top: 0.5em;
+		right: 0.5em;
+	}
+	.status {
+		position: relative;
+		top: -1.6em;
+		height: 0;
+		margin: 0;
+	}
+	#profile-emoji-selector {
+		width: 2em;
+	}
+	p {
+		margin: 0.2em 0;
+	}
+	#background-selector-list {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	.selectable-background-option {
+		display: inline-block;
+		height: 10em;
+		width: 18em;
+		background-position: center;
+		background-size: 110%;
+		margin: 0.5em;
+		border-radius: 1em;
+		transition: background-size 500ms;
+		cursor: pointer;
+	}
+	.selectable-background-option:hover {
+		background-size: 125%;
+	}
+	.selectable-background-option.selected {
+		box-shadow: 0 0 0 2pt #06ec;
+	}
+</style>
diff --git a/src/routes/profile/+page.ts b/src/routes/profile/+page.ts
new file mode 100644
index 0000000..cdd2a93
--- /dev/null
+++ b/src/routes/profile/+page.ts
@@ -0,0 +1,44 @@
+import { fetchApi } from '$lib/api'
+import type { AccountSchema, SessionSchema } from '$lib/APITypes'
+import donators from '../../_donators.json'
+import admins from '../../_admins.json'
+import type { PageLoad } from './$types'
+import { redirect } from '@sveltejs/kit'
+
+export const load = (async ({ fetch, data }) => {
+	const sessionResponse: { session: SessionSchema | null; account: AccountSchema | null } | null =
+		await fetchApi(`accounts/session`, fetch, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				uuid: data.sid,
+			}),
+		}).then(r => r.json())
+
+	const playerResponse = sessionResponse?.account
+		? await fetchApi(`player/${sessionResponse.account.minecraftUuid}`, fetch).then(r => r.json())
+		: null
+
+	// redirect to /login if the user is not logged in
+	if (
+		!sessionResponse ||
+		!sessionResponse.account ||
+		!sessionResponse.session ||
+		!playerResponse.player
+	) {
+		throw redirect(303, '/login')
+	}
+
+	const isDonator =
+		donators.find(d => d?.uuid === sessionResponse.account?.minecraftUuid) !== undefined
+	const isAdmin = admins.find(a => a === sessionResponse.account?.minecraftUuid) !== undefined
+
+	return {
+		session: sessionResponse.session,
+		account: sessionResponse.account,
+		player: playerResponse,
+		isDonator: isDonator || isAdmin,
+	}
+}) as PageLoad
diff --git a/src/routes/profile/index.svelte b/src/routes/profile/index.svelte
deleted file mode 100644
index 0d5ad04..0000000
--- a/src/routes/profile/index.svelte
+++ /dev/null
@@ -1,219 +0,0 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	import { fetchApi } from '$lib/api'
-	import type { AccountCustomization, AccountSchema, CleanUser, SessionSchema } from '$lib/APITypes'
-	import Head from '$lib/Head.svelte'
-	import Header from '$lib/Header.svelte'
-	import donators from '../../_donators.json'
-	import admins from '../../_admins.json'
-
-	export const load: Load = async ({ fetch, session }) => {
-		const sessionResponse: { session: SessionSchema | null; account: AccountSchema | null } | null =
-			await fetchApi(`accounts/session`, fetch, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-				},
-				body: JSON.stringify({
-					uuid: session.sid,
-				}),
-			}).then(r => r.json())
-
-		const playerResponse = sessionResponse?.account
-			? await fetchApi(`player/${sessionResponse.account.minecraftUuid}`, fetch).then(r => r.json())
-			: null
-
-		// redirect to /login if the user is not logged in
-		if (
-			!sessionResponse ||
-			!sessionResponse.account ||
-			!sessionResponse.session ||
-			!playerResponse.player
-		) {
-			return { redirect: '/login', status: 303 }
-		}
-
-		const isDonator =
-			donators.find(d => d?.uuid === sessionResponse.account?.minecraftUuid) !== undefined
-		const isAdmin = admins.find(a => a === sessionResponse.account?.minecraftUuid) !== undefined
-
-		return {
-			props: {
-				session: sessionResponse.session,
-				account: sessionResponse.account,
-				player: playerResponse,
-				isDonator: isDonator || isAdmin,
-			},
-		}
-	}
-</script>
-
-<script lang="ts">
-	import Emoji from '$lib/Emoji.svelte'
-	import { browser } from '$app/environment'
-	import Tooltip from '$lib/Tooltip.svelte'
-	import { onDestroy, onMount } from 'svelte'
-	import backgroundNames from '../../_backgrounds.json'
-
-	export let session: SessionSchema
-	export let account: AccountSchema
-	export let player: CleanUser
-
-	export let isDonator: boolean
-
-	let pack: AccountCustomization['pack'] = account?.customization?.pack ?? 'furfsky_reborn'
-	let blurBackground: AccountCustomization['blurBackground'] =
-		account?.customization?.blurBackground ?? false
-	let backgroundName: string | undefined = account?.customization?.backgroundUrl?.replace(
-		/^\/backgrounds\//,
-		''
-	)
-	let emoji: AccountCustomization['emoji'] = account?.customization?.emoji
-
-	let mounted = false
-	onMount(() => {
-		mounted = true
-	})
-	onDestroy(() => {
-		mounted = false
-	})
-
-	let error: string | undefined
-	let loading: boolean = false
-
-	async function updateProfile() {
-		if (!browser || !mounted) return
-		error = undefined
-		loading = true
-		const response = await fetch('/profile/update', {
-			method: 'PATCH',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			body: JSON.stringify({
-				pack,
-				blurBackground,
-				backgroundName,
-				emoji,
-			}),
-		})
-			.then(r => {
-				loading = false
-				return r.json()
-			})
-			.catch(e => {
-				loading = false
-				error = e.message
-			})
-		if (!response.ok) {
-			error = response.error
-		}
-	}
-
-	// call updateProfile whenever anything is changed
-	$: [pack, blurBackground, backgroundName, emoji, updateProfile()]
-</script>
-
-<Head title="Customize Profile" />
-<Header />
-
-<main>
-	{#if session && session._id}
-		<a href="/logout?sid={session._id}" class="logout"><button>Log out</button></a>
-	{/if}
-	<h1>Customize Profile</h1>
-	<noscript>
-		<p><Emoji value="⚠" /> Please enable JavaScript to use this page.</p>
-	</noscript>
-
-	<p class="status">
-		{#if error}
-			<Emoji value="🚫" /> {error}
-		{:else if loading}
-			<Emoji value="🔄" /> Loading...
-		{/if}
-	</p>
-
-	<a href="/player/{player.player?.username}">View profile</a>
-	<p>
-		<label for="pack-selector">Pack: </label>
-		<select bind:value={pack} id="pack-selector">
-			<option value="ectoplasm">Ectoplasm</option>
-			<option value="furfsky">Furfsky</option>
-			<option value="furfsky_reborn">Furfsky Reborn</option>
-			<option value="hypixel+">Hypixel+</option>
-			<option value="packshq">PacksHQ</option>
-			<option value="rnbw">RNBW</option>
-			<option value="vanilla">Vanilla</option>
-			<option value="worlds_and_beyond">Worlds and Beyond</option>
-		</select>
-	</p>
-	<p>
-		<label for="blur-background-toggle">Blur and darken background behind content: </label>
-		<input type="checkbox" id="blur-background-toggle" bind:checked={blurBackground} />
-	</p>
-	{#if isDonator}
-		<label for="profile-emoji-selector">Emoji next to username: </label>
-		<input type="text" name="emoji" id="profile-emoji-selector" bind:value={emoji} />
-		<Tooltip width="15em">
-			<span slot="tooltip">
-				<p>Windows: <code>win+.</code></p>
-				<p>Mobile: Emoji keyboard</p>
-			</span>
-			<span>ⓘ</span>
-		</Tooltip>
-	{/if}
-	<h2>Background</h2>
-	<div id="background-selector-list">
-		{#each backgroundNames as thisBackgroundName}
-			<span
-				class="selectable-background-option"
-				class:selected={thisBackgroundName === backgroundName}
-				style="background-image: url(/backgrounds-small/{thisBackgroundName})"
-				title={thisBackgroundName}
-				on:click={() => (backgroundName = thisBackgroundName)}
-			/>
-		{/each}
-	</div>
-</main>
-
-<style>
-	.logout {
-		position: absolute;
-		top: 0.5em;
-		right: 0.5em;
-	}
-	.status {
-		position: relative;
-		top: -1.6em;
-		height: 0;
-		margin: 0;
-	}
-	#profile-emoji-selector {
-		width: 2em;
-	}
-	p {
-		margin: 0.2em 0;
-	}
-	#background-selector-list {
-		display: flex;
-		flex-wrap: wrap;
-	}
-	.selectable-background-option {
-		display: inline-block;
-		height: 10em;
-		width: 18em;
-		background-position: center;
-		background-size: 110%;
-		margin: 0.5em;
-		border-radius: 1em;
-		transition: background-size 500ms;
-		cursor: pointer;
-	}
-	.selectable-background-option:hover {
-		background-size: 125%;
-	}
-	.selectable-background-option.selected {
-		box-shadow: 0 0 0 2pt #06ec;
-	}
-</style>
diff --git a/src/routes/profile/update.ts b/src/routes/profile/update.ts
deleted file mode 100644
index 168cba8..0000000
--- a/src/routes/profile/update.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import { fetchApi } from '$lib/api'
-import type { AccountSchema, SessionSchema } from '$lib/APITypes'
-import type { RequestHandler } from '@sveltejs/kit'
-import backgroundFileNames from '../../_backgrounds.json'
-import donators from '../../_donators.json'
-import admins from '../../_admins.json'
-import type { JSONValue } from '@sveltejs/kit/types/internal'
-import env from '$lib/env'
-
-const emojiRegex = /^(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])$/
-
-function isValidEmoji(emoji: string) {
-	const match = emojiRegex.exec(emoji)
-	return match && match[0] === emoji && match.index === 0
-}
-
-
-export const patch: RequestHandler = async ({ request, locals, platform }) => {
-	if (locals.sid === undefined) {
-		return {
-			body: { ok: false, error: 'You are not logged in.' },
-			status: 401,
-		}
-	}
-	const key = env(platform).SKYBLOCK_STATS_API_KEY
-	if (!key) {
-		return {
-			body: { ok: false, error: 'The SKYBLOCK_STATS_API_KEY environment variable is not set.' },
-			status: 500,
-		}
-	}
-	const data = await request.json()
-
-	const sessionResponse: { session: SessionSchema | null, account: AccountSchema | null } = await fetchApi(`accounts/session`, fetch, {
-		method: 'POST',
-		headers: {
-			'Content-Type': 'application/json',
-		},
-		body: JSON.stringify({
-			uuid: locals.sid,
-		}),
-	}).then(r => r.json())
-	if (!sessionResponse.session || !sessionResponse.account?.minecraftUuid)
-		return {
-			body: { ok: false, error: 'Invalid session.' },
-			status: 401,
-		}
-
-	const backgroundName = data.backgroundName
-	const pack = data.pack
-	const blurBackground = data.blurBackground
-	const emoji = data.emoji
-
-	const isDonator = donators.find(d => d.uuid === sessionResponse.account?.minecraftUuid) !== undefined
-	const isAdmin = admins.includes(sessionResponse.account?.minecraftUuid)
-
-	if (typeof backgroundName !== 'undefined' && typeof backgroundName !== 'string') {
-		return {
-			body: { ok: false, error: 'Invalid background.' },
-			status: 400,
-		}
-	}
-	if (typeof pack !== 'string') {
-		return {
-			body: { ok: false, error: 'Invalid pack.' },
-			status: 400,
-		}
-	}
-	if (typeof blurBackground !== 'boolean') {
-		return {
-			body: { ok: false, error: 'Invalid blurBackground.' },
-			status: 400,
-		}
-	}
-	if (typeof emoji !== 'undefined' && typeof emoji !== 'string') {
-		return {
-			body: { ok: false, error: 'Invalid emoji.' },
-			status: 400,
-		}
-	}
-
-	// prevent people from putting non-existent backgrounds
-	if (backgroundName && !backgroundFileNames.includes(backgroundName))
-		return {
-			body: { ok: false, error: 'Invalid background.' },
-			status: 400,
-		}
-	const backgroundUrl = backgroundName ? `/backgrounds/${backgroundName}` : undefined
-
-	if (emoji) {
-		if (!isDonator && !isAdmin)
-			return {
-				body: { ok: false, error: 'You are not allowed to use emojis.' },
-				status: 401,
-			}
-		if (!isValidEmoji(emoji))
-			return {
-				body: { ok: false, error: 'Invalid emoji.' },
-				status: 400,
-			}
-	}
-
-	const updatedAccount: AccountSchema = {
-		discordId: sessionResponse.account.discordId,
-		customization: {
-			backgroundUrl,
-			pack,
-			blurBackground,
-			emoji,
-		},
-	}
-
-	const response = await fetchApi(`accounts/update`, fetch, {
-		method: 'POST',
-		headers: {
-			'Content-Type': 'application/json',
-			key: key
-		},
-		body: JSON.stringify(updatedAccount),
-	}).then(r => r.json())
-
-
-	return {
-		body: { ok: true } as JSONValue,
-	}
-}
\ No newline at end of file
diff --git a/src/routes/profile/update/+server.ts b/src/routes/profile/update/+server.ts
new file mode 100644
index 0000000..7190fb8
--- /dev/null
+++ b/src/routes/profile/update/+server.ts
@@ -0,0 +1,95 @@
+import { fetchApi } from '$lib/api'
+import type { AccountSchema, SessionSchema } from '$lib/APITypes'
+import backgroundFileNames from '../../../_backgrounds.json'
+import donators from '../../../_donators.json'
+import admins from '../../../_admins.json'
+import env from '$lib/env'
+import type { PageServerLoad } from '../$types'
+import { error, json } from '@sveltejs/kit'
+
+const emojiRegex = /^(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])$/
+
+function isValidEmoji(emoji: string) {
+	const match = emojiRegex.exec(emoji)
+	return match && match[0] === emoji && match.index === 0
+}
+
+
+export const PATCH = (async ({ request, locals, platform }) => {
+	if (locals.sid === undefined) {
+		throw error(401, 'You are not logged in.')
+	}
+	const key = env(platform).SKYBLOCK_STATS_API_KEY
+	if (!key) {
+		throw error(500, 'The SKYBLOCK_STATS_API_KEY environment variable is not set.')
+	}
+	const data = await request.json()
+
+	const sessionResponse: { session: SessionSchema | null, account: AccountSchema | null } = await fetchApi(`accounts/session`, fetch, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify({
+			uuid: locals.sid,
+		}),
+	}).then(r => r.json())
+	if (!sessionResponse.session || !sessionResponse.account?.minecraftUuid)
+		throw error(401, 'Invalid session.')
+
+	const backgroundName = data.backgroundName
+	const pack = data.pack
+	const blurBackground = data.blurBackground
+	const emoji = data.emoji
+
+	const isDonator = donators.find(d => d.uuid === sessionResponse.account?.minecraftUuid) !== undefined
+	const isAdmin = admins.includes(sessionResponse.account?.minecraftUuid)
+
+	if (typeof backgroundName !== 'undefined' && typeof backgroundName !== 'string') {
+		throw error(400, 'Invalid background.')
+	}
+	if (typeof pack !== 'string') {
+		throw error(400, 'Invalid pack.')
+	}
+	if (typeof blurBackground !== 'boolean') {
+		throw error(400, 'Invalid blurBackground.')
+	}
+	if (typeof emoji !== 'undefined' && typeof emoji !== 'string') {
+		throw error(400, 'Invalid emoji.')
+	}
+
+	// prevent people from putting non-existent backgrounds
+	if (backgroundName && !backgroundFileNames.includes(backgroundName))
+		throw error(400, 'Invalid background.')
+	const backgroundUrl = backgroundName ? `/backgrounds/${backgroundName}` : undefined
+
+	if (emoji) {
+		if (!isDonator && !isAdmin)
+			throw error(401, 'You are not allowed to use emojis.')
+		if (!isValidEmoji(emoji))
+			throw error(400, 'Invalid emoji.')
+	}
+
+	const updatedAccount: AccountSchema = {
+		discordId: sessionResponse.account.discordId,
+		customization: {
+			backgroundUrl,
+			pack,
+			blurBackground,
+			emoji,
+		},
+	}
+
+	const response = await fetchApi(`accounts/update`, fetch, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			key: key
+		},
+		body: JSON.stringify(updatedAccount),
+	}).then(r => r.json())
+	console.log(response)
+
+
+	return json({ ok: true })
+}) satisfies PageServerLoad
\ No newline at end of file
diff --git a/src/routes/verify/+page.server.ts b/src/routes/verify/+page.server.ts
index 3321164..bd3ea7f 100644
--- a/src/routes/verify/+page.server.ts
+++ b/src/routes/verify/+page.server.ts
@@ -1,75 +1,75 @@
 import { fetchApi } from '$lib/api'
 import type { AccountSchema, CleanUser, SessionSchema } from '$lib/APITypes'
-import type { RequestHandler } from '@sveltejs/kit'
+import { redirect, type RequestHandler, type ServerLoad } from '@sveltejs/kit'
 import env from '$lib/env'
+import type { Actions } from './$types'
 
 
-function redirect(status: number, location: string) {
-	return {
-		status,
-		headers: {
-			location,
-		},
-	}
-}
+export const actions: Actions = {
+	default: async ({ platform, locals, request }) => {
+		const key = env(platform).SKYBLOCK_STATS_API_KEY
+		if (!key) {
+			throw redirect(303, `/verify?error=NO_KEY`)
+		}
+		if (locals.sid === undefined) {
+			throw redirect(303, '/login')
+		}
 
-export const post: RequestHandler = async ({ request, locals, platform }) => {
-	const key = env(platform).SKYBLOCK_STATS_API_KEY
-	if (!key) {
-		return redirect(303, `/verify?error=NO_KEY`)
-	}
-	if (locals.sid === undefined) {
-		return redirect(303, '/login')
-	}
+		const form = await request.formData()
 
-	const form = await request.formData()
+		// username or uuid
+		const playerIdentifier = form.get('ign')
+		if (!playerIdentifier) {
+			throw redirect(303, `/verify?error=NO_IGN`)
+		}
 
-	// username or uuid
-	const playerIdentifier = form.get('ign')
-	if (!playerIdentifier) {
-		return redirect(303, `/verify?error=NO_IGN`)
-	}
+		const playerResponse: CleanUser = await fetchApi(`player/${playerIdentifier}`, fetch).then(res => res.json())
+		const sessionResponse: { session: SessionSchema | null, account: AccountSchema | null } = await fetchApi(`accounts/session`, fetch, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				uuid: locals.sid,
+			}),
+		}).then(r => r.json())
 
-	const playerResponse: CleanUser = await fetchApi(`player/${playerIdentifier}`, fetch).then(res => res.json())
-	const sessionResponse: { session: SessionSchema | null, account: AccountSchema | null } = await fetchApi(`accounts/session`, fetch, {
-		method: 'POST',
-		headers: {
-			'Content-Type': 'application/json',
-		},
-		body: JSON.stringify({
-			uuid: locals.sid,
-		}),
-	}).then(r => r.json())
+		if (!sessionResponse.session)
+			throw redirect(303, '/login')
 
-	if (!sessionResponse.session)
-		return redirect(303, '/login')
+		const hypixelDiscordName = playerResponse.player?.socials.discord
 
-	const hypixelDiscordName = playerResponse.player?.socials.discord
+		if (!hypixelDiscordName)
+			throw redirect(303, `/verify?error=NOT_LINKED`)
 
-	if (!hypixelDiscordName)
-		return redirect(303, `/verify?error=NOT_LINKED`)
+		const discordUser = sessionResponse.session.discord_user
+		const actualDiscordName = discordUser.name
+		// some people link themselves as <id>#<discrim> instead of <name>#<discrim>
+		const actualDiscordIdDiscrim = `${discordUser.id}#${discordUser.name.split('#')[1]}`
 
-	const discordUser = sessionResponse.session.discord_user
-	const actualDiscordName = discordUser.name
-	// some people link themselves as <id>#<discrim> instead of <name>#<discrim>
-	const actualDiscordIdDiscrim = `${discordUser.id}#${discordUser.name.split('#')[1]}`
+		if (!(hypixelDiscordName === actualDiscordName || hypixelDiscordName === actualDiscordIdDiscrim))
+			throw redirect(303, `/verify?error=WRONG_NAME&current=${encodeURIComponent(hypixelDiscordName)}&correct=${encodeURIComponent(actualDiscordName)}`)
 
-	if (!(hypixelDiscordName === actualDiscordName || hypixelDiscordName === actualDiscordIdDiscrim))
-		return redirect(303, `/verify?error=WRONG_NAME&current=${encodeURIComponent(hypixelDiscordName)}&correct=${encodeURIComponent(actualDiscordName)}`)
+		const updatedAccount: AccountSchema = {
+			discordId: sessionResponse.session.discord_user.id,
+			minecraftUuid: playerResponse.player?.uuid
+		}
 
-	const updatedAccount: AccountSchema = {
-		discordId: sessionResponse.session.discord_user.id,
-		minecraftUuid: playerResponse.player?.uuid
-	}
+		await fetchApi(`accounts/update`, fetch, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				key: key
+			},
+			body: JSON.stringify(updatedAccount),
+		}).then(r => r.json())
 
-	await fetchApi(`accounts/update`, fetch, {
-		method: 'POST',
-		headers: {
-			'Content-Type': 'application/json',
-			key: key
-		},
-		body: JSON.stringify(updatedAccount),
-	}).then(r => r.json())
+		throw redirect(303, '/profile')
+	}
+}
 
-	return redirect(303, '/profile')
-}
\ No newline at end of file
+export const load = (({ locals }) => {
+	return {
+		sid: locals.sid
+	}
+}) satisfies ServerLoad
diff --git a/src/routes/verify/+page.svelte b/src/routes/verify/+page.svelte
index 20de403..4edc50d 100644
--- a/src/routes/verify/+page.svelte
+++ b/src/routes/verify/+page.svelte
@@ -1,27 +1,14 @@
-<script lang="ts" context="module">
-	import type { Load } from '@sveltejs/kit'
-	export const load: Load = async ({ session, url }) => {
-		if (session.sid === undefined) {
-			return { redirect: '/login', status: 303 }
-		}
-		return {
-			props: {
-				errorCode: url.searchParams.get('error'),
-				current: url.searchParams.get('current'),
-				correct: url.searchParams.get('correct'),
-			},
-		}
-	}
-</script>
-
 <script lang="ts">
 	import Emoji from '$lib/Emoji.svelte'
 	import Head from '$lib/Head.svelte'
 	import Header from '$lib/Header.svelte'
+	import type { PageData } from './$types'
+
+	export let data: PageData
 
-	export let errorCode: string | null
-	export let current: string | null
-	export let correct: string | null
+	export let errorCode: string | null = data.errorCode
+	export let current: string | null = data.current
+	export let correct: string | null = data.correct
 
 	const errorCodes = {
 		NO_IGN: 'Please enter a valid Minecraft username.',
diff --git a/src/routes/verify/+page.ts b/src/routes/verify/+page.ts
new file mode 100644
index 0000000..8e5f698
--- /dev/null
+++ b/src/routes/verify/+page.ts
@@ -0,0 +1,13 @@
+import { redirect } from '@sveltejs/kit'
+import type { PageLoad } from './$types'
+
+export const load = (async ({ data, url }) => {
+	if (data.sid === undefined) {
+		throw redirect(303, '/login')
+	}
+	return {
+		errorCode: url.searchParams.get('error'),
+		current: url.searchParams.get('current'),
+		correct: url.searchParams.get('correct'),
+	}
+}) satisfies PageLoad
-- 
cgit 


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/lib/MayorSkin.svelte                           |   3 +-
 src/lib/sections/AccessoryBagUpgrades.svelte       | 100 -------------------
 src/lib/sections/Achievements.svelte               |  87 ----------------
 src/lib/sections/Armor.svelte                      |  14 ---
 src/lib/sections/Auctions.svelte                   | 109 ---------------------
 src/lib/sections/Bank.svelte                       |  89 -----------------
 src/lib/sections/Claimed.svelte                    |  33 -------
 src/lib/sections/Collections.svelte                |  62 ------------
 src/lib/sections/Coop.svelte                       |  79 ---------------
 src/lib/sections/Essence.svelte                    |  27 -----
 src/lib/sections/FarmingContests.svelte            |  62 ------------
 src/lib/sections/Harp.svelte                       |  72 --------------
 src/lib/sections/Infobox.svelte                    |  83 ----------------
 src/lib/sections/Inventories.svelte                | 105 --------------------
 src/lib/sections/Leaderboards.svelte               |  46 ---------
 src/lib/sections/Minions.svelte                    |  40 --------
 src/lib/sections/Pets.svelte                       |  79 ---------------
 src/lib/sections/Skills.svelte                     |  87 ----------------
 src/lib/sections/Slayers.svelte                    |  74 --------------
 src/lib/sections/StatList.svelte                   |  48 ---------
 src/lib/sections/Zones.svelte                      |  42 --------
 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 ++++++++
 43 files changed, 1360 insertions(+), 1359 deletions(-)
 delete mode 100644 src/lib/sections/AccessoryBagUpgrades.svelte
 delete mode 100644 src/lib/sections/Achievements.svelte
 delete mode 100644 src/lib/sections/Armor.svelte
 delete mode 100644 src/lib/sections/Auctions.svelte
 delete mode 100644 src/lib/sections/Bank.svelte
 delete mode 100644 src/lib/sections/Claimed.svelte
 delete mode 100644 src/lib/sections/Collections.svelte
 delete mode 100644 src/lib/sections/Coop.svelte
 delete mode 100644 src/lib/sections/Essence.svelte
 delete mode 100644 src/lib/sections/FarmingContests.svelte
 delete mode 100644 src/lib/sections/Harp.svelte
 delete mode 100644 src/lib/sections/Infobox.svelte
 delete mode 100644 src/lib/sections/Inventories.svelte
 delete mode 100644 src/lib/sections/Leaderboards.svelte
 delete mode 100644 src/lib/sections/Minions.svelte
 delete mode 100644 src/lib/sections/Pets.svelte
 delete mode 100644 src/lib/sections/Skills.svelte
 delete mode 100644 src/lib/sections/Slayers.svelte
 delete mode 100644 src/lib/sections/StatList.svelte
 delete mode 100644 src/lib/sections/Zones.svelte
 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')

diff --git a/src/lib/MayorSkin.svelte b/src/lib/MayorSkin.svelte
index 2360fab..193a3d5 100644
--- a/src/lib/MayorSkin.svelte
+++ b/src/lib/MayorSkin.svelte
@@ -16,6 +16,7 @@
 		// special mayors
 		derpy: 'be0f89466528ad5eca5a6506adddd896ff78c4fd21facaa74a8c4a809c89207',
 		scorpius: '8f26fa0c47536e78e337257d898af8b1ebc87c0894503375234035ff2c7ef8f0',
+		finnegan: 'e7747fbee9fb39be39b00d3d483eb2f88b4bae82417ab5cb1b1aa930dd7b6689',
 
 		// unique mayors
 		technoblade: '786c039d969d1839155255e38e7b06a626ea9f8baf9cb55e0a77311efe18a3e',
@@ -25,7 +26,7 @@
 
 	let url: string | undefined
 	$: {
-		if (name.toLowerCase() === 'derpy') url = '/villager.png'
+		if (name.toLowerCase() === 'jerry') url = '/villager.png'
 		else {
 			const skinId = skinIds[name.toLowerCase()]
 			url = skinId ? `https://mc-heads.net/body/${skinId}` : undefined
diff --git a/src/lib/sections/AccessoryBagUpgrades.svelte b/src/lib/sections/AccessoryBagUpgrades.svelte
deleted file mode 100644
index 74530d1..0000000
--- a/src/lib/sections/AccessoryBagUpgrades.svelte
+++ /dev/null
@@ -1,100 +0,0 @@
-<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/lib/sections/Achievements.svelte b/src/lib/sections/Achievements.svelte
deleted file mode 100644
index 92ba468..0000000
--- a/src/lib/sections/Achievements.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<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/lib/sections/Armor.svelte b/src/lib/sections/Armor.svelte
deleted file mode 100644
index 285a898..0000000
--- a/src/lib/sections/Armor.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<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/lib/sections/Auctions.svelte b/src/lib/sections/Auctions.svelte
deleted file mode 100644
index 50d47b6..0000000
--- a/src/lib/sections/Auctions.svelte
+++ /dev/null
@@ -1,109 +0,0 @@
-<!-- 
-	@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/lib/sections/Bank.svelte b/src/lib/sections/Bank.svelte
deleted file mode 100644
index 9bd2b8f..0000000
--- a/src/lib/sections/Bank.svelte
+++ /dev/null
@@ -1,89 +0,0 @@
-<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/lib/sections/Claimed.svelte b/src/lib/sections/Claimed.svelte
deleted file mode 100644
index 8f44796..0000000
--- a/src/lib/sections/Claimed.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<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/lib/sections/Collections.svelte b/src/lib/sections/Collections.svelte
deleted file mode 100644
index 4baa660..0000000
--- a/src/lib/sections/Collections.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<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/lib/sections/Coop.svelte b/src/lib/sections/Coop.svelte
deleted file mode 100644
index ff858f1..0000000
--- a/src/lib/sections/Coop.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<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/lib/sections/Essence.svelte b/src/lib/sections/Essence.svelte
deleted file mode 100644
index 244dbcd..0000000
--- a/src/lib/sections/Essence.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<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/lib/sections/FarmingContests.svelte b/src/lib/sections/FarmingContests.svelte
deleted file mode 100644
index 8eef53d..0000000
--- a/src/lib/sections/FarmingContests.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<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/lib/sections/Harp.svelte b/src/lib/sections/Harp.svelte
deleted file mode 100644
index 6a5c9cc..0000000
--- a/src/lib/sections/Harp.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<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/lib/sections/Infobox.svelte b/src/lib/sections/Infobox.svelte
deleted file mode 100644
index f8d2889..0000000
--- a/src/lib/sections/Infobox.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<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/lib/sections/Inventories.svelte b/src/lib/sections/Inventories.svelte
deleted file mode 100644
index 1dd7d28..0000000
--- a/src/lib/sections/Inventories.svelte
+++ /dev/null
@@ -1,105 +0,0 @@
-<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/lib/sections/Leaderboards.svelte b/src/lib/sections/Leaderboards.svelte
deleted file mode 100644
index 817f59a..0000000
--- a/src/lib/sections/Leaderboards.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<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/lib/sections/Minions.svelte b/src/lib/sections/Minions.svelte
deleted file mode 100644
index 856d8f0..0000000
--- a/src/lib/sections/Minions.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<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/lib/sections/Pets.svelte b/src/lib/sections/Pets.svelte
deleted file mode 100644
index 7f660c4..0000000
--- a/src/lib/sections/Pets.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<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/lib/sections/Skills.svelte b/src/lib/sections/Skills.svelte
deleted file mode 100644
index 8fc5aaf..0000000
--- a/src/lib/sections/Skills.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<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/lib/sections/Slayers.svelte b/src/lib/sections/Slayers.svelte
deleted file mode 100644
index 40fa67d..0000000
--- a/src/lib/sections/Slayers.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<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/lib/sections/StatList.svelte b/src/lib/sections/StatList.svelte
deleted file mode 100644
index 38604d7..0000000
--- a/src/lib/sections/StatList.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<!-- 
-	@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/lib/sections/Zones.svelte b/src/lib/sections/Zones.svelte
deleted file mode 100644
index f7e993b..0000000
--- a/src/lib/sections/Zones.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<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>
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 


From 3ffe66a676b4b472270769fa3a7284649de693dc Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Thu, 15 Dec 2022 19:56:48 -0600
Subject: fix leaderboard redirect

---
 src/routes/leaderboard/[name]/+page.ts   | 8 --------
 src/routes/leaderboard/[name]/+server.ts | 7 +++++++
 2 files changed, 7 insertions(+), 8 deletions(-)
 delete mode 100644 src/routes/leaderboard/[name]/+page.ts
 create mode 100644 src/routes/leaderboard/[name]/+server.ts

(limited to 'src')

diff --git a/src/routes/leaderboard/[name]/+page.ts b/src/routes/leaderboard/[name]/+page.ts
deleted file mode 100644
index 8de4334..0000000
--- a/src/routes/leaderboard/[name]/+page.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { redirect } from '@sveltejs/kit'
-import type { PageLoad } from './$types'
-
-// The route /leaderboard/<name> was moved to /leaderboards/<name> for
-// consistency.
-export const get = (({ params }) => {
-    throw redirect(303, `/leaderboards/${params.name}`)
-}) satisfies PageLoad
diff --git a/src/routes/leaderboard/[name]/+server.ts b/src/routes/leaderboard/[name]/+server.ts
new file mode 100644
index 0000000..2a1dd38
--- /dev/null
+++ b/src/routes/leaderboard/[name]/+server.ts
@@ -0,0 +1,7 @@
+import { redirect, type RequestHandler } from '@sveltejs/kit'
+
+// The route /leaderboard/<name> was moved to /leaderboards/<name> for
+// consistency.
+export const GET = (({ params }) => {
+    throw redirect(303, `/leaderboards/${params.name}`)
+}) satisfies RequestHandler
-- 
cgit 


From 103689520f51991a1e9a4ca5829fe2f46d1a32c2 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Thu, 15 Dec 2022 20:19:06 -0600
Subject: remove "next api update"

---
 src/routes/election/+page.svelte | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/routes/election/+page.svelte b/src/routes/election/+page.svelte
index 54ac668..d270425 100644
--- a/src/routes/election/+page.svelte
+++ b/src/routes/election/+page.svelte
@@ -56,16 +56,9 @@
 				<b>Last API update:</b>
 				{millisecondsToTime(currentTime - data.lastUpdated, {
 					smallestUnit: 1,
-					parts: 1,
+					parts: 3,
 				})} ago
 			</p>
-			<p>
-				<b>Next API update:</b>
-				{millisecondsToTime(10 * 60 * 1000 - (currentTime - data.lastUpdated), {
-					smallestUnit: 1,
-					parts: 1,
-				})}
-			</p>
 		</div>
 	{/if}
 	<h1>SkyBlock Mayor Election Status</h1>
-- 
cgit