update remove naming step

docs/technical/game-states.md

@@ -0,0 +1,226 @@
+# Game States & Substates
+
+Documentation technique pour le testing et debugging du flow de jeu.
+
+## Vue d'ensemble
+
+```
+intro ──► bike ──► pylone ──► ferme ──► outro
+```
+
+---
+
+## Main States
+
+| State    | Description                                                        |
+| -------- | ------------------------------------------------------------------ |
+| `intro`  | Séquence d'introduction (cinématique, naming, premier déplacement) |
+| `bike`   | Mission de réparation du vélo                                      |
+| `pylone` | Quête du pylone (alert → searching → helped → manipulation)        |
+| `ferme`  | Mission de réparation de la ferme                                  |
+| `outro`  | Fin du jeu                                                         |
+
+---
+
+## Intro (GameStep)
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ intro.currentStep                                          │
+└─────────────────────────────────────────────────────────────┘
+
+intro ──► sequence_video ──► naming ──► start-move ──► bike
+```
+
+### Étapes
+
+| Step             | Trigger  | Action                                         | Passage vers                                     |
+| ---------------- | -------- | ---------------------------------------------- | ------------------------------------------------ |
+| `intro`          | Initial  | État initial                                   | Auto → `sequence_video` quand `sceneReady: true` |
+| `sequence_video` | GameFlow | Déclenche la cinématique dans `GameCinematics` | Fin cinématique → `naming`                       |
+| `naming`         | IntroUI  | Affiche l'input pour le prénom                 | Submit → `start-move`                            |
+| `start-move`     | GameFlow | Active le mouvement (`canMove: true`)          | Via zone "fabrikExit" → `bike`                   |
+
+### Transition vers bike
+
+- **Trigger**: Zone `fabrikExit` dans `zones.ts`
+- **Action**: `advanceGameState()` dans `ZoneDetection.tsx`
+- **Résultat**: `mainState: "bike"`, `intro.hasCompleted: true`
+
+---
+
+## Bike (MissionStep)
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ bike.currentStep (MissionStep)                             │
+└─────────────────────────────────────────────────────────────┘
+
+locked ──► waiting ──► inspected ──► fragmented ──► scanning ──► repairing ──► reassembling ──► done
+```
+
+### Transition vers pylone
+
+- **Trigger**: `bike.currentStep: "done"`
+- **Action**: `completeBikeState()` dans useGameStore
+- **Résultat**: `mainState: "pylone"`, `pylone.currentStep: "locked"`
+
+---
+
+## Pylone (PyloneStep)
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ pylone.currentStep (PyloneStep)                            │
+└─────────────────────────────────────────────────────────────┘
+
+locked (bypass) ──► alert ──► searching ──► helped ──► manipulation ──► outro
+```
+
+### Étapes
+
+| Step           | Trigger                            | Action                             | Passage vers                                              |
+| -------------- | ---------------------------------- | ---------------------------------- | --------------------------------------------------------- |
+| `locked`       | Initial (après bike)               | État initial                       | **Bypass automatique** → `alert` via `advanceGameState()` |
+| `alert`        | `advanceGameState()`               | Affiche l'alerte (à implémenter)   | Via `advanceGameState()`                                  |
+| `searching`    | `advanceGameState()`               | Déclenché par zone "searchingZone" | Via `advanceGameState()`                                  |
+| `helped`       | Interaction avec `NPCHelper`       | Dialogue avec le villageois        | Via interaction 3D                                        |
+| `manipulation` | Interaction avec `PyloneDestroyed` | Interaction avec l'objet central   | Via `advanceGameState()` → `outro`                        |
+
+### Bypass automatique
+
+```typescript
+// useGameStore.ts - advancePyloneStep()
+if (state.pylone.currentStep === "locked") {
+  return { pylone: { ...state.pylone, currentStep: "alert" } };
+}
+```
+
+### Transition vers outro
+
+- **Trigger**: `pylone.currentStep: "manipulation"` + `advanceGameState()`
+- **Action**: `advancePyloneStep()` détecte fin de la séquence
+- **Résultat**: `mainState: "outro"`
+
+---
+
+## Ferme (MissionStep)
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ ferme.currentStep (MissionStep)                             │
+└─────────────────────────────────────────────────────────────┘
+
+locked ──► waiting ──► inspected ──► fragmented ──► scanning ──► repairing ──► reassembling ──► done
+```
+
+### Transition vers outro
+
+- **Trigger**: `ferme.currentStep: "done"`
+- **Action**: `completeFermeState()` dans useGameStore
+- **Résultat**: `mainState: "outro"`, `ferme.irrigationFixed: true`
+
+---
+
+## Outro
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ outro.hasStarted                                           │
+└─────────────────────────────────────────────────────────────┘
+
+waiting ──► started
+```
+
+---
+
+## Debug Panel
+
+Le debug panel permet de tester toutes les transitions :
+
+### Utilisation
+
+1. Ouvrir le jeu en mode debug (`Debug: true` dans `Debug.ts`)
+2. Le panneau "Game State" apparaît en bas à gauche
+3. **Main state**: Sélectionner le state principal
+4. **Sub state**: Sélectionner le sub-state
+5. **Previous/Next step**: Avancer ou reculer d'un step
+6. **Reset**: Remettre à l'état initial
+
+### Raccourcis clavier
+
+| Action  | Clavier            |
+| ------- | ------------------ |
+| Avancer | Debug panel button |
+| Reculer | Debug panel button |
+| Reset   | Debug panel button |
+
+---
+
+## Comment tester chaque section
+
+### Tester l'intro
+
+1. Vérifier que `sceneReady: false` au démarrage
+2. Attendre que le loader termine (`sceneReady: true`)
+3. Vérifier `intro.currentStep: "intro"` → auto vers `sequence_video`
+4. Si cinématique fonctionne : `sequence_video` → `naming`
+5. Entrer un prénom : `naming` → `start-move`
+6. Vérifier `canMove: true` après `start-move`
+7. Entrer dans la zone `fabrikExit` → `mainState: "bike"`
+
+### Tester bike
+
+1. Via debug panel, avancer jusqu'à `done`
+2. Vérifier `mainState: "pylone"`
+
+### Tester pylone
+
+1. Via debug panel, avancer (bypass `locked` → `alert`)
+2. Vérifier `pylone.currentStep: "alert"`
+3. Avancer : `alert` → `searching` → `helped` → `manipulation`
+4. Après `manipulation`, vérifier `mainState: "outro"`
+
+### Tester ferme
+
+1. Via debug panel, avancer dans bike jusqu'à `done`
+2. Vérifier `mainState: "pylone"` → `ferme` (après pylone)
+3. Avancer jusqu'à `done`
+4. Vérifier `mainState: "outro"`
+
+---
+
+## Fichiers clés
+
+| Fichier                                           | Rôle                                  |
+| ------------------------------------------------- | ------------------------------------- |
+| `src/managers/stores/useGameStore.ts`             | Store Zustand avec toutes les actions |
+| `src/types/game.ts`                               | Définition de `GameStep`              |
+| `src/types/gameplay/pylone.ts`                    | Définition de `PyloneStep`            |
+| `src/types/gameplay/repairMission.ts`             | Définition de `MissionStep`           |
+| `src/components/game/GameFlow.tsx`                | Logique de transition de l'intro      |
+| `src/components/zone/ZoneDetection.tsx`           | Déclenchement des zones               |
+| `src/components/ui/debug/GameStateDebugPanel.tsx` | Outil de debug                        |
+
+---
+
+## État initial
+
+```typescript
+{
+  mainState: "intro",
+  isCinematicPlaying: false,
+  sceneReady: false,
+  missionFlow: {
+    activityCity: true,
+    canMove: false,
+    dialogMessage: null,
+    playerName: "",
+  },
+  intro: { currentStep: "intro", dialogueAudio: null, hasCompleted: false, isBikeUnlocked: false },
+  bike: { currentStep: "locked", dialogueAudio: null, isRepaired: false },
+  pylone: { currentStep: "locked", dialogueAudio: null, isPowered: false },
+  ferme: { currentStep: "locked", dialogueAudio: null, irrigationFixed: false },
+  outro: { dialogueAudio: null, hasStarted: false },
+}
+```

public/cinematics.json

@@ -1,6 +1,21 @@
 {
   "version": 1,
   "cinematics": [
+    {
+      "id": "intro_sequence",
+      "trigger": "intro_sequence",
+      "cameraKeyframes": [
+        { "time": 0, "position": [8, 5, 12], "target": [0, 2, 0] },
+        { "time": 8, "position": [12, 4, -6], "target": [10, 1.4, -8] },
+        { "time": 16, "position": [5, 6, -15], "target": [0, 3, -20] },
+        { "time": 24, "position": [0, 8, -30], "target": [0, 0, -40] }
+      ],
+      "dialogueCues": [
+        { "time": 0, "dialogueId": "intro_welcome" },
+        { "time": 8, "dialogueId": "intro_explanation" },
+        { "time": 16, "dialogueId": "intro_mission" }
+      ]
+    },
     {
       "id": "intro_overview",
       "timecode": 0,

src/components/ebike/Ebike.tsx

@@ -1,230 +0,0 @@
-import { useEffect, useRef } from "react";
-import * as THREE from "three";
-import { useFrame, useThree } from "@react-three/fiber";
-import { InteractableObject } from "@/components/three/interaction/InteractableObject";
-import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
-import { useClonedObject } from "@/hooks/three/useClonedObject";
-import { useDebugFolder } from "@/hooks/debug/useDebugFolder";
-import { animateCameraTransformTransition } from "@/world/GameCinematics";
-import { useGameStore } from "@/managers/stores/useGameStore";
-import { PLAYER_EYE_HEIGHT } from "@/data/player/playerConfig";
-import type { Vector3Tuple } from "@/types/three/three";
-
-const EBIKE_MODEL_PATH = "/models/ebike/model.gltf";
-
-export interface CameraTransform {
-  position: Vector3Tuple;
-  rotation: Vector3Tuple;
-}
-
-export const EBIKE_CAMERA_TRANSFORM: CameraTransform = {
-  position: [-3.5, 6, 0],
-  rotation: [-10, -90, 0],
-};
-
-const EBIKE_DROP_PLAYER_TRANSFORM: CameraTransform = {
-  position: [0, 1.5, -3],
-  rotation: [0, 0, 0],
-};
-
-interface EbikeProps {
-  position: Vector3Tuple;
-}
-
-export function Ebike({ position }: EbikeProps): React.JSX.Element {
-  const groupRef = useRef<THREE.Group>(null);
-  const { scene } = useLoggedGLTF(EBIKE_MODEL_PATH, {
-    scope: "Ebike",
-    position: position,
-  });
-  const model = useClonedObject(scene);
-  const movementMode = useGameStore((state) => state.player.movementMode);
-  const camera = useThree((state) => state.camera);
-
-  const restingPosition = useRef<Vector3Tuple>([
-    position[0],
-    position[1] - PLAYER_EYE_HEIGHT,
-    position[2],
-  ]);
-  const restingRotation = useRef<number>(0);
-  const forkRef = useRef<THREE.Object3D | null>(null);
-
-  useEffect(() => {
-    if (model) {
-      const fork = model.getObjectByName("fourche");
-      if (fork) {
-        forkRef.current = fork;
-      }
-    }
-  }, [model]);
-
-  useEffect(() => {
-    (window as any).ebikeVisualGroup = groupRef;
-    (window as any).ebikeParkedPosition = restingPosition.current;
-    (window as any).ebikeParkedRotation = restingRotation.current;
-    return () => {
-      (window as any).ebikeVisualGroup = null;
-      (window as any).ebikeParkedPosition = null;
-      (window as any).ebikeParkedRotation = null;
-    };
-  }, []);
-
-  useFrame((_, delta) => {
-    if (groupRef.current) {
-      if (movementMode === "ebike") {
-        restingPosition.current = [
-          groupRef.current.position.x,
-          groupRef.current.position.y,
-          groupRef.current.position.z,
-        ];
-        restingRotation.current = groupRef.current.rotation.y;
-
-        // Smoothly rotate the front fork ("fourche") up to 15 degrees in its own Z axis
-        const steerFactor = (window as any).ebikeSteerFactor || 0;
-        if (forkRef.current) {
-          // 15 degrees is 0.26 radians
-          const targetForkRotation = steerFactor * 0.26;
-          forkRef.current.rotation.z = THREE.MathUtils.lerp(
-            forkRef.current.rotation.z,
-            targetForkRotation,
-            12 * delta
-          );
-        }
-      } else {
-        groupRef.current.position.set(...restingPosition.current);
-        groupRef.current.rotation.set(0, restingRotation.current, 0);
-
-        // Reset fork rotation when parked
-        if (forkRef.current) {
-          forkRef.current.rotation.z = 0;
-        }
-      }
-      (window as any).ebikeParkedPosition = restingPosition.current;
-      (window as any).ebikeParkedRotation = restingRotation.current;
-    }
-  });
-
-  const camPointPos: Vector3Tuple = [
-    restingPosition.current[0] + EBIKE_CAMERA_TRANSFORM.position[0],
-    restingPosition.current[1] + EBIKE_CAMERA_TRANSFORM.position[1],
-    restingPosition.current[2] + EBIKE_CAMERA_TRANSFORM.position[2],
-  ];
-  const dropPointPos: Vector3Tuple = [
-    restingPosition.current[0] + EBIKE_DROP_PLAYER_TRANSFORM.position[0],
-    restingPosition.current[1] + EBIKE_DROP_PLAYER_TRANSFORM.position[1],
-    restingPosition.current[2] + EBIKE_DROP_PLAYER_TRANSFORM.position[2],
-  ];
-
-  const handleInteract = (): void => {
-    if (movementMode === "walk") {
-      const cameraOffset = new THREE.Vector3(...EBIKE_CAMERA_TRANSFORM.position);
-      cameraOffset.applyAxisAngle(new THREE.Vector3(0, 1, 0), restingRotation.current);
-
-      const targetCamPos: Vector3Tuple = [
-        restingPosition.current[0] + cameraOffset.x,
-        restingPosition.current[1] + cameraOffset.y,
-        restingPosition.current[2] + cameraOffset.z,
-      ];
-
-      const targetRotation: Vector3Tuple = [
-        EBIKE_CAMERA_TRANSFORM.rotation[0],
-        EBIKE_CAMERA_TRANSFORM.rotation[1] + THREE.MathUtils.radToDeg(restingRotation.current),
-        EBIKE_CAMERA_TRANSFORM.rotation[2],
-      ];
-
-      animateCameraTransformTransition(targetCamPos, targetRotation, 1, () => {
-        useGameStore.getState().setPlayerMovementMode("ebike");
-      });
-    } else {
-      const currentPos = new THREE.Vector3();
-      if (groupRef.current) {
-        groupRef.current.getWorldPosition(currentPos);
-      } else {
-        currentPos.set(...position);
-      }
-
-      const targetCamPos: Vector3Tuple = [
-        currentPos.x + EBIKE_DROP_PLAYER_TRANSFORM.position[0],
-        currentPos.y + EBIKE_DROP_PLAYER_TRANSFORM.position[1],
-        currentPos.z + EBIKE_DROP_PLAYER_TRANSFORM.position[2],
-      ];
-
-      // Get camera's current rotation in degrees so we keep the exact orientation during dismount
-      const currentEuler = new THREE.Euler().setFromQuaternion(camera.quaternion, "YXZ");
-      const targetRotation: Vector3Tuple = [
-        THREE.MathUtils.radToDeg(currentEuler.x),
-        THREE.MathUtils.radToDeg(currentEuler.y),
-        THREE.MathUtils.radToDeg(currentEuler.z),
-      ];
-
-      animateCameraTransformTransition(targetCamPos, targetRotation, 1, () => {
-        useGameStore.getState().setPlayerMovementMode("walk");
-      });
-    }
-  };
-
-  const handleInteractRef = useRef(handleInteract);
-  handleInteractRef.current = handleInteract;
-
-  const debugRef = useRef({ showCameraPoints: true });
-  const debugActions = useRef({
-    toggleRide: () => {
-      handleInteractRef.current();
-    }
-  });
-
-  useDebugFolder("Ebike", (folder) => {
-    folder
-      .add(debugRef.current, "showCameraPoints")
-      .name("Show Camera Points")
-      .onChange((value: boolean) => {
-        debugRef.current.showCameraPoints = value;
-      });
-
-    folder
-      .add(debugActions.current, "toggleRide")
-      .name("Monter / Descendre");
-  });
-
-  return (
-    <>
-      <group ref={groupRef} position={position}>
-        <primitive object={model} />
-        <InteractableObject
-          kind="trigger"
-          label={
-            movementMode === "walk" ? "Monter sur le bike" : "Descendre du bike"
-          }
-          position={position}
-          radius={15}
-          onPress={handleInteract}
-        >
-          <mesh>
-            <boxGeometry args={[10, 13, 2]} />
-            <meshBasicMaterial colorWrite={false} depthWrite={false} />
-          </mesh>
-        </InteractableObject>
-      </group>
-      {debugRef.current.showCameraPoints && (
-        <>
-          <mesh position={camPointPos}>
-            <sphereGeometry args={[0.3, 16, 16]} />
-            <meshStandardMaterial
-              color="yellow"
-              emissive="yellow"
-              emissiveIntensity={0.5}
-            />
-          </mesh>
-          <mesh position={dropPointPos}>
-            <sphereGeometry args={[0.3, 16, 16]} />
-            <meshStandardMaterial
-              color="cyan"
-              emissive="cyan"
-              emissiveIntensity={0.5}
-            />
-          </mesh>
-        </>
-      )}
-    </>
-  );
-}

src/components/game/GameFlow.tsx

@@ -1,64 +1,36 @@
 import { useEffect, useRef } from "react";
-import { AudioManager } from "@/managers/AudioManager";
 import { useGameStore } from "@/managers/stores/useGameStore";
-import { AUDIO_PATHS } from "@/data/audioConfig";
 
 export function GameFlow(): null {
   const step = useGameStore((state) => state.intro.currentStep);
   const setStep = useGameStore((state) => state.setIntroStep);
-  const setActivityCity = useGameStore((state) => state.setActivityCity);
+  const playVideo = useGameStore((state) => state.playVideo);
+  const isCinematicPlaying = useGameStore((state) => state.isCinematicPlaying);
+  const sceneReady = useGameStore((state) => state.sceneReady);
   const setCanMove = useGameStore((state) => state.setCanMove);
   const hasInitialized = useRef(false);
 
   useEffect(() => {
-    if (!hasInitialized.current && step === "intro") {
+    if (!hasInitialized.current && step === "intro" && sceneReady) {
       hasInitialized.current = true;
-      setStep("start-intro");
+      setStep("sequence_video");
+      playVideo("/videos/intro.webm");
     }
-  }, [step, setStep]);
+  }, [step, setStep, sceneReady, playVideo]);
 
   useEffect(() => {
-    if (step === "start-intro") {
-      const audio = AudioManager.getInstance();
-      audio.playSoundWithCallback(AUDIO_PATHS.intro, 0.5, () => {
-        setStep("naming");
-      });
-
-      return () => {};
+    if (step === "sequence_video" && !isCinematicPlaying) {
+      setStep("start-move");
     }
+  }, [step, isCinematicPlaying, setStep]);
 
-    if (step === "bienvenue") {
-      const audio = AudioManager.getInstance();
-      audio.playSoundWithCallback(AUDIO_PATHS.bienvenue, 0.5, () => {
-        setCanMove(true);
-        setStep("star-move");
-      });
-
-      return () => {};
-    }
-
-    if (step === "mission2") {
-      setActivityCity(false);
-      const audio = AudioManager.getInstance();
-      audio.playSound(AUDIO_PATHS.alertCentral, 0.5);
-    }
-
-    if (step === "searching") {
-      const audio = AudioManager.getInstance();
-      audio.playSound(AUDIO_PATHS.searching, 0.5);
-    }
-
-    if (step === "helped") {
-      const audio = AudioManager.getInstance();
-      audio.playSound(AUDIO_PATHS.helped, 0.5);
-    }
-
-    if (step === "manipulation") {
-      setCanMove(false);
+  useEffect(() => {
+    if (step === "start-move") {
+      setCanMove(true);
     }
 
     return undefined;
-  }, [step, setStep, setActivityCity, setCanMove]);
+  }, [step, setCanMove]);
 
   return null;
 }

src/components/three/NetTest.tsx

@@ -0,0 +1,25 @@
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { createNetShader } from "@/shaders/NetShader";
+
+export function NetTest(): React.JSX.Element {
+  const materialRef = useRef<THREE.ShaderMaterial>(null);
+
+  useFrame((_, delta) => {
+    if (materialRef.current) {
+      materialRef.current.uniforms.uTime.value += delta;
+    }
+  });
+
+  return (
+    <mesh position={[0, 2, -5]}>
+      <planeGeometry args={[2, 2, 1, 1]} />
+      <primitive
+        object={createNetShader()}
+        ref={materialRef}
+        attach="material"
+      />
+    </mesh>
+  );
+}

src/components/three/interaction/NPCHelper.tsx

@@ -8,17 +8,17 @@ interface NPCHelperProps {
 }
 
 export function NPCHelper({ position }: NPCHelperProps): React.JSX.Element {
-  const step = useGameStore((state) => state.intro.currentStep);
-  const setStep = useGameStore((state) => state.setIntroStep);
+  const step = useGameStore((state) => state.pylone.currentStep);
+  const setPyloneStep = useGameStore((state) => state.setPyloneState);
   const debug = Debug.getInstance();
 
   const handlePress = (): void => {
     if (step === "searching") {
-      setStep("helped");
+      setPyloneStep({ currentStep: "helped" });
     }
   };
 
-  const shouldShow = step === "searching" || debug.active;
+  const shouldShow = step === "searching" || step === "helped" || debug.active;
 
   if (!shouldShow) {
     return <></>;

src/components/three/interaction/PyloneDestroyed.tsx

@@ -10,8 +10,8 @@ interface PyloneDestroyedProps {
 export function PyloneDestroyed({
   position,
 }: PyloneDestroyedProps): React.JSX.Element {
-  const step = useGameStore((state) => state.intro.currentStep);
-  const setStep = useGameStore((state) => state.setIntroStep);
+  const step = useGameStore((state) => state.pylone.currentStep);
+  const setPyloneStep = useGameStore((state) => state.setPyloneState);
   const setCanMove = useGameStore((state) => state.setCanMove);
   const showDialog = useGameStore((state) => state.showDialog);
   const debug = Debug.getInstance();
@@ -19,7 +19,7 @@ export function PyloneDestroyed({
   const handlePress = (): void => {
     if (step === "helped") {
       setCanMove(false);
-      setStep("manipulation");
+      setPyloneStep({ currentStep: "manipulation" });
     } else if (step === "searching") {
       showDialog(
         "Cet objet est trop lourd pour le porter tout seul, trouve de l'aide",

src/components/ui/IntroUI.tsx

@@ -1,106 +1,10 @@
-import { useState } from "react";
 import { useGameStore } from "@/managers/stores/useGameStore";
 
-export function IntroUI(): React.JSX.Element | null {
-  const step = useGameStore((state) => state.intro.currentStep);
-  const setPlayerName = useGameStore((state) => state.setPlayerName);
-  const setStep = useGameStore((state) => state.setIntroStep);
-  const [inputValue, setInputValue] = useState("");
-
-  if (step !== "naming") return null;
-
-  const handleSubmit = (): void => {
-    if (inputValue.trim() === "") return;
-
-    setPlayerName(inputValue.trim());
-    setStep("bienvenue");
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent): void => {
-    if (e.key === "Enter") {
-      handleSubmit();
-    }
-  };
-
-  return (
-    <div
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "rgba(0, 0, 0, 0.7)",
-        zIndex: 1000,
-      }}
-    >
-      <div
-        style={{
-          backgroundColor: "#1a1a1a",
-          padding: "2rem",
-          borderRadius: "12px",
-          display: "flex",
-          flexDirection: "column",
-          gap: "1.5rem",
-          minWidth: "300px",
-        }}
-      >
-        <h2
-          style={{
-            color: "#fff",
-            margin: 0,
-            fontSize: "1.5rem",
-            textAlign: "center",
-          }}
-        >
-          Quel est votre prenom ?
-        </h2>
-        <input
-          type="text"
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="Votre prenom"
-          autoFocus
-          style={{
-            padding: "0.75rem",
-            fontSize: "1rem",
-            borderRadius: "6px",
-            border: "1px solid #444",
-            backgroundColor: "#2a2a2a",
-            color: "#fff",
-            outline: "none",
-          }}
-        />
-        <button
-          onClick={handleSubmit}
-          disabled={inputValue.trim() === ""}
-          style={{
-            padding: "0.75rem",
-            fontSize: "1rem",
-            borderRadius: "6px",
-            border: "none",
-            backgroundColor: inputValue.trim() ? "#4a9" : "#444",
-            color: "#fff",
-            cursor: inputValue.trim() ? "pointer" : "not-allowed",
-            transition: "background-color 0.2s",
-          }}
-        >
-          Valider
-        </button>
-      </div>
-    </div>
-  );
-}
-
 export function BienvenueDisplay(): React.JSX.Element | null {
   const step = useGameStore((state) => state.intro.currentStep);
   const playerName = useGameStore((state) => state.missionFlow.playerName);
 
-  if (step !== "bienvenue") return null;
+  if (step !== "start-move") return null;
 
   return (
     <div

src/components/ui/VideoPlayer.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useRef } from "react";
+import { useGameStore } from "@/managers/stores/useGameStore";
+
+export function VideoPlayer(): null {
+  const currentVideo = useGameStore((state) => state.missionFlow.currentVideo);
+  const clearVideo = useGameStore((state) => state.clearVideo);
+  const setCinematicPlaying = useGameStore(
+    (state) => state.setCinematicPlaying,
+  );
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (currentVideo) {
+      setCinematicPlaying(true);
+    }
+  }, [currentVideo, setCinematicPlaying]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && currentVideo) {
+        closeVideo();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [currentVideo]);
+
+  const closeVideo = () => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+    }
+    clearVideo();
+    setCinematicPlaying(false);
+  };
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    const handleEnded = () => {
+      closeVideo();
+    };
+
+    video.addEventListener("ended", handleEnded);
+    return () => video.removeEventListener("ended", handleEnded);
+  }, []);
+
+  if (!currentVideo) return null;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+        backgroundColor: "rgba(0, 0, 0, 0.95)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 9999,
+      }}
+    >
+      <video
+        ref={videoRef}
+        src={currentVideo}
+        autoPlay
+        playsInline
+        style={{
+          maxWidth: "100%",
+          maxHeight: "100%",
+          cursor: "pointer",
+        }}
+        onClick={closeVideo}
+      />
+    </div>
+  );
+}

src/components/ui/debug/GameStateDebugPanel.tsx

@@ -5,6 +5,7 @@ import {
 } from "@/managers/stores/useGameStore";
 import { isMissionStep, MISSION_STEPS } from "@/types/gameplay/repairMission";
 import { GAME_STEPS, type GameStep } from "@/types/game";
+import { PYLONE_STEPS, type PyloneStep } from "@/types/gameplay/pylone";
 
 const MAIN_STATES: MainGameState[] = [
   "intro",
@@ -54,9 +55,11 @@ export function GameStateDebugPanel(): React.JSX.Element {
   const subStateOptions =
     mainState === "intro"
       ? GAME_STEPS
-      : mainState === "outro"
-        ? ["waiting", "started"]
-        : MISSION_STEPS;
+      : mainState === "pylone"
+        ? PYLONE_STEPS
+        : mainState === "outro"
+          ? ["waiting", "started"]
+          : MISSION_STEPS;
 
   function setSubState(nextSubState: string): void {
     if (mainState === "intro") {
@@ -64,6 +67,11 @@ export function GameStateDebugPanel(): React.JSX.Element {
       return;
     }
 
+    if (mainState === "pylone") {
+      setPyloneState({ currentStep: nextSubState as PyloneStep });
+      return;
+    }
+
     if (mainState === "outro") {
       setOutroState({ hasStarted: nextSubState === "started" });
       return;
@@ -76,11 +84,6 @@ export function GameStateDebugPanel(): React.JSX.Element {
       return;
     }
 
-    if (mainState === "pylone") {
-      setPyloneState({ currentStep: nextSubState });
-      return;
-    }
-
     if (mainState === "ferme") {
       setFermeState({ currentStep: nextSubState });
       return;
@@ -95,11 +98,6 @@ export function GameStateDebugPanel(): React.JSX.Element {
       return;
     }
 
-    if (nextMainState === "pylone" && pyloneStep === "locked") {
-      setPyloneState({ currentStep: "waiting" });
-      return;
-    }
-
     if (nextMainState === "ferme" && fermeStep === "locked") {
       setFermeState({ currentStep: "waiting" });
     }

src/components/zone/ZoneDetection.tsx

@@ -14,7 +14,10 @@ export function ZoneDetection(): null {
   const triggeredZones = useRef<Set<string>>(new Set());
   const debug = Debug.getInstance();
   const step = useGameStore((state) => state.intro.currentStep);
+  const mainState = useGameStore((state) => state.mainState);
   const setStep = useGameStore((state) => state.setIntroStep);
+  const setPyloneStep = useGameStore((state) => state.setPyloneState);
+  const advanceGameState = useGameStore((state) => state.advanceGameState);
 
   useEffect(() => {
     if (!debug.active) return;
@@ -65,7 +68,11 @@ export function ZoneDetection(): null {
       const distanceSq = _playerPos.distanceToSquared(_zonePos);
 
       if (distanceSq <= zone.radius * zone.radius) {
-        setStep(zone.targetStep);
+        if (zone.targetStep === "bike" && mainState === "intro") {
+          advanceGameState();
+        } else {
+          setStep(zone.targetStep);
+        }
         triggeredZones.current.add(zone.id);
         break;
       }

src/data/gameplay/repairMissions.ts

@@ -85,51 +85,6 @@ export const REPAIR_MISSIONS: Record<RepairMissionId, RepairMissionConfig> = {
       },
     ],
   },
-  pylone: {
-    id: "pylone",
-    label: "Power pylon",
-    description:
-      "Restore the pylon lamp relay and damaged panel before reconnecting the grid",
-    modelPath: "/models/pylone/model.gltf",
-    stageUiPath: "/assets/UI/centrale.webm",
-    interactUiPath: REPAIR_INTERACT_UI_PATH,
-    brokenUiPath: REPAIR_BROKEN_UI_PATH,
-    case: DEFAULT_REPAIR_CASE,
-    reassemblySeconds: 1.8,
-    requiredReplacementPartId: "pylone-grid-relay-replacement",
-    scanPartSeconds: 1.4,
-    brokenParts: [
-      {
-        id: "pylone-grid-relay",
-        label: "Grid relay",
-        nodeName: "lampe",
-        placeholderName: "placeholder_1",
-      },
-      {
-        id: "pylone-damaged-panel",
-        label: "Damaged solar panel",
-        nodeName: "panneau2",
-        placeholderName: "placeholder_2",
-      },
-    ],
-    replacementParts: [
-      {
-        id: "pylone-grid-relay-replacement",
-        label: "Replacement grid relay",
-        modelPath: "/models/pylone/model.gltf",
-      },
-      {
-        id: "pylone-stone-decoy",
-        label: "Stone counterweight",
-        modelPath: "/models/galet/model.gltf",
-      },
-      {
-        id: "pylone-cooling-decoy",
-        label: "Cooling core",
-        modelPath: "/models/refroidisseur/model.gltf",
-      },
-    ],
-  },
   ferme: {
     id: "ferme",
     label: "Vertical farm",

src/data/player/playerConfig.ts

@@ -4,7 +4,6 @@ export const PLAYER_EYE_HEIGHT = 1.75;
 export const PLAYER_CAPSULE_RADIUS = 0.35;
 
 export const PLAYER_WALK_SPEED = 11;
-export const PLAYER_EBIKE_SPEED = 25;
 export const PLAYER_AIR_CONTROL_FACTOR = 0.35;
 export const PLAYER_JUMP_SPEED = 9;
 export const PLAYER_GRAVITY = 30;
@@ -12,5 +11,5 @@ export const PLAYER_MAX_DELTA = 0.05;
 export const PLAYER_ACCELERATION_MULTIPLIER = 9;
 export const PLAYER_XZ_DAMPING_FACTOR = 8;
 
-export const PLAYER_SPAWN_POSITION_GAME: Vector3Tuple = [0, 50, 0];
+export const PLAYER_SPAWN_POSITION_GAME: Vector3Tuple = [6.56,5,71.55];
 export const PLAYER_SPAWN_POSITION_PHYSICS: Vector3Tuple = [0, 3, 0];

src/data/zones.ts

@@ -1,19 +1,12 @@
-import type { Zone } from "@/types/game";
+import type { Zone, GameStep } from "@/types/game";
 import type { Vector3Tuple } from "@/types/three/three";
 
 export const ZONES: Zone[] = [
   {
     id: "fabrikExit",
-    position: [-5, 25, -15] as Vector3Tuple,
-    radius: 10,
-    height: 20,
-    targetStep: "mission2",
-  },
-  {
-    id: "searchingZone",
-    position: [-5, 25, -30] as Vector3Tuple,
-    radius: 10,
-    height: 20,
-    targetStep: "searching",
+    position: [18.43,0,75.3] as Vector3Tuple,
+    radius: 4,
+    height: 10,
+    targetStep: "bike" as GameStep,
   },
 ];

src/hooks/gameplay/useRepairMovementLocked.ts

@@ -2,14 +2,12 @@ import { useGameStore } from "@/managers/stores/useGameStore";
 import type { MissionStep } from "@/types/gameplay/repairMission";
 
 export function useRepairMovementLocked(): boolean {
-  return false;
-
   return useGameStore((state) => {
     switch (state.mainState) {
       case "bike":
         return isRepairMovementLocked(state.bike.currentStep);
       case "pylone":
-        return isRepairMovementLocked(state.pylone.currentStep);
+        return state.pylone.currentStep === "manipulation";
       case "ferme":
         return isRepairMovementLocked(state.ferme.currentStep);
       case "intro":

src/managers/stores/useGameStore.ts

@@ -7,14 +7,10 @@ import {
   type MissionStep,
   type RepairMissionId,
 } from "@/types/gameplay/repairMission";
-import {
-  PLAYER_WALK_SPEED,
-  PLAYER_EBIKE_SPEED,
-} from "@/data/player/playerConfig";
+import { type PyloneStep } from "@/types/gameplay/pylone";
 
 export type MainGameState = "intro" | "bike" | "pylone" | "ferme" | "outro";
-export type PlayerMovementMode = "walk" | "ebike";
-export type { MissionStep, RepairMissionId };
+export type { MissionStep, RepairMissionId, PyloneStep };
 
 interface IntroState {
   currentStep: GameStep;
@@ -33,23 +29,21 @@ interface MissionFlowState {
   canMove: boolean;
   dialogMessage: string | null;
   playerName: string;
-}
-
-interface PlayerState {
-  movementMode: PlayerMovementMode;
-  currentSpeed: number;
+  currentVideo: string | null;
 }
 
 interface GameState {
   mainState: MainGameState;
   isCinematicPlaying: boolean;
+  sceneReady: boolean;
   missionFlow: MissionFlowState;
-  player: PlayerState;
   intro: IntroState;
   bike: MissionState & {
     isRepaired: boolean;
   };
-  pylone: MissionState & {
+  pylone: {
+    currentStep: PyloneStep;
+    dialogueAudio: string | null;
     isPowered: boolean;
   };
   ferme: MissionState & {
@@ -64,10 +58,10 @@ interface GameState {
 interface GameActions {
   setMainState: (mainState: MainGameState) => void;
   setCinematicPlaying: (isCinematicPlaying: boolean) => void;
+  setSceneReady: (sceneReady: boolean) => void;
   hideDialog: () => void;
   setActivityCity: (activityCity: boolean) => void;
   setCanMove: (canMove: boolean) => void;
-  setPlayerMovementMode: (mode: PlayerMovementMode) => void;
   setIntroStep: (step: GameStep) => void;
   setIntroState: (intro: Partial<IntroState>) => void;
   setPlayerName: (playerName: string) => void;
@@ -78,7 +72,6 @@ interface GameActions {
   setMissionStep: (mission: RepairMissionId, step: MissionStep) => void;
   completeIntro: () => void;
   completeBike: () => void;
-  completePylone: () => void;
   completeFerme: () => void;
   completeMission: (mission: RepairMissionId) => void;
   startOutro: () => void;
@@ -86,6 +79,8 @@ interface GameActions {
   rewindGameState: () => void;
   resetGame: () => void;
   showDialog: (dialogMessage: string) => void;
+  playVideo: (videoSrc: string) => void;
+  clearVideo: () => void;
 }
 
 type GameStore = GameState & GameActions;
@@ -116,22 +111,7 @@ function completeBikeState(state: GameState): GameStateUpdate {
     },
     pylone: {
       ...state.pylone,
-      currentStep: "waiting",
-    },
-  };
-}
-
-function completePyloneState(state: GameState): GameStateUpdate {
-  return {
-    mainState: "ferme",
-    pylone: {
-      ...state.pylone,
-      currentStep: "done",
-      isPowered: true,
-    },
-    ferme: {
-      ...state.ferme,
-      currentStep: "waiting",
+      currentStep: "locked",
     },
   };
 }
@@ -171,13 +151,48 @@ function completeMissionState(
   switch (mission) {
     case "bike":
       return completeBikeState(state);
-    case "pylone":
-      return completePyloneState(state);
     case "ferme":
       return completeFermeState(state);
   }
 }
 
+function getNextPyloneStep(step: PyloneStep): PyloneStep {
+  switch (step) {
+    case "locked":
+      return "alert";
+    case "alert":
+      return "searching";
+    case "searching":
+      return "helped";
+    case "helped":
+      return "manipulation";
+    case "manipulation":
+      return "manipulation";
+  }
+}
+
+function advancePyloneStep(state: GameState): GameStateUpdate {
+  if (state.pylone.currentStep === "locked") {
+    return {
+      pylone: { ...state.pylone, currentStep: "alert" },
+    };
+  }
+
+  const nextStep = getNextPyloneStep(state.pylone.currentStep);
+  if (
+    nextStep === "manipulation" &&
+    state.pylone.currentStep === "manipulation"
+  ) {
+    return {
+      mainState: "outro",
+      pylone: { ...state.pylone, currentStep: "manipulation" },
+    };
+  }
+  return {
+    pylone: { ...state.pylone, currentStep: nextStep },
+  };
+}
+
 function advanceRepairMissionState(
   state: GameState,
   mission: RepairMissionId,
@@ -215,15 +230,13 @@ function createInitialGameState(): GameState {
   return {
     mainState: "intro",
     isCinematicPlaying: false,
+    sceneReady: false,
     missionFlow: {
       activityCity: true,
       canMove: false,
       dialogMessage: null,
       playerName: "",
-    },
-    player: {
-      movementMode: "walk",
-      currentSpeed: PLAYER_WALK_SPEED,
+      currentVideo: null,
     },
     intro: {
       currentStep: "intro",
@@ -257,6 +270,7 @@ export const useGameStore = create<GameStore>()((set) => ({
   ...createInitialGameState(),
   setMainState: (mainState) => set({ mainState }),
   setCinematicPlaying: (isCinematicPlaying) => set({ isCinematicPlaying }),
+  setSceneReady: (sceneReady) => set({ sceneReady }),
   hideDialog: () =>
     set((state) => ({
       missionFlow: { ...state.missionFlow, dialogMessage: null },
@@ -265,14 +279,6 @@ export const useGameStore = create<GameStore>()((set) => ({
     set((state) => ({
       missionFlow: { ...state.missionFlow, activityCity },
     })),
-  setPlayerMovementMode: (mode) =>
-    set((state) => ({
-      player: {
-        ...state.player,
-        movementMode: mode,
-        currentSpeed: mode === "ebike" ? PLAYER_EBIKE_SPEED : PLAYER_WALK_SPEED,
-      },
-    })),
   setCanMove: (canMove) =>
     set((state) => ({
       missionFlow: { ...state.missionFlow, canMove },
@@ -297,7 +303,6 @@ export const useGameStore = create<GameStore>()((set) => ({
     set((state) => setMissionStepState(state, mission, step)),
   completeIntro: () => set(completeIntroState),
   completeBike: () => set((state) => completeMissionState(state, "bike")),
-  completePylone: () => set((state) => completeMissionState(state, "pylone")),
   completeFerme: () => set((state) => completeMissionState(state, "ferme")),
   completeMission: (mission) =>
     set((state) => completeMissionState(state, mission)),
@@ -305,9 +310,19 @@ export const useGameStore = create<GameStore>()((set) => ({
   advanceGameState: () =>
     set((state) => {
       if (state.mainState === "intro") {
+        if (state.intro.currentStep === "bike") {
+          return {
+            mainState: "bike",
+            intro: { ...state.intro, hasCompleted: true },
+          };
+        }
         return completeIntroState(state);
       }
 
+      if (state.mainState === "pylone") {
+        return advancePyloneStep(state);
+      }
+
       if (isRepairMissionId(state.mainState)) {
         return advanceRepairMissionState(state, state.mainState);
       }
@@ -331,4 +346,12 @@ export const useGameStore = create<GameStore>()((set) => ({
     set((state) => ({
       missionFlow: { ...state.missionFlow, dialogMessage },
     })),
+  playVideo: (videoSrc) =>
+    set((state) => ({
+      missionFlow: { ...state.missionFlow, currentVideo: videoSrc },
+    })),
+  clearVideo: () =>
+    set((state) => ({
+      missionFlow: { ...state.missionFlow, currentVideo: null },
+    })),
 }));

src/pages/page.tsx

@@ -4,7 +4,7 @@ import * as THREE from "three";
 import { DebugPerf } from "@/components/debug/DebugPerf";
 import { DialogMessage } from "@/components/ui/DialogMessage";
 import { GameUI } from "@/components/ui/GameUI";
-import { BienvenueDisplay, IntroUI } from "@/components/ui/IntroUI";
+import { BienvenueDisplay } from "@/components/ui/IntroUI";
 import { SceneLoadingOverlay } from "@/components/ui/SceneLoadingOverlay";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import { HandTrackingProvider } from "@/providers/gameplay/HandTrackingProvider";
@@ -19,6 +19,7 @@ export function HomePage(): React.JSX.Element {
     (state) => state.missionFlow.dialogMessage,
   );
   const hideDialog = useGameStore((state) => state.hideDialog);
+  const setSceneReady = useGameStore((state) => state.setSceneReady);
   const [sceneLoadingState, setSceneLoadingState] = useState<SceneLoadingState>(
     INITIAL_SCENE_LOADING_STATE,
   );
@@ -42,13 +43,17 @@ export function HomePage(): React.JSX.Element {
           return currentState;
         }
 
+        if (nextState.status === "ready" && currentState.status !== "ready") {
+          setSceneReady(true);
+        }
+
         return {
           ...nextState,
           progress: Math.max(currentState.progress, nextState.progress),
         };
       });
     },
-    [],
+    [setSceneReady],
   );
 
   return (
@@ -63,7 +68,6 @@ export function HomePage(): React.JSX.Element {
         </Suspense>
       </Canvas>
       <GameUI />
-      <IntroUI />
       <BienvenueDisplay />
       {dialogMessage ? (
         <DialogMessage

src/shaders/NetShader.ts

@@ -0,0 +1,62 @@
+import { ShaderMaterial } from "three";
+
+export const createNetShader = (): ShaderMaterial => {
+  return new ShaderMaterial({
+    transparent: true,
+    depthWrite: false,
+    uniforms: {
+      uTime: { value: 0 },
+      uGridScale: { value: 11.3 },
+      uPincushionStrength: { value: 0.4 },
+      uBloomIntensity: { value: 0.8 },
+      uGridThickness: { value: 0.05 },
+    },
+    vertexShader: `
+      varying vec2 vUv;
+      
+      void main() {
+        vUv = uv;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      uniform float uTime;
+      uniform float uGridScale;
+      uniform float uPincushionStrength;
+      uniform float uBloomIntensity;
+      uniform float uGridThickness;
+      
+      varying vec2 vUv;
+      
+      vec2 applyPincushion(vec2 uv, float strength) {
+        vec2 center = uv - 0.5;
+        float dist = length(center);
+        float distortion = 1.0 + dist * dist * strength;
+        return center * distortion + 0.5;
+      }
+      
+      float grid(vec2 uv, float scale, float thickness) {
+        vec2 gridUV = fract(uv * scale);
+        
+        float edgeX = step(gridUV.x, thickness) + step(1.0 - thickness, gridUV.x);
+        float edgeY = step(gridUV.y, thickness) + step(1.0 - thickness, gridUV.y);
+        
+        float line = min(edgeX + edgeY, 1.0);
+        
+        return line;
+      }
+      
+      void main() {
+        vec2 uv = applyPincushion(vUv, uPincushionStrength);
+        
+        float gridPattern = grid(uv, uGridScale, uGridThickness);
+        
+        vec3 gridColor = vec3(1.0, 0.8, 0.2);
+        float bloom = gridPattern * uBloomIntensity;
+        vec3 col = gridColor * (0.3 + bloom);
+        
+        gl_FragColor = vec4(col, gridPattern * 0.95);
+      }
+    `,
+  });
+};

src/types/cinematics/cinematics.ts

@@ -14,6 +14,7 @@ export interface CinematicDialogueCue {
 export interface CinematicDefinition {
   id: string;
   timecode?: number;
+  trigger?: string;
   cameraKeyframes: CinematicCameraKeyframe[];
   dialogueCues?: CinematicDialogueCue[];
 }

src/types/game.ts

@@ -1,28 +1,12 @@
 import type { Vector3Tuple } from "@/types/three/three";
 
-export type GameStep =
-  | "intro"
-  | "start-intro"
-  | "naming"
-  | "bienvenue"
-  | "star-move"
-  | "mission2"
-  | "searching"
-  | "helped"
-  | "manipulation"
-  | "outOfFabrik";
+export type GameStep = "intro" | "sequence_video" | "start-move" | "bike";
 
 export const GAME_STEPS: readonly GameStep[] = [
   "intro",
-  "start-intro",
-  "naming",
-  "bienvenue",
-  "star-move",
-  "mission2",
-  "searching",
-  "helped",
-  "manipulation",
-  "outOfFabrik",
+  "sequence_video",
+  "start-move",
+  "bike",
 ] as const;
 
 export interface Zone {

src/types/gameplay/pylone.ts

@@ -0,0 +1,18 @@
+export type PyloneStep =
+  | "locked"
+  | "alert"
+  | "searching"
+  | "helped"
+  | "manipulation";
+
+export const PYLONE_STEPS: readonly PyloneStep[] = [
+  "locked",
+  "alert",
+  "searching",
+  "helped",
+  "manipulation",
+] as const;
+
+export function isPyloneStep(value: string): value is PyloneStep {
+  return PYLONE_STEPS.includes(value as PyloneStep);
+}

src/types/gameplay/repairMission.ts

@@ -1,4 +1,4 @@
-export type RepairMissionId = "bike" | "pylone" | "ferme";
+export type RepairMissionId = "bike" | "ferme";
 
 export type MissionStep =
   | "locked"
@@ -10,7 +10,7 @@ export type MissionStep =
   | "reassembling"
   | "done";
 
-export const REPAIR_MISSION_IDS = ["bike", "pylone", "ferme"] as const;
+export const REPAIR_MISSION_IDS = ["bike", "ferme"] as const;
 
 export const MISSION_STEPS = [
   "locked",

src/world/GameCinematics.tsx

@@ -9,7 +9,6 @@ import type {
   CinematicManifest,
 } from "@/types/cinematics/cinematics";
 import type { DialogueManifest } from "@/types/dialogues/dialogues";
-import type { Vector3Tuple } from "@/types/three/three";
 import { logger } from "@/utils/core/Logger";
 import { loadCinematicManifest } from "@/utils/cinematics/loadCinematicManifest";
 import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
@@ -17,15 +16,11 @@ import { queueDialogueById } from "@/utils/dialogues/playDialogue";
 
 export function GameCinematics(): null {
   const camera = useThree((state) => state.camera);
-
-  useEffect(() => {
-    setGlobalCamera(camera);
-  }, [camera]);
-
   const [manifest, setManifest] = useState<CinematicManifest | null>(null);
   const [dialogueManifest, setDialogueManifest] =
     useState<DialogueManifest | null>(null);
   const playedCinematicsRef = useRef(new Set<string>());
+  const triggeredCinematicsRef = useRef(new Set<string>());
   const timelineRef = useRef<gsap.core.Timeline | null>(null);
   const activeAudiosRef = useRef(new Set<HTMLAudioElement>());
   const startedAtRef = useRef<number | null>(null);
@@ -70,7 +65,25 @@ export function GameCinematics(): null {
 
     const elapsedTime = clock.getElapsedTime() - startedAtRef.current;
 
+    const currentStep = useGameStore.getState().intro.currentStep;
+
     manifest.cinematics.forEach((cinematic) => {
+      if (cinematic.trigger) {
+        if (triggeredCinematicsRef.current.has(cinematic.id)) return;
+        if (currentStep !== cinematic.trigger) return;
+        if (cinematic.dialogueCues && !dialogueManifest) return;
+
+        triggeredCinematicsRef.current.add(cinematic.id);
+        playCinematic(camera, cinematic, timelineRef, {
+          dialogueManifest,
+          activeAudiosRef,
+          onComplete: () => {
+            triggeredCinematicsRef.current.delete(cinematic.id);
+          },
+        });
+        return;
+      }
+
       if (cinematic.timecode === undefined) return;
       if (cinematic.timecode > elapsedTime) return;
       if (cinematic.dialogueCues && !dialogueManifest) return;
@@ -101,6 +114,7 @@ function playCinematic(
   dialogueOptions: {
     dialogueManifest: DialogueManifest | null;
     activeAudiosRef: MutableRefObject<Set<HTMLAudioElement>>;
+    onComplete?: () => void;
   },
 ): void {
   const firstKeyframe = cinematic.cameraKeyframes[0];
@@ -119,6 +133,7 @@ function playCinematic(
     onComplete: () => {
       timelineRef.current = null;
       useGameStore.getState().setCinematicPlaying(false);
+      dialogueOptions.onComplete?.();
     },
   });
 
@@ -177,118 +192,3 @@ function playCinematic(
 
   timelineRef.current = timeline;
 }
-
-let cameraTransitionTimeline: gsap.core.Timeline | null = null;
-let globalCamera: THREE.Camera | null = null;
-
-export function setGlobalCamera(camera: THREE.Camera | null): void {
-  globalCamera = camera;
-}
-
-export function animateCameraTransition(
-  targetPosition: Vector3Tuple,
-  targetLookAt: Vector3Tuple,
-  duration: number = 1,
-  onComplete?: () => void,
-): void {
-  if (!globalCamera) {
-    logger.warn("GameCinematics", "Camera not found for transition");
-    onComplete?.();
-    return;
-  }
-
-  const camera = globalCamera;
-
-  cameraTransitionTimeline?.kill();
-  useGameStore.getState().setCinematicPlaying(true);
-
-  const target = new THREE.Vector3(...targetLookAt);
-
-  cameraTransitionTimeline = gsap.timeline({
-    onUpdate: () => camera.lookAt(target),
-    onComplete: () => {
-      cameraTransitionTimeline = null;
-      useGameStore.getState().setCinematicPlaying(false);
-      onComplete?.();
-    },
-  });
-
-  cameraTransitionTimeline.to(camera.position, {
-    x: targetPosition[0],
-    y: targetPosition[1],
-    z: targetPosition[2],
-    duration,
-    ease: "power2.inOut",
-  });
-
-  cameraTransitionTimeline.to(
-    target,
-    {
-      x: targetLookAt[0],
-      y: targetLookAt[1],
-      z: targetLookAt[2],
-      duration,
-      ease: "power2.inOut",
-    },
-    0,
-  );
-}
-
-export function animateCameraTransformTransition(
-  targetPosition: Vector3Tuple,
-  targetRotation: Vector3Tuple,
-  duration: number = 1,
-  onComplete?: () => void,
-): void {
-  if (!globalCamera) {
-    logger.warn("GameCinematics", "Camera not found for transition");
-    onComplete?.();
-    return;
-  }
-
-  const camera = globalCamera;
-
-  cameraTransitionTimeline?.kill();
-  useGameStore.getState().setCinematicPlaying(true);
-
-  // Convert target rotation in degrees to quaternion
-  const targetEuler = new THREE.Euler(
-    THREE.MathUtils.degToRad(targetRotation[0]),
-    THREE.MathUtils.degToRad(targetRotation[1]),
-    THREE.MathUtils.degToRad(targetRotation[2]),
-    "YXZ"
-  );
-  const startQuaternion = camera.quaternion.clone();
-  const endQuaternion = new THREE.Quaternion().setFromEuler(targetEuler);
-
-  const transitionObj = { progress: 0 };
-
-  cameraTransitionTimeline = gsap.timeline({
-    onUpdate: () => {
-      camera.quaternion.copy(startQuaternion).slerp(endQuaternion, transitionObj.progress);
-    },
-    onComplete: () => {
-      cameraTransitionTimeline = null;
-      useGameStore.getState().setCinematicPlaying(false);
-      onComplete?.();
-    },
-  });
-
-  cameraTransitionTimeline.to(camera.position, {
-    x: targetPosition[0],
-    y: targetPosition[1],
-    z: targetPosition[2],
-    duration,
-    ease: "power2.inOut",
-  });
-
-  cameraTransitionTimeline.to(
-    transitionObj,
-    {
-      progress: 1,
-      duration,
-      ease: "power2.inOut",
-    },
-    0,
-  );
-}

src/world/GameStageContent.tsx

@@ -1,5 +1,4 @@
 import { RepairGame } from "@/components/three/gameplay/RepairGame";
-import { Ebike } from "@/components/ebike/Ebike";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import type { RepairMissionId } from "@/types/gameplay/repairMission";
 import type { Vector3Tuple } from "@/types/three/three";
@@ -20,10 +19,6 @@ const GAME_REPAIR_ZONES = [
     mission: "bike",
     position: [8, 0, -6],
   },
-  {
-    mission: "pylone",
-    position: [64, 0, -66],
-  },
   {
     mission: "ferme",
     position: [-24, 0, 42],
@@ -57,7 +52,6 @@ export function GameStageContent(): React.JSX.Element {
       {mainState === "intro" ? (
         <StageAnchor color="#7dd3fc" position={[0, 4, 0]} />
       ) : null}
-      <Ebike position={[0, 10, 0]} />
       {GAME_REPAIR_ZONES.map((zone) => (
         <RepairGame
           key={zone.mission}

src/world/World.tsx

@@ -28,6 +28,8 @@ import { GameMap } from "@/world/GameMap";
 import { GameStageContent } from "@/world/GameStageContent";
 import { Player } from "@/world/player/Player";
 import { TestMap } from "@/world/debug/TestMap";
+import { NetTest } from "@/components/three/NetTest";
+import { VideoPlayer } from "@/components/ui/VideoPlayer";
 import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
 
 interface WorldProps {
@@ -61,6 +63,7 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
   return (
     <>
       <Environment />
+      <VideoPlayer />
       <Lighting />
       <DebugHelpers />
       {showHandTrackingGloves ? (
@@ -98,7 +101,10 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
           ) : null}
         </>
       ) : (
-        <TestMap onOctreeReady={handleOctreeReady} />
+        <>
+          <TestMap onOctreeReady={handleOctreeReady} />
+          <NetTest />
+        </>
       )}
 
       {sceneMode !== "game" && spawnPlayer ? (

src/world/player/PlayerCamera.tsx

@@ -1,18 +1,12 @@
 import { useEffect } from "react";
-import { useThree } from "@react-three/fiber";
 import { PointerLockControls } from "@react-three/drei";
-import { setGlobalCamera } from "@/world/GameCinematics";
 
 export function PlayerCamera(): React.JSX.Element {
-  const camera = useThree((state) => state.camera);
-
   useEffect(() => {
-    setGlobalCamera(camera);
     return () => {
-      setGlobalCamera(null);
       document.exitPointerLock();
     };
-  }, [camera]);
+  }, []);
 
   return <PointerLockControls />;
 }

src/world/player/PlayerController.tsx

@@ -20,6 +20,7 @@ import {
   PLAYER_GRAVITY,
   PLAYER_JUMP_SPEED,
   PLAYER_MAX_DELTA,
+  PLAYER_WALK_SPEED,
   PLAYER_XZ_DAMPING_FACTOR,
 } from "@/data/player/playerConfig";
 import { useRepairMovementLocked } from "@/hooks/gameplay/useRepairMovementLocked";
@@ -27,7 +28,6 @@ import { InteractionManager } from "@/managers/InteractionManager";
 import { useGameStore } from "@/managers/stores/useGameStore";
 import { useSettingsStore } from "@/managers/stores/useSettingsStore";
 import type { Vector3Tuple } from "@/types/three/three";
-import { EBIKE_CAMERA_TRANSFORM } from "@/components/ebike/Ebike";
 
 type Keys = {
   forward: boolean;
@@ -108,73 +108,6 @@ export function PlayerController({
   const wantsJump = useRef(false);
   const initializedRef = useRef(false);
   const canMove = useGameStore((state) => state.missionFlow.canMove);
-  const currentSpeed = useGameStore((state) => state.player.currentSpeed);
-  const movementMode = useGameStore((state) => state.player.movementMode);
-  const movementModeRef = useRef(movementMode);
-  const prevMovementModeRef = useRef(movementMode);
-  const ebikeAngle = useRef(0);
-
-  useEffect(() => {
-    movementModeRef.current = movementMode;
-  }, [movementMode]);
-  useEffect(() => {
-    if (movementMode === "ebike") {
-      // Teleport player capsule to the bike's current parked position
-      const targetPos: Vector3Tuple = (window as any).ebikeParkedPosition || [0, 8.2, 0];
-      const targetRot: number = (window as any).ebikeParkedRotation || 0;
-
-      const headY = targetPos[1] + PLAYER_EYE_HEIGHT;
-      const bottomY = targetPos[1] + PLAYER_CAPSULE_RADIUS;
-
-      capsule.current.start.set(
-        targetPos[0],
-        bottomY,
-        targetPos[2],
-      );
-      capsule.current.end.set(
-        targetPos[0],
-        headY,
-        targetPos[2],
-      );
-      velocity.current.set(0, 0, 0);
-      onFloor.current = false;
-      wantsJump.current = false;
-
-      // Initialize ebikeAngle to the bike's actual parked orientation!
-      ebikeAngle.current = targetRot;
-
-      // Position the camera exactly at the EBIKE_CAMERA_TRANSFORM offset rotated by targetRot
-      const cameraOffset = new THREE.Vector3(...EBIKE_CAMERA_TRANSFORM.position);
-      cameraOffset.applyAxisAngle(_up, targetRot);
-
-      const camPos = new THREE.Vector3()
-        .copy(capsule.current.end)
-        .add(cameraOffset);
-      camera.position.copy(camPos);
-
-      // Set the camera's exact rotation according to EBIKE_CAMERA_TRANSFORM.rotation + targetRot
-      const pitchRad = THREE.MathUtils.degToRad(EBIKE_CAMERA_TRANSFORM.rotation[0]);
-      const yawRad = THREE.MathUtils.degToRad(EBIKE_CAMERA_TRANSFORM.rotation[1]) + targetRot;
-      const rollRad = THREE.MathUtils.degToRad(EBIKE_CAMERA_TRANSFORM.rotation[2]);
-      camera.rotation.set(pitchRad, yawRad, rollRad, "YXZ");
-    } else if (movementMode === "walk" && prevMovementModeRef.current === "ebike") {
-      // Restore default walk FOV
-      const perspectiveCam = camera as THREE.PerspectiveCamera;
-      perspectiveCam.fov = 60;
-      perspectiveCam.updateProjectionMatrix();
-
-      // Dismount! Teleport player capsule 3 units to the right
-      const rightDir = new THREE.Vector3();
-      camera.getWorldDirection(_forward);
-      _forward.setY(0).normalize();
-      rightDir.crossVectors(_forward, _up).normalize();
-
-      const shift = rightDir.multiplyScalar(3);
-      capsule.current.translate(shift);
-      camera.position.copy(capsule.current.end);
-    }
-    prevMovementModeRef.current = movementMode;
-  }, [movementMode, camera]);
 
   const capsule = useRef(createSpawnCapsule(spawnPosition));
 
@@ -287,17 +220,6 @@ export function PlayerController({
 
     const dt = Math.min(delta, PLAYER_MAX_DELTA);
 
-    // Rotate camera on Y-axis for ebike steering
-    if (movementModeRef.current === "ebike") {
-      const turnSpeed = 1.8; // radians per second
-      if (keys.current.left) {
-        ebikeAngle.current += turnSpeed * dt;
-      }
-      if (keys.current.right) {
-        ebikeAngle.current -= turnSpeed * dt;
-      }
-    }
-
     camera.getWorldDirection(_forward);
     _forward.setY(0);
     if (_forward.lengthSq() > 0) {
@@ -309,16 +231,14 @@ export function PlayerController({
     if (!movementLocked) {
       if (keys.current.forward) _wishDir.add(_forward);
       if (keys.current.backward) _wishDir.sub(_forward);
-      if (movementModeRef.current !== "ebike") {
-        if (keys.current.left) _wishDir.sub(_right);
-        if (keys.current.right) _wishDir.add(_right);
-      }
+      if (keys.current.left) _wishDir.sub(_right);
+      if (keys.current.right) _wishDir.add(_right);
     }
     if (_wishDir.lengthSq() > 0) _wishDir.normalize();
 
     const accel = onFloor.current
-      ? currentSpeed
-      : currentSpeed * PLAYER_AIR_CONTROL_FACTOR;
+      ? PLAYER_WALK_SPEED
+      : PLAYER_WALK_SPEED * PLAYER_AIR_CONTROL_FACTOR;
     velocity.current.x +=
       _wishDir.x * accel * dt * PLAYER_ACCELERATION_MULTIPLIER;
     velocity.current.z +=
@@ -362,71 +282,7 @@ export function PlayerController({
       }
     }
 
-    if (movementModeRef.current === "ebike") {
-      // Calculate dynamic steering factor
-      let targetSteer = 0;
-      if (keys.current.left) targetSteer = 1;
-      else if (keys.current.right) targetSteer = -1;
-
-      const currentSteer = (window as any).ebikeSteerFactor || 0;
-      const steerFactor = THREE.MathUtils.lerp(currentSteer, targetSteer, 8 * dt);
-      (window as any).ebikeSteerFactor = steerFactor;
-
-      // 1. Dynamic FOV stretch based on speed!
-      const speed = velocity.current.length();
-      const targetFov = 60 + Math.min(speed * 0.35, 9); // stretch FOV up to 9 degrees at high speed (halved by two)!
-      const perspectiveCam = camera as THREE.PerspectiveCamera;
-      perspectiveCam.fov = THREE.MathUtils.lerp(perspectiveCam.fov, targetFov, 6 * dt);
-      perspectiveCam.updateProjectionMatrix();
-
-      // 2. Camera lag & dynamic swing trailing
-      const cameraOffset = new THREE.Vector3(...EBIKE_CAMERA_TRANSFORM.position);
-      cameraOffset.applyAxisAngle(_up, ebikeAngle.current);
-
-      // Swing camera to optimize the view for both left and right turns:
-      // Since the camera is on the left (X = -3.5), it naturally trails beautifully in right turns,
-      // but cuts forward in left turns. We compensate by pushing the camera backward (+Z) during left turns!
-      const swingX = -Math.abs(steerFactor) * 1.5;
-      const swingZ = steerFactor > 0 ? steerFactor * 2.5 : steerFactor * 1.0;
-
-      const cameraSwing = new THREE.Vector3(swingX, 0, swingZ);
-      cameraSwing.applyAxisAngle(_up, ebikeAngle.current);
-      cameraOffset.add(cameraSwing);
-
-      const targetCamPos = new THREE.Vector3()
-        .copy(capsule.current.end)
-        .add(cameraOffset);
-
-      // Smoothly lerp camera position to eliminate rigidity
-      camera.position.lerp(targetCamPos, 12 * dt);
-
-      // 3. Dynamic camera roll based on steering!
-      const pitchRad = THREE.MathUtils.degToRad(EBIKE_CAMERA_TRANSFORM.rotation[0]);
-      const yawRad = THREE.MathUtils.degToRad(EBIKE_CAMERA_TRANSFORM.rotation[1]) + ebikeAngle.current;
-      // COMMENTED OUT: Camera roll/tilt during turns (keeping it flat)
-      // const rollRad = THREE.MathUtils.degToRad(EBIKE_CAMERA_TRANSFORM.rotation[2]) - steerFactor * 0.08;
-      const rollRad = THREE.MathUtils.degToRad(EBIKE_CAMERA_TRANSFORM.rotation[2]);
-      camera.rotation.set(pitchRad, yawRad, rollRad, "YXZ");
-
-      // 4. Synchronize visual e-bike position and apply leaning!
-      const ebikeVisual = (window as any).ebikeVisualGroup?.current;
-      if (ebikeVisual) {
-        ebikeVisual.position.set(
-          capsule.current.end.x,
-          capsule.current.end.y - PLAYER_EYE_HEIGHT,
-          capsule.current.end.z
-        );
-        // Lean (roll) the bike sideways in turns (up to 15 degrees)
-        const leanAngle = steerFactor * 0.26; // rotate in direction of turn!
-        ebikeVisual.rotation.set(0, ebikeAngle.current, leanAngle, "YXZ");
-      }
-    } else {
-      camera.position.copy(capsule.current.end);
-    }
-
-    // Save player capsule end position and camera yaw globally so other components (like Ebike) can access it
-    (window as any).playerPos = [capsule.current.end.x, capsule.current.end.y, capsule.current.end.z];
-    (window as any).ebikeAngle = ebikeAngle.current;
+    camera.position.copy(capsule.current.end);
   });
 
   return null;