add: repair game inspection sub state

docs/technical/architecture.md

@@ -15,7 +15,7 @@ This document describes the code that exists today in the repository.
   - either the map scene or the debug physics test scene
   - the player rig when the active camera mode is `player`
 - `src/world/GameMap.tsx` loads map nodes from `public/map.json`, resolves available models, and builds the collision octree.
-- `src/world/GameStageContent.tsx` is wrapped in Rapier `Physics` in the production game scene so stage gameplay objects can use physics without moving the map or player to Rapier.
+- `src/world/GameStageContent.tsx` is wrapped in Rapier `Physics` in the production game scene so stage gameplay objects can use physics without moving the map or player to Rapier. It now mounts reusable `RepairGame` instances for `bike`, `pylone`, and `ferme` mission states.
 - `src/world/debug/TestMap.tsx` provides a debug-oriented interaction and physics map.
 - `src/world/player/Player.tsx` mounts the camera and controller.
 - `src/world/player/PlayerController.tsx` owns pointer lock movement, jump handling, and interaction input.
@@ -62,7 +62,7 @@ Keep the player and map octree outside the Rapier provider until there is a deli
 - `src/components/three/models/` contains reusable model helpers such as `ExplodableModel`.
 - `src/components/three/interaction/` contains reusable interaction wrappers such as `InteractableObject`, `TriggerObject`, and `GrabbableObject`.
 - `src/components/three/handTracking/` contains R3F hand tracking debug models such as the glove overlays.
-- `src/components/three/gameplay/` contains the current core repair gameplay prototype: the repair case, repair game zone, and module slots.
+- `src/components/three/gameplay/` contains the repair gameplay components: the reusable production `RepairGame` flow, the repair case, the debug repair game zone, and module slots.
 - `src/components/three/world/` contains reusable world/environment objects such as `SkyModel`.
 
 ## Editor System
@@ -90,6 +90,6 @@ Keep the player and map octree outside the Rapier provider until there is a deli
 - The repository is a prototype, not the full intended game runtime.
 - `src/world/debug/TestMap.tsx` is part of the active scene composition.
 - There is no central gameplay orchestrator such as `GameManager`.
-- Missions, zones, cinematics, and dialogue systems are not implemented.
+- The mission state exists in Zustand, but zones, cinematics, dialogue, and the full repair sequence are not implemented.
 - The player uses octree collision and simple movement rules, not a complete gameplay physics stack.
 - Editor save-to-server is implemented as a Vite dev-server plugin, not a production backend API.

docs/technical/zustand.md

@@ -130,6 +130,14 @@ This keeps reusable gameplay components such as repair flows from duplicating mi
 
 `src/world/GameStageContent.tsx` subscribes to `mainState` and mounts stage-specific content.
 
