feat(badges): click counter for badges

4 files changed, 21 insertions, 2 deletions

diff --git a/src/lib/Database/userBadges.ts b/src/lib/Database/userBadges.ts
index 3ce88d29..d21c3527 100644
--- a/src/lib/Database/userBadges.ts
+++ b/src/lib/Database/userBadges.ts
@@ -12,6 +12,7 @@ export interface Badge {
 	source?: string | null;
 	designer?: string | null;
 	shadow_hidden?: boolean;
+	click_count?: number;
 }
 
 export const getUserBadges = async (userId: number): Promise<Badge[]> => {
@@ -100,3 +101,6 @@ export const setShadowHiddenBadge = async (userId: number, id: number, shadowHid
 		.update({ shadow_hidden: shadowHide })
 		.eq('id', id)
 		.eq('user_id', userId);
+
+export const incrementClickCount = async (id: number) =>
+	await supabase.rpc('user_badges_increment_click_count', { user_badge_id: id });
diff --git a/src/lib/User/BadgeWall/BadgePreview.svelte b/src/lib/User/BadgeWall/BadgePreview.svelte
index ac9519c5..4e347d3d 100644
--- a/src/lib/User/BadgeWall/BadgePreview.svelte
+++ b/src/lib/User/BadgeWall/BadgePreview.svelte
@@ -7,6 +7,7 @@
 	import { onMount } from 'svelte';
 	import { cubicOut } from 'svelte/easing';
 	import { tweened } from 'svelte/motion';
+	import root from '$lib/Utility/root';
 
 	export let selectedBadge: Badge | undefined;
 	export let onNext: () => void = () => {};
@@ -51,6 +52,13 @@
 		}
 	}
 
+	$: {
+		if (selectedBadge)
+			fetch(root(`/api/badges?incrementClickCount=${selectedBadge.id}`), {
+				method: 'PUT'
+			});
+	}
+
 	onMount(() => {
 		const handleClickOutside = (event: any) => {
 			if (event.target.classList.contains('popup')) selectedBadge = undefined;
diff --git a/src/lib/User/BadgeWall/FallbackBadge.svelte b/src/lib/User/BadgeWall/FallbackBadge.svelte
index 083869d7..7e0420ea 100644
--- a/src/lib/User/BadgeWall/FallbackBadge.svelte
+++ b/src/lib/User/BadgeWall/FallbackBadge.svelte
@@ -67,7 +67,7 @@
 
 {#if replaceCount < maxReplaceCount}
 	<Tooltip
-		content={`${dev && !awc ? `${badge.id}\n` : ''}${
+		content={`${dev && !awc ? `${badge.id} ${badge.click_count}\n` : ''}${
 			badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''
 		}${badge.description ? `${awc ? '' : '\n'}${badge.description}` : ''}${
 			badge.designer ? `\nDesigner: ${classifyDesignerName(badge.designer)}` : ''
diff --git a/src/routes/api/badges/+server.ts b/src/routes/api/badges/+server.ts
index 21561cbb..483d0b9c 100644
--- a/src/routes/api/badges/+server.ts
+++ b/src/routes/api/badges/+server.ts
@@ -8,7 +8,8 @@ import {
 	type Badge,
 	migrateCategory,
 	setShadowHidden,
-	setShadowHiddenBadge
+	setShadowHiddenBadge,
+	incrementClickCount
 } from '$lib/Database/userBadges';
 import authorisedJson from '$lib/Data/Static/authorised.json';
 
@@ -48,6 +49,12 @@ export const DELETE = async ({ url, cookies }) => {
 };
 
 export const PUT = async ({ cookies, url, request }) => {
+	if (url.searchParams.get('incrementClickCount') || undefined) {
+		await incrementClickCount(Number(url.searchParams.get('incrementClickCount')));
+
+		return new Response('Incremented', { status: 200 });
+	}
+
 	const userCookie = cookies.get('user');
 
 	if (!userCookie) return unauthorised;