add username in profile

2 files changed, 28 insertions, 1 deletions

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 5d8ecc8..f93f68e 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -120,4 +120,16 @@ export function shuffle<T>(a: T[]): T[] {
             ;[a[i], a[j]] = [a[j], a[i]]
     }
     return a
+}
+
+const emojiRegex = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g
+
+
+export function twemojiHtml(s: string) {
+    const htmlEncoded = s.replace('<', '&lt;').replace('>', '&gt;').replace('&', '&amp;')
+    // replace unicode emojis with <img src="/emoji/[hex].svg">
+    const asTwemoji = htmlEncoded.replace(emojiRegex, (match) => {
+        return `<img src="/emoji/${[...match].map(p => p.codePointAt(0).toString(16)).join('-')}.svg" class="emoji">`
+    })
+    return asTwemoji
 }
\ No newline at end of file
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
index c5276bc..8c1dcc0 100644
--- a/src/routes/player/[player]/[profile].svelte
+++ b/src/routes/player/[player]/[profile].svelte
@@ -5,7 +5,9 @@
 	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}`).then(r => r.json())
+		const res = await fetch(`${API_URL}player/${player}/${profile}?customization=true`).then(r =>
+			r.json()
+		)
 		return {
 			props: {
 				data: res,
@@ -19,6 +21,7 @@
 	import Header from '$lib/Header.svelte'
 	import Username from '$lib/Username.svelte'
 	import { generateMetaDescription } from '$lib/profile'
+	import { twemojiHtml } from '$lib/utils'
 
 	export let data
 </script>
@@ -30,3 +33,15 @@
 		`${data.member.username}\'s SkyBlock profile (${data.member.profileName})`}
 />
 <Header backArrowHref="/player/{data.member.username}" />
+
+<!-- <h1>{{ render.username(data.member, headType='3d') }}{% if emoji %}<span class="profile-emoji">{{ emoji|twemojiHtml|safe }}</span>{% endif %} ({{ data.member.profileName }})</h1> -->
+
+<main>
+	<h1>
+		<Username player={data.member} headType="3d" />
+		{#if data.customization?.emoji}
+			<span class="profile-emoji">{@html twemojiHtml(data.customization.emoji)}</span>
+		{/if}
+		({data.member.profileName})
+	</h1>
+</main>