diff --git a/codebase/@features/provider-website/frontend-public/src/components/EasterEgg/EasterEgg.tsx b/codebase/@features/provider-website/frontend-public/src/components/EasterEgg/EasterEgg.tsx index 04d0cf51..1fddb144 100644 --- a/codebase/@features/provider-website/frontend-public/src/components/EasterEgg/EasterEgg.tsx +++ b/codebase/@features/provider-website/frontend-public/src/components/EasterEgg/EasterEgg.tsx @@ -74,23 +74,24 @@ export function EasterEgg({ children }: EasterEggProps): ReactNode { const clickTimestamps = useRef([]); const [modalOpen, setModalOpen] = useState(false); + const rippleFired = useRef(false); + const handleClick = useCallback((e: MouseEvent): void => { const now = Date.now(); - clickTimestamps.current = [...clickTimestamps.current, now]; + // Keep only timestamps within the 6-click window + clickTimestamps.current = [...clickTimestamps.current.filter(t => now - t <= CLICK_WINDOW_6), now]; - const within2s = clickTimestamps.current.filter(t => now - t <= CLICK_WINDOW_3); - const within4s = clickTimestamps.current.filter(t => now - t <= CLICK_WINDOW_6); - - if (within4s.length >= 6) { + if (clickTimestamps.current.length >= 6) { clickTimestamps.current = []; + rippleFired.current = false; setModalOpen(true); return; } - if (within2s.length >= 3) { - clickTimestamps.current = []; + const within2s = clickTimestamps.current.filter(t => now - t <= CLICK_WINDOW_3); + if (within2s.length >= 3 && !rippleFired.current) { + rippleFired.current = true; spawnRipple(e.clientX, e.clientY); - return; } }, []); @@ -98,7 +99,7 @@ export function EasterEgg({ children }: EasterEggProps): ReactNode { <> {children} diff --git a/easter-egg-modal.png b/easter-egg-modal.png new file mode 100644 index 00000000..fb195ab4 Binary files /dev/null and b/easter-egg-modal.png differ diff --git a/hero-easter-egg-test.png b/hero-easter-egg-test.png new file mode 100644 index 00000000..257dcf8e Binary files /dev/null and b/hero-easter-egg-test.png differ