improvements

6 files changed, 91 insertions, 32 deletions

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
deleted file mode 100644
index dc84994..0000000
--- a/src/lib/constants.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { API_URL } from '$lib/api'
-
-export let constants: any = {}
-
-async function updateConstants() {
-    constants = await fetch(API_URL + 'constants').then(r => r.json())
-    console.log('updated constants')
-}
-
-updateConstants()
-setInterval(updateConstants, 60 * 60 * 1000) // update every hour
\ No newline at end of file
diff --git a/src/lib/profile.ts b/src/lib/profile.ts
index 6388128..973a6da 100644
--- a/src/lib/profile.ts
+++ b/src/lib/profile.ts
@@ -1,17 +1,16 @@
-import { constants } from './constants'
 import { cleanId, millisecondsToTime } from './utils'
 
 /**
  * Convert milliseconds since epoch into a string, but if it was within the
  * past week then show the timeago
  */
-function prettyTimestamp(ms: number) {
+export function prettyTimestamp(ms: number) {
     const isWithinPastWeek = Date.now() - ms < 1000 * 60 * 60 * 24 * 7
     const timeAsString = isWithinPastWeek ? (millisecondsToTime(Date.now() - ms) + ' ago') : (new Date(ms)).toUTCString()
     return timeAsString
 }
 
-export function generateMetaDescription(data) {
+export function generateInfobox(data, constants, opts: { meta: boolean }): string[] {
     const result: string[] = []
 
     result.push(`💾 Last save: ${prettyTimestamp(data.member.last_save * 1000)}`)
@@ -53,5 +52,5 @@ export function generateMetaDescription(data) {
             `☠ ${mostSignificantDeathsStat.value.toLocaleString()} ${mostSignificantDeathsStat.unit || cleanId(mostSignificantDeathsStat.rawName).toLowerCase()}`
         )
 
-    return result.join('\n')
+    return result
 }
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f93f68e..c2a955a 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -132,4 +132,19 @@ export function twemojiHtml(s: string) {
         return `<img src="/emoji/${[...match].map(p => p.codePointAt(0).toString(16)).join('-')}.svg" class="emoji">`
     })
     return asTwemoji
+}
+
+export function formatNumber(n: number, digits = 3) {
+    // from https://stackoverflow.com/a/9462382 with some modifications
+    const numberSymbolsLookup = [
+        { value: 1, symbol: '' },
+        { value: 1e3, symbol: 'k' },
+        { value: 1e6, symbol: 'M' },
+        { value: 1e9, symbol: 'G' },
+        { value: 1e12, symbol: 'T' },
+        { value: 1e15, symbol: 'P' },
+        { value: 1e18, symbol: 'E' },
+    ]
+    const item = numberSymbolsLookup.slice().reverse().find(item => n >= item.value)
+    return (n / item.value).toPrecision(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + item.symbol
 }
\ No newline at end of file
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
index dfb01ab..9c3fb31 100644
--- a/src/routes/player/[player]/[profile].svelte
+++ b/src/routes/player/[player]/[profile].svelte
@@ -5,31 +5,60 @@
 	export const load: Load = async ({ params, fetch }) => {
 		const player: string = params.player
 		const profile: string = params.profile
-		const res = await fetch(`${API_URL}player/${player}/${profile}?customization=true`).then(r =>
+		const data = await fetch(`${API_URL}player/${player}/${profile}?customization=true`).then(r =>
 			r.json()
 		)
+
+		const constants = await fetch('/constants.json').then(r => r.json())
+
 		return {
 			props: {
-				data: res,
+				data,
+				constants,
 			},
 		}
 	}
 </script>
 
 <script lang="ts">
-	import Head from '$lib/Head.svelte'
-	import Emoji from '$lib/Emoji.svelte'
-	import Header from '$lib/Header.svelte'
+	import Infobox from '$lib/sections/Infobox.svelte'
+	import { generateInfobox } from '$lib/profile'
 	import Username from '$lib/Username.svelte'
-	import { generateMetaDescription } from '$lib/profile'
-	import { twemojiHtml } from '$lib/utils'
+	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 Skills from '$lib/sections/Skills.svelte'
 
 	export let data
+	export let constants
+
+	const categories = [
+		'skills',
+		'deaths',
+		'kills',
+		'auctions',
+		'fishing',
+		'races',
+		'misc',
+		'minions',
+		'zones',
+		'collections',
+		'leaderboards',
+	]
+
+	// cursed svelte :D
+	$: bodyStyle = `<style>:root{--background:url(${data.customization.backgroundUrl})}</style>`
 </script>
 
+<svelte:head>
+	{@html bodyStyle}
+</svelte:head>
+
 <Head
 	title="{data.member.username}'s SkyBlock profile ({data.member.profileName})"
-	description={generateMetaDescription(data)}
+	description={generateInfobox(data, constants, { meta: true }).join('\n')}
 	metaTitle={(data.member.rank.name ? `[${data.member.rank.name}] ` : '') +
 		`${data.member.username}\'s SkyBlock profile (${data.member.profileName})`}
 />
@@ -43,4 +72,21 @@
 		{/if}
 		({data.member.profileName})
 	</h1>
+
+	<Infobox {data} {constants} />
+
+	<Toc {categories} />
+
+	{#if data.member.skills.length > 0}
+		<section id="skills" class="profile-skills">
+			<h2>Skills</h2>
+			<Skills {data} />
+		</section>
+	{/if}
+	<!-- {%- if data.member.skills|length > 0 -%}
+	<section id="skills" class="profile-skills">
+		<h2>Skills</h2>
+		{%- include 'sections/skills.njk' -%}
+	</section>
+	{%- endif -%} -->
 </main>
diff --git a/src/routes/player/[player]/index.svelte b/src/routes/player/[player]/index.svelte
index 907761d..8704b09 100644
--- a/src/routes/player/[player]/index.svelte
+++ b/src/routes/player/[player]/index.svelte
@@ -4,23 +4,29 @@
 
 	export const load: Load = async ({ params, fetch }) => {
 		const player: string = params.player
-		const res = await fetch(`${API_URL}player/${player}?customization=true`).then(r => r.json())
 
-		console.log('res', res)
+		const data = await fetch(`${API_URL}player/${player}?customization=true`).then(r => r.json())
 
-		if (!res.player) {
+		if (!data.player) {
 			return { fallthrough: true } as unknown
 		}
 
-		if (res.player.username !== player) {
+		// this should happen instantly
+		// const constants = await fetch('/_constants.json').then(r => r.json())
+
+		// console.log('constants', constants)
+
+		if (data.player.username !== player) {
 			return {
-				redirect: `/player/${res.player.username}`,
+				redirect: `/player/${data.player.username}`,
 				status: 302,
 			}
 		}
 
 		return {
-			props: { data: res },
+			props: {
+				data,
+			},
 		}
 	}
 </script>
@@ -31,6 +37,7 @@
 	import Head from '$lib/Head.svelte'
 
 	export let data
+	// export let constants
 
 	let activeProfile = null
 	let activeProfileLastSave: number = 0
@@ -53,7 +60,6 @@
 <svelte:head>
 	{@html bodyStyle}
 </svelte:head>
-<!-- url('{data.customization.backgroundUrl}') -->
 
 <Head title="{data.player.username}'s SkyBlock profiles" />
 <Header />
@@ -69,7 +75,11 @@
 				class:profile-list-item-online={profile.uuid === activeProfile.uuid &&
 					isActiveProfileOnline}
 			>
-				<a class="profile-name" href="/player/{data.player.username}/{profile.name}">
+				<a
+					class="profile-name"
+					href="/player/{data.player.username}/{profile.name}"
+					sveltekit:prefetch
+				>
 					{profile.name}
 				</a>
 				<span class="profile-members">
diff --git a/src/routes/player/index.ts b/src/routes/player/index.ts
index 6c36cd8..c9d1b90 100644
--- a/src/routes/player/index.ts
+++ b/src/routes/player/index.ts
@@ -8,5 +8,5 @@ export async function post({ request }) {
         headers: {
             location: `/player/${player}`
         }
-    };
+    }
 }
\ No newline at end of file