diff --git a/src/pages/Landing.test.tsx b/src/pages/Landing.test.tsx index 7245747..99c2830 100644 --- a/src/pages/Landing.test.tsx +++ b/src/pages/Landing.test.tsx @@ -109,4 +109,41 @@ describe('Landing Page', () => { // Check if the #how-it-works anchor exists expect(container.querySelector('#how-it-works')).toBeInTheDocument(); }); + + it('shows final stat values immediately when prefers-reduced-motion is true', () => { + const originalMatchMedia = window.matchMedia; + + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: vi.fn().mockImplementation((query) => ({ + matches: query === '(prefers-reduced-motion: reduce)', + media: query, + onchange: null, + addListener: vi.fn(), + removeListener: vi.fn(), + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + dispatchEvent: vi.fn(), + })), + }); + + render( + + + + ); + + // mockLandingStats has totalRounds: 1247 + // formatStat formats it as 1,247 + expect(screen.getByText('1,247')).toBeInTheDocument(); + + // mockLandingStats has vXlmDistributed: 4200000 + // formatStat formats it as 4.2M + expect(screen.getByText(/4\.2M/i)).toBeInTheDocument(); + + // mockLandingStats has activePlayers: 893 + expect(screen.getByText('893')).toBeInTheDocument(); + + window.matchMedia = originalMatchMedia; + }); }); diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx index dae36ef..93c68de 100644 --- a/src/pages/Landing.tsx +++ b/src/pages/Landing.tsx @@ -6,12 +6,28 @@ import ModeCards from '../components/ModeCards'; import { useNetworkStats } from '../hooks/useNetworkStats'; function useCountUp(target: number, durationMs = 1800) { - const [value, setValue] = useState(0); + const prefersReducedMotion = + typeof window !== 'undefined' && + window.matchMedia && + window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + const [value, setValue] = useState(prefersReducedMotion ? target : 0); // Track the last displayed value so re-targeting (mock -> live stats) animates // smoothly from where it is rather than snapping back to zero. - const latestRef = useRef(0); + const latestRef = useRef(prefersReducedMotion ? target : 0); useEffect(() => { + const prefersReducedMotion = + typeof window !== 'undefined' && + window.matchMedia && + window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + if (prefersReducedMotion) { + setValue(target); + latestRef.current = target; + return; + } + let frame = 0; const startValue = latestRef.current; const start = performance.now();