Add random backgrounds for players based on UUID

16 files changed, 136 insertions, 81 deletions

diff --git a/src/_backgrounds.json b/src/_backgrounds.json
index e3737b5..b3f937a 100644
--- a/src/_backgrounds.json
+++ b/src/_backgrounds.json
@@ -1 +1 @@
-["1.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg","19.jpg","2.jpg","20.jpg","21.jpg","22.jpg","23.jpg","24.jpg","25.jpg","26.jpg","27.jpg","28.jpg","29.jpg","3.jpg","30.jpg","31.jpg","32.jpg","33.jpg","34.jpg","35.jpg","36.jpg","37.jpg","38.jpg","39.jpg","4.jpg","40.jpg","41.jpg","42.jpg","43.jpg","44.jpg","45.jpg","46.jpg","47.jpg","48.jpg","49.jpg","5.jpg","50.jpg","51.jpg","52.jpg","53.jpg","54.jpg","55.jpg","56.jpg","57.jpg","58.jpg","59.jpg","6.jpg","60.jpg","61.jpg","62.jpg","63.jpg","64.jpg","65.jpg","66.jpg","67.jpg","68.jpg","69.jpg","7.jpg","70.jpg","71.jpg","8.jpg","9.jpg"]
\ No newline at end of file
+["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg","19.jpg","20.jpg","21.jpg","22.jpg","23.jpg","24.jpg","25.jpg","26.jpg","27.jpg","28.jpg","29.jpg","30.jpg","31.jpg","32.jpg","33.jpg","34.jpg","35.jpg","36.jpg","37.jpg","38.jpg","39.jpg","40.jpg","41.jpg","42.jpg","43.jpg","44.jpg","45.jpg","46.jpg","47.jpg","48.jpg","49.jpg","50.jpg","51.jpg","52.jpg","53.jpg","54.jpg","55.jpg","56.jpg","57.jpg","58.jpg","59.jpg","60.jpg","61.jpg","62.jpg","63.jpg","64.jpg","65.jpg","66.jpg","67.jpg","68.jpg","69.jpg","70.jpg","71.jpg"]
\ No newline at end of file
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/env.ts b/src/lib/env.ts
index 2f0a632..2f0a632 100644
--- a/src/env.ts
+++ b/src/lib/env.ts
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>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 081136e..630882e 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,6 +1,5 @@
 <script lang="ts" context="module">
 	import type { Load } from '@sveltejs/kit'
