From 13735f9cf2a6e490128ca49c2fb6343074d26256 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 4 Jan 2024 23:54:07 -0800
Subject: feat(badges): disable download if too many

---
 src/app.css                                | 19 +++++++++++++++++++
 src/routes/user/[user]/badges/+page.svelte | 15 ++++++++++++---
 2 files changed, 31 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/app.css b/src/app.css
index d6e507e5..4ee2049d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -110,6 +110,25 @@ button:active {
 	transform: scale(0.975);
 }
 
+input:disabled,
+select:disabled,
+button:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+input:disabled:hover,
+select:disabled:hover,
+button:disabled:hover {
+	background-color: var(--base0C);
+}
+
+input:disabled:active,
+select:disabled:active,
+button:disabled:active {
+	transform: scale(1);
+}
+
 .small-button {
 	transform: scale(0.875);
 }
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index e0ca15d5..91c95e72 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -22,6 +22,9 @@
 	let confirmDelete = 0;
 	let selectedBadge: Badge | undefined = undefined;
 	let loadError: string | null = null;
+	let badgeCount = 0;
+
+	$: downloadDisabled = badgeCount > 20;
 
 	type GroupedBadges = { [key: string]: Badge[] };
 
@@ -173,6 +176,8 @@
 	const groupBadges = (badges: Badge[]) => {
 		const groupedBadges: GroupedBadges = {};
 
+		badgeCount = badges.length;
+
 		badges.forEach((badge) => {
 			if (!badge.category) badge.category = 'Uncategorised';
 
@@ -217,10 +222,14 @@
 					{editMode ? 'Disable' : 'Enable'} Edit Mode
 				</button>
 				•
-				<button on:click={() => screenshot()}>Download</button>
+				<button
+					disabled={downloadDisabled}
+					on:click={() => (downloadDisabled ? undefined : screenshot())}>Download</button
+				>
 				•
-				<input type="checkbox" bind:checked={dark} /> Dark Mode
-				<input type="checkbox" bind:checked={transparent} /> Transparent Background
+				<input disabled={downloadDisabled} type="checkbox" bind:checked={dark} /> Dark Mode
+				<input disabled={downloadDisabled} type="checkbox" bind:checked={transparent} /> Transparent
+				Background
 			{/if}
 
 			{#if editMode && isOwner}
-- 
cgit v1.2.3