From 8d5fb47e3d0a847df959c8c30cb8138a9fbc4073 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Fri, 20 May 2022 21:04:28 -0500
Subject: achievements

---
 src/lib/sections/Achievements.svelte | 81 ++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/lib/sections/Achievements.svelte

(limited to 'src/lib/sections/Achievements.svelte')

diff --git a/src/lib/sections/Achievements.svelte b/src/lib/sections/Achievements.svelte
new file mode 100644
index 0000000..61f320e
--- /dev/null
+++ b/src/lib/sections/Achievements.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import Tooltip from '$lib/Tooltip.svelte'
+	export let data: CleanMemberProfile
+</script>
+
+{#if data.member.achievements}
+	<h3>
+		Tiered
+		<span class="achievement-count">
+			({data.member.achievements.tiered.filter(a => a.value).length}/{data.member.achievements
+				.tiered.length})
+		</span>
+	</h3>
+	<ul>
+		{#each data.member.achievements.tiered as achievement}
+			<li class="achievement">
+				<Tooltip>
+					<span slot="tooltip">
+						{achievement.description}
+					</span>
+
+					{#if achievement.value}
+						<span>
+							{achievement.name}: <b>{achievement.value}</b>
+						</span>
+					{:else}
+						<span class="achievement-locked">
+							{achievement.name}
+						</span>
+					{/if}
+				</Tooltip>
+			</li>
+		{/each}
+	</ul>
+
+	<h3>
+		Challenge
+		<span class="achievement-count">
+			({data.member.achievements.challenge.filter(a => a.unlocked).length}/{data.member.achievements
+				.challenge.length})
+		</span>
+	</h3>
+	<ul>
+		{#each data.member.achievements.challenge as achievement}
+			<li class="achievement">
+				<Tooltip>
+					<span slot="tooltip">
+						{achievement.description}
+					</span>
+
+					{#if achievement.unlocked}
+						<span>
+							{achievement.name}
+						</span>
+					{:else}
+						<span class="achievement-locked">
+							{achievement.name}
+						</span>
+					{/if}
+				</Tooltip>
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	ul {
+		margin: 0;
+		padding-left: 1em;
+	}
+
+	.achievement-locked {
+		opacity: 0.5;
+	}
+
+	.achievement-count {
+		color: var(--theme-darker-text);
+		font-weight: normal;
+	}
+</style>
-- 
cgit 

