From 36bbe64db012aaed7ff0fadf083f191b122fa4ad Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Wed, 16 Feb 2022 00:07:13 -0600
Subject: add files

---
 src/app.css                                 | 17 +++++++++++++++++
 src/lib/Emoji.svelte                        | 25 +++++++++++++++++++++++++
 src/routes/player/[player]/[profile].svelte |  5 ++---
 src/routes/player/[player]/index.svelte     | 29 +++++++++--------------------
 4 files changed, 53 insertions(+), 23 deletions(-)
 create mode 100644 src/lib/Emoji.svelte

(limited to 'src')
diff --git a/src/app.css b/src/app.css
index 5e12d43..a338767 100644
--- a/src/app.css
+++ b/src/app.css
@@ -185,3 +185,20 @@ button {
 	outline: none;
 	font-family: inherit;
 }
+
+/*
+ * this is necessary for background theming, the background can be set through
+ * the --background css variable
+ */
+body:before {
+	content: '';
+	display: block;
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: -10;
+	background: var(--background) no-repeat center center;
+	background-size: cover;
+}
diff --git a/src/lib/Emoji.svelte b/src/lib/Emoji.svelte
new file mode 100644
index 0000000..0e8f4a7
--- /dev/null
+++ b/src/lib/Emoji.svelte
@@ -0,0 +1,25 @@
+<!-- 
+	@component
+	
+	All the emojis inside this component will be turned into Twemojis.
+-->
+<script lang="ts">
+	import { twemojiHtml } from './utils'
+
+	export let value: string
+</script>
+
+<span>
+	{@html twemojiHtml(value)}
+</span>
+
+<style>
+	:global(.emoji) {
+		position: relative;
+		/* we specify the width so it doesn't change size when the image shows up */
+		width: 1em;
+		height: 1em;
+		vertical-align: text-bottom;
+		bottom: 0.1em;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
index 8c1dcc0..dfb01ab 100644
--- a/src/routes/player/[player]/[profile].svelte
+++ b/src/routes/player/[player]/[profile].svelte
@@ -18,6 +18,7 @@
 
 <script lang="ts">
 	import Head from '$lib/Head.svelte'
+	import Emoji from '$lib/Emoji.svelte'
 	import Header from '$lib/Header.svelte'
 	import Username from '$lib/Username.svelte'
 	import { generateMetaDescription } from '$lib/profile'
@@ -34,13 +35,11 @@
 />
 <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>
+			<span class="profile-emoji"><Emoji value={data.customization.emoji} /></span>
 		{/if}
 		({data.member.profileName})
 	</h1>
diff --git a/src/routes/player/[player]/index.svelte b/src/routes/player/[player]/index.svelte
index 73dfb0c..907761d 100644
--- a/src/routes/player/[player]/index.svelte
+++ b/src/routes/player/[player]/index.svelte
@@ -45,32 +45,21 @@
 	}
 
 	const isActiveProfileOnline = Date.now() / 1000 - 60 < activeProfileLastSave
-</script>
 
-<Head title="{data.player.username}'s SkyBlock profiles" />
-<Header />
+	// cursed svelte :D
+	$: bodyStyle = `<style>:root{--background:url(${data.customization.backgroundUrl})}</style>`
+</script>
 
 <svelte:head>
-	{#if data.customization?.backgroundUrl}
-		<style>
-			body:before {
-				content: '';
-				display: block;
-				position: fixed;
-				left: 0;
-				top: 0;
-				width: 100%;
-				height: 100%;
-				z-index: -10;
-				background: url('{data.customization.backgroundUrl}') no-repeat center center;
-				background-size: cover;
-			}
-		</style>
-	{/if}
+	{@html bodyStyle}
 </svelte:head>
+<!-- url('{data.customization.backgroundUrl}') -->
+
+<Head title="{data.player.username}'s SkyBlock profiles" />
+<Header />
 
 <main>
-	<h1><Username player={data.player} headType="3d"  />'s profiles</h1>
+	<h1><Username player={data.player} headType="3d" />'s profiles</h1>
 
 	<ul class="profile-list">
 		{#each data.profiles as profile}
-- 
cgit 

