add: animate repair reassembly

src/components/three/gameplay/RepairCompletionParticles.tsx

@@ -0,0 +1,52 @@
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+
+const PARTICLES = Array.from({ length: 24 }, (_, index) => {
+  const angle = (index / 24) * Math.PI * 2;
+  const ring = index % 3;
+  return {
+    angle,
+    radius: 0.45 + ring * 0.28,
+    y: 0.35 + (index % 5) * 0.16,
+    speed: 0.8 + (index % 4) * 0.18,
+  };
+});
+
+export function RepairCompletionParticles(): React.JSX.Element {
+  const groupRef = useRef<THREE.Group>(null);
+
+  useFrame(({ clock }) => {
+    const group = groupRef.current;
+    if (!group) return;
+
+    group.rotation.y = clock.elapsedTime * 0.9;
+    group.children.forEach((child, index) => {
+      const particle = PARTICLES[index];
+      if (!particle) return;
+
+      const pulse = 1 + Math.sin(clock.elapsedTime * 5 + index) * 0.35;
+      child.position.y =
+        particle.y + Math.sin(clock.elapsedTime * particle.speed) * 0.08;
+      child.scale.setScalar(pulse);
+    });
+  });
+
+  return (
+    <group ref={groupRef}>
+      {PARTICLES.map((particle, index) => (
+        <mesh
+          key={index}
+          position={[
+            Math.cos(particle.angle) * particle.radius,
+            particle.y,
+            Math.sin(particle.angle) * particle.radius,
+          ]}
+        >
+          <sphereGeometry args={[0.045, 12, 12]} />
+          <meshBasicMaterial color="#86efac" transparent opacity={0.85} />
+        </mesh>
+      ))}
+    </group>
+  );
+}

src/components/three/gameplay/RepairGame.tsx

@@ -5,6 +5,7 @@ import { RepairCompletionStep } from "@/components/three/gameplay/RepairCompleti
 import { RepairInspectionObject } from "@/components/three/gameplay/RepairInspectionObject";
 import { RepairMissionCase } from "@/components/three/gameplay/RepairMissionCase";
 import { RepairRepairingStep } from "@/components/three/gameplay/RepairRepairingStep";
+import { RepairReassemblyStep } from "@/components/three/gameplay/RepairReassemblyStep";
 import {
   RepairScanSequence,
   type RepairScannedBrokenPart,
@@ -94,7 +95,13 @@ export function RepairGame({
           brokenParts={scannedBrokenParts}
           config={config}
           placeholders={casePlaceholders}
-          onRepair={() => setMissionStep(mission, "done")}
+          onRepair={() => setMissionStep(mission, "reassembling")}
+        />
+      ) : null}
+      {step === "reassembling" ? (
+        <RepairReassemblyStep
+          config={config}
+          onComplete={() => setMissionStep(mission, "done")}
         />
       ) : null}
       {step === "done" ? (
@@ -103,7 +110,7 @@ export function RepairGame({
           onComplete={() => completeMission(mission)}
         />
       ) : null}
-      {step !== "waiting" && step !== "done" ? (
+      {step !== "waiting" && step !== "done" && step !== "reassembling" ? (
         <RepairMissionCase
           config={config}
           onPlaceholdersChange={setCasePlaceholders}

src/components/three/gameplay/RepairReassemblyStep.tsx

@@ -0,0 +1,42 @@
+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);
+
+  useEffect(() => {
+    const closeTimeoutId = window.setTimeout(() => {
+      setSplit(false);
+    }, 50);
+    const completeTimeoutId = window.setTimeout(() => {
+      onComplete();
+    }, REPAIR_REASSEMBLY_SECONDS * 1000);
+
+    return () => {
+      window.clearTimeout(closeTimeoutId);
+      window.clearTimeout(completeTimeoutId);
+    };
+  }, [onComplete]);
+
+  return (
+    <group>
+      <ExplodableModel
+        modelPath={config.modelPath}
+        split={split}
+        splitDistance={1.2}
+      />
+      <RepairCompletionParticles />
+    </group>
+  );
+}