From 7c691a804457726aca225032fb0a98f42af1fec7 Mon Sep 17 00:00:00 2001
From: Tom Boullay <tom@famille-boullay.fr>
Date: Sat, 30 May 2026 20:25:21 +0200
Subject: [PATCH] fix: show dialogue subtitles on black screen

---
 src/components/ui/intro/IntroDialogueOverlay.tsx | 15 ++-------------
 src/components/ui/intro/IntroRevealOverlay.tsx   |  4 ++--
 src/data/game/gameStateConfig.ts                 |  2 +-
 src/managers/stores/useGameStore.ts              |  2 +-
 src/types/game.ts                                |  2 +-
 5 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/src/components/ui/intro/IntroDialogueOverlay.tsx b/src/components/ui/intro/IntroDialogueOverlay.tsx
index 8e79634..25ce980 100644
--- a/src/components/ui/intro/IntroDialogueOverlay.tsx
+++ b/src/components/ui/intro/IntroDialogueOverlay.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { Subtitles } from "@/components/ui/Subtitles";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import { SITE_DIALOGUE_IDS } from "@/data/site/dialogueIds";
 import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
@@ -63,21 +64,9 @@ export function IntroDialogueOverlay(): React.JSX.Element {
         inset: 0,
         background: "#000",
         zIndex: 999,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
       }}
     >
-      <span
-        aria-hidden="true"
-        style={{
-          color: "rgba(255, 255, 255, 0.5)",
-          fontSize: 16,
-          fontFamily: "system-ui, sans-serif",
-        }}
-      >
-        ...
-      </span>
+      <Subtitles />
     </div>
   );
 }
diff --git a/src/components/ui/intro/IntroRevealOverlay.tsx b/src/components/ui/intro/IntroRevealOverlay.tsx
index dc1c5ff..74b697d 100644
--- a/src/components/ui/intro/IntroRevealOverlay.tsx
+++ b/src/components/ui/intro/IntroRevealOverlay.tsx
@@ -6,8 +6,8 @@ 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.
+ * Calls completeIntro() when the fade is done — completeIntro also marks
+ * intro.currentStep as "completed" so no separate setIntroStep call is needed.
  */
 export function IntroRevealOverlay(): React.JSX.Element {
   const completeIntro = useGameStore((state) => state.completeIntro);
diff --git a/src/data/game/gameStateConfig.ts b/src/data/game/gameStateConfig.ts
index 2b41a95..766388a 100644
--- a/src/data/game/gameStateConfig.ts
+++ b/src/data/game/gameStateConfig.ts
@@ -19,7 +19,7 @@ export const GAME_STEPS: readonly GameStep[] = [
   "video",
   "dialogue-intro",
   "reveal",
-  "playing",
+  "completed",
 ];
 
 export const MAIN_GAME_STATES: readonly MainGameState[] = [
diff --git a/src/managers/stores/useGameStore.ts b/src/managers/stores/useGameStore.ts
index 18d06b5..850107a 100644
--- a/src/managers/stores/useGameStore.ts
+++ b/src/managers/stores/useGameStore.ts
@@ -121,7 +121,7 @@ function completeIntroState(state: GameState): GameStateUpdate {
     mainState: "ebike",
     intro: {
       ...state.intro,
-      currentStep: "playing",
+      currentStep: "completed",
       hasCompleted: true,
       isEbikeUnlocked: true,
     },
diff --git a/src/types/game.ts b/src/types/game.ts
index a2add19..86c8a27 100644
--- a/src/types/game.ts
+++ b/src/types/game.ts
@@ -19,6 +19,6 @@ export type GameStep =
   | "video" // Vidéo intro.mp4
   | "dialogue-intro" // Dialogues post-vidéo (écran noir)
   | "reveal" // Fondu noir → jeu visible
-  | "playing"; // Intro terminée, jeu actif
+  | "completed"; // Intro terminée
 
 export type MainGameState = "intro" | RepairMissionId | "outro";