+For repair missions, it mounts the reusable `RepairGame` component with a mission id:
+
+```tsx
+<RepairGame mission="bike" position={[8, 0, -6]} />
+```
+
+`RepairGame` reads the active mission step from the store and writes transitions through generic actions such as `setMissionStep`. This keeps the scene component small and avoids mission-specific branching inside the repair flow.
+
 That means the scene can progressively move toward this pattern:
 
 ```tsx
@@ -173,4 +181,4 @@ Current overlays:
 
 ## Next Steps
 
-The next natural step is to replace the temporary stage anchors in `GameStageContent` with real stage components, for example `IntroContent`, `BikeContent`, `PyloneContent`, `FermeContent`, and `OutroContent`.
+The next natural step is to extend `RepairGame` beyond `waiting -> inspected` with fragmentation, scanning, repairing, and completion behavior.

docs/user/features.md

@@ -27,6 +27,12 @@ This document lists features that are implemented in the current codebase.
 - Physics-backed gameplay objects can be mounted inside stage content without replacing player octree collision
 - Interaction prompt shown for trigger interactions
 
+## Repair Gameplay
+
+- Reusable production `RepairGame` mounted for `bike`, `pylone`, and `ferme` mission states
+- Repair mission config shared through `src/data/gameplay/repairMissions.ts`
+- First repair-game slice supports `waiting -> inspected` with `.webm` interaction prompts and repair case spawn
+
 ## Audio
 
 - One-shot sound playback for trigger interactions
@@ -57,7 +63,7 @@ This document lists features that are implemented in the current codebase.
 
 ## Not Implemented Yet
 
-- mission system
+- complete mission system
 - zone system
 - cinematic system
 - dialogue system

docs/user/main-feature.md

@@ -1,21 +1,20 @@
 # Main Feature
 
-This document explains the current repair-game prototype in La-Fabrik.
+This document explains the current repair-game flow in La-Fabrik.
 
 ## What It Does
 
-The main feature is a repair interaction sandbox mounted in the debug physics scene. It lets the player approach a repair case, open it, and interact with module slots that can show selectable models and exploded-model states.
+The main feature is becoming a reusable repair flow mounted in the production game scene. It lets the player approach the active mission object, inspect it, and bring in the repair case before later repair steps take over.
 
 The current user flow is:
 
-1. Open the app with `?debug`.
-2. Switch the scene to `Physics` in the debug panel.
-3. Move close to the repair case.
-4. Press the interaction key when prompted.
-5. Watch the case open or close with sound feedback.
-6. Interact with repair module slots to cycle/select repair models.
+1. Enter a mission state such as `bike`, `pylone`, or `ferme`.
+2. Move close to the active repair object in the game scene.
+3. Aim at the object and press the interaction key when prompted.
+4. The mission step moves from `waiting` to `inspected`.
+5. The repair case appears near the mission object and can float when the player approaches it.
 
-The production repair flow is now being moved toward reusable mission data for `bike`, `pylone`, and `ferme`. This lets the same future `RepairGame` component read one mission config instead of duplicating per-mission setup.
+The older debug repair sandbox still exists in the physics test scene, but the production path now starts from the reusable `RepairGame` component.
 
 ## Why It Matters
 
@@ -23,15 +22,21 @@ This feature validates the core repair fantasy before a full mission system exis
 
 ## Current Behavior
 
-The repair case reacts to player proximity. When the player is close enough, it floats upward and rotates gently to signal interactivity. When the player moves away, it returns to its resting transform.
+In `waiting`, the active mission renders its repair object and the `interagir.webm` prompt in the game scene. The interaction uses the shared focus/raycast interaction system, so the player still gets the normal `E` prompt.
 
-Interacting with the case toggles its open state. The lid animation is handled with GSAP because it is a discrete interaction animation, not a continuous per-frame loop.
+When the player inspects the object, `RepairGame` writes `inspected` through the generic mission store action. The repair case then appears from the mission config. When the player is close enough, the existing case model floats upward and rotates gently to signal interactivity.
 
-Repair module slots are configured from static gameplay data. They render selectable repair models and can use exploded model visualization to show parts separated from their original positions.
+Repair module slots and exploded-model behavior still exist in the debug prototype. They will be migrated into the reusable repair flow in later steps.
 
 ## Key Files
 
 - `src/world/debug/TestMap.tsx` mounts the repair-game prototype in the debug physics scene.
+- `src/world/GameStageContent.tsx` mounts production `RepairGame` instances for `bike`, `pylone`, and `ferme`.
+- `src/components/three/gameplay/RepairGame.tsx` composes the reusable production repair flow.
+- `src/components/three/gameplay/RepairInspectionObject.tsx` handles the `waiting` inspection interaction.
+- `src/components/three/gameplay/RepairMissionCase.tsx` renders the mission repair case after inspection.
+- `src/components/three/gameplay/RepairPromptVideo.tsx` renders `.webm` prompts inside the 3D scene.
+- `src/hooks/gameplay/useRepairMissionStep.ts` reads the active mission step from the game store.
 - `src/components/three/gameplay/RepairGameZone.tsx` composes the repair-game zone.
 - `src/components/three/gameplay/RepairCaseObject.tsx` connects the repair case to trigger interaction and audio.
 - `src/components/three/gameplay/RepairCaseModel.tsx` renders and animates the case model.
@@ -43,12 +48,12 @@ Repair module slots are configured from static gameplay data. They render select
 - `src/data/gameplay/repairMissions.ts` stores reusable repair mission config for `bike`, `pylone`, and `ferme`.
 - `src/managers/stores/useGameStore.ts` stores mission progression state and generic mission step helpers.
 
-## Debug Requirements
+## Runtime Requirements
 
-The repair-game prototype currently requires:
+The production repair flow currently requires:
 
-- the app opened with `?debug`
-- the debug scene set to `Physics`
+- the active `mainState` to be one of `bike`, `pylone`, or `ferme`
+- `GameStageContent` mounted inside the game scene Rapier `Physics` boundary
 - model assets available under `public/models/`
 - sound assets available under `public/sounds/`
 
@@ -58,7 +63,7 @@ Frontend command:
 npm run dev
 ```
 
