Add random backgrounds for players based on UUID

8 files changed, 40 insertions, 63 deletions

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) {