refactor(badges): move badges display to component

2 files changed, 108 insertions, 0 deletions

diff --git a/src/lib/User/BadgeWall/Badges.svelte b/src/lib/User/BadgeWall/Badges.svelte
new file mode 100644
index 00000000..2821ae15
--- /dev/null
+++ b/src/lib/User/BadgeWall/Badges.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
+	import tooltip from '$lib/Tooltip/tooltip';
+	import locale from '$stores/locale';
+	import { databaseTimeToDate } from '$lib/Utility/time';
+	import FallbackImage from '$lib/Image/FallbackImage.svelte';
+	import { cdn, thumbnail } from '$lib/Utility/image';
+	import FallbackBadge from './FallbackBadge.svelte';
+	import type { UserPreferences } from '$lib/Database/userPreferences';
+	import { dev } from '$app/environment';
+	import type { IndexedBadge } from './badge';
+
+	export let ungroupedBadges: IndexedBadge[];
+	export let groupedBadges: [string, IndexedBadge[]][];
+	export let categoryFilter: string | null;
+	export let editMode: boolean;
+	export let preferences: UserPreferences;
+	export let selectedBadge: IndexedBadge | undefined = undefined;
+</script>
+
+{#if ungroupedBadges.length === 0}
+	<div class="card">
+		No due.moe registered badges found for this user. <a
+			href={'#'}
+			on:click={(e) => e.preventDefault()}
+			title="This alert does not include AWC badges."
+			use:tooltip>?</a
+		>
+	</div>
+{/if}
+
+{#each groupedBadges as [category, unsortedBadges]}
+	{@const badges = unsortedBadges.sort(
+		(a, b) => new Date(b.time || 0).getTime() - new Date(a.time || 0).getTime()
+	)}
+
+	<details open={categoryFilter ? categoryFilter === category : true}>
+		<summary>{category}</summary>
+
+		<p />
+
+		<div class="badges">
+			{#each badges as badge}
+				<div id={`badge-${badge.id}`}>
+					{#if editMode}
+						<LinkedTooltip
+							content={`${
+								badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''
+							}${badge.description ? `\n${badge.description}` : ''}${
+								badge.designer ? `\nDesigner: ${badge.designer}` : ''
+							}${badge.source ? `\nSource: ${badge.source}` : ''}`}
+							pin={`badge-${badge.id}`}
+							pinPosition="top"
+							relative
+						>
+							<a
+								href={`#`}
+								on:click={() => {
+									selectedBadge = badge;
+
+									const hiddenInput = document.querySelector('input[name="hidden"]');
+
+									if (hiddenInput instanceof HTMLInputElement)
+										hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown';
+								}}
+								title={`${dev ? `${badge.id}\n` : ''}${
+									badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''
+								}${badge.description ? `, ${badge.description}` : ''}${
+									badge.designer ? `\nDesigner: ${badge.designer}` : ''
+								}${badge.source ? `\nSource: ${badge.source}` : ''}`}
+							>
+								<FallbackImage
+									source={cdn(thumbnail(badge.image))}
+									alternative={badge.description}
+									fallback={thumbnail(badge.image)}
+									style={badge.hidden || badge.shadow_hidden
+										? 'filter: grayscale(100%); opacity: 50%;'
+										: ''}
+								/>
+							</a>
+						</LinkedTooltip>
+					{:else}
+						<FallbackBadge
+							{badge}
+							bind:selectedBadge
+							source={cdn(thumbnail(badge.image))}
+							alternative={badge.description}
+							fallback={thumbnail(badge.image)}
+							hideOnError={preferences.hide_missing_badges}
+							style={badge.hidden || badge.shadow_hidden
+								? 'filter: grayscale(100%); opacity: 50%;'
+								: ''}
+						/>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</details>
+
+	{#if groupedBadges[groupedBadges.length - 1][0] !== category}
+		<p />
+	{/if}
+{/each}
diff --git a/src/lib/User/BadgeWall/badge.ts b/src/lib/User/BadgeWall/badge.ts
new file mode 100644
index 00000000..7e6b7254
--- /dev/null
+++ b/src/lib/User/BadgeWall/badge.ts
@@ -0,0 +1,5 @@
+import type { Badge } from '$lib/Database/userBadges';
+
+export interface IndexedBadge extends Badge {
+	index: number;
+}