-Debug URL:
+Debug URL for state switching and inspection:
 
 ```txt
 http://localhost:5173/?debug
@@ -77,8 +82,7 @@ python -m backend.main
 
 ## Current Limitations
 
-- It is mounted only in the debug physics scene.
-- The production `RepairGame` component is not mounted in the main game scene yet.
+- The reusable production `RepairGame` currently covers only `waiting -> inspected`.
 - Mission progression exists in Zustand, but the full repair mission flow is still being integrated.
 - There is no central `GameManager` in this branch.
 - Hand tracking is available as debug interaction input, not as final repair gameplay.

src/components/three/gameplay/RepairGame.tsx

@@ -0,0 +1,45 @@
+import { RepairInspectionObject } from "@/components/three/gameplay/RepairInspectionObject";
+import { RepairMissionCase } from "@/components/three/gameplay/RepairMissionCase";
+import { REPAIR_MISSIONS } from "@/data/gameplay/repairMissions";
+import { useRepairMissionStep } from "@/hooks/gameplay/useRepairMissionStep";
+import type { RepairMissionId } from "@/managers/stores/useGameStore";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import type { ModelTransformProps, Vector3Tuple } from "@/types/three/three";
+import { toVector3Scale } from "@/utils/three/scale";
+
+interface RepairGameProps extends Required<
+  Pick<ModelTransformProps, "position">
+> {
+  mission: RepairMissionId;
+  rotation?: Vector3Tuple;
+  scale?: ModelTransformProps["scale"];
+}
+
+export function RepairGame({
+  mission,
+  position,
+  rotation = [0, 0, 0],
+  scale = 1,
+}: RepairGameProps): React.JSX.Element | null {
+  const config = REPAIR_MISSIONS[mission];
+  const mainState = useGameStore((state) => state.mainState);
+  const setMissionStep = useGameStore((state) => state.setMissionStep);
+  const step = useRepairMissionStep(mission);
+  const parsedScale = toVector3Scale(scale);
+
+  if (mainState !== mission) return null;
+  if (step === "locked") return null;
+
+  return (
+    <group position={position} rotation={rotation} scale={parsedScale}>
+      {step === "waiting" ? (
+        <RepairInspectionObject
+          config={config}
+          worldPosition={position}
+          onInspect={() => setMissionStep(mission, "inspected")}
+        />
+      ) : null}
+      {step !== "waiting" ? <RepairMissionCase config={config} /> : null}
+    </group>
+  );
+}

src/components/three/gameplay/RepairInspectionObject.tsx

@@ -0,0 +1,33 @@
+import { InteractableObject } from "@/components/three/interaction/InteractableObject";
+import { RepairObjectModel } from "@/components/three/gameplay/RepairObjectModel";
+import { RepairPromptVideo } from "@/components/three/gameplay/RepairPromptVideo";
+import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
+import type { Vector3Tuple } from "@/types/three/three";
+
+interface RepairInspectionObjectProps {
+  config: RepairMissionConfig;
+  worldPosition: Vector3Tuple;
+  onInspect: () => void;
+}
+
+export function RepairInspectionObject({
+  config,
+  worldPosition,
+  onInspect,
+}: RepairInspectionObjectProps): React.JSX.Element {
+  return (
+    <InteractableObject
+      kind="trigger"
+      label={`Inspecter ${config.label}`}
+      position={worldPosition}
+      onPress={onInspect}
+    >
+      <RepairObjectModel
+        label={config.label}
+        modelPath={config.modelPath}
+        scale={0.9}
+      />
+      <RepairPromptVideo src={config.interactUiPath} />
+    </InteractableObject>
+  );
+}

src/components/three/gameplay/RepairMissionCase.tsx

@@ -0,0 +1,21 @@
+import { RepairCaseModel } from "@/components/three/gameplay/RepairCaseModel";
+import { REPAIR_CASE_MODEL_PATH } from "@/data/gameplay/repairCaseConfig";
+import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
+
+interface RepairMissionCaseProps {
+  config: RepairMissionConfig;
+}
+
+export function RepairMissionCase({
+  config,
+}: 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}
+    />
+  );
+}

src/components/three/gameplay/RepairObjectModel.tsx

@@ -0,0 +1,96 @@
+import type { ReactNode } from "react";
+import { Component } from "react";
+import { SimpleModel } from "@/components/three/models/SimpleModel";
+import type { Vector3Scale, Vector3Tuple } from "@/types/three/three";
+import { logModelLoadError } from "@/utils/three/modelLoadLogger";
+
+interface RepairObjectModelProps {
+  label: string;
+  modelPath: string;
+  position?: Vector3Tuple;
+  rotation?: Vector3Tuple;
+  scale?: Vector3Scale;
+}
+
+interface RepairObjectModelBoundaryProps extends RepairObjectModelProps {
+  children: ReactNode;
+}
+
+interface RepairObjectModelBoundaryState {
+  hasError: boolean;
+}
+
+class RepairObjectModelBoundary extends Component<
+  RepairObjectModelBoundaryProps,
+  RepairObjectModelBoundaryState
+> {
+  constructor(props: RepairObjectModelBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): RepairObjectModelBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error): void {
+    logModelLoadError(
+      {
+        modelPath: this.props.modelPath,
+        position: this.props.position,
+        rotation: this.props.rotation,
+        scale: this.props.scale,
+        scope: `RepairObjectModel.${this.props.label}`,
+      },
+      error,
+    );
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return <RepairObjectFallback label={this.props.label} />;
+    }
+
+    return this.props.children;
+  }
+}
+
+export function RepairObjectModel({
+  label,
+  modelPath,
+  position = [0, 0, 0],
+  rotation = [0, 0, 0],
+  scale = 1,
+}: RepairObjectModelProps): React.JSX.Element {
+  return (
+    <RepairObjectModelBoundary
+      label={label}
+      modelPath={modelPath}
+      position={position}
+      rotation={rotation}
+      scale={scale}
+    >
+      <SimpleModel
+        modelPath={modelPath}
+        position={position}
+        rotation={rotation}
+        scale={scale}
+      />
+    </RepairObjectModelBoundary>
+  );
+}
+
+function RepairObjectFallback({ label }: { label: string }): React.JSX.Element {
+  return (
+    <group>
+      <mesh castShadow receiveShadow>
+        <boxGeometry args={[1.4, 1.4, 1.4]} />
+        <meshStandardMaterial color="#facc15" roughness={0.6} wireframe />
+      </mesh>
+      <mesh position={[0, 1.05, 0]}>
+        <sphereGeometry args={[0.08, 16, 16]} />
+        <meshBasicMaterial color={label ? "#f8fafc" : "#facc15"} />
+      </mesh>
+    </group>
+  );
+}

src/components/three/gameplay/RepairPromptVideo.tsx

@@ -0,0 +1,34 @@
+import { Html } from "@react-three/drei";
+import type { Vector3Tuple } from "@/types/three/three";
+
+interface RepairPromptVideoProps {
+  src: string;
+  position?: Vector3Tuple;
+  size?: number;
+}
+
+export function RepairPromptVideo({
+  src,
+  position = [0, 1.8, 0],
+  size = 96,
+}: RepairPromptVideoProps): React.JSX.Element {
+  return (
+    <Html position={position} center transform occlude={false}>
+      <video
+        aria-hidden="true"
+        autoPlay
+        loop
+        muted
+        playsInline
+        src={src}
+        style={{
+          display: "block",
+          height: size,
+          objectFit: "contain",
+          pointerEvents: "none",
+          width: size,
+        }}
+      />
+    </Html>
+  );
+}

src/data/docs/docsTranslations.ts

@@ -98,7 +98,7 @@ Ce document décrit le code réellement présent aujourd'hui dans le dépôt.
   - soit la carte principale, soit la scène de test physique debug
   - le rig joueur quand le mode caméra actif est \`player\`
 - \`src/world/GameMap.tsx\` charge les modèles de carte disponibles et construit l'octree de collision.
-- \`src/world/GameStageContent.tsx\` est enveloppé dans le contexte Rapier \`Physics\` dans la scène de jeu de production afin que les objets gameplay de stage puissent utiliser la physique sans migrer la carte ou le joueur vers Rapier.
+- \`src/world/GameStageContent.tsx\` est enveloppé dans le contexte Rapier \`Physics\` dans la scène de jeu de production afin que les objets gameplay de stage puissent utiliser la physique sans migrer la carte ou le joueur vers Rapier. Il monte maintenant des instances réutilisables de \`RepairGame\` pour les états de mission \`bike\`, \`pylone\` et \`ferme\`.
 - \`src/world/debug/TestMap.tsx\` fournit une carte orientée debug pour les interactions et la physique.
 - \`src/world/player/Player.tsx\` monte la caméra et le contrôleur.
 - \`src/world/player/PlayerController.tsx\` gère le mouvement pointer lock, le saut et les inputs d'interaction.
@@ -140,12 +140,20 @@ Le joueur et l'octree de carte doivent rester hors du provider Rapier tant qu'il
 - \`src/components/debug/scene/DebugCameraControls.tsx\` monte la caméra libre debug.
 - Les contrôles globaux \`lil-gui\` incluent camera mode, scene mode, \`R3F Perf\` et \`Debug Overlay\`; les contrôles d'interaction vivent dans le dossier \`Interaction\`.
 
+## Domaines de composants 3D
+
+- \`src/components/three/models/\` contient les helpers de modèles réutilisables comme \`ExplodableModel\`.
+- \`src/components/three/interaction/\` contient les wrappers d'interaction réutilisables comme \`InteractableObject\`, \`TriggerObject\` et \`GrabbableObject\`.
+- \`src/components/three/handTracking/\` contient les modèles debug R3F liés au hand tracking, comme les gants.
+- \`src/components/three/gameplay/\` contient les composants de gameplay de réparation : le flow de production réutilisable \`RepairGame\`, la mallette de réparation, la zone debug repair et les slots de modules.
+- \`src/components/three/world/\` contient les objets world/environnement réutilisables comme \`SkyModel\`.
+
 ## Limites actuelles
 
 - Le dépôt est encore un prototype, pas le runtime complet du jeu.
 - \`src/world/debug/TestMap.tsx\` fait encore partie de la composition active.
 - Il n'existe pas encore d'orchestrateur gameplay central comme \`GameManager\`.
-- Les systèmes de missions, zones, cinématiques et dialogues ne sont pas implémentés.
+- L'état de mission existe dans Zustand, mais les zones, cinématiques, dialogues et le flow complet de réparation ne sont pas implémentés.
 - Le joueur utilise une collision octree et des règles simples, pas une pile physique gameplay complète.
 `;
 
