From 34fcffb95db91bc1db80a00af4cf9d1007a9f575 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Mon, 21 Feb 2022 00:56:55 -0600
Subject: add minions and loader thing

---
 src/lib/APITypes.d.ts               | 30 ++++++++++++++++++++-
 src/lib/GlobalTooltip.svelte        | 40 ----------------------------
 src/lib/layout/GlobalTooltip.svelte | 31 ++++++++++++++++++++++
 src/lib/layout/Loader.svelte        | 49 ++++++++++++++++++++++++++++++++++
 src/lib/sections/Armor.svelte       | 11 +++++---
 src/lib/sections/Minions.svelte     | 52 +++++++++++++++++++++++++++++++++++++
 src/lib/sections/StatList.svelte    |  2 +-
 7 files changed, 169 insertions(+), 46 deletions(-)
 delete mode 100644 src/lib/GlobalTooltip.svelte
 create mode 100644 src/lib/layout/GlobalTooltip.svelte
 create mode 100644 src/lib/layout/Loader.svelte
 create mode 100644 src/lib/sections/Minions.svelte

(limited to 'src/lib')

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/GlobalTooltip.svelte
deleted file mode 100644
index f504607..0000000
--- a/src/lib/GlobalTooltip.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte'
-	import { onMouseMove, registerItem, setTooltipEl } from './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} />
-<div id="global-tooltip" style="display: none" bind:this={tooltipEl} />
-
-<style>
-	#global-tooltip {
-		position: absolute;
-		user-select: none;
-		pointer-events: none;
-		overflow: hidden;
-		z-index: 100;
-		background-color: #0a0a0aee;
-		padding: 0 0.25rem;
-		border-radius: 3px;
-		box-shadow: 0 0 0 3px #206, 0 0 0 6px #000;
-		font-family: Minecraft;
-		white-space: nowrap;
-	}
-	#global-tooltip :global(p) {
-		margin: 0;
-	}
-	#global-tooltip :global(.item-lore-name) {
-		margin-bottom: 0.5em;
-	}
-</style>
diff --git a/src/lib/layout/GlobalTooltip.svelte b/src/lib/layout/GlobalTooltip.svelte
new file mode 100644
index 0000000..aeb2027
--- /dev/null
+++ b/src/lib/layout/GlobalTooltip.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { onMouseMove, setTooltipEl } from '$lib/GlobalTooltip'
+
+	let tooltipEl: HTMLDivElement
+	$: setTooltipEl(tooltipEl)
+</script>
+
+<svelte:window on:mousemove={onMouseMove} />
+<div id="global-tooltip" style="display: none" bind:this={tooltipEl} />
+
+<style>
+	#global-tooltip {
+		position: absolute;
+		user-select: none;
+		pointer-events: none;
+		overflow: hidden;
+		z-index: 100;
+		background-color: #0a0a0aee;
+		padding: 0 0.25rem;
+		border-radius: 3px;
+		box-shadow: 0 0 0 3px #206, 0 0 0 6px #000;
+		font-family: Minecraft;
+		white-space: nowrap;
+	}
+	#global-tooltip :global(p) {
+		margin: 0;
+	}
+	#global-tooltip :global(.item-lore-name) {
+		margin-bottom: 0.5em;
+	}
+</style>
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'}
-- 
cgit