7 files changed, 120 insertions, 17 deletions
diff --git a/src/lib/BackgroundImage.svelte b/src/lib/BackgroundImage.svelte
index 94bbc3f..fd62170 100644
--- a/src/lib/BackgroundImage.svelte
+++ b/src/lib/BackgroundImage.svelte
@@ -1,26 +1,30 @@
 <script lang="ts">
-	import { browser } from '$app/env'
-
 	import { onDestroy } from 'svelte'
+	import { browser } from '$app/env'
 
 	export let url: string
 
-	// cursed svelte :D
-	$: bodyStyle =
-		'<sty' + 'le id="background-image-style">:root{--background:url(' + url + ')}</st' + 'yle>'
+	function updateUrl() {
+		if (!browser) return
+
+		for (const styleEl of document.getElementsByClassName('background-image-style'))
+			styleEl.innerHTML = ''
+
+		// add bodyStyle to the head
+		const style = document.createElement('style')
+		style.classList.add('background-image-style')
+		style.innerHTML = `:root{--background:url(${url})}`
+		document.head.appendChild(style)
+	}
+
+	$: [url, updateUrl()]
 
 	// get rid of the body style when we leave the page
 	// not doing this will sometimes cause the background to stay
 	onDestroy(() => {
-		bodyStyle = ''
-		// hack since sometimes the style is not removed
 		if (browser) {
-			let styleEl = document.getElementById('background-image-style')
-			if (styleEl) styleEl.innerHTML = ''
+			for (const styleEl of document.getElementsByClassName('background-image-style'))
+				styleEl.innerHTML = ''
 		}
 	})
 </script>
-
-<svelte:head>
-	{@html bodyStyle}
-</svelte:head>
diff --git a/src/lib/backgrounds.ts b/src/lib/backgrounds.ts
new file mode 100644
index 0000000..06157b8
--- /dev/null
+++ b/src/lib/backgrounds.ts
@@ -0,0 +1,37 @@
+// a hand picked list of backgrounds that i think look pretty good on the user profile
+const coolBackgrounds = [
+	'2.jpg',
+	'4.jpg',
+	'5.jpg',
+	'7.jpg',
+	'8.jpg',
+	'11.jpg',
+	'12.jpg',
+	'15.jpg',
+	'22.jpg',
+	'27.jpg',
+	'35.jpg',
+	'38.jpg',
+	'43.jpg',
+	'45.jpg',
+	'49.jpg',
+	'63.jpg',
+	'65.jpg',
+	'66.jpg',
+	'67.jpg',
+	'68.jpg',
+	'69.jpg',
+	'70.jpg',
+	'71.jpg',
+]
+
+/**
+ * Choose a background for the user based on their UUID.
+ * @param uuid The dashed or undashed UUID of the user.
+ * @returns The URL of the chosen background.
+ */
+export function chooseDefaultBackground(uuid: string): string {
+	// choose a background based on the user's uuid
+	const uuidNumber = parseInt(uuid.replace(/[^0-9]/g, ''), 16)
+	return '/backgrounds/' + coolBackgrounds[uuidNumber % coolBackgrounds.length]
+}
diff --git a/src/lib/env.ts b/src/lib/env.ts
new file mode 100644
index 0000000..2f0a632
--- /dev/null
+++ b/src/lib/env.ts
@@ -0,0 +1,25 @@
+let skyblockStatsApiKey: string | undefined
+let discordClientId: string | undefined
+
+export default function env(platform?: Readonly<App.Platform>) {
+	try {
+		skyblockStatsApiKey = process.env.SKYBLOCK_STATS_API_KEY
+	} catch {
+		skyblockStatsApiKey = platform?.env.SKYBLOCK_STATS_API_KEY
+	}
+	if (!skyblockStatsApiKey)
+		console.warn('SKYBLOCK_STATS_API_KEY is not set as an environment variable. This is required for logging in with Discord to work. It should be the same as the `key` environment variable in skyblock-api.')
+
+	try {
+		discordClientId = process.env.DISCORD_CLIENT_ID
+	} catch {
+		discordClientId = platform?.env.DISCORD_CLIENT_ID
+	}
+	if (!discordClientId)
+		console.warn('DISCORD_CLIENT_ID is not set as an environment variable. This is required for logging in with Discord to work.')
+
+	return {
+		SKYBLOCK_STATS_API_KEY: skyblockStatsApiKey,
+		DISCORD_CLIENT_ID: discordClientId,
+	}
+}
+\ No newline at end of file
diff --git a/src/lib/minecraft/inventory.ts b/src/lib/minecraft/inventory.ts
index e9d840c..7bd06fc 100644
--- a/src/lib/minecraft/inventory.ts
+++ b/src/lib/minecraft/inventory.ts
@@ -1,5 +1,5 @@
 import * as skyblockAssets from 'skyblock-assets'
