Tom Boullay
91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
import { useCallback, useState } from "react";
|
|
import * as THREE from "three";
|
|
import { RepairObjectModel } from "@/components/three/gameplay/RepairObjectModel";
|
|
import { RepairPromptVideo } from "@/components/three/gameplay/RepairPromptVideo";
|
|
import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
|
|
import { TriggerObject } from "@/components/three/interaction/TriggerObject";
|
|
import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
|
|
import type { Vector3Tuple } from "@/types/three/three";
|
|
|
|
const INSTALL_TARGET_POSITION: Vector3Tuple = [0, 0.8, 0];
|
|
const INSTALL_TARGET_VECTOR = new THREE.Vector3(...INSTALL_TARGET_POSITION);
|
|
const REPLACEMENT_START_POSITION: Vector3Tuple = [0, 1.35, 1.8];
|
|
const REPAIR_INSTALL_RADIUS = 1.1;
|
|
|
|
interface RepairRepairingStepProps {
|
|
config: RepairMissionConfig;
|
|
onRepair: () => void;
|
|
}
|
|
|
|
export function RepairRepairingStep({
|
|
config,
|
|
onRepair,
|
|
}: RepairRepairingStepProps): React.JSX.Element {
|
|
const [isReplacementPlaced, setIsReplacementPlaced] = useState(false);
|
|
const replacementPart = config.replacementParts[0];
|
|
const replacementModelPath = replacementPart?.modelPath ?? config.modelPath;
|
|
const replacementLabel = replacementPart?.label ?? config.label;
|
|
const installColor = isReplacementPlaced ? "#22c55e" : "#f97316";
|
|
const installFillColor = isReplacementPlaced ? "#86efac" : "#fed7aa";
|
|
|
|
const handleReplacementPosition = useCallback((position: THREE.Vector3) => {
|
|
const isPlaced =
|
|
position.distanceTo(INSTALL_TARGET_VECTOR) <= REPAIR_INSTALL_RADIUS;
|
|
setIsReplacementPlaced((current) =>
|
|
current === isPlaced ? current : isPlaced,
|
|
);
|
|
}, []);
|
|
|
|
return (
|
|
<group>
|
|
<TriggerObject
|
|
position={INSTALL_TARGET_POSITION}
|
|
colliders="ball"
|
|
label={
|
|
isReplacementPlaced
|
|
? `Installer ${replacementLabel}`
|
|
: `Approcher ${replacementLabel}`
|
|
}
|
|
onTrigger={() => {
|
|
if (!isReplacementPlaced) return;
|
|
|
|
onRepair();
|
|
}}
|
|
>
|
|
<mesh>
|
|
<torusGeometry args={[0.95, 0.045, 12, 96]} />
|
|
<meshBasicMaterial color={installColor} transparent opacity={0.85} />
|
|
</mesh>
|
|
<mesh position={[0, 0.02, 0]} rotation={[Math.PI / 2, 0, 0]}>
|
|
<ringGeometry args={[0.15, 0.9, 96]} />
|
|
<meshBasicMaterial
|
|
color={installFillColor}
|
|
transparent
|
|
opacity={0.35}
|
|
/>
|
|
</mesh>
|
|
</TriggerObject>
|
|
|
|
<GrabbableObject
|
|
position={[
|
|
config.case.position[0] + REPLACEMENT_START_POSITION[0],
|
|
config.case.position[1] + REPLACEMENT_START_POSITION[1],
|
|
config.case.position[2] + REPLACEMENT_START_POSITION[2],
|
|
]}
|
|
colliders="ball"
|
|
handControlled
|
|
label={`Prendre ${replacementLabel}`}
|
|
onPositionChange={handleReplacementPosition}
|
|
>
|
|
<RepairObjectModel
|
|
label={replacementLabel}
|
|
modelPath={replacementModelPath}
|
|
scale={0.35}
|
|
/>
|
|
</GrabbableObject>
|
|
|
|
<RepairPromptVideo src={config.interactUiPath} position={[0, 2.3, 0]} />
|
|
</group>
|
|
);
|
|
}
|