src/components/three/gameplay/RepairCompletionStep.tsx

@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { RepairObjectModel } from "@/components/three/gameplay/RepairObjectModel";
 import { RepairPromptVideo } from "@/components/three/gameplay/RepairPromptVideo";
 import { RepairMissionCase } from "@/components/three/gameplay/RepairMissionCase";
 import { TriggerObject } from "@/components/three/interaction/TriggerObject";
+import { REPAIR_CASE_ANIMATION_DURATION } from "@/data/gameplay/repairCaseConfig";
 import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
 
 interface RepairCompletionStepProps {
@@ -14,13 +15,27 @@ export function RepairCompletionStep({
   config,
   onComplete,
 }: RepairCompletionStepProps): React.JSX.Element {
-  const [isCompleting, setIsCompleting] = useState(false);
+  const [isClosingCase, setIsClosingCase] = useState(false);
+  const [isExitingCase, setIsExitingCase] = useState(false);
+
+  useEffect(() => {
+    if (!isClosingCase) return undefined;
+
+    const timeoutId = window.setTimeout(() => {
+      setIsExitingCase(true);
+    }, REPAIR_CASE_ANIMATION_DURATION * 1000);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [isClosingCase]);
 
   return (
     <group>
       <RepairMissionCase
         config={config}
-        exiting={isCompleting}
+        exiting={isExitingCase}
+        open={!isClosingCase}
         onExitComplete={onComplete}
       />
 
@@ -30,12 +45,12 @@ export function RepairCompletionStep({
         scale={1}
       />
 
-      {!isCompleting ? (
+      {!isClosingCase ? (
         <TriggerObject
           position={[0, 1.1, 0]}
           colliders="ball"
           label={`Valider ${config.label}`}
-          onTrigger={() => setIsCompleting(true)}
+          onTrigger={() => setIsClosingCase(true)}
         >
           <mesh>
             <torusGeometry args={[1.35, 0.045, 12, 96]} />
@@ -48,7 +63,7 @@ export function RepairCompletionStep({
         </TriggerObject>
       ) : null}
 
-      {!isCompleting ? (
+      {!isClosingCase ? (
         <RepairPromptVideo src={config.stageUiPath} position={[0, 2.55, 0]} />
       ) : null}
     </group>