Tom Boullay
07b09c22af
- loadDialogueManifest: cache the resolved manifest at module level and dedupe concurrent fetches so each screen no longer re-downloads it - useGameStore: completeIntroState now also advances intro.currentStep to "playing" so callers do not need a separate setIntroStep call - SiteNamingScreen and SiteTransitionOverlay: replace ref-based guards with an isCancelled flag captured per effect. The previous guards persisted across StrictMode remounts, leaving mount 2 unable to re-run the effect after mount 1's chain was cancelled, which broke the fade animations, the second narrator dialogue and the redirect. Both screens now also call stopCurrentDialogue on unmount so audio cannot bleed across routes, and the transition gets a safety timeout in case the dialogue audio fails to fire its "ended" event - SiteTransitionOverlay: keep the <Subtitles /> mount inside the overlay so it renders inside the z-index 1000 stacking context (above the black screen); the one in SiteLayout sits behind it - IntroDialogueOverlay: route through playDialogueById instead of AudioManager.playSoundWithCallback so the narrator subtitles play in sync, and add the same isCancelled cleanup pattern - IntroRevealOverlay: rely on completeIntro alone now that it advances intro.currentStep, and skip the fade when reduced motion is requested - SiteMobileBlocker: correct logo path from public/... to /...
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useGameStore } from "@/managers/stores/useGameStore";
|
|
import { usePrefersReducedMotion } from "@/hooks/ui/usePrefersReducedMotion";
|
|
|
|
const REVEAL_DURATION_MS = 2000;
|
|
|
|
/**
|
|
* Fade-out overlay revealing the game world.
|
|
* Calls completeIntro() when the fade is done — completeIntro also flips
|
|
* intro.currentStep to "playing" so no separate setIntroStep call is needed.
|
|
*/
|
|
export function IntroRevealOverlay(): React.JSX.Element {
|
|
const completeIntro = useGameStore((state) => state.completeIntro);
|
|
const prefersReducedMotion = usePrefersReducedMotion();
|
|
const [opacity, setOpacity] = useState(1);
|
|
|
|
useEffect(() => {
|
|
const fadeTimeout = window.setTimeout(() => {
|
|
setOpacity(0);
|
|
}, 100);
|
|
|
|
const completeTimeout = window.setTimeout(() => {
|
|
completeIntro();
|
|
}, REVEAL_DURATION_MS);
|
|
|
|
return () => {
|
|
window.clearTimeout(fadeTimeout);
|
|
window.clearTimeout(completeTimeout);
|
|
};
|
|
}, [completeIntro]);
|
|
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
position: "fixed",
|
|
inset: 0,
|
|
background: "#000",
|
|
opacity,
|
|
transition: prefersReducedMotion
|
|
? "none"
|
|
: `opacity ${REVEAL_DURATION_MS}ms ease-out`,
|
|
zIndex: 998,
|
|
pointerEvents: "none",
|
|
}}
|
|
/>
|
|
);
|
|
}
|