add leaderboards

3 files changed, 59 insertions, 18 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}
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
index 8764192..01eb110 100644
--- a/src/routes/player/[player]/[profile].svelte
+++ b/src/routes/player/[player]/[profile].svelte
@@ -21,24 +21,25 @@
 </script>
 
 <script lang="ts">
+	import Leaderboards from '$lib/sections/Leaderboards.svelte'
 	import Inventories from '$lib/sections/Inventories.svelte'
+	import Collections from '$lib/sections/Collections.svelte'
 	import Username from '$lib/minecraft/Username.svelte'
 	import StatList from '$lib/sections/StatList.svelte'
 	import Infobox from '$lib/sections/Infobox.svelte'
+	import Minions from '$lib/sections/Minions.svelte'
+	import Collapsible from '$lib/Collapsible.svelte'
 	import Skills from '$lib/sections/Skills.svelte'
 	import { generateInfobox } from '$lib/profile'
+	import Zones from '$lib/sections/Zones.svelte'
 	import Armor from '$lib/sections/Armor.svelte'
 	import Header from '$lib/Header.svelte'
 	import Emoji from '$lib/Emoji.svelte'
+	import { cleanId } from '$lib/utils'
 	import Head from '$lib/Head.svelte'
 	import Toc from '$lib/Toc.svelte'
 
 	import type { CleanMemberProfile } from '$lib/APITypes'
-	import { cleanId } from '$lib/utils'
-	import Collapsible from '$lib/Collapsible.svelte'
-	import Minions from '$lib/sections/Minions.svelte'
-	import Zones from '$lib/sections/Zones.svelte'
-	import Collections from '$lib/sections/Collections.svelte'
 
 	export let data: CleanMemberProfile
 	export let pack: string
@@ -114,8 +115,8 @@
 			{#if data.member.stats}
 				{#each categories as category}
 					{#if data.member.stats?.find(s => s.category === category)}
-						<section id={category}>
-							<Collapsible>
+						<section>
+							<Collapsible id={category}>
 								<h2 slot="title">{cleanId(category)}</h2>
 								<StatList stats={data.member.stats.filter(s => s.category === category)} />
 							</Collapsible>
@@ -123,24 +124,30 @@
 					{/if}
 				{/each}
 			{/if}
-			<section id="minions">
-				<Collapsible>
+			<section>
+				<Collapsible id="minions">
 					<h2 slot="title">Minions</h2>
 					<Minions {data} />
 				</Collapsible>
 			</section>
-			<section id="zones">
-				<Collapsible>
+			<section>
+				<Collapsible id="zones">
 					<h2 slot="title">Zones</h2>
 					<Zones {data} />
 				</Collapsible>
 			</section>
-			<section id="collections">
-				<Collapsible>
+			<section>
+				<Collapsible id="collections">
 					<h2 slot="title">Collections</h2>
 					<Collections {data} />
 				</Collapsible>
 			</section>
+			<section>
+				<Collapsible id="leaderboards">
+					<h2 slot="title">Leaderboards</h2>
+					<Leaderboards {data} />
+				</Collapsible>
+			</section>
 		</div>
 	</div>
 </main>