feat(badges): group awc categories

1 files changed, 66 insertions, 32 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 93db8c28..f1227cdc 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -37,6 +37,11 @@
 		image: string;
 	}
 
+	interface AWCBadgesGroup {
+		group: string;
+		badges: AWCBadge[];
+	}
+
 	onMount(async () => {
 		// socket.on('badges', (message) => (badges = message));
 
@@ -66,19 +71,46 @@
 		}
 	});
 
-	const awcBadges = (awcResponse: string): AWCBadge[] => {
+	// const awcBadges = (awcResponse: string): AWCBadge[] => {
+	// 	return Array.from(
+	// 		new DOMParser().parseFromString(awcResponse, 'text/html').querySelectorAll('.badge-display a')
+	// 	).map((b) => {
+	// 		const badge = b as HTMLAnchorElement;
+	// 		const image = badge.querySelector('img') as HTMLImageElement;
+
+	// 		return {
+	// 			link: badge.href,
+	// 			description: image.alt,
+	// 			image: image.src
+	// 		};
+	// 	});
+	// };
+
+	const awcBadgesGrouped = (awcResponse: string): AWCBadgesGroup[] => {
 		return Array.from(
-			new DOMParser().parseFromString(awcResponse, 'text/html').querySelectorAll('.badge-display a')
-		).map((b) => {
-			const badge = b as HTMLAnchorElement;
-			const image = badge.querySelector('img') as HTMLImageElement;
-
-			return {
-				link: badge.href,
-				description: image.alt,
-				image: image.src
-			};
-		});
+			new DOMParser().parseFromString(awcResponse, 'text/html').querySelectorAll('.container')
+		)
+			.map((c) => {
+				const container = c as HTMLDivElement;
+				const header = container.querySelector('.container-header') as HTMLDivElement;
+
+				if (!['Anime', 'Manga'].includes(header.innerText)) return;
+
+				return {
+					group: header.innerText,
+					badges: Array.from(container.querySelectorAll('.badge-display a')).map((b) => {
+						const badge = b as HTMLAnchorElement;
+						const image = badge.querySelector('img') as HTMLImageElement;
+
+						return {
+							link: badge.href,
+							description: image.alt,
+							image: image.src
+						};
+					})
+				};
+			})
+			.filter((b) => b !== undefined) as AWCBadgesGroup[];
 	};
 
 	const submitBadge = () => {
@@ -340,29 +372,31 @@
 					<div id="badges">
 						{#await awcPromise then badges}
 							{#await badges.text() then text}
-								{@const parsedBadges = awcBadges(text)}
+								{@const parsedBadges = awcBadgesGrouped(text)}
 								{#if parsedBadges.length > 0}
-									<details open>
-										<summary>Anime Watching Club</summary>
+									{#each parsedBadges as group}
+										<details open>
+											<summary>Anime Watching Club | {group.group}</summary>
+
+											<p />
+
+											<div class="badges">
+												{#each group.badges as badge}
+													<a
+														href={badge.link}
+														target="_blank"
+														id={`badge-${badge.link}`}
+														title={badge.description}
+														use:tooltip
+													>
+														<img src={badge.image} alt={badge.description} loading="lazy" />
+													</a>
+												{/each}
+											</div>
+										</details>
 
 										<p />
-
-										<div class="badges">
-											{#each parsedBadges as badge}
-												<a
-													href={badge.link}
-													target="_blank"
-													id={`badge-${badge.link}`}
-													title={badge.description}
-													use:tooltip
-												>
-													<img src={badge.image} alt={badge.description} loading="lazy" />
-												</a>
-											{/each}
-										</div>
-									</details>
-
-									<p />
+									{/each}
 								{/if}
 							{/await}
 						{/await}