3 files changed, 94 insertions, 12 deletions
diff --git a/src/lib/sections/Collections.svelte b/src/lib/sections/Collections.svelte
new file mode 100644
index 0000000..2e03d3f
--- /dev/null
+++ b/src/lib/sections/Collections.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { CleanMemberProfile, Collection } from '$lib/APITypes'
+	import { skyblockItemToUrl } from '$lib/minecraft/inventory'
+	import ListItemWithIcon from '$lib/ListItemWithIcon.svelte'
+	import { cleanId } from '$lib/utils'
+	import Tooltip from '$lib/Tooltip.svelte'
+
+	export let data: CleanMemberProfile
+
+	const categories: Record<string, Collection[]> = {}
+	if (data.member.collections)
+		for (const collection of data.member.collections) {
+			if (!categories[collection.category]) categories[collection.category] = []
+			categories[collection.category].push(collection)
+		}
+</script>
+
+{#if data.member.collections}
+	{#each Object.keys(categories).sort() as categoryName}
+		{@const collections = categories[categoryName]}
+		<h3>{cleanId(categoryName)}</h3>
+		<ul>
+			{#each collections as collection}
+				<ListItemWithIcon url={skyblockItemToUrl(collection.name)}>
+					<Tooltip>
+						<span slot="tooltip">
+							Amount: {collection.xp.toLocaleString()}
+						</span>
+						{cleanId(collection.name)}
+						<span class="coll-level">{collection.level}</span>
+					</Tooltip>
+				</ListItemWithIcon>
+			{/each}
+		</ul>
+	{/each}
+{/if}
+
+<style>
+	ul {
+		margin: 0;
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		grid-column-gap: 0;
+		width: fit-content;
+	}
+
+	ul > :global(li) {
+		width: 12em;
+		height: 1.5em;
+		text-overflow: ellipsis;
+	}
+
+	h3 {
+		margin: 0.5em 0 0.5em 0.5em;
+	}
+</style>
diff --git a/src/lib/sections/Minions.svelte b/src/lib/sections/Minions.svelte
index 2e4483c..63dda51 100644
--- a/src/lib/sections/Minions.svelte
+++ b/src/lib/sections/Minions.svelte
@@ -24,18 +24,6 @@
 	{/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);
diff --git a/src/lib/sections/Zones.svelte b/src/lib/sections/Zones.svelte
new file mode 100644
index 0000000..428ab79
--- /dev/null
+++ b/src/lib/sections/Zones.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import { cleanId, toRomanNumerals } from '$lib/utils'
+
+	export let data: CleanMemberProfile
+
+	let zonesVisitedCount = data.member.visited_zones
+		? data.member.visited_zones?.filter(z => z.visited).length
+		: 0
+</script>
+
+{#if data.member.visited_zones}
+	<p class="zones-visited-text">
+		<span class="zones-visited-number">
+			<b>{zonesVisitedCount}</b>/{data.member.visited_zones.length} zones visited
+		</span>
+	</p>
+	<ul>
+		{#each data.member.visited_zones.filter(z => z.visited) as zone}
+			<li>{cleanId(zone.name)}</li>
+		{/each}
+		{#each data.member.visited_zones.filter(z => !z.visited) as zone}
+			<li class="unvisited-zone">{cleanId(zone.name)}</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	.zones-visited-text {
+		color: var(--theme-darker-text);
+	}
+	.zones-visited-number {
+		color: var(--theme-main-text);
+	}
+	.unvisited-zone {
+		opacity: 0.5;
+	}
+</style>