fix(repair-ebike): freeze repair transform and case-driven cooling swap

src/components/three/gameplay/RepairEbikeRepairTrigger.tsx

@@ -1,43 +1,32 @@
-import { useState } from "react";
 import { GrabbableObject } from "@/components/three/interaction/GrabbableObject";
-import { TriggerObject } from "@/components/three/interaction/TriggerObject";
 import { RepairObjectModel } from "@/components/three/gameplay/RepairObjectModel";
-import { REPAIR_INTERACTION_RADIUS } from "@/data/gameplay/repairGameConfig";
 import type { Vector3Tuple } from "@/types/three/three";
 
 interface RepairEbikeRepairTriggerProps {
   anchor: Vector3Tuple;
-  onRepair: () => void;
+  installed: boolean;
 }
 
 const REPLACEMENT_MODEL_PATH = "/models/refroidisseur/model.gltf";
-const TRIGGER_OFFSET: Vector3Tuple = [0, 0.9, 0];
 
 /**
  * Ebike-specific fake replacement flow: the broken radiator node is
  * hidden in the shared ExplodableModel, a grabbable copy appears at the
- * same anchor, then pressing E respawns a fresh part with a halo before
+ * same anchor, then RepairGame/RepairMissionCase controls the install
- * the reassembly step starts.
+ * interaction and this component swaps the copy for a fresh glowing part.
  */
 export function RepairEbikeRepairTrigger({
   anchor,
-  onRepair,
+  installed,
 }: RepairEbikeRepairTriggerProps): React.JSX.Element {
-  const [isInstalled, setIsInstalled] = useState(false);
-
-  function handleRepair(): void {
-    if (isInstalled) return;
-    setIsInstalled(true);
-    window.setTimeout(onRepair, 450);
-  }
-
   return (
     <group>
-      {!isInstalled ? (
+      {!installed ? (
         <GrabbableObject
           position={anchor}
           colliders="ball"
           handControlled
+          lockUntilGrab
           label="Retirer le refroidisseur"
         >
           <RepairObjectModel
@@ -63,23 +52,6 @@ export function RepairEbikeRepairTrigger({
           </mesh>
         </group>
       )}
-
-      <TriggerObject
-        position={[
-          anchor[0] + TRIGGER_OFFSET[0],
-          anchor[1] + TRIGGER_OFFSET[1],
-          anchor[2] + TRIGGER_OFFSET[2],
-        ]}
-        colliders="ball"
-        label="Changez le refroidisseur"
-        radius={REPAIR_INTERACTION_RADIUS}
-        onTrigger={handleRepair}
-      >
-        <mesh>
-          <sphereGeometry args={[0.55, 16, 16]} />
-          <meshBasicMaterial colorWrite={false} depthWrite={false} />
-        </mesh>
-      </TriggerObject>
     </group>
   );
 }

src/components/three/gameplay/RepairGame.tsx

@@ -58,6 +58,11 @@ interface RepairMissionAssetPreloaderProps {
   config: RepairMissionConfig;
 }
 
+interface EbikeRepairTransform {
+  position: Vector3Tuple;
+  rotationY: number;
+}
+
 function RepairMissionAssetPreloader({
   config,
 }: RepairMissionAssetPreloaderProps): null {
@@ -107,6 +112,9 @@ export function RepairGame({
   const [explodedParts, setExplodedParts] = useState<readonly ExplodedPart[]>(
     [],
   );
+  const [ebikeRepairTransform, setEbikeRepairTransform] =
+    useState<EbikeRepairTransform | null>(null);
+  const [ebikeCoolingInstalled, setEbikeCoolingInstalled] = useState(false);
   const reassemblyDoneTimeoutRef = useRef<number | null>(null);
   // Ebike-specific: once the repair starts, keep the entire repair flow
   // exactly where the bike currently is. `Ebike` owns the live parked
@@ -115,11 +123,13 @@ export function RepairGame({
   const livePosition = useMemo<Vector3Tuple>(() => {
     if (mission !== "ebike" || step === "waiting") return position;
 
+    if (ebikeRepairTransform) return ebikeRepairTransform.position;
+
     const parked = window.ebikeParkedPosition;
     if (!parked) return position;
 
     return [parked[0], parked[1], parked[2]];
-  }, [mission, position, step]);
+  }, [ebikeRepairTransform, mission, position, step]);
   const usesLiveEbikePosition = mission === "ebike" && step !== "waiting";
   const parsedScale = toVector3Scale(scale);
   const terrainSnappedPosition = useTerrainSnappedPosition(livePosition);
@@ -133,6 +143,10 @@ export function RepairGame({
   );
   const isSplitPhase = (SPLIT_PHASES as readonly MissionStep[]).includes(step);
   const isRepairing = step === "repairing";
+  const repairModelRotation: Vector3Tuple =
+    mission === "ebike" && ebikeRepairTransform
+      ? [0, ebikeRepairTransform.rotationY, 0]
+      : (config.modelRotation ?? [0, 0, 0]);
   const ebikeBrokenNodeName = config.brokenParts[0]?.targetNodeName;
   const ebikeBrokenWorldAnchor = ebikeBrokenNodeName
     ? brokenAnchors[ebikeBrokenNodeName]
@@ -159,6 +173,7 @@ export function RepairGame({
       setCaseAnchors({});
       setBrokenAnchors({});
       setScannedBrokenParts([]);
+      setEbikeCoolingInstalled(false);
     }, 0);
 
     return () => {
@@ -166,6 +181,45 @@ export function RepairGame({
     };
   }, [mainState, mission, step]);
 
+  useEffect(() => {
+    if (mission !== "ebike") return undefined;
+
+    if (mainState !== "ebike" || step === "waiting") {
+      const timeoutId = window.setTimeout(() => {
+        setEbikeRepairTransform(null);
+        setEbikeCoolingInstalled(false);
+      }, 0);
+
+      return () => {
+        window.clearTimeout(timeoutId);
+      };
+    }
+
+    if (ebikeRepairTransform) return undefined;
+
+    const parked = window.ebikeParkedPosition;
+    const rotationY =
+      window.ebikeParkedRotation ?? config.modelRotation?.[1] ?? 0;
+    const snapshot: EbikeRepairTransform = {
+      position: parked ? [parked[0], parked[1], parked[2]] : position,
+      rotationY,
+    };
+    const timeoutId = window.setTimeout(() => {
+      setEbikeRepairTransform(snapshot);
+    }, 0);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [
+    config.modelRotation,
+    ebikeRepairTransform,
+    mainState,
+    mission,
+    position,
+    step,
+  ]);
+
   useEffect(() => {
     if (mission !== "ebike") return;
     if (mainState === "ebike") return;
@@ -350,6 +404,14 @@ export function RepairGame({
     };
   }, []);
 
+  function handleEbikeCoolingInstall(): void {
+    if (ebikeCoolingInstalled) return;
+    setEbikeCoolingInstalled(true);
+    window.setTimeout(() => {
+      setMissionStep(mission, "reassembling");
+    }, 450);
+  }
+
   if (mainState !== mission) return null;
   if (step === "locked") return null;
 
@@ -376,7 +438,7 @@ export function RepairGame({
         {isRepairPhase ? (
           <ExplodableModel
             modelPath={config.modelPath}
-            rotation={config.modelRotation ?? [0, 0, 0]}
+            rotation={repairModelRotation}
             scale={config.modelScale ?? 1}
             split={isSplitPhase}
             splitSpeed={REPAIR_FRAGMENT_SPLIT_SPEED}
@@ -405,7 +467,7 @@ export function RepairGame({
         {step === "repairing" && mission === "ebike" ? (
           <RepairEbikeRepairTrigger
             anchor={ebikeBrokenLocalAnchor}
-            onRepair={() => setMissionStep(mission, "reassembling")}
+            installed={ebikeCoolingInstalled}
           />
         ) : null}
         {step === "repairing" && mission !== "ebike" ? (
@@ -441,8 +503,13 @@ export function RepairGame({
             showFragmentationPrompt={
               readyForFragmentation && mission !== "ebike"
             }
+            {...(mission === "ebike" && step === "repairing"
+              ? { interactLabel: "Changez le refroidisseur" }
+              : {})}
             onInteract={
-              readyForFragmentation && mission !== "ebike"
+              mission === "ebike" && step === "repairing"
+                ? handleEbikeCoolingInstall
+                : readyForFragmentation && mission !== "ebike"
                   ? () => setMissionStep(mission, "fragmented")
                   : undefined
             }

src/components/three/gameplay/RepairMissionCase.tsx

@@ -25,6 +25,7 @@ interface RepairMissionCaseProps {
   open?: boolean;
   zoomed?: boolean;
   showFragmentationPrompt?: boolean;
+  interactLabel?: string;
   onInteract?: (() => void) | undefined;
 }
 
@@ -37,6 +38,7 @@ export function RepairMissionCase({
   open = false,
   zoomed = false,
   showFragmentationPrompt = false,
+  interactLabel,
   onInteract,
 }: RepairMissionCaseProps): React.JSX.Element {
   const casePosition = zoomed
@@ -51,7 +53,7 @@ export function RepairMissionCase({
         <TriggerObject
           position={casePosition}
           colliders="ball"
-          label={`Ouvrir ${config.label}`}
+          label={interactLabel ?? `Ouvrir ${config.label}`}
           radius={REPAIR_INTERACTION_RADIUS}
           onTrigger={onInteract}
         >

src/components/three/interaction/GrabbableObject.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { RigidBody } from "@react-three/rapier";
 import type { RapierRigidBody } from "@react-three/rapier";
@@ -35,6 +35,7 @@ interface GrabbableObjectProps {
   label?: string;
   handControlled?: boolean;
   disabled?: boolean;
+  lockUntilGrab?: boolean;
   onGrabChange?: (held: boolean) => void;
   onPositionChange?: (position: THREE.Vector3) => void;
   onSnap?: (position: THREE.Vector3) => void;
@@ -134,6 +135,7 @@ export function GrabbableObject({
   label = GRAB_DEFAULT_LABEL,
   handControlled = false,
   disabled = false,
+  lockUntilGrab = false,
   onGrabChange,
   onPositionChange,
   onSnap,
@@ -148,6 +150,7 @@ export function GrabbableObject({
   const rbRef = useRef<RapierRigidBody>(null);
   const isHolding = useRef(false);
   const isHandHolding = useRef(false);
+  const [hasBeenGrabbed, setHasBeenGrabbed] = useState(false);
   const snapTween = useRef<gsap.core.Tween | null>(null);
 
   useEffect(() => {
@@ -288,6 +291,7 @@ export function GrabbableObject({
 
         const hadHit = Boolean(hit);
         if (hadHit) {
+          setHasBeenGrabbed(true);
           isHandHolding.current = true;
           InteractionManager.getInstance().setHandHolding(true);
           onGrabChange?.(true);
@@ -330,7 +334,7 @@ export function GrabbableObject({
     <group ref={spaceRef}>
       <RigidBody
         ref={rbRef}
-        type="dynamic"
+        type={lockUntilGrab && !hasBeenGrabbed ? "fixed" : "dynamic"}
         colliders={colliders}
         position={position}
       >
@@ -344,6 +348,7 @@ export function GrabbableObject({
               position={position}
               bodyRef={rbRef}
               onPress={() => {
+                setHasBeenGrabbed(true);
                 isHolding.current = true;
                 onGrabChange?.(true);
               }}