diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/utils.ts | 12 | ||||
| -rw-r--r-- | src/routes/player/[player]/[profile].svelte | 17 |
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('<', '<').replace('>', '>').replace('&', '&') + // 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> |