Tom Boullay
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { RepairCompletionParticles } from "@/components/three/gameplay/RepairCompletionParticles";
|
|
import { ExplodableModel } from "@/components/three/models/ExplodableModel";
|
|
import { REPAIR_REASSEMBLY_SECONDS } from "@/data/gameplay/repairGameConfig";
|
|
import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
|
|
|
|
interface RepairReassemblyStepProps {
|
|
config: RepairMissionConfig;
|
|
onComplete: () => void;
|
|
}
|
|
|
|
export function RepairReassemblyStep({
|
|
config,
|
|
onComplete,
|
|
}: RepairReassemblyStepProps): React.JSX.Element {
|
|
const [split, setSplit] = useState(true);
|
|
const reassemblySeconds =
|
|
config.reassemblySeconds ?? REPAIR_REASSEMBLY_SECONDS;
|
|
|
|
useEffect(() => {
|
|
const closeTimeoutId = window.setTimeout(() => {
|
|
setSplit(false);
|
|
}, 50);
|
|
const completeTimeoutId = window.setTimeout(() => {
|
|
onComplete();
|
|
}, reassemblySeconds * 1000);
|
|
|
|
return () => {
|
|
window.clearTimeout(closeTimeoutId);
|
|
window.clearTimeout(completeTimeoutId);
|
|
};
|
|
}, [onComplete, reassemblySeconds]);
|
|
|
|
return (
|
|
<group>
|
|
<ExplodableModel
|
|
modelPath={config.modelPath}
|
|
scale={config.modelScale ?? 1}
|
|
split={split}
|
|
splitDistance={1.2}
|
|
/>
|
|
<RepairCompletionParticles />
|
|
</group>
|
|
);
|
|
}
|