add: repair fragmentation and scan flow

src/components/three/gameplay/RepairGame.tsx

@@ -1,6 +1,14 @@
+import { useEffect } from "react";
+import { ExplodableModel } from "@/components/three/models/ExplodableModel";
 import { RepairInspectionObject } from "@/components/three/gameplay/RepairInspectionObject";
 import { RepairMissionCase } from "@/components/three/gameplay/RepairMissionCase";
+import { RepairScanVisual } from "@/components/three/gameplay/RepairScanVisual";
+import {
+  REPAIR_FRAGMENTATION_SEQUENCE_SECONDS,
+  REPAIR_SCAN_SEQUENCE_SECONDS,
+} from "@/data/gameplay/repairGameConfig";
 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 { useGameStore } from "@/managers/stores/useGameStore";
@@ -26,6 +34,32 @@ export function RepairGame({
   const setMissionStep = useGameStore((state) => state.setMissionStep);
   const step = useRepairMissionStep(mission);
   const parsedScale = toVector3Scale(scale);
+  const readyForFragmentation = step === "inspected";
+
+  useRepairFragmentationInput({
+    enabled: mainState === mission && readyForFragmentation,
+    onFragment: () => setMissionStep(mission, "fragmented"),
+  });
+
+  useEffect(() => {
+    if (mainState !== mission) return undefined;
+
+    if (step !== "fragmented" && step !== "scanning") return undefined;
+
+    const nextStep = step === "fragmented" ? "scanning" : "repairing";
+    const sequenceSeconds =
+      step === "fragmented"
+        ? REPAIR_FRAGMENTATION_SEQUENCE_SECONDS
+        : REPAIR_SCAN_SEQUENCE_SECONDS;
+
+    const timeoutId = window.setTimeout(() => {
+      setMissionStep(mission, nextStep);
+    }, sequenceSeconds * 1000);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [mainState, mission, setMissionStep, step]);
 
   if (mainState !== mission) return null;
   if (step === "locked") return null;
@@ -39,7 +73,16 @@ export function RepairGame({
           onInspect={() => setMissionStep(mission, "inspected")}
         />
       ) : null}
-      {step !== "waiting" ? <RepairMissionCase config={config} /> : null}
+      {step === "fragmented" ? (
+        <ExplodableModel modelPath={config.modelPath} split />
+      ) : null}
+      {step === "scanning" ? <RepairScanVisual config={config} /> : null}
+      {step !== "waiting" ? (
+        <RepairMissionCase
+          config={config}
+          showFragmentationPrompt={readyForFragmentation}
+        />
+      ) : null}
     </group>
   );
 }

src/components/three/gameplay/RepairMissionCase.tsx

@@ -1,21 +1,33 @@
 import { RepairCaseModel } from "@/components/three/gameplay/RepairCaseModel";
+import { RepairPromptVideo } from "@/components/three/gameplay/RepairPromptVideo";
 import { REPAIR_CASE_MODEL_PATH } from "@/data/gameplay/repairCaseConfig";
 import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
 
 interface RepairMissionCaseProps {
   config: RepairMissionConfig;
+  showFragmentationPrompt?: boolean;
 }
 
 export function RepairMissionCase({
   config,
+  showFragmentationPrompt = false,
 }: RepairMissionCaseProps): React.JSX.Element {
   return (
-    <RepairCaseModel
-      modelPath={REPAIR_CASE_MODEL_PATH}
-      open={false}
-      position={config.case.position}
-      rotation={config.case.rotation}
-      scale={config.case.scale}
-    />
+    <group>
+      <RepairCaseModel
+        modelPath={REPAIR_CASE_MODEL_PATH}
+        open={false}
+        position={config.case.position}
+        rotation={config.case.rotation}
+        scale={config.case.scale}
+      />
+      {showFragmentationPrompt ? (
+        <RepairPromptVideo
+          src={config.interactUiPath}
+          position={[config.case.position[0], 2.4, config.case.position[2]]}
+          size={80}
+        />
+      ) : null}
+    </group>
   );
 }

src/components/three/gameplay/RepairScanVisual.tsx

@@ -0,0 +1,45 @@
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { RepairPromptVideo } from "@/components/three/gameplay/RepairPromptVideo";
+import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
+
+interface RepairScanVisualProps {
+  config: RepairMissionConfig;
+}
+
+export function RepairScanVisual({
+  config,
+}: RepairScanVisualProps): React.JSX.Element {
+  const scanLineRef = useRef<THREE.Mesh>(null);
+
+  useFrame(({ clock }) => {
+    const scanLine = scanLineRef.current;
+    if (!scanLine) return;
+
+    scanLine.position.y = 0.35 + Math.sin(clock.elapsedTime * 4) * 0.7;
+  });
+
+  return (
+    <group>
+      <mesh rotation={[Math.PI / 2, 0, 0]}>
+        <torusGeometry args={[1.35, 0.035, 12, 96]} />
+        <meshBasicMaterial color="#38bdf8" transparent opacity={0.75} />
+      </mesh>
+      <mesh ref={scanLineRef} rotation={[Math.PI / 2, 0, 0]}>
+        <ringGeometry args={[0.15, 1.25, 96]} />
+        <meshBasicMaterial
+          color="#7dd3fc"
+          side={THREE.DoubleSide}
+          transparent
+          opacity={0.45}
+        />
+      </mesh>
+      <mesh position={[0, 0.85, 0]}>
+        <sphereGeometry args={[1.25, 32, 16]} />
+        <meshBasicMaterial color="#0ea5e9" transparent opacity={0.12} />
+      </mesh>
+      <RepairPromptVideo src={config.brokenUiPath} position={[0, 2.3, 0]} />
+    </group>
+  );
+}

src/data/docs/docsTranslations.ts

@@ -361,7 +361,7 @@ Pour les missions de réparation, il monte le composant réutilisable \`RepairGa
 <RepairGame mission="bike" position={[8, 0, -6]} />
 \`\`\`
 
-\`RepairGame\` lit l'étape de mission active depuis le store et écrit les transitions via des actions génériques comme \`setMissionStep\`. Cela garde le composant de scène petit et évite les branches spécifiques à chaque mission dans le flow de réparation.
+\`RepairGame\` lit l'étape de mission active depuis le store et écrit les transitions via des actions génériques comme \`setMissionStep\`. Cela garde le composant de scène petit et évite les branches spécifiques à chaque mission dans le flow de réparation. Le flow de réparation de production supporte actuellement les transitions \`waiting -> inspected -> fragmented -> scanning -> repairing\`.
 
 La scène peut donc évoluer progressivement vers ce pattern :
 
@@ -406,7 +406,7 @@ Overlays actuels :
 
 ## Prochaines étapes
 
-La prochaine étape naturelle est d'étendre \`RepairGame\` au-delà de \`waiting -> inspected\` avec la fragmentation, le scan, la réparation et la complétion.
+La prochaine étape naturelle est d'ajouter les interactions de réparation après l'état \`repairing\`, puis de continuer avec la complétion.
 `;
 
 export const featuresFr = `# Fonctionnalités implémentées
@@ -442,7 +442,7 @@ Ce document liste les fonctionnalités présentes dans le code actuel.
 
 - \`RepairGame\` de production réutilisable monté pour les états de mission \`bike\`, \`pylone\` et \`ferme\`
 - Configuration de mission partagée via \`src/data/gameplay/repairMissions.ts\`
-- Première slice repair-game avec \`waiting -> inspected\`, prompts d'interaction \`.webm\` et apparition de la mallette
+- Flow repair-game avec \`waiting -> inspected -> fragmented -> scanning -> repairing\`, prompts \`.webm\`, apparition de la mallette, touche \`E\`, hold deux poings, transition de modèle explosé et visuels de scan
 
 ## Audio
 

src/data/gameplay/repairGameConfig.ts

@@ -3,6 +3,9 @@ import type { Vector3Tuple } from "@/types/three/three";
 export const REPAIR_GAME_ZONE_ORIGIN: Vector3Tuple = [10, 0.4, -8];
 export const REPAIR_GAME_ZONE_RADIUS = 4.2;
 export const REPAIR_GAME_ZONE_LABEL = "Pack de Relance Feature";
+export const REPAIR_FRAGMENTATION_FIST_HOLD_SECONDS = 1;
+export const REPAIR_FRAGMENTATION_SEQUENCE_SECONDS = 4;
+export const REPAIR_SCAN_SEQUENCE_SECONDS = 4;
 
 export const REPAIR_GAME_MODULE_SLOTS = [
   { label: "Module A", offset: [-2.2, 0, 2.2] },

src/hooks/gameplay/useRepairFragmentationInput.ts

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef } from "react";
+import { REPAIR_FRAGMENTATION_FIST_HOLD_SECONDS } from "@/data/gameplay/repairGameConfig";
+import { INTERACT_KEY } from "@/data/input/keybindings";
+import { useBothFistsHold } from "@/hooks/handTracking/useBothFistsHold";
+
+interface UseRepairFragmentationInputOptions {
+  enabled: boolean;
+  onFragment: () => void;
+}
+
+export function useRepairFragmentationInput({
+  enabled,
+  onFragment,
+}: UseRepairFragmentationInputOptions): void {
+  const completedRef = useRef(false);
+
+  useEffect(() => {
+    if (enabled) return;
+
+    completedRef.current = false;
+  }, [enabled]);
+
+  const fragment = useCallback(() => {
+    if (!enabled) return;
+    if (completedRef.current) return;
+
+    completedRef.current = true;
+    onFragment();
+  }, [enabled, onFragment]);
+
+  useEffect(() => {
+    if (!enabled) return undefined;
+
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (event.key.toLowerCase() !== INTERACT_KEY) return;
+
+      event.preventDefault();
+      fragment();
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [enabled, fragment]);
+
+  useBothFistsHold({
+    enabled,
+    holdSeconds: REPAIR_FRAGMENTATION_FIST_HOLD_SECONDS,
+    onComplete: fragment,
+  });
+}

src/hooks/handTracking/useBothFistsHold.ts

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import { useHandTrackingSnapshot } from "@/hooks/handTracking/useHandTrackingSnapshot";
+
+interface UseBothFistsHoldOptions {
+  enabled: boolean;
+  holdSeconds: number;
+  onComplete: () => void;
+}
+
+export function useBothFistsHold({
+  enabled,
+  holdSeconds,
+  onComplete,
+}: UseBothFistsHoldOptions): void {
+  const { hands } = useHandTrackingSnapshot();
+  const elapsedRef = useRef(0);
+  const completedRef = useRef(false);
+  const onCompleteRef = useRef(onComplete);
+
+  useEffect(() => {
+    onCompleteRef.current = onComplete;
+  }, [onComplete]);
+
+  useEffect(() => {
+    if (enabled) return;
+
+    elapsedRef.current = 0;
+    completedRef.current = false;
+  }, [enabled]);
+
+  useFrame((_, delta) => {
+    if (!enabled) return;
+    if (completedRef.current) return;
+
+    const fistCount = hands.filter((hand) => hand.isFist).length;
+    if (fistCount < 2) {
+      elapsedRef.current = 0;
+      return;
+    }
+
+    elapsedRef.current += delta;
+    if (elapsedRef.current < holdSeconds) return;
+
+    completedRef.current = true;
+    onCompleteRef.current();
+  });
+}