start adding profile

7 files changed, 134 insertions, 43 deletions

diff --git a/src/lib/Head.svelte b/src/lib/Head.svelte
index d301f14..e8032db 100644
--- a/src/lib/Head.svelte
+++ b/src/lib/Head.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-    /** The title that is shown at the top of the page and in search engines */
-    export let title = 'SkyBlock Stats'
-    /** The description that is shown in search engines */
+	/** The title that is shown at the top of the page and in search engines */
+	export let title = 'SkyBlock Stats'
+	/** The description that is shown in search engines */
 	export let description = ''
-    /** The title that is shown in platforms like Discord */
+	/** The title that is shown in platforms like Discord */
 	export let metaTitle = title
-    /** The description that is shown in platforms like Discord */
-    export let metaDescription = description
+	/** The description that is shown in platforms like Discord */
+	export let metaDescription = description
 </script>
 
 <svelte:head>
-    <title>{title}</title>
-    <meta name="description" content={description}>
-    <meta property="og:title" content={metaTitle}>
-    <meta property="og:description" content={metaDescription}>
+	<title>{title}</title>
+	<meta name="description" content={description} />
+	<meta property="og:title" content={metaTitle} />
+	<meta property="og:description" content={metaDescription} />
 </svelte:head>
diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index 27c7d09..a5ec702 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -21,7 +21,7 @@
 		}}
 	>
 		<input
-			class="enter-username-button"
+			class="enter-username-input"
 			type="text"
 			placeholder="Enter username"
 			name="user-search"
@@ -34,3 +34,37 @@
 		/>
 	</form>
 </header>
+
+<style>
+	header {
+		background-color: var(--theme-background);
+		box-shadow: 0 0 1em rgba(0, 0, 0, 0.8);
+		padding: 0.5rem 10%;
+	}
+
+	.user-form {
+		display: inline-block;
+		text-align: center;
+		font-size: 1.25rem;
+		/* center the forms */
+		margin: 0 auto;
+		width: max-content;
+	}
+
+	.enter-username-input {
+		box-shadow: none;
+		/* add a slight shadow on the form in the index page */
+		max-width: calc(90vw - 8em);
+	}
+
+	.back-arrow {
+		float: left;
+		transition: stroke 200ms;
+		stroke: var(--theme-darker-text);
+		margin-top: 0.4em;
+		margin-right: 1em;
+	}
+	.back-arrow:hover {
+		stroke: var(--theme-main-text);
+	}
+</style>
diff --git a/src/lib/Username.svelte b/src/lib/Username.svelte
index 764721c..d415511 100644
--- a/src/lib/Username.svelte
+++ b/src/lib/Username.svelte
@@ -26,9 +26,11 @@
 	{:else if headType == '2d'}
 		<Head2d {player} isPartOfUsername={true} />
 	{/if}