-import vanilla from 'skyblock-assets/matchers/vanilla.json'
+import { vanilla } from '$lib/packs'
 
 
 export interface Item {
diff --git a/src/lib/packs.ts b/src/lib/packs.ts
new file mode 100644
index 0000000..01afee5
--- /dev/null
+++ b/src/lib/packs.ts
@@ -0,0 +1,36 @@
+import type { MatcherFile } from 'skyblock-assets'
+export { default as vanilla } from 'skyblock-assets/matchers/vanilla.json'
+
+export const PACK_NAMES = {
+	'ectoplasm': 'Ectoplasm',
+	'furfsky': 'Furfsky',
+	'furfsky_reborn': 'Furfsky Reborn',
+	'hypixel+': 'Hypixel+',
+	'packshq': 'PacksHQ',
+	'rnbw': 'RNBW',
+	'vanilla': 'Vanilla',
+	'worlds_and_beyond': 'Worlds and Beyond',
+}
+
+export async function loadPack(name?: keyof typeof PACK_NAMES | string): Promise<MatcherFile> {
+	switch (name) {
+		case 'ectoplasm':
+			return await import('skyblock-assets/matchers/ectoplasm.json') as any
+		case 'furfsky':
+			return await import('skyblock-assets/matchers/furfsky.json') as any
+		case 'furfsky_reborn':
+			return await import('skyblock-assets/matchers/furfsky_reborn.json') as any
+		case 'hypixel+':
+			return await import('skyblock-assets/matchers/hypixel+.json') as any
+		case 'packshq':
+			return await import('skyblock-assets/matchers/packshq.json') as any
+		case 'rnbw':
+			return await import('skyblock-assets/matchers/rnbw.json') as any
+		case 'vanilla':
+			return await import('skyblock-assets/matchers/vanilla.json') as any
+		case 'worlds_and_beyond':
+			return await import('skyblock-assets/matchers/worlds_and_beyond.json') as any
+	}
+	// if we can't find the pack, just return furfsky reborn
+	return await loadPack('furfsky_reborn')
+}
+\ No newline at end of file
diff --git a/src/lib/profile.ts b/src/lib/profile.ts
index 62620e4..d2891ab 100644
--- a/src/lib/profile.ts
+++ b/src/lib/profile.ts
@@ -56,4 +56,4 @@ export function generateInfobox(data: CleanMemberProfile): string[] {
     }
 
     return result
-}
-\ No newline at end of file
+}
diff --git a/src/lib/sections/Collections.svelte b/src/lib/sections/Collections.svelte
index ca2da16..a2bd124 100644
--- a/src/lib/sections/Collections.svelte
+++ b/src/lib/sections/Collections.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-	import furfskyReborn from 'skyblock-assets/matchers/furfsky_reborn.json'
 	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)
@@ -23,7 +24,7 @@
 		<ul>
 			{#each collections as collection}
 				<ListItemWithIcon
-					url={skyblockItemToUrl(collection.name, furfskyReborn)}
+					url={skyblockItemToUrl(collection.name, pack)}
 					alt={cleanId(collection.name)}
 				>
 					<Tooltip>