Tom Boullay
0f6860f1ae
- new src/hooks/ui/useIsMobile.ts (matchMedia + useSyncExternalStore) replacing the resize-handler hook inlined inside pages/site/page.tsx - new src/hooks/ui/usePrefersReducedMotion.ts - new src/data/site/dialogueIds.ts so site and intro components stop carrying hard-coded narrator IDs - siteConfig: add SITE_BACKGROUND_STYLE shared by SiteLayout and SiteMobileBlocker, rename forcedName to presetPlayerName, fix the swapped id/label pairing on situation cards - useSiteStore: rename selectedExperience/Situation to *Index so the stored value (an array index) is obvious in callers - audioConfig: drop dead AUDIO_PATHS placeholders - propagate the renames and SITE_BACKGROUND_STYLE through SiteLayout, SiteWelcomeScreen, SiteSituationScreen and pages/site/page.tsx
32 lines
857 B
TypeScript
32 lines
857 B
TypeScript
import { useSyncExternalStore } from "react";
|
|
|
|
const MOBILE_MEDIA_QUERY =
|
|
"(max-width: 767px), (pointer: coarse) and (hover: none)";
|
|
|
|
function subscribeToMobileQuery(callback: () => void): () => void {
|
|
const query = window.matchMedia(MOBILE_MEDIA_QUERY);
|
|
query.addEventListener("change", callback);
|
|
return () => query.removeEventListener("change", callback);
|
|
}
|
|
|
|
function getMobileSnapshot(): boolean {
|
|
return window.matchMedia(MOBILE_MEDIA_QUERY).matches;
|
|
}
|
|
|
|
function getServerMobileSnapshot(): boolean {
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* True when the device is a phone or a touch-only tablet.
|
|
* Uses matchMedia so layout decisions follow CSS conventions
|
|
* and avoid resize-handler churn.
|
|
*/
|
|
export function useIsMobile(): boolean {
|
|
return useSyncExternalStore(
|
|
subscribeToMobileQuery,
|
|
getMobileSnapshot,
|
|
getServerMobileSnapshot,
|
|
);
|
|
}
|