update: intro flow overlays

2026-05-30 04:00:20 +02:00
parent a2cff0567e
commit ce5dc8ada0
5 changed files with 221 additions and 1 deletions
@@ -0,0 +1,50 @@
+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>
+  );
+}