Feat/repair game #2

Merged
math-pixel merged 46 commits from feat/repair-game into develop 2026-05-11 15:33:19 +00:00
3 changed files with 54 additions and 19 deletions
Showing only changes of commit a2adcc3eda - Show all commits
@@ -1,34 +1,25 @@
import { Html } from "@react-three/drei"; import { WorldVideoPrompt } from "@/components/three/ui/WorldVideoPrompt";
import type { Vector3Tuple } from "@/types/three/three"; import type { Vector3Tuple } from "@/types/three/three";
interface RepairPromptVideoProps { interface RepairPromptVideoProps {
src: string; src: string;
position?: Vector3Tuple; position?: Vector3Tuple;
size?: number; size?: number;
billboard?: boolean;
} }
export function RepairPromptVideo({ export function RepairPromptVideo({
src, src,
position = [0, 1.8, 0], position = [0, 1.8, 0],
size = 96, size = 96,
billboard = true,
}: RepairPromptVideoProps): React.JSX.Element { }: RepairPromptVideoProps): React.JSX.Element {
return ( return (
<Html position={position} center transform occlude={false}> <WorldVideoPrompt
<video billboard={billboard}
aria-hidden="true" position={position}
autoPlay size={size}
loop
muted
playsInline
src={src} src={src}
style={{
display: "block",
height: size,
objectFit: "contain",
pointerEvents: "none",
width: size,
}}
/> />
</Html>
); );
} }
@@ -240,7 +240,9 @@ export function RepairRepairingStep({
); );
})} })}
{isReadyToInstall ? (
<RepairPromptVideo src={config.interactUiPath} position={[0, 2.3, 0]} /> <RepairPromptVideo src={config.interactUiPath} position={[0, 2.3, 0]} />
) : null}
</group> </group>
); );
} }
@@ -0,0 +1,42 @@
import { Html } from "@react-three/drei";
import type { Vector3Tuple } from "@/types/three/three";
interface WorldVideoPromptProps {
src: string;
position?: Vector3Tuple;
size?: number;
billboard?: boolean;
}
export function WorldVideoPrompt({
src,
position = [0, 0, 0],
size = 96,
billboard = true,
}: WorldVideoPromptProps): React.JSX.Element {
return (
<Html
position={position}
center
transform
sprite={billboard}
occlude={false}
>
<video
aria-hidden="true"
autoPlay
loop
muted
playsInline
src={src}
style={{
display: "block",
height: size,
objectFit: "contain",
pointerEvents: "none",
width: size,
}}
/>
</Html>
);
}