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(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} >