From a615ff35cb0728c0822047ce4ce3ab8fc2aba9cd Mon Sep 17 00:00:00 2001
From: Chubby Granny Chaser <hydralauncher@proton.me>
Date: Fri, 21 Jun 2024 03:32:50 +0100
Subject: [PATCH] feat: adding cooldown to randomize button

---
 .../src/pages/game-details/game-details.css.ts    |  6 ++++++
 .../src/pages/game-details/game-details.tsx       | 15 ++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/pages/game-details/game-details.css.ts b/src/renderer/src/pages/game-details/game-details.css.ts
index 8dc5d4cb..f0bbfd2e 100644
--- a/src/renderer/src/pages/game-details/game-details.css.ts
+++ b/src/renderer/src/pages/game-details/game-details.css.ts
@@ -150,6 +150,12 @@ export const randomizerButton = style({
   ":active": {
     transform: "scale(0.98)",
   },
+  ":disabled": {
+    boxShadow: "none",
+    transform: "none",
+    opacity: "0.8",
+    backgroundColor: vars.color.background,
+  },
 });
 
 export const heroPanelSkeleton = style({
diff --git a/src/renderer/src/pages/game-details/game-details.tsx b/src/renderer/src/pages/game-details/game-details.tsx
index b85fbc84..5f32965a 100644
--- a/src/renderer/src/pages/game-details/game-details.tsx
+++ b/src/renderer/src/pages/game-details/game-details.tsx
@@ -27,6 +27,7 @@ import { Downloader } from "@shared";
 
 export function GameDetails() {
   const [randomGame, setRandomGame] = useState<Steam250Game | null>(null);
+  const [randomizerLocked, setRandomizerLocked] = useState(false);
 
   const { objectID } = useParams();
   const [searchParams] = useSearchParams();
@@ -54,6 +55,18 @@ export function GameDetails() {
           { fromRandomizer: "1" }
         )
       );
+
+      setRandomizerLocked(true);
+
+      const zero = performance.now();
+
+      requestAnimationFrame(function animateLock(time) {
+        if (time - zero <= 1000) {
+          requestAnimationFrame(animateLock);
+        } else {
+          setRandomizerLocked(false);
+        }
+      });
     }
   };
 
@@ -118,7 +131,7 @@ export function GameDetails() {
                   className={styles.randomizerButton}
                   onClick={handleRandomizerClick}
                   theme="outline"
-                  disabled={!randomGame}
+                  disabled={!randomGame || randomizerLocked}
                 >
                   <div style={{ width: 16, height: 16, position: "relative" }}>
                     <Lottie