@@ -347,6 +355,14 @@ Cela évite aux composants gameplay réutilisables, comme les flows de réparati
 
 \`src/world/GameStageContent.tsx\` s'abonne à \`mainState\` et monte le contenu spécifique au state courant.
 
+Pour les missions de réparation, il monte le composant réutilisable \`RepairGame\` avec un id de mission :
+
+\`\`\`tsx
+<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.
+
 La scène peut donc évoluer progressivement vers ce pattern :
 
 \`\`\`tsx
@@ -390,7 +406,7 @@ Overlays actuels :
 
 ## Prochaines étapes
 
-La prochaine étape naturelle est de remplacer les ancres temporaires de \`GameStageContent\` par de vrais composants de phase, par exemple \`IntroContent\`, \`BikeContent\`, \`PyloneContent\`, \`FermeContent\` et \`OutroContent\`.
+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.
 `;
 
 export const featuresFr = `# Fonctionnalités implémentées
@@ -422,6 +438,12 @@ Ce document liste les fonctionnalités présentes dans le code actuel.
 - Les objets gameplay avec physique peuvent être montés dans le contenu de stage sans remplacer la collision octree du joueur
 - Prompt d'interaction affiché pour les interactions trigger
 
+## Gameplay de réparation
+
+- \`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
+
 ## Audio
 
 - Lecture de sons one-shot pour les interactions trigger
@@ -438,7 +460,7 @@ Ce document liste les fonctionnalités présentes dans le code actuel.
 
 ## Pas encore implémenté
 
-- système de missions
+- système de missions complet
 - système de zones
 - système de cinématiques
 - système de dialogues

src/hooks/gameplay/useRepairMissionStep.ts

@@ -0,0 +1,9 @@
+import type {
+  MissionStep,
+  RepairMissionId,
+} from "@/managers/stores/useGameStore";
+import { useGameStore } from "@/managers/stores/useGameStore";
+
+export function useRepairMissionStep(mission: RepairMissionId): MissionStep {
+  return useGameStore((state) => state[mission].currentStep);
+}

src/world/GameStageContent.tsx

@@ -1,3 +1,4 @@
+import { RepairGame } from "@/components/three/gameplay/RepairGame";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import type { Vector3Tuple } from "@/types/three/three";
 
@@ -33,11 +34,11 @@ export function GameStageContent(): React.JSX.Element {
     case "intro":
       return <StageAnchor color="#7dd3fc" position={[0, 4, 0]} />;
     case "bike":
-      return <StageAnchor color="#facc15" position={[8, 3, -6]} />;
+      return <RepairGame mission="bike" position={[8, 0, -6]} />;
     case "pylone":
-      return <StageAnchor color="#a78bfa" position={[64, 6, -66]} />;
+      return <RepairGame mission="pylone" position={[64, 0, -66]} />;
     case "ferme":
-      return <StageAnchor color="#86efac" position={[-24, 5, 42]} />;
+      return <RepairGame mission="ferme" position={[-24, 0, 42]} />;
     case "outro":
       return <StageAnchor color="#fb7185" position={[0, 6, 10]} scale={1.25} />;
   }