big clean up

src/components/three/gameplay/RepairGame.tsx

@@ -14,7 +14,7 @@ import { REPAIR_FRAGMENTATION_SEQUENCE_SECONDS } from "@/data/gameplay/repairGam
 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 type { RepairMissionId } from "@/types/gameplay/repairMission";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import type { ModelTransformProps, Vector3Tuple } from "@/types/three/three";
 import { toVector3Scale } from "@/utils/three/scale";

src/components/three/gameplay/RepairObjectModel.tsx

@@ -3,6 +3,7 @@ import { Component } from "react";
 import { SimpleModel } from "@/components/three/models/SimpleModel";
 import type { ModelTransformProps } from "@/types/three/three";
 import { logModelLoadError } from "@/utils/three/modelLoadLogger";
+import { toVector3Scale } from "@/utils/three/scale";
 
 interface RepairObjectModelProps extends ModelTransformProps {
   label: string;
@@ -17,6 +18,13 @@ interface RepairObjectModelBoundaryState {
   hasError: boolean;
 }
 
+interface RepairObjectFallbackProps {
+  label: string;
+  position?: ModelTransformProps["position"] | undefined;
+  rotation?: ModelTransformProps["rotation"] | undefined;
+  scale?: ModelTransformProps["scale"] | undefined;
+}
+
 class RepairObjectModelBoundary extends Component<
   RepairObjectModelBoundaryProps,
   RepairObjectModelBoundaryState
@@ -45,7 +53,14 @@ class RepairObjectModelBoundary extends Component<
 
   render(): ReactNode {
     if (this.state.hasError) {
-      return <RepairObjectFallback label={this.props.label} />;
+      return (
+        <RepairObjectFallback
+          label={this.props.label}
+          position={this.props.position}
+          rotation={this.props.rotation}
+          scale={this.props.scale}
+        />
+      );
     }
 
     return this.props.children;
@@ -77,9 +92,21 @@ export function RepairObjectModel({
   );
 }
 
-function RepairObjectFallback({ label }: { label: string }): React.JSX.Element {
+function RepairObjectFallback({
+  label,
+  position = [0, 0, 0],
+  rotation = [0, 0, 0],
+  scale = 1,
+}: Pick<
+  RepairObjectFallbackProps,
+  "label" | "position" | "rotation" | "scale"
+>): React.JSX.Element {
   return (
-    <group>
+    <group
+      position={position}
+      rotation={rotation}
+      scale={toVector3Scale(scale)}
+    >
       <mesh castShadow receiveShadow>
         <boxGeometry args={[1.4, 1.4, 1.4]} />
         <meshStandardMaterial color="#facc15" roughness={0.6} wireframe />

src/components/three/gameplay/RepairRepairingStep.tsx

@@ -19,7 +19,7 @@ import type { Vector3Tuple } from "@/types/three/three";
 
 const INSTALL_TARGET_POSITION: Vector3Tuple = [0, 0.8, 0];
 const _placeholderPosition = new THREE.Vector3();
-const REPLACEMENT_START_OFFSETS: Vector3Tuple[] = [
+const FALLBACK_PLACEHOLDER_OFFSETS: Vector3Tuple[] = [
   [-1.15, 1, 0.25],
   [0, 1.05, 0.45],
   [1.15, 1, 0.25],
@@ -38,6 +38,18 @@ interface RepairRepairingStepProps {
   onRepair: () => void;
 }
 
+interface RepairInstallTargetProps {
+  fillColor: string;
+  isReadyToInstall: boolean;
+  label: string;
+  ringColor: string;
+  onRepair: () => void;
+}
+
+interface RepairPlaceholderMarkersProps {
+  positions: readonly Vector3Tuple[];
+}
+
 export function RepairRepairingStep({
   brokenParts,
   config,
@@ -82,6 +94,13 @@ export function RepairRepairingStep({
     : hasWrongPartPlaced
       ? "#fecaca"
       : "#fed7aa";
+  const installLabel = isReadyToInstall
+    ? `Installer ${requiredReplacementLabel}`
+    : hasWrongPartPlaced
+      ? `Mauvaise piece`
+      : hasCorrectPartPlaced
+        ? `Ranger piece cassee`
+        : `Approcher ${requiredReplacementLabel}`;
 
   function handleReplacementPosition(
     partId: string,
@@ -126,48 +145,15 @@ export function RepairRepairingStep({
 
   return (
     <group>
-      <TriggerObject
-        position={INSTALL_TARGET_POSITION}
-        colliders="ball"
-        label={
-          isReadyToInstall
-            ? `Installer ${requiredReplacementLabel}`
-            : hasWrongPartPlaced
-              ? `Mauvaise piece`
-              : hasCorrectPartPlaced
-                ? `Ranger piece cassee`
-                : `Approcher ${requiredReplacementLabel}`
-        }
-        onTrigger={() => {
-          if (!isReadyToInstall) return;
+      <RepairInstallTarget
+        fillColor={installFillColor}
+        isReadyToInstall={isReadyToInstall}
+        label={installLabel}
+        ringColor={installColor}
+        onRepair={onRepair}
+      />
 
-          onRepair();
-        }}
-      >
-        <mesh>
-          <torusGeometry args={[0.95, 0.045, 12, 96]} />
-          <meshBasicMaterial color={installColor} transparent opacity={0.85} />
-        </mesh>
-        <mesh position={[0, 0.02, 0]} rotation={[Math.PI / 2, 0, 0]}>
-          <ringGeometry args={[0.15, 0.9, 96]} />
-          <meshBasicMaterial
-            color={installFillColor}
-            transparent
-            opacity={0.35}
-          />
-        </mesh>
-      </TriggerObject>
-
-      {placeholderPositions.map((position, index) => (
-        <mesh
-          key={`${position.join(":")}-${index}`}
-          position={position}
-          rotation={[Math.PI / 2, 0, 0]}
-        >
-          <torusGeometry args={[0.26, 0.018, 8, 48]} />
-          <meshBasicMaterial color="#38bdf8" transparent opacity={0.55} />
-        </mesh>
-      ))}
+      <RepairPlaceholderMarkers positions={placeholderPositions} />
 
       {replacementParts.map((part, index) => {
         const placeholderPosition =
@@ -251,6 +237,55 @@ export function RepairRepairingStep({
   );
 }
 
+function RepairInstallTarget({
+  fillColor,
+  isReadyToInstall,
+  label,
+  ringColor,
+  onRepair,
+}: RepairInstallTargetProps): React.JSX.Element {
+  return (
+    <TriggerObject
+      position={INSTALL_TARGET_POSITION}
+      colliders="ball"
+      label={label}
+      onTrigger={() => {
+        if (!isReadyToInstall) return;
+
+        onRepair();
+      }}
+    >
+      <mesh>
+        <torusGeometry args={[0.95, 0.045, 12, 96]} />
+        <meshBasicMaterial color={ringColor} transparent opacity={0.85} />
+      </mesh>
+      <mesh position={[0, 0.02, 0]} rotation={[Math.PI / 2, 0, 0]}>
+        <ringGeometry args={[0.15, 0.9, 96]} />
+        <meshBasicMaterial color={fillColor} transparent opacity={0.35} />
+      </mesh>
+    </TriggerObject>
+  );
+}
+
+function RepairPlaceholderMarkers({
+  positions,
+}: RepairPlaceholderMarkersProps): React.JSX.Element {
+  return (
+    <>
+      {positions.map((position, index) => (
+        <mesh
+          key={`${position.join(":")}-${index}`}
+          position={position}
+          rotation={[Math.PI / 2, 0, 0]}
+        >
+          <torusGeometry args={[0.26, 0.018, 8, 48]} />
+          <meshBasicMaterial color="#38bdf8" transparent opacity={0.55} />
+        </mesh>
+      ))}
+    </>
+  );
+}
+
 function getPlaceholderTargets(
   placeholders: readonly RepairCasePlaceholder[],
 ): readonly RepairCasePlaceholder[] {
@@ -258,7 +293,7 @@ function getPlaceholderTargets(
     return placeholders;
   }
 
-  return REPLACEMENT_START_OFFSETS.map(
+  return FALLBACK_PLACEHOLDER_OFFSETS.map(
     (offset, index): RepairCasePlaceholder => ({
       name: `placeholder_${index + 1}`,
       position: [

src/components/three/models/ExplodableModel.tsx

@@ -13,6 +13,8 @@ interface ModelErrorBoundaryProps {
   children: ReactNode;
   modelPath: string;
   position?: Vector3Tuple | undefined;
+  rotation?: Vector3Tuple | undefined;
+  scale?: ModelTransformProps["scale"] | undefined;
 }
 
 interface ModelErrorBoundaryState {
@@ -38,6 +40,8 @@ class ModelErrorBoundary extends Component<
         modelPath: this.props.modelPath,
         scope: "ExplodableModel",
         position: this.props.position,
+        rotation: this.props.rotation,
+        scale: this.props.scale,
       },
       error,
     );
@@ -45,7 +49,13 @@ class ModelErrorBoundary extends Component<
 
   render(): ReactNode {
     if (this.state.hasError) {
-      return <MissingModelFallback position={this.props.position} />;
+      return (
+        <MissingModelFallback
+          position={this.props.position}
+          rotation={this.props.rotation}
+          scale={this.props.scale}
+        />
+      );
     }
 
     return this.props.children;
@@ -67,6 +77,8 @@ export function ExplodableModel(
       key={props.modelPath}
       modelPath={props.modelPath}
       position={props.position}
+      rotation={props.rotation}
+      scale={props.scale}
     >
       <ExplodableModelInner {...props} />
     </ModelErrorBoundary>
@@ -116,11 +128,15 @@ function ExplodableModelInner({
 
 function MissingModelFallback({
   position = [0, 0, 0],
+  rotation = [0, 0, 0],
+  scale = 1,
 }: {
   position?: Vector3Tuple | undefined;
+  rotation?: Vector3Tuple | undefined;
+  scale?: ModelTransformProps["scale"] | undefined;
 }): React.JSX.Element {
   return (
-    <mesh position={position}>
+    <mesh position={position} rotation={rotation} scale={toVector3Scale(scale)}>
       <boxGeometry args={[0.7, 0.7, 0.7]} />
       <meshStandardMaterial color="#7f1d1d" wireframe />
     </mesh>

src/components/ui/debug/GameStateDebugPanel.tsx

@@ -1,9 +1,9 @@
 import { RotateCcw, StepBack, StepForward } from "lucide-react";
 import {
   type MainGameState,
-  type MissionStep,
   useGameStore,
 } from "@/managers/stores/useGameStore";
+import { isMissionStep, MISSION_STEPS } from "@/types/gameplay/repairMission";
 
 const MAIN_STATES: MainGameState[] = [
   "intro",
@@ -13,17 +13,6 @@ const MAIN_STATES: MainGameState[] = [
   "outro",
 ];
 
-const MISSION_STEPS: MissionStep[] = [
-  "locked",
-  "waiting",
-  "inspected",
-  "fragmented",
-  "scanning",
-  "repairing",
-  "reassembling",
-  "done",
-];
-
 function toPascalCase(value: string): string {
   return value
     .split(/[-_\s]+/)
@@ -71,22 +60,27 @@ export function GameStateDebugPanel(): React.JSX.Element {
       return;
     }
 
+    if (mainState === "outro") {
+      setOutroState({ hasStarted: nextSubState === "started" });
+      return;
+    }
+
+    if (!isMissionStep(nextSubState)) return;
+
     if (mainState === "bike") {
-      setBikeState({ currentStep: nextSubState as MissionStep });
+      setBikeState({ currentStep: nextSubState });
       return;
     }
 
     if (mainState === "pylone") {
-      setPyloneState({ currentStep: nextSubState as MissionStep });
+      setPyloneState({ currentStep: nextSubState });
       return;
     }
 
     if (mainState === "ferme") {
-      setFermeState({ currentStep: nextSubState as MissionStep });
+      setFermeState({ currentStep: nextSubState });
       return;
     }
-
-    setOutroState({ hasStarted: nextSubState === "started" });
   }
 
   return (