add: repair game inspection sub state

src/components/three/gameplay/RepairObjectModel.tsx

@@ -0,0 +1,96 @@
+import type { ReactNode } from "react";
+import { Component } from "react";
+import { SimpleModel } from "@/components/three/models/SimpleModel";
+import type { Vector3Scale, Vector3Tuple } from "@/types/three/three";
+import { logModelLoadError } from "@/utils/three/modelLoadLogger";
+
+interface RepairObjectModelProps {
+  label: string;
+  modelPath: string;
+  position?: Vector3Tuple;
+  rotation?: Vector3Tuple;
+  scale?: Vector3Scale;
+}
+
+interface RepairObjectModelBoundaryProps extends RepairObjectModelProps {
+  children: ReactNode;
+}
+
+interface RepairObjectModelBoundaryState {
+  hasError: boolean;
+}
+
+class RepairObjectModelBoundary extends Component<
+  RepairObjectModelBoundaryProps,
+  RepairObjectModelBoundaryState
+> {
+  constructor(props: RepairObjectModelBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): RepairObjectModelBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error): void {
+    logModelLoadError(
+      {
+        modelPath: this.props.modelPath,
+        position: this.props.position,
+        rotation: this.props.rotation,
+        scale: this.props.scale,
+        scope: `RepairObjectModel.${this.props.label}`,
+      },
+      error,
+    );
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return <RepairObjectFallback label={this.props.label} />;
+    }
+
+    return this.props.children;
+  }
+}
+
+export function RepairObjectModel({
+  label,
+  modelPath,
+  position = [0, 0, 0],
+  rotation = [0, 0, 0],
+  scale = 1,
+}: RepairObjectModelProps): React.JSX.Element {
+  return (
+    <RepairObjectModelBoundary
+      label={label}
+      modelPath={modelPath}
+      position={position}
+      rotation={rotation}
+      scale={scale}
+    >
+      <SimpleModel
+        modelPath={modelPath}
+        position={position}
+        rotation={rotation}
+        scale={scale}
+      />
+    </RepairObjectModelBoundary>
+  );
+}
+
+function RepairObjectFallback({ label }: { label: string }): React.JSX.Element {
+  return (
+    <group>
+      <mesh castShadow receiveShadow>
+        <boxGeometry args={[1.4, 1.4, 1.4]} />
+        <meshStandardMaterial color="#facc15" roughness={0.6} wireframe />
+      </mesh>
+      <mesh position={[0, 1.05, 0]}>
+        <sphereGeometry args={[0.08, 16, 16]} />
+        <meshBasicMaterial color={label ? "#f8fafc" : "#facc15"} />
+      </mesh>
+    </group>
+  );
+}