feat(BadgePreview): category field

2 files changed, 44 insertions, 34 deletions

diff --git a/src/lib/BadgeWall/BadgePreview.svelte b/src/lib/BadgeWall/BadgePreview.svelte
index 0f9cab1c..ef5c8159 100644
--- a/src/lib/BadgeWall/BadgePreview.svelte
+++ b/src/lib/BadgeWall/BadgePreview.svelte
@@ -8,7 +8,7 @@
 	import { cubicOut } from 'svelte/easing';
 	import { tweened } from 'svelte/motion';
 
-	export let badge: Badge | undefined;
+	export let selectedBadge: Badge | undefined;
 
 	let badgeReference: HTMLImageElement;
 	const mouse = tweened(
@@ -39,22 +39,20 @@
 	};
 
 	onMount(() => {
-		if (badge && badge.image) {
+		if (selectedBadge && selectedBadge.image) {
 			const image = new Image();
 
-			image.src = cdn(badge.image) || '';
-
+			image.src = cdn(selectedBadge.image) || '';
 			image.onload = () => {
 				badgeReference.src = image.src;
-				console.log('loaded');
 			};
 		}
 	});
 </script>
 
-{#if badge}
+{#if selectedBadge}
 	<div class="badge-preview">
-		{#if badge.image}
+		{#if selectedBadge.image}
 			<div
 				on:mousemove={handleMouseMove}
 				on:mouseleave={handleMouseLeave}
@@ -62,73 +60,85 @@
 				class="badge-container"
 			>
 				<img
-					src={cdn(thumbnail(badge.image))}
+					src={cdn(thumbnail(selectedBadge.image))}
 					bind:this={badgeReference}
 					style="transform: perspective(1000px) rotateX({$mouse.y / 10}deg) rotateY({-$mouse.x /
 						10}deg);"
-					alt={badge.description}
+					alt={selectedBadge.description}
 				/>
 			</div>
 
 			<p />
 		{/if}
 
-		{#if badge.time}
-			{$locale().dateFormatter(databaseTimeToDate(badge.time))}
+		{#if selectedBadge.time}
+			{$locale().dateFormatter(databaseTimeToDate(selectedBadge.time))}
 
-			{#if (badge.designer || badge.source || badge.post) && !badge.description}
+			{#if (selectedBadge.designer || selectedBadge.source || selectedBadge.post) && !selectedBadge.description}
 				<p />
-			{:else if badge.description}
+			{:else if selectedBadge.description}
 				<br />
 			{/if}
 		{/if}
 
-		{#if badge.description}
-			{badge.description}
+		{#if selectedBadge.description}
+			{selectedBadge.description}
 
-			{#if badge.designer || badge.source || badge.post}
+			{#if selectedBadge.designer || selectedBadge.source || selectedBadge.post}
 				<p />
 			{/if}
 		{/if}
 
-		{#if badge.designer}
+		{#if selectedBadge.designer}
 			<b>Designer:</b>
 
-			{#if badge.designer.startsWith('http')}
-				<a href={badge.designer} target="_blank">
-					{badge.designer}
+			{#if selectedBadge.designer.startsWith('http')}
+				<a href={selectedBadge.designer} target="_blank">
+					{selectedBadge.designer}
 				</a>
-			{:else if badge.designer.startsWith('@')}
-				<a href="https://anilist.co/user/{badge.designer.replace('@', '')}" target="_blank">
-					{badge.designer}
+			{:else if selectedBadge.designer.startsWith('@')}
+				<a href="https://anilist.co/user/{selectedBadge.designer.replace('@', '')}" target="_blank">
+					{selectedBadge.designer}
 				</a>
 			{:else}
-				{badge.designer}
+				{selectedBadge.designer}
 			{/if}
 
 			<br />
 		{/if}
 
-		{#if badge.post}
-			<b>{badge.post.includes('forum') ? 'Forum' : 'Activity'}:</b>
+		{#if selectedBadge.post}
+			<b>{selectedBadge.post.includes('forum') ? 'Forum' : 'Activity'}:</b>
 
-			<a href={badge.post} target="_blank">
-				{badge.post}
+			<a href={selectedBadge.post} target="_blank">
+				{selectedBadge.post}
 			</a>
 
 			<br />
 		{/if}
 
-		{#if badge.source}
+		{#if selectedBadge.source}
 			<b>Source:</b>
 
-			{#if badge.source.startsWith('http')}
-				<a href={badge.source} target="_blank">
-					{badge.source}
+			{#if selectedBadge.source.startsWith('http')}
+				<a href={selectedBadge.source} target="_blank">
+					{selectedBadge.source}
 				</a>
 			{:else}
-				{badge.source}
+				{selectedBadge.source}
 			{/if}
+
+			<br />
+		{/if}
+
+		{#if selectedBadge.category}
+			<b>Category:</b>
+
+			<a href={`?category=${selectedBadge.category}`} on:click={() => (selectedBadge = undefined)}>
+				{selectedBadge.category}
+			</a>
+
+			<br />
 		{/if}
 	</div>
 {/if}
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 8adacce0..b3483a66 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -815,7 +815,7 @@
 								selectedBadge = undefined;
 							}}
 						>
-							<BadgePreview badge={selectedBadge} />
+							<BadgePreview bind:selectedBadge />
 						</Popup>
 					{/if}
 				{:catch}