Tom Boullay
51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import { AudioManager } from "@/managers/AudioManager";
|
|
import { useGameStore } from "@/managers/stores/useGameStore";
|
|
|
|
const INTRO_DIALOGUE_PATH = "/sounds/dialogue/narrateur_ordreebike.mp3";
|
|
|
|
/**
|
|
* Black screen overlay with dialogue audio
|
|
* - Plays narrateur_ordreebike.mp3
|
|
* - Transitions to reveal step when dialogue ends
|
|
*/
|
|
export function IntroDialogueOverlay(): React.JSX.Element {
|
|
const setIntroStep = useGameStore((state) => state.setIntroStep);
|
|
const dialogueStarted = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (dialogueStarted.current) return;
|
|
dialogueStarted.current = true;
|
|
|
|
// Play dialogue then transition to reveal
|
|
const audio = AudioManager.getInstance();
|
|
audio.playSoundWithCallback(INTRO_DIALOGUE_PATH, 0.8, () => {
|
|
setIntroStep("reveal");
|
|
});
|
|
}, [setIntroStep]);
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
inset: 0,
|
|
background: "#000",
|
|
zIndex: 999,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
color: "rgba(255, 255, 255, 0.5)",
|
|
fontSize: 16,
|
|
fontFamily: "system-ui, sans-serif",
|
|
}}
|
|
>
|
|
...
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|