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;