diff --git a/src/components/ui/GameUI.tsx b/src/components/ui/GameUI.tsx
index 0525e48..a4b0228 100644
--- a/src/components/ui/GameUI.tsx
+++ b/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 {
+
>
);
diff --git a/src/components/ui/Subtitles.tsx b/src/components/ui/Subtitles.tsx
new file mode 100644
index 0000000..db67d37
--- /dev/null
+++ b/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 (
+
+
+ {speaker ? (
+
+ {speaker}:
+
+ ) : null}
+ {content}
+
+
+ );
+}
diff --git a/src/index.css b/src/index.css
index 5efb0c9..8af92a5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -397,6 +397,47 @@ canvas {
letter-spacing: 0.03em;
}
+/* Subtitles */
+.subtitles {
+ position: fixed;
+ left: 50%;
+ bottom: 7vh;
+ z-index: 15;
+ width: min(780px, calc(100vw - 32px));
+ transform: translateX(-50%);
+ pointer-events: none;
+}
+
+.subtitles p {
+ margin: 0;
+ padding: 12px 16px;
+ border-radius: 10px;
+ background: rgba(0, 0, 0, 0.82);
+ color: #ffffff;
+ font-size: clamp(1rem, 2vw, 1.25rem);
+ font-weight: 650;
+ line-height: 1.45;
+ text-align: center;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
+}
+
+.subtitles__speaker {
+ margin-right: 0.35em;
+ font-weight: 800;
+}
+
+.subtitles__speaker--narrateur {
+ color: #7dd3fc;
+}
+
+.subtitles__speaker--fermier {
+ color: #86efac;
+}
+
+.subtitles__speaker--leonie {
+ color: #f9a8d4;
+}
+
/* In-game settings menu */
.game-settings-menu {
position: fixed;