feat(badges): previous and next button for preview

1 files changed, 63 insertions, 4 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index c918e460..e339b8e2 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -48,7 +48,7 @@
 	// let transparent = false;
 	let confirmDelete = 0;
 	let confirmPrune = 0;
-	let selectedBadge: Badge | undefined = undefined;
+	let selectedBadge: IndexedBadge | undefined = undefined;
 	let loadError: string | null = null;
 	const isId = /^\d+$/.test(data.username);
 	let importImages: ImportImage[] | undefined = undefined;
@@ -66,7 +66,7 @@
 
 	// $: downloadDisabled = badgeCount > 20;
 
-	type GroupedBadges = { [key: string]: Badge[] };
+	type GroupedBadges = { [key: string]: IndexedBadge[] };
 
 	interface AWCBadge {
 		link: string;
@@ -81,6 +81,10 @@
 		badges: AWCBadge[];
 	}
 
+	interface IndexedBadge extends Badge {
+		index: number;
+	}
+
 	const getBadges = () => (badgesPromise = fetch(root(`/api/badges?id=${badger.id}`)));
 
 	const setShadowHide = () =>
@@ -310,7 +314,7 @@
 		});
 	};
 
-	const groupBadges = (badges: Badge[]) => {
+	const groupBadges = (badges: IndexedBadge[]) => {
 		const groupedBadges: GroupedBadges = {};
 
 		// badgeCount = badges.length;
@@ -323,6 +327,12 @@
 			groupedBadges[badge.category].push(badge);
 		});
 
+		Object.entries(groupedBadges).forEach(([_category, badges]) => {
+			badges.forEach((badge, index) => {
+				badge.index = index;
+			});
+		});
+
 		return Object.entries(groupedBadges)
 			.sort((a, b) => a[1].length - b[1].length)
 			.reduce((set: GroupedBadges, [key, value]) => {
@@ -451,8 +461,42 @@
 	// 	URL.revokeObjectURL(url);
 	// };
 
-	const removeHiddenBadges = (isOwner: boolean, badges: Badge[]) =>
+	const removeHiddenBadges = (isOwner: boolean, badges: IndexedBadge[]) =>
 		isOwner || authorised ? badges : badges.filter((b) => !b.hidden && !b.shadow_hidden);
+
+	const setAdjacentCursor = (badges: IndexedBadge[], direction: number) => {
+		const currentCategory = selectedBadge?.category || 'Uncategorised';
+		const currentBadge = selectedBadge?.index;
+		const categoryBadges = groupBadges(badges)[currentCategory];
+
+		if (!currentCategory || currentBadge === undefined) return;
+
+		let previousBadge = categoryBadges[currentBadge + direction];
+
+		while (previousBadge && (previousBadge.hidden || previousBadge.shadow_hidden))
+			previousBadge = categoryBadges[previousBadge.index + direction];
+
+		if (previousBadge) selectedBadge = previousBadge;
+	};
+
+	const adjacentBadgeExists = (
+		selectedBadge: IndexedBadge | undefined,
+		badges: IndexedBadge[],
+		direction: number
+	) => {
+		const currentCategory = selectedBadge?.category || 'Uncategorised';
+		const currentBadge = selectedBadge?.index;
+		const categoryBadges = groupBadges(badges)[currentCategory];
+
+		if (!currentCategory || currentBadge === undefined) return;
+
+		let previousBadge = categoryBadges[currentBadge + direction];
+
+		while (previousBadge && (previousBadge.hidden || previousBadge.shadow_hidden))
+			previousBadge = categoryBadges[previousBadge.index + direction];
+
+		return previousBadge;
+	};
 </script>
 
 <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
@@ -861,6 +905,21 @@
 							}}
 						>
 							<BadgePreview bind:selectedBadge />
+
+							<p />
+
+							{#if adjacentBadgeExists(selectedBadge, ungroupedBadges, -1)}
+								<button on:click={() => setAdjacentCursor(ungroupedBadges, -1)}>Previous</button>
+							{/if}
+
+							{#if adjacentBadgeExists(selectedBadge, ungroupedBadges, 1)}
+								<button
+									on:click={() => setAdjacentCursor(ungroupedBadges, 1)}
+									style="float: right;"
+								>
+									Next
+								</button>
+							{/if}
 						</Popup>
 					{/if}
 				{:catch}