feat(badges): awc integration

1 files changed, 53 insertions, 1 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 33e1b4d6..93db8c28 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -19,6 +19,7 @@
 	let error: null | string;
 	// const socket = io();
 	let badgesPromise: Promise<Response>;
+	let awcPromise: Promise<Response>;
 	let dark = true;
 	let transparent = false;
 	let confirmDelete = 0;
@@ -30,6 +31,12 @@
 
 	type GroupedBadges = { [key: string]: Badge[] };
 
+	interface AWCBadge {
+		link: string;
+		description: string;
+		image: string;
+	}
+
 	onMount(async () => {
 		// socket.on('badges', (message) => (badges = message));
 
@@ -42,6 +49,7 @@
 		}
 
 		badgesPromise = fetch(root(`/api/badges?id=${badger.id}`));
+		awcPromise = fetch(`https://awc.moe/challenger/${badger.name}`);
 
 		if (data.user) {
 			currentUserIdentity = userIdentity(data.user);
@@ -58,6 +66,21 @@
 		}
 	});
 
+	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 submitBadge = () => {
 		const imageURL = document.querySelector('input[name="image_url"]') as HTMLInputElement;
 		const activityURL = document.querySelector('input[name="activity_url"]') as HTMLInputElement;
@@ -315,13 +338,42 @@
 					<Loading type="badges" percent={80} />
 				{:then ungroupedBadges}
 					<div id="badges">
+						{#await awcPromise then badges}
+							{#await badges.text() then text}
+								{@const parsedBadges = awcBadges(text)}
+								{#if parsedBadges.length > 0}
+									<details open>
+										<summary>Anime Watching Club</summary>
+
+										<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 />
+								{/if}
+							{/await}
+						{/await}
+
 						{#if ungroupedBadges === null}
 							<Loading>
 								{@html nbsp('Loading badges ... 50%')}
 							</Loading>
 						{:else if ungroupedBadges.length === 0}
 							<div class="card">
-								{@html nbsp('No badges found for this user.')}
+								{@html nbsp('No badges due.moe registered found for this user.')}
 							</div>
 						{:else}
 							{@const groupedBadges = Object.entries(groupBadges(ungroupedBadges))}