add: basic subtitle

src/components/ui/GameUI.tsx

@@ -3,6 +3,7 @@ import { DebugOverlayLayout } from "@/components/ui/debug/DebugOverlayLayout";
 import { GameSettingsMenu } from "@/components/ui/GameSettingsMenu";
 import { HandTrackingVisualizer } from "@/components/ui/HandTrackingVisualizer";
 import { InteractPrompt } from "@/components/ui/InteractPrompt";
+import { Subtitles } from "@/components/ui/Subtitles";
 
 export function GameUI(): React.JSX.Element {
   return (
@@ -11,6 +12,7 @@ export function GameUI(): React.JSX.Element {
       <Crosshair />
       <InteractPrompt />
       <HandTrackingVisualizer />
+      <Subtitles />
       <GameSettingsMenu />
     </>
   );

src/components/ui/Subtitles.tsx

@@ -0,0 +1,33 @@
+import { useSettingsStore } from "@/managers/stores/useSettingsStore";
+
+export type SubtitleSpeaker = "Narrateur" | "Fermier" | "Leonie";
+
+interface SubtitlesProps {
+  speaker?: SubtitleSpeaker | null;
+  text?: string | null;
+}
+
+export function Subtitles({
+  speaker = null,
+  text = null,
+}: SubtitlesProps): React.JSX.Element | null {
+  const subtitlesEnabled = useSettingsStore((state) => state.subtitlesEnabled);
+  const content = text?.trim();
+
+  if (!subtitlesEnabled || !content) return null;
+
+  return (
+    <div className="subtitles" aria-live="polite">
+      <p>
+        {speaker ? (
+          <span
+            className={`subtitles__speaker subtitles__speaker--${speaker.toLowerCase()}`}
+          >
+            {speaker}:
+          </span>
+        ) : null}
+        {content}
+      </p>
+    </div>
+  );
+}