diff options
| author | mat <github@matdoes.dev> | 2022-02-16 00:07:13 -0600 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-02-16 00:07:13 -0600 |
| commit | 36bbe64db012aaed7ff0fadf083f191b122fa4ad (patch) | |
| tree | d4529a64a0e2e369a642f47c9f7ef791aaf4ea8e /src | |
| parent | 77679dbf69ae097cefbbcabe9c2b952d446e9677 (diff) | |
| download | skyblock-stats-36bbe64db012aaed7ff0fadf083f191b122fa4ad.tar.gz skyblock-stats-36bbe64db012aaed7ff0fadf083f191b122fa4ad.tar.bz2 skyblock-stats-36bbe64db012aaed7ff0fadf083f191b122fa4ad.zip | |
add files
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.css | 17 | ||||
| -rw-r--r-- | src/lib/Emoji.svelte | 25 | ||||
| -rw-r--r-- | src/routes/player/[player]/[profile].svelte | 5 | ||||
| -rw-r--r-- | src/routes/player/[player]/index.svelte | 29 |
4 files changed, 53 insertions, 23 deletions
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} |