add: playground in testmap

src/world/debug/TestMap.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import { Component, useRef } from "react";
 import * as THREE from "three";
 import { Physics, RigidBody, CuboidCollider } from "@react-three/rapier";
+import { RepairGame } from "@/components/three/gameplay/RepairGame";
 import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
 import { AnimatedModel } from "@/components/three/models/AnimatedModel";
 import { TriggerObject } from "@/components/three/interaction/TriggerObject";
@@ -14,6 +15,9 @@ import {
   TEST_SCENE_GRABBABLE_METALNESS,
   TEST_SCENE_GRABBABLE_POSITION,
   TEST_SCENE_GRABBABLE_ROUGHNESS,
+  TEST_SCENE_REPAIR_ZONE_MARKER_RADIUS,
+  TEST_SCENE_REPAIR_ZONE_MARKER_TUBE_RADIUS,
+  TEST_SCENE_REPAIR_ZONES,
   TEST_SCENE_TRIGGER_COLOR,
   TEST_SCENE_TRIGGER_METALNESS,
   TEST_SCENE_TRIGGER_POSITION,
@@ -42,6 +46,10 @@ interface ModelPreviewErrorBoundaryState {
   hasError: boolean;
 }
 
+interface RepairPlaygroundZoneMarkerProps {
+  color: string;
+}
+
 class ModelPreviewErrorBoundary extends Component<
   ModelPreviewErrorBoundaryProps,
   ModelPreviewErrorBoundaryState
@@ -132,6 +140,13 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
             />
           </mesh>
         </TriggerObject>
+
+        {TEST_SCENE_REPAIR_ZONES.map((zone) => (
+          <group key={zone.mission} position={zone.position}>
+            <RepairPlaygroundZoneMarker color={zone.color} />
+            <RepairGame mission={zone.mission} position={[0, 0, 0]} />
+          </group>
+        ))}
       </Physics>
 
       <ModelPreviewErrorBoundary modelPath={ELECTRICIENNE_ANIMATED_MODEL_PATH}>
@@ -145,3 +160,31 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
     </>
   );
 }
+
+function RepairPlaygroundZoneMarker({
+  color,
+}: RepairPlaygroundZoneMarkerProps): React.JSX.Element {
+  return (
+    <group>
+      <mesh rotation={[Math.PI / 2, 0, 0]}>
+        <torusGeometry
+          args={[
+            TEST_SCENE_REPAIR_ZONE_MARKER_RADIUS,
+            TEST_SCENE_REPAIR_ZONE_MARKER_TUBE_RADIUS,
+            12,
+            96,
+          ]}
+        />
+        <meshStandardMaterial
+          color={color}
+          emissive={color}
+          emissiveIntensity={0.2}
+        />
+      </mesh>
+      <mesh position={[0, 0.08, 0]} rotation={[Math.PI / 2, 0, 0]}>
+        <ringGeometry args={[0.2, TEST_SCENE_REPAIR_ZONE_MARKER_RADIUS, 96]} />
+        <meshBasicMaterial color={color} transparent opacity={0.12} />
+      </mesh>
+    </group>
+  );
+}