-	import { API_URL } from '$lib/api'
 
 	export const load: Load = async ({ params, fetch, session }) => {
 		return {
@@ -19,7 +18,6 @@
 	import Emoji from '$lib/Emoji.svelte'
 	import LoginButton from '$lib/LoginButton.svelte'
 
-	// export const prerender = true
 	export const hydrate = false
 
 	export let loggedIn: boolean
diff --git a/src/routes/leaderboards/[name].svelte b/src/routes/leaderboards/[name].svelte
index 1ada4b3..d4ef848 100644
--- a/src/routes/leaderboards/[name].svelte
+++ b/src/routes/leaderboards/[name].svelte
@@ -18,12 +18,8 @@
 <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 { skyblockItemNameToItem, skyblockItemToUrl } from '$lib/minecraft/inventory'
+	import { skyblockItemToUrl } from '$lib/minecraft/inventory'
 	import { cleanId, formatNumberFromUnit, toTitleCase } from '$lib/utils'
-	import ListItemWithIcon from '$lib/ListItemWithIcon.svelte'
-	import Leaderboards from '$lib/sections/Leaderboards.svelte'
 	import Username from '$lib/minecraft/Username.svelte'
 
 	export let data
diff --git a/src/routes/login.ts b/src/routes/login.ts
index 4ce0dce..1cd9b23 100644
--- a/src/routes/login.ts
+++ b/src/routes/login.ts
@@ -1,5 +1,5 @@
 import type { RequestHandler } from '@sveltejs/kit'
-import env from '../env'
+import env from '$lib/env'
 
 
 export const get: RequestHandler = async ({ request, platform }) => {
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
index d74ff08..2d3b955 100644
--- a/src/routes/player/[player]/[profile].svelte
+++ b/src/routes/player/[player]/[profile].svelte
@@ -1,5 +1,6 @@
 <script lang="ts" context="module">
 	import type { Load } from '@sveltejs/kit'
+	import { loadPack } from '$lib/packs'
 	import { API_URL } from '$lib/api'
 
 	export const load: Load = async ({ params, fetch }) => {
@@ -11,38 +12,7 @@
 
 		const packName = params.pack ?? data?.customization?.pack
 
-		let pack: MatcherFile | undefined
-
-		switch (packName) {
-			case 'ectoplasm':
-				pack = (await import('skyblock-assets/matchers/ectoplasm.json')) as any
-				break
-			case 'furfsky':
-				pack = (await import('skyblock-assets/matchers/furfsky.json')) as any
-				break
-			case 'furfsky_reborn':
-				pack = (await import('skyblock-assets/matchers/furfsky_reborn.json')) as any
-				break
-			case 'hypixel+':
-				pack = (await import('skyblock-assets/matchers/hypixel+.json')) as any
-				break
-			case 'packshq':
-				pack = (await import('skyblock-assets/matchers/packshq.json')) as any
-				break
-			case 'rnbw':
-				pack = (await import('skyblock-assets/matchers/rnbw.json')) as any
-				break
-			case 'vanilla':
-				pack = (await import('skyblock-assets/matchers/vanilla.json')) as any
-				break
-			case 'worlds_and_beyond':
-				pack = (await import('skyblock-assets/matchers/worlds_and_beyond.json')) as any
-				break
-			default:
-				// furfsky reborn is the default pack
-				pack = (await import('skyblock-assets/matchers/furfsky_reborn.json')) as any
-				break
-		}
+		let pack = await loadPack(packName)
 
 		return {
 			props: {
@@ -58,11 +28,12 @@
 	import Inventories from '$lib/sections/Inventories.svelte'
 	import Collections from '$lib/sections/Collections.svelte'
 	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 type { MatcherFile } from 'skyblock-assets'
 	import Minions from '$lib/sections/Minions.svelte'
+	import type { MatcherFile } from 'skyblock-assets'
 	import Collapsible from '$lib/Collapsible.svelte'
 	import Skills from '$lib/sections/Skills.svelte'
 	import { generateInfobox } from '$lib/profile'
@@ -73,27 +44,33 @@
 	import { cleanId } from '$lib/utils'
 	import Head from '$lib/Head.svelte'
 	import Toc from '$lib/Toc.svelte'
-
-	import type { CleanMemberProfile } from '$lib/APITypes'
+	import { chooseDefaultBackground } from '$lib/backgrounds'
 
 	export let data: CleanMemberProfile
 	export let pack: MatcherFile
 
-	const categories: string[] = []
-	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')
-	categories.push('misc')
-	categories.push('minions')
-	categories.push('zones')
-	if (data.member.collections && data.member.collections.length > 0) categories.push('collections')
-	categories.push('leaderboards')
+	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')
+		categories.push('misc')
+		categories.push('minions')
+		categories.push('zones')
+		if (data.member.collections && data.member.collections.length > 0)
+			categories.push('collections')
+		categories.push('leaderboards')
+	}
+
+	$: [data, setCategories()]
+	$: backgroundUrl = data.customization?.backgroundUrl ?? chooseDefaultBackground(data.member.uuid)
 </script>
 
-{#if data.customization?.backgroundUrl}
-	<BackgroundImage url={data.customization.backgroundUrl} />
+{#if backgroundUrl}
+	<BackgroundImage url={backgroundUrl} />
 {/if}
 
 <Head
@@ -108,10 +85,10 @@
 />
 
 <main>
-	{#if data.customization?.blurBackground && data.customization?.backgroundUrl}
+	{#if data.customization?.blurBackground && backgroundUrl}
 		<div class="blurred-background-container-container">
 			<div class="blurred-background-container">
-				<img class="blurred-background" src={data.customization.backgroundUrl} alt="Background" />
+				<img class="blurred-background" src={backgroundUrl} alt="Background" />
 			</div>
 		</div>
 	{/if}
@@ -180,7 +157,7 @@
 				<section>
 					<Collapsible id="collections">
 						<h2 slot="title">Collections</h2>
-						<Collections {data} />
+						<Collections {data} {pack} />
 					</Collapsible>
 				</section>
 			{/if}
diff --git a/src/routes/player/[player]/index.svelte b/src/routes/player/[player]/index.svelte
index 97b7d78..95156f9 100644
--- a/src/routes/player/[player]/index.svelte
+++ b/src/routes/player/[player]/index.svelte
@@ -32,6 +32,7 @@
 	import Username from '$lib/minecraft/Username.svelte'
 	import Header from '$lib/Header.svelte'
 	import Head from '$lib/Head.svelte'
+	import { chooseDefaultBackground } from '$lib/backgrounds'
 
 	export let data: CleanUser
 
@@ -53,10 +54,14 @@
 
 		isActiveProfileOnline = Date.now() / 1000 - 60 < activeProfileLastSave
 	}
+
+	$: backgroundUrl =
+		data.customization?.backgroundUrl ??
+		(data.player ? chooseDefaultBackground(data.player.uuid) : null)
 </script>
 
-{#if data.customization?.backgroundUrl}
-	<BackgroundImage url={data.customization.backgroundUrl} />
+{#if backgroundUrl}
+	<BackgroundImage url={backgroundUrl} />
 {/if}
 
 <Head title={data.player ? `${data.player.username}'s SkyBlock profiles` : 'Invalid player'} />
diff --git a/src/routes/profile/index.svelte b/src/routes/profile/index.svelte
index cdcd495..a69afc5 100644
--- a/src/routes/profile/index.svelte
+++ b/src/routes/profile/index.svelte
@@ -170,6 +170,7 @@
 				class="selectable-background-option"
 				class:selected={thisBackgroundName === backgroundName}
 				style="background-image: url(/backgrounds-small/{thisBackgroundName})"
+				title={thisBackgroundName}
 				on:click={() => (backgroundName = thisBackgroundName)}
 			/>
 		{/each}
diff --git a/src/routes/profile/update.ts b/src/routes/profile/update.ts
index 8eb108c..7946597 100644
--- a/src/routes/profile/update.ts
+++ b/src/routes/profile/update.ts
@@ -5,7 +5,7 @@ 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 '../../env'
+import env from '$lib/env'
 
 const emojiRegex = /^(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])$/
 
diff --git a/src/routes/verify.ts b/src/routes/verify.ts
index 1368344..2f9c49f 100644
--- a/src/routes/verify.ts
+++ b/src/routes/verify.ts
@@ -1,7 +1,7 @@
 import { API_URL } from '$lib/api'
 import type { AccountSchema, CleanUser, SessionSchema } from '$lib/APITypes'
 import type { RequestHandler } from '@sveltejs/kit'
-import env from '../env'
+import env from '$lib/env'
 
 
 function redirect(status: number, location: string) {