-	<span class="username-rank-prefix">
-		{@html formattingCodeToHtml(player.rank.colored)}
-	</span>
+	{#if prefix}
+		<span class="username-rank-prefix">
+			{@html formattingCodeToHtml(player.rank.colored)}
+		</span>
+	{/if}
 	<span class="username" style="color: {player.rank.color}">{player.username}</span>
 </ConditionalLink>
 
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 3c1d8ec..db6bf81 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,7 +1 @@
-const BASE_URL = 'https://skyblock-api.matdoes.dev/'
-
-export async function get(path: string) {
-    const resp = await fetch(BASE_URL + path)
-    return await resp.json()
-}
-
+export const API_URL = 'https://skyblock-api.matdoes.dev/'
\ No newline at end of file
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
new file mode 100644
index 0000000..dc84994
--- /dev/null
+++ b/src/lib/constants.ts
@@ -0,0 +1,11 @@
+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
new file mode 100644
index 0000000..6388128
--- /dev/null
+++ b/src/lib/profile.ts
@@ -0,0 +1,57 @@
+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) {
+    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) {
+    const result: string[] = []
+
+    result.push(`💾 Last save: ${prettyTimestamp(data.member.last_save * 1000)}`)
+
+    result.push(`🚶 Profile created: ${prettyTimestamp(data.member.first_join * 1000)}`)
+
+    result.push(`✨ Fairy souls: ${data.member.fairy_souls.total}/${constants.max_fairy_souls}`)
+
+    if (data.profile.minion_count >= constants.max_minions)
+        result.push(`🤖 Minion count: ${data.profile.minion_count}`)
+
+    let mostSignificantKillsStat = null
+    let mostSignificantDeathsStat = null
+
+    for (const stat of data.member.stats) {
+        if (
+            stat.category === 'kills'
+            && stat.rawName != 'kills'
+            && stat.value >= 200_000
+            && stat.value > (mostSignificantKillsStat?.value ?? 0)
+        )
+            mostSignificantKillsStat = stat
+        if (
+            stat.category === 'deaths'
+            && stat.rawName != 'deaths'
+            && stat.value > 1_000_000
+            && stat.value > (mostSignificantDeathsStat?.value ?? 0)
+        )
+            mostSignificantDeathsStat = stat
+    }
+
+    if (mostSignificantKillsStat)
+        result.push(
+            `⚔️ ${mostSignificantKillsStat.value.toLocaleString()} ${mostSignificantKillsStat.unit || cleanId(mostSignificantKillsStat.rawName).toLowerCase()}`
+        )
+
+    if (mostSignificantDeathsStat)
+        result.push(
+            `☠ ${mostSignificantDeathsStat.value.toLocaleString()} ${mostSignificantDeathsStat.unit || cleanId(mostSignificantDeathsStat.rawName).toLowerCase()}`
+        )
+
+    return result.join('\n')
+}
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e6f85ff..5d8ecc8 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -70,12 +70,14 @@ export function formattingCodeToHtml(formatted: string): string {
 export function removeFormattingCode(formatted: string): string {
     return formatted.replace(new RegExp(colorCodeCharacter + '.', 'g'), '')
 }
-function moveStringToEnd(word: string, thing: string) {
+
+function moveToEndOfId(word: string, thing: string) {
     if (thing.startsWith(`${word}_`))
-        thing = thing.substr(`${word}_`.length) + `_${word}`
+        thing = thing.slice(`${word}_`.length) + `_${word}`
     return thing
 }
-function millisecondsToTime(totalMilliseconds: number) {
+
+export function millisecondsToTime(totalMilliseconds: number) {
     const totalSeconds = totalMilliseconds / 1000
     const totalMinutes = totalSeconds / 60
     const totalHours = totalMinutes / 60
@@ -98,29 +100,20 @@ function millisecondsToTime(totalMilliseconds: number) {
     else if (milliseconds == 1) stringUnits.push(`${milliseconds} millisecond`)
     return stringUnits.slice(0, 2).join(' and ')
 }
-export function cleanNumber(number: number, unit?: string): string {
-    switch (unit) {
-        case 'time':
-            return millisecondsToTime(number)
-        case 'date':
-            return (new Date(number * 1000)).toUTCString()
-    }
-    return number.toLocaleString() + (unit ? (' ' + unit) : '')
-}
-export function clean(thing: string | number) {
-    if (typeof thing === 'number') {
-        return cleanNumber(thing)
-    } else {
-        for (const string of ['deaths', 'kills', 'collection', 'skill'])
-            thing = moveStringToEnd(string, thing)
-        return thing
-            .replace(/^./, thing[0].toUpperCase())
-            .replace(/_/g, ' ')
-    }
+
+export function cleanId(id: string) {
+    for (const string of ['deaths', 'kills', 'collection', 'skill'])
+        id = moveToEndOfId(string, id)
+
+    return id
+        .replace(/^./, id[0].toUpperCase())
+        .replace(/_/g, ' ')
 }
+
 export function toRomanNumerals(number: number) {
     return ['', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX'][number]
 }
+
 export function shuffle<T>(a: T[]): T[] {
     for (let i = a.length - 1; i > 0; i--) {
         const j = Math.floor(Math.random() * (i + 1))