diff options
Diffstat (limited to 'src/lib')
-rw-r--r-- | src/lib/LoginButton.svelte | 2 | ||||
-rw-r--r-- | src/lib/MayorSkin.svelte | 21 |
2 files changed, 19 insertions, 4 deletions
diff --git a/src/lib/LoginButton.svelte b/src/lib/LoginButton.svelte index bba078e..7ebf5d7 100644 --- a/src/lib/LoginButton.svelte +++ b/src/lib/LoginButton.svelte @@ -6,7 +6,7 @@ {#if loggedIn} <a href="/profile"><button class="login-button">Edit profile</button></a> {:else} - <a href="/login"> + <a href="/login" rel="external"> <button class="login-button" ><img src="/discord-mark-light.svg" alt="Discord logo" />Log in with Discord</button > diff --git a/src/lib/MayorSkin.svelte b/src/lib/MayorSkin.svelte index ad0a9a8..2360fab 100644 --- a/src/lib/MayorSkin.svelte +++ b/src/lib/MayorSkin.svelte @@ -23,14 +23,21 @@ faith: '64b39d0756b92b8b7599d1f971580088954e21c5f60c673d0d4f63693fb002b5', } - let url: string + let url: string | undefined $: { if (name.toLowerCase() === 'derpy') url = '/villager.png' - else url = `https://mc-heads.net/body/${skinIds[name.toLowerCase()]}` + else { + const skinId = skinIds[name.toLowerCase()] + url = skinId ? `https://mc-heads.net/body/${skinId}` : undefined + } } </script> -<img src={url} alt="Mayor {toTitleCase(name)}" /> +{#if url} + <img src={url} alt="Mayor {toTitleCase(name)}" /> +{:else} + <div class="no-skin-found">Unknown mayor</div> +{/if} <style> img { @@ -39,4 +46,12 @@ height: 12em; margin: 0 auto; } + + .no-skin-found { + display: flex; + align-items: center; + justify-content: center; + height: 12em; + margin: 0 auto; + } </style> |