diff options
| author | mat <github@matdoes.dev> | 2022-02-22 19:16:09 +0000 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-02-22 19:16:09 +0000 |
| commit | 42c8efb4f3b8faffdd82d407e3cad3768be01ef4 (patch) | |
| tree | e8c1b70d8e1c3069f840f5c8e5f785a794dec5b4 /src/lib | |
| parent | 4d42508de5dabd1979b24cad12506fe4f72f8ed0 (diff) | |
| download | skyblock-stats-42c8efb4f3b8faffdd82d407e3cad3768be01ef4.tar.gz skyblock-stats-42c8efb4f3b8faffdd82d407e3cad3768be01ef4.tar.bz2 skyblock-stats-42c8efb4f3b8faffdd82d407e3cad3768be01ef4.zip | |
add leaderboards
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/Collapsible.svelte | 22 | ||||
| -rw-r--r-- | src/lib/sections/Leaderboards.svelte | 22 |
2 files changed, 39 insertions, 5 deletions
diff --git a/src/lib/Collapsible.svelte b/src/lib/Collapsible.svelte index 760677c..751a1b1 100644 --- a/src/lib/Collapsible.svelte +++ b/src/lib/Collapsible.svelte @@ -1,13 +1,25 @@ <!-- @component - Non-JS collapsible content. + Collapsible content that works without JS but is enhanced by it. --> <script lang="ts"> + import { browser } from '$app/env' + let open: boolean + export let id: string | undefined = undefined + + function checkHash() { + if (id && id === location.hash.slice(1)) { + open = true + } + } + if (browser) checkHash() </script> -<details bind:open> +<svelte:window on:hashchange={checkHash} /> + +<details bind:open {id}> <summary> <slot name="title"> <h2>Details</h2> @@ -15,9 +27,9 @@ </summary> <div> <!-- - We do this so images inside the content are not loaded until it's - open. The browser (only tested on FF) doesn't handle this, although - it probably should. + We do this so images and other things inside the content are not + loaded until it's open. + For some reason browsers don't handle this, although they should. --> <noscript> <slot /> diff --git a/src/lib/sections/Leaderboards.svelte b/src/lib/sections/Leaderboards.svelte new file mode 100644 index 0000000..69b586e --- /dev/null +++ b/src/lib/sections/Leaderboards.svelte @@ -0,0 +1,22 @@ +<script lang="ts"> + import { API_URL } from '$lib/api' + + import type { CleanMemberProfile } from '$lib/APITypes' + import { cleanId } from '$lib/utils' + + export let data: CleanMemberProfile +</script> + +{#await fetch(`${API_URL}player/${data.member.uuid}/${data.profile.uuid}/leaderboards`).then( r => r.json() )} + Loading... +{:then leaderboards} + <ul> + {#each leaderboards as leaderboard} + <li class="leaderboard-item"> + <a href="/leaderboard/{leaderboard.name}" class="leaderboard-item-anchor"> + {leaderboard.positionIndex}) <b>{cleanId(leaderboard.name)}</b>: {leaderboard.value} + </a> + </li> + {/each} + </ul> +{/await} |