add minions and loader thing

10 files changed, 159 insertions, 20 deletions

diff --git a/src/app.css b/src/app.css
index a338767..abba4bf 100644
--- a/src/app.css
+++ b/src/app.css
@@ -186,6 +186,10 @@ button {
 	font-family: inherit;
 }
 
+tr {
+	text-align: left;
+}
+
 /*
  * this is necessary for background theming, the background can be set through
  * the --background css variable
diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts
index 04f9220..2f1c9ff 100644
--- a/src/lib/APITypes.d.ts
+++ b/src/lib/APITypes.d.ts
@@ -76,7 +76,6 @@ export declare type Inventories = {
 	[name in keyof typeof INVENTORIES]: Item[]
 }
 
-
 export interface CleanUser {
 	player: CleanPlayer | null
 	profiles?: CleanProfile[]
@@ -94,3 +93,32 @@ export interface CleanBasicProfile {
 	uuid: string
 	name?: string
 }
+
+export interface AccountCustomization {
+	backgroundUrl?: string
+	pack?: string
+	emoji?: string
+}
+
+export interface CleanMinion {
+	name: string
+	levels: boolean[]
+}
+
+export interface CleanProfile extends CleanBasicProfile {
+	members?: CleanBasicMember[]
+}
+export interface CleanFullProfile extends CleanProfile {
+	members: CleanMember[]
+	bank: Bank
+	minions: CleanMinion[]
+	minion_count: number
+	maxUniqueMinions: number
+}
+export interface CleanFullProfileBasicMembers extends CleanProfile {
+	members: CleanBasicMember[]
+	bank: Bank
+	minions: CleanMinion[]
+	minion_count: number
+	maxUniqueMinions: number
+}
diff --git a/src/lib/GlobalTooltip.svelte b/src/lib/layout/GlobalTooltip.svelte
index f504607..aeb2027 100644
--- a/src/lib/GlobalTooltip.svelte
+++ b/src/lib/layout/GlobalTooltip.svelte
@@ -1,17 +1,8 @@
 <script lang="ts">
-	import { onMount } from 'svelte'
-	import { onMouseMove, registerItem, setTooltipEl } from './GlobalTooltip'
+	import { onMouseMove, setTooltipEl } from '$lib/GlobalTooltip'
 
 	let tooltipEl: HTMLDivElement
 	$: setTooltipEl(tooltipEl)
-
-	// // this script handles the item hover lore tooltip
-	// onMount(() => {
-	// 	// TODO: have something that automatically registers the event listener when we create a new MinecraftTooltip
-	// 	const itemEls = document.getElementsByClassName('minecraft-tooltip')
-
-	// 	for (const itemEl of itemEls as unknown as HTMLElement[]) registerItem(itemEl)
-	// })
 </script>
 
 <svelte:window on:mousemove={onMouseMove} />
diff --git a/src/lib/layout/Loader.svelte b/src/lib/layout/Loader.svelte
new file mode 100644
index 0000000..8347e16
--- /dev/null
+++ b/src/lib/layout/Loader.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	let progress = 0
+
+	let widthTransitionDuration = 1000
+
+	let opacity = 1
+	function navigationStart() {
+		console.log('navigation start')
+		widthTransitionDuration = 0
+		opacity = 1
+		progress = 0
+		requestAnimationFrame(() => {
+			widthTransitionDuration = 1000
+			progress = 1
+		})
+	}
+	function navigationEnd() {
+		console.log('navigation end', widthTransitionDuration)
+		opacity = 0
+		setTimeout(() => {
+			widthTransitionDuration = 0
+			progress = 0
+		}, 300)
+	}
+</script>
+
+<svelte:window
+	on:sveltekit:navigation-start={navigationStart}
+	on:sveltekit:navigation-end={navigationEnd}
+/>
+
+<div
+	id="loader"
+	style="width:{progress *
+		100}%;transition-duration:{widthTransitionDuration}ms,300ms;opacity:{opacity * 100}%"
+/>
+
+<style>
+	#loader {
+		position: fixed;
+		left: 0px;
+		top: 0px;
+		transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 100ms linear;
+		height: 8px;
+		z-index: 20;
+		/* add a faint glow effect */
+		background: -moz-linear-gradient(top, #16e 0%, #16e 50%, #16e5 50%, #16e0 100%);
+	}
+</style>
diff --git a/src/lib/sections/Armor.svelte b/src/lib/sections/Armor.svelte
index ab0e73b..655de31 100644
--- a/src/lib/sections/Armor.svelte
+++ b/src/lib/sections/Armor.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
 	import Inventory from '$lib/minecraft/Inventory.svelte'
-	export let data
+	export let data: CleanMemberProfile
 	export let pack
 </script>
 
-<span>
-	<Inventory items={data.member.inventories.armor} name="armor" groupLimit={1} {pack} />
-</span>
+{#if data.member.inventories}
+	<span>
+		<Inventory items={data.member.inventories.armor} name="armor" groupLimit={1} {pack} />
+	</span>
+{/if}
diff --git a/src/lib/sections/Minions.svelte b/src/lib/sections/Minions.svelte
new file mode 100644
index 0000000..2e4483c
--- /dev/null
+++ b/src/lib/sections/Minions.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import { cleanId, toRomanNumerals } from '$lib/utils'
+
+	export let data: CleanMemberProfile
+</script>
+
+<p class="unique-minions-text">
+	Unique minions:
+	<span class="minions-fraction">
+		<b>{data.profile.minion_count}</b>/{data.profile.maxUniqueMinions}
+	</span>
+</p>
+<table>
+	{#each data.profile.minions as minion}
+		<tr>
+			<th>{cleanId(minion.name)}</th>
+			{#each minion.levels as unlocked, i}
+				<td class="minions-table" class:unlocked>
+					{toRomanNumerals(i)}
+				</td>
+			{/each}
+		</tr>
+	{/each}
+</table>
+
+<!-- 
+<p class="darker-text">Unique minions: <span class="main-text"><b>{{ data.profile.minion_count }}</b>/{{ getConstants().max_minions }}</span></p>
+<table>
+{%- for minion in data.profile.minions -%}
+    <tr>
+        <th>{{ minion.name|clean }}</th>
+        {%- for unlocked in minion.levels -%}
+        <td class="minions-table-{% if unlocked %}unlocked{% else %}locked{% endif %}">{{ loop.index|romanNumerals }}</td>
+        {%- endfor -%}
+    </tr>
+{%- endfor -%}
+</table> -->
+<style>
+	.unique-minions-text {
+		color: var(--theme-darker-text);
+	}
+	.minions-fraction {
+		color: var(--theme-main-text);
+	}
+	.minions-table:not(.unlocked) {
+		opacity: 0.2;
+	}
+	.minions-table.unlocked {
+		color: #3e3;
+	}
+</style>
diff --git a/src/lib/sections/StatList.svelte b/src/lib/sections/StatList.svelte
index 266ceb3..901d853 100644
--- a/src/lib/sections/StatList.svelte
+++ b/src/lib/sections/StatList.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <ul>
-	{#each stats as stat}
+	{#each stats.sort((a, b) => b.value - a.value) as stat}
 		<li class:total-stat={stat.categorizedName === 'total'}>
 			<span class="stat-name">{cleanId(stat.categorizedName)}</span>:
 			{#if stat.unit === 'time'}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 7cfa367..74e29b9 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import Header from '$lib/Header.svelte'
 	import '../app.css'
-	import GlobalTooltip from '$lib/GlobalTooltip.svelte'
+	import GlobalTooltip from '$lib/layout/GlobalTooltip.svelte'
+	import Loader from '$lib/layout/Loader.svelte'
 </script>
 
+<Loader />
 <GlobalTooltip />
 <nav />
 <slot />
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
index 1fed489..1a86b44 100644
--- a/src/routes/player/[player]/[profile].svelte
+++ b/src/routes/player/[player]/[profile].svelte
@@ -36,6 +36,7 @@
 	import type { CleanMemberProfile } from '$lib/APITypes'
 	import { cleanId } from '$lib/utils'
 	import Collapsible from '$lib/Collapsible.svelte'
+	import Minions from '$lib/sections/Minions.svelte'
 
 	export let data: CleanMemberProfile
 	export let pack: string
@@ -54,7 +55,9 @@
 	]
 
 	// cursed svelte :D
-	$: bodyStyle = `<style>:root{--background:url(${data.customization.backgroundUrl})}</style>`
+	$: bodyStyle = data.customization?.backgroundUrl
+		? `<style>:root{--background:url(${data.customization.backgroundUrl})}</style>`
+		: ''
 </script>
 
 <svelte:head>
@@ -118,6 +121,12 @@
 					{/if}
 				{/each}
 			{/if}
+			<section id="minions">
+				<Collapsible>
+					<h2 slot="title">Minions</h2>
+					<Minions {data} />
+				</Collapsible>
+			</section>
 		</div>
 	</div>
 </main>
diff --git a/src/routes/player/[player]/index.svelte b/src/routes/player/[player]/index.svelte
index 8242887..2ba7ba1 100644
--- a/src/routes/player/[player]/index.svelte
+++ b/src/routes/player/[player]/index.svelte
@@ -51,7 +51,9 @@
 	const isActiveProfileOnline = Date.now() / 1000 - 60 < activeProfileLastSave
 
 	// cursed svelte :D
-	$: bodyStyle = `<style>:root{--background:url(${data.customization.backgroundUrl})}</style>`
+	$: bodyStyle = data.customization?.backgroundUrl
+		? `<style>:root{--background:url(${data.customization.backgroundUrl})}</style>`
+		: ''
 </script>
 
 <svelte:head>