fix(badges): awc badge tooltip

3 files changed, 37 insertions, 27 deletions

diff --git a/src/lib/Data/AWC.ts b/src/lib/Data/AWC.ts
new file mode 100644
index 00000000..1237eaa0
--- /dev/null
+++ b/src/lib/Data/AWC.ts
@@ -0,0 +1,12 @@
+export interface AWCBadge {
+	link: string;
+	description: string;
+	image: string;
+	source: string;
+	designer: string;
+}
+
+export interface AWCBadgesGroup {
+	group: string;
+	badges: AWCBadge[];
+}
diff --git a/src/lib/User/BadgeWall/FallbackBadge.svelte b/src/lib/User/BadgeWall/FallbackBadge.svelte
index 3e45afc7..829cb71b 100644
--- a/src/lib/User/BadgeWall/FallbackBadge.svelte
+++ b/src/lib/User/BadgeWall/FallbackBadge.svelte
@@ -17,6 +17,8 @@
 	export let badge: Badge;
 	export let style = '';
 	export let selectedBadge: Badge | null = null;
+	export let awc = false;
+	export let index: number | null = null;
 
 	let replaceCount = 0;
 	let badgeReference: HTMLImageElement;
@@ -56,29 +58,33 @@
 	const handleMouseLeave = () => {
 		$mouse = { x: 0, y: 0 };
 	};
+
+	const badgeToAny = (badge: Badge) => badge as any;
 </script>
 
 {#if replaceCount < maxReplaceCount}
 	<Tooltip
-		content={`${dev ? `${badge.id}\n` : ''}${
+		content={`${dev && !awc ? `${badge.id}\n` : ''}${
 			badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''
-		}${badge.description ? `\n${badge.description}` : ''}${
+		}${badge.description ? `${awc ? '' : '\n'}${badge.description}` : ''}${
 			badge.designer ? `\nDesigner: ${badge.designer}` : ''
 		}${badge.source ? `\nSource: ${badge.source}` : ''}`}
-		pin={`badge-${badge.id}`}
+		pin={`badge-${awc ? index : badge.id}`}
 		pinPosition="top"
 		relative
 	>
 		<a
-			href={'#'}
+			href={awc ? badgeToAny(badge).link : '#'}
 			target="_blank"
 			class="badge-container badge"
 			on:mousemove={handleMouseMove}
 			on:mouseleave={handleMouseLeave}
 			on:click={(e) => {
-				e.preventDefault();
+				if (!awc) {
+					e.preventDefault();
 
-				selectedBadge = badge;
+					selectedBadge = badge;
+				}
 			}}
 		>
 			<img
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 5a616017..caf2019d 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -29,6 +29,7 @@
 	import { thumbnail } from '$lib/Utility/image.js';
 	import authorisedJson from '$lib/Data/Static/authorised.json';
 	import identity from '$stores/identity';
+	import type { AWCBadgesGroup } from '$lib/Data/AWC.js';
 
 	export let data;
 
@@ -68,19 +69,6 @@
 
 	type GroupedBadges = { [key: string]: IndexedBadge[] };
 
-	interface AWCBadge {
-		link: string;
-		description: string;
-		image: string;
-		source: string;
-		designer: string;
-	}
-
-	interface AWCBadgesGroup {
-		group: string;
-		badges: AWCBadge[];
-	}
-
 	interface IndexedBadge extends Badge {
 		index: number;
 	}
@@ -547,14 +535,18 @@
 											<p />
 
 											<div class="badges">
-												{#each group.badges as badge}
-													<FallbackBadge
-														{badge}
-														source={cdn(thumbnail(badge.image))}
-														alternative={badge.description}
-														fallback={thumbnail(badge.image)}
-														hideOnError={preferences.hide_missing_badges}
-													/>
+												{#each group.badges as badge, index}
+													<div id={`badge-${index}`}>
+														<FallbackBadge
+															{badge}
+															source={cdn(thumbnail(badge.image))}
+															alternative={badge.description}
+															fallback={thumbnail(badge.image)}
+															hideOnError={preferences.hide_missing_badges}
+															awc
+															{index}
+														/>
+													</div>
 												{/each}
 											</div>
 										</details>