From 202ac4628da96ed62dfceb467f2cd54528349d23 Mon Sep 17 00:00:00 2001
From: Tom Boullay <tom@famille-boullay.fr>
Date: Mon, 11 May 2026 12:58:37 +0200
Subject: [PATCH] fix: sequence repair case completion exit

---
 .../three/gameplay/RepairCompletionStep.tsx   | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/three/gameplay/RepairCompletionStep.tsx b/src/components/three/gameplay/RepairCompletionStep.tsx
index 21ba652..19aa09d 100644
--- a/src/components/three/gameplay/RepairCompletionStep.tsx
+++ b/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>