add: repair fragmentation and scan flow

src/components/three/gameplay/RepairGame.tsx

@@ -1,6 +1,14 @@
+import { useEffect } from "react";
+import { ExplodableModel } from "@/components/three/models/ExplodableModel";
 import { RepairInspectionObject } from "@/components/three/gameplay/RepairInspectionObject";
 import { RepairMissionCase } from "@/components/three/gameplay/RepairMissionCase";
+import { RepairScanVisual } from "@/components/three/gameplay/RepairScanVisual";
+import {
+  REPAIR_FRAGMENTATION_SEQUENCE_SECONDS,
+  REPAIR_SCAN_SEQUENCE_SECONDS,
+} from "@/data/gameplay/repairGameConfig";
 import { REPAIR_MISSIONS } from "@/data/gameplay/repairMissions";
+import { useRepairFragmentationInput } from "@/hooks/gameplay/useRepairFragmentationInput";
 import { useRepairMissionStep } from "@/hooks/gameplay/useRepairMissionStep";
 import type { RepairMissionId } from "@/managers/stores/useGameStore";
 import { useGameStore } from "@/managers/stores/useGameStore";
@@ -26,6 +34,32 @@ export function RepairGame({
   const setMissionStep = useGameStore((state) => state.setMissionStep);
   const step = useRepairMissionStep(mission);
   const parsedScale = toVector3Scale(scale);
+  const readyForFragmentation = step === "inspected";
+
+  useRepairFragmentationInput({
+    enabled: mainState === mission && readyForFragmentation,
+    onFragment: () => setMissionStep(mission, "fragmented"),
+  });
+
+  useEffect(() => {
+    if (mainState !== mission) return undefined;
+
+    if (step !== "fragmented" && step !== "scanning") return undefined;
+
+    const nextStep = step === "fragmented" ? "scanning" : "repairing";
+    const sequenceSeconds =
+      step === "fragmented"
+        ? REPAIR_FRAGMENTATION_SEQUENCE_SECONDS
+        : REPAIR_SCAN_SEQUENCE_SECONDS;
+
+    const timeoutId = window.setTimeout(() => {
+      setMissionStep(mission, nextStep);
+    }, sequenceSeconds * 1000);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [mainState, mission, setMissionStep, step]);
 
   if (mainState !== mission) return null;
   if (step === "locked") return null;
@@ -39,7 +73,16 @@ export function RepairGame({
           onInspect={() => setMissionStep(mission, "inspected")}
         />
       ) : null}
-      {step !== "waiting" ? <RepairMissionCase config={config} /> : null}
+      {step === "fragmented" ? (
+        <ExplodableModel modelPath={config.modelPath} split />
+      ) : null}
+      {step === "scanning" ? <RepairScanVisual config={config} /> : null}
+      {step !== "waiting" ? (
+        <RepairMissionCase
+          config={config}
+          showFragmentationPrompt={readyForFragmentation}
+        />
+      ) : null}
     </group>
   );
 }

src/components/three/gameplay/RepairMissionCase.tsx

@@ -1,21 +1,33 @@
 import { RepairCaseModel } from "@/components/three/gameplay/RepairCaseModel";
+import { RepairPromptVideo } from "@/components/three/gameplay/RepairPromptVideo";
 import { REPAIR_CASE_MODEL_PATH } from "@/data/gameplay/repairCaseConfig";
 import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
 
 interface RepairMissionCaseProps {
   config: RepairMissionConfig;
+  showFragmentationPrompt?: boolean;
 }
 
 export function RepairMissionCase({
   config,
+  showFragmentationPrompt = false,
 }: RepairMissionCaseProps): React.JSX.Element {
   return (
-    <RepairCaseModel
-      modelPath={REPAIR_CASE_MODEL_PATH}
-      open={false}
-      position={config.case.position}
-      rotation={config.case.rotation}
-      scale={config.case.scale}
-    />
+    <group>
+      <RepairCaseModel
+        modelPath={REPAIR_CASE_MODEL_PATH}
+        open={false}
+        position={config.case.position}
+        rotation={config.case.rotation}
+        scale={config.case.scale}
+      />
+      {showFragmentationPrompt ? (
+        <RepairPromptVideo
+          src={config.interactUiPath}
+          position={[config.case.position[0], 2.4, config.case.position[2]]}
+          size={80}
+        />
+      ) : null}
+    </group>
   );
 }

src/components/three/gameplay/RepairScanVisual.tsx

@@ -0,0 +1,45 @@
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { RepairPromptVideo } from "@/components/three/gameplay/RepairPromptVideo";
+import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
+
+interface RepairScanVisualProps {
+  config: RepairMissionConfig;
+}
+
+export function RepairScanVisual({
+  config,
+}: RepairScanVisualProps): React.JSX.Element {
+  const scanLineRef = useRef<THREE.Mesh>(null);
+
+  useFrame(({ clock }) => {
+    const scanLine = scanLineRef.current;
+    if (!scanLine) return;
+
+    scanLine.position.y = 0.35 + Math.sin(clock.elapsedTime * 4) * 0.7;
+  });
+
+  return (
+    <group>
+      <mesh rotation={[Math.PI / 2, 0, 0]}>
+        <torusGeometry args={[1.35, 0.035, 12, 96]} />
+        <meshBasicMaterial color="#38bdf8" transparent opacity={0.75} />
+      </mesh>
+      <mesh ref={scanLineRef} rotation={[Math.PI / 2, 0, 0]}>
+        <ringGeometry args={[0.15, 1.25, 96]} />
+        <meshBasicMaterial
+          color="#7dd3fc"
+          side={THREE.DoubleSide}
+          transparent
+          opacity={0.45}
+        />
+      </mesh>
+      <mesh position={[0, 0.85, 0]}>
+        <sphereGeometry args={[1.25, 32, 16]} />
+        <meshBasicMaterial color="#0ea5e9" transparent opacity={0.12} />
+      </mesh>
+      <RepairPromptVideo src={config.brokenUiPath} position={[0, 2.3, 0]} />
+    </group>
+  );
+}