add: highlight broken repair parts during scan

src/components/three/gameplay/RepairScanSequence.tsx

@@ -1,8 +1,13 @@
 import { useEffect, useState } from "react";
+import * as THREE from "three";
+import { RepairBrokenPartHighlight } from "@/components/three/gameplay/RepairBrokenPartHighlight";
 import { ExplodableModel } from "@/components/three/models/ExplodableModel";
 import { RepairScanVisual } from "@/components/three/gameplay/RepairScanVisual";
 import { REPAIR_SCAN_PART_SECONDS } from "@/data/gameplay/repairGameConfig";
-import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
+import type {
+  RepairMissionConfig,
+  RepairMissionPartConfig,
+} from "@/data/gameplay/repairMissions";
 import type { ExplodedPart } from "@/utils/three/ExplodedModel";
 
 interface RepairScanSequenceProps {
@@ -17,6 +22,10 @@ export function RepairScanSequence({
   const [parts, setParts] = useState<readonly ExplodedPart[]>([]);
   const [activePartIndex, setActivePartIndex] = useState(0);
   const activePart = parts[activePartIndex];
+  const brokenPartIndexes = getBrokenPartIndexes(parts, config.brokenParts);
+  const visibleBrokenPartIndexes = brokenPartIndexes.filter(
+    (partIndex) => partIndex <= activePartIndex,
+  );
 
   useEffect(() => {
     if (parts.length === 0) return undefined;
@@ -46,6 +55,55 @@ export function RepairScanSequence({
         onPartsReady={setParts}
       />
       <RepairScanVisual target={activePart?.object} />
+      {visibleBrokenPartIndexes.map((partIndex) => {
+        const part = parts[partIndex];
+        if (!part) return null;
+
+        return (
+          <RepairBrokenPartHighlight
+            key={part.object.uuid}
+            target={part.object}
+          />
+        );
+      })}
     </group>
   );
 }
+
+function getBrokenPartIndexes(
+  parts: readonly ExplodedPart[],
+  brokenParts: readonly RepairMissionPartConfig[],
+): number[] {
+  if (parts.length === 0 || brokenParts.length === 0) return [];
+
+  const matchedIndexes = brokenParts.flatMap((brokenPart) => {
+    const { nodeName } = brokenPart;
+    if (!nodeName) return [];
+
+    const index = parts.findIndex((part) =>
+      objectContainsNodeName(part.object, nodeName),
+    );
+
+    return index >= 0 ? [index] : [];
+  });
+
+  if (matchedIndexes.length > 0) return [...new Set(matchedIndexes)];
+
+  return parts.slice(0, brokenParts.length).map((_, index) => index);
+}
+
+function objectContainsNodeName(
+  object: THREE.Object3D,
+  nodeName: string,
+): boolean {
+  if (object.name === nodeName) return true;
+
+  let found = false;
+  object.traverse((child) => {
+    if (child.name === nodeName) {
+      found = true;
+    }
+  });
+
+  return found;
+}