feat-intro

GAME_FLOW.md

@@ -0,0 +1,114 @@
+# Game Flow - La Fabrik
+
+## Étapes du jeu
+
+```
+intro → start-intro → naming → bienvenue → star-move → bike
+```
+
+---
+
+## Détail des étapes
+
+### 1. `intro` (initial)
+
+- État initial au chargement du jeu
+- Aucune action, juste une étape de départ
+
+### 2. `start-intro`
+
+- **Déclenchement** : Auto-transition depuis `intro` quand la scène est chargée
+- **Action** : Joue l'audio d'intro via `AudioManager.playSoundWithCallback()`
+- **Attente** : Attend que l'audio se termine
+- **Transition** : Vers `naming` quand l'audio se termine
+
+### 3. `naming`
+
+- **Déclenchement** : Quand l'audio d'intro se termine
+- **Action** : Affiche un input pour demander le prénom du joueur
+- **Attente** : L'utilisateur entre son prénom et valide
+- **Transition** : Vers `bienvenue` quand l'utilisateur valide
+
+### 4. `bienvenue`
+
+- **Déclenchement** : Quand l'utilisateur valide son prénom
+- **Actions** :
+  - Affiche "Bienvenue {prénom} !" à l'écran
+  - Joue l'audio de bienvenue
+- **Attente** : Attend que l'audio se termine
+- **Transition** : Vers `star-move` quand l'audio se termine
+
+### 5. `star-move`
+
+- **Déclenchement** : Quand l'audio de bienvenue se termine
+- **Action** : Active le mouvement du joueur (`setCanMove(true)`)
+- **État** : Le joueur peut maintenant se déplacer librement
+- **Zone** : La détection de zone devient active (ZoneDetection)
+
+### 6. `bike`
+
+- **Déclenchement** : Quand le joueur entre dans la zone de sortie
+- **Action** : Transition vers l'étape finale
+- **Zone** : Détectée par `ZoneDetection` quand le joueur approche de la position configurée
+
+---
+
+## Fichiers clés
+
+| Fichier                                  | Rôle                                                          |
+| ---------------------------------------- | ------------------------------------------------------------- |
+| `src/stateManager/GameStepManager.ts`    | Gère l'état global du jeu (étape actuelle, prénom, mouvement) |
+| `src/components/game/GameFlow.tsx`       | Gère les transitions automatiques et la lecture audio         |
+| `src/components/ui/IntroUI.tsx`          | Affiche l'input pour le prénom                                |
+| `src/components/ui/BienvenueDisplay.tsx` | Affiche le message de bienvenue                               |
+| `src/components/zone/ZoneDetection.tsx`  | Détecte quand le joueur entre dans une zone                   |
+| `src/data/audioConfig.ts`                | Chemins des fichiers audio                                    |
+| `src/data/zones.ts`                      | Configuration des zones de transition                         |
+
+---
+
+## Configuration audio
+
+```typescript
+// src/data/audioConfig.ts
+export const AUDIO_PATHS = {
+  intro: "/sounds/fa.mp3", // Audio joué pendant start-intro
+  bienvenue: "/sounds/fa.mp3", // Audio joué pendant bienvenue
+};
+```
+
+---
+
+## Configuration des zones
+
+```typescript
+// src/data/zones.ts
+export const ZONES: Zone[] = [
+  {
+    id: "fabrikExit",
+    position: [50, 0, 50], // Position de la zone de sortie
+    radius: 10, // Rayon de détection
+    height: 20, // Hauteur de la zone (pour la visualisation)
+    targetStep: "bike", // Étape cible quand on entre dans la zone
+  },
+];
+```
+
+---
+
+## Debug
+
+En mode debug (`?debug` dans l'URL), on peut voir :
+
+- **Game Step** : L'étape actuelle dans le panneau lil-gui
+- **Player Position** : Position X, Y, Z du joueur en temps réel
+- **Zone Visualization** : Anneaux visuels au sol pour les zones
+
+---
+
+## Notes techniques
+
+- Le mouvement du joueur est bloqué tant que `canMove` est `false`
+- `useSyncExternalStore` est utilisé pour synchroniser l'état du jeu avec React
+- Les transitions sont gérées par le `GameStepManager` via le pattern singleton
+- L'audio utilise un callback `onEnded` pour déclencher les transitions automatiques

src/App.tsx

@@ -2,6 +2,7 @@ import { Suspense } from "react";
 import { Canvas } from "@react-three/fiber";
 import { Crosshair } from "@/components/ui/Crosshair";
 import { InteractPrompt } from "@/components/ui/InteractPrompt";
+import { IntroUI, BienvenueDisplay } from "@/components/ui/IntroUI";
 import { DebugPerf } from "@/utils/debug/DebugPerf";
 import { World } from "@/world/World";
 
@@ -16,6 +17,8 @@ function App(): React.JSX.Element {
       </Canvas>
       <Crosshair />
       <InteractPrompt />
+      <IntroUI />
+      <BienvenueDisplay />
     </>
   );
 }

src/components/game/GameFlow.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from "react";
+import { GameStepManager } from "@/stateManager/GameStepManager";
+import { AudioManager } from "@/stateManager/AudioManager";
+import { AUDIO_PATHS } from "@/data/audioConfig";
+
+export function GameFlow(): null {
+  const manager = GameStepManager.getInstance();
+  const hasInitialized = useRef(false);
+  const [step, setStep] = useState(manager.getStep());
+
+  useEffect(() => {
+    const unsubscribe = manager.subscribe(() => {
+      setStep(manager.getStep());
+    });
+    return unsubscribe;
+  }, [manager]);
+
+  useEffect(() => {
+    console.log("[GameFlow] Current step:", step);
+    if (!hasInitialized.current && step === "intro") {
+      hasInitialized.current = true;
+      console.log("[GameFlow] Transition to start-intro");
+      manager.transitionTo("start-intro");
+    }
+  }, [step, manager]);
+
+  useEffect(() => {
+    console.log("[GameFlow] useEffect triggered, step:", step);
+
+    if (step === "start-intro") {
+      console.log("[GameFlow] Playing intro audio");
+      const audio = AudioManager.getInstance();
+      audio.playSoundWithCallback(AUDIO_PATHS.intro, 0.5, () => {
+        console.log("[GameFlow] Intro audio ended, transition to naming");
+        manager.transitionTo("naming");
+      });
+
+      return () => {};
+    }
+
+    if (step === "bienvenue") {
+      console.log("[GameFlow] Playing bienvenue audio");
+      const audio = AudioManager.getInstance();
+      audio.playSoundWithCallback(AUDIO_PATHS.bienvenue, 0.5, () => {
+        console.log("[GameFlow] Bienvenue audio ended, enable movement");
+        manager.setCanMove(true);
+        manager.transitionTo("star-move");
+      });
+
+      return () => {};
+    }
+
+    return undefined;
+  }, [step, manager]);
+
+  return null;
+}

src/components/ui/IntroUI.tsx

@@ -0,0 +1,129 @@
+import { useState } from "react";
+import { useGameStep } from "@/hooks/useGameStep";
+
+export function IntroUI(): React.JSX.Element | null {
+  const { step, setPlayerName, transitionTo } = useGameStep();
+  const [inputValue, setInputValue] = useState("");
+
+  if (step !== "naming") return null;
+
+  const handleSubmit = (): void => {
+    if (inputValue.trim() === "") return;
+
+    console.log("[IntroUI] Submitting, name:", inputValue.trim());
+    setPlayerName(inputValue.trim());
+    console.log("[IntroUI] Calling transitionTo('bienvenue')");
+    transitionTo("bienvenue");
+    console.log("[IntroUI] After transitionTo, step should be:", step);
+  };
+
+  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 prénom ?
+        </h2>
+        <input
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Votre prénom"
+          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, playerName } = useGameStep();
+
+  if (step !== "bienvenue") return null;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: "20%",
+        left: "50%",
+        transform: "translateX(-50%)",
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        padding: "1rem 2rem",
+        borderRadius: "8px",
+        zIndex: 100,
+      }}
+    >
+      <p
+        style={{
+          color: "#fff",
+          margin: 0,
+          fontSize: "1.25rem",
+        }}
+      >
+        Bienvenue {playerName} !
+      </p>
+    </div>
+  );
+}

src/components/zone/ZoneDetection.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useRef, useState } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import { ZONES } from "@/data/zones";
+import { GameStepManager } from "@/stateManager/GameStepManager";
+import { Debug } from "@/utils/debug/Debug";
+
+const _playerPos = new THREE.Vector3();
+const _zonePos = new THREE.Vector3();
+
+export function ZoneDetection(): null {
+  const camera = useThree((state) => state.camera);
+  const manager = GameStepManager.getInstance();
+  const triggeredZones = useRef<Set<string>>(new Set());
+  const debug = Debug.getInstance();
+
+  useEffect(() => {
+    if (!debug.active) return;
+
+    const folder = debug.createFolder("Game");
+    if (!folder) return;
+
+    const gameState = { step: manager.getStep() };
+    const playerPos = { x: 0, y: 0, z: 0 };
+
+    folder
+      .add(gameState, "step", ["intro", "bike"])
+      .name("Game Step")
+      .disable();
+
+    folder.add(playerPos, "x").name("Player X").listen().disable();
+    folder.add(playerPos, "y").name("Player Y").listen().disable();
+    folder.add(playerPos, "z").name("Player Z").listen().disable();
+
+    const unsubManager = manager.subscribe(() => {
+      gameState.step = manager.getStep();
+      folder.controllersRecursive().forEach((c) => c.updateDisplay());
+    });
+
+    let frameId: number;
+    const updatePlayerPos = (): void => {
+      camera.getWorldPosition(_playerPos);
+      playerPos.x = Math.round(_playerPos.x * 100) / 100;
+      playerPos.y = Math.round(_playerPos.y * 100) / 100;
+      playerPos.z = Math.round(_playerPos.z * 100) / 100;
+      folder.controllersRecursive().forEach((c) => c.updateDisplay());
+      frameId = requestAnimationFrame(updatePlayerPos);
+    };
+    updatePlayerPos();
+
+    return () => {
+      cancelAnimationFrame(frameId);
+      debug.destroyFolder("Game");
+      unsubManager();
+    };
+  }, [debug, manager, camera]);
+
+  useFrame(() => {
+    camera.getWorldPosition(_playerPos);
+
+    for (const zone of ZONES) {
+      if (triggeredZones.current.has(zone.id)) continue;
+
+      _zonePos.set(...zone.position);
+
+      const distanceSq = _playerPos.distanceToSquared(_zonePos);
+
+      if (distanceSq <= zone.radius * zone.radius) {
+        manager.transitionTo(zone.targetStep);
+        triggeredZones.current.add(zone.id);
+        break;
+      }
+    }
+  });
+
+  return null;
+}
+
+interface ZoneVisualProps {
+  position: [number, number, number];
+  radius: number;
+  height: number;
+  triggered: boolean;
+}
+
+function ZoneVisual({
+  position,
+  radius,
+  height,
+  triggered,
+}: ZoneVisualProps): React.JSX.Element {
+  const color = triggered ? "#00ff00" : "#ff0000";
+
+  return (
+    <group position={position}>
+      <mesh rotation={[-Math.PI / 2, 0, 0]}>
+        <ringGeometry args={[radius - 0.3, radius, 32]} />
+        <meshBasicMaterial color={color} side={THREE.DoubleSide} />
+      </mesh>
+      <mesh position={[0, height / 2, 0]}>
+        <cylinderGeometry args={[radius, radius, height, 32, 1, true]} />
+        <meshBasicMaterial
+          color={color}
+          transparent
+          opacity={0.15}
+          side={THREE.DoubleSide}
+          depthWrite={false}
+        />
+      </mesh>
+    </group>
+  );
+}
+
+export function ZoneDebugVisuals(): React.JSX.Element | null {
+  const debug = Debug.getInstance();
+  const camera = useThree((state) => state.camera);
+  const [triggeredZones, setTriggeredZones] = useState<Set<string>>(new Set());
+
+  useFrame(() => {
+    camera.getWorldPosition(_playerPos);
+
+    for (const zone of ZONES) {
+      if (triggeredZones.has(zone.id)) continue;
+
+      _zonePos.set(...zone.position);
+
+      const distanceSq = _playerPos.distanceToSquared(_zonePos);
+
+      if (distanceSq <= zone.radius * zone.radius) {
+        setTriggeredZones((prev) => new Set(prev).add(zone.id));
+        break;
+      }
+    }
+  });
+
+  if (!debug.active) return null;
+
+  return (
+    <>
+      {ZONES.map((zone) => (
+        <ZoneVisual
+          key={zone.id}
+          position={[zone.position[0], 0.1, zone.position[2]]}
+          radius={zone.radius}
+          height={zone.height}
+          triggered={triggeredZones.has(zone.id)}
+        />
+      ))}
+    </>
+  );
+}

src/data/audioConfig.ts

@@ -0,0 +1,4 @@
+export const AUDIO_PATHS = {
+  intro: "/sounds/fa.mp3",
+  bienvenue: "/sounds/fa.mp3",
+} as const;

src/data/zones.ts

@@ -0,0 +1,12 @@
+import type { Zone } from "@/types/game";
+import type { Vector3Tuple } from "@/types/3d";
+
+export const ZONES: Zone[] = [
+  {
+    id: "fabrikExit",
+    position: [-5, 25, -15] as Vector3Tuple,
+    radius: 10,
+    height: 20,
+    targetStep: "bike",
+  },
+];

src/hooks/useGameStep.ts

@@ -0,0 +1,11 @@
+import { useSyncExternalStore } from "react";
+import { GameStepManager } from "@/stateManager/GameStepManager";
+import type { GameStepSnapshot } from "@/types/game";
+
+const manager = GameStepManager.getInstance();
+
+export function useGameStep(): GameStepSnapshot {
+  return useSyncExternalStore(manager.subscribe.bind(manager), () =>
+    manager.getSnapshot(),
+  );
+}

src/stateManager/AudioManager.ts

@@ -40,6 +40,46 @@ export class AudioManager {
     });
   }
 
+  playSoundWithCallback(
+    path: string,
+    volume: number,
+    onEnded: () => void,
+  ): void {
+    console.log("[AudioManager] playSoundWithCallback:", path);
+    const audio = new Audio(path);
+    audio.volume = Math.max(0, Math.min(1, volume));
+    audio.currentTime = 0;
+
+    audio.addEventListener("ended", () => {
+      console.log("[AudioManager] Audio ended:", path);
+      onEnded();
+    });
+
+    audio.addEventListener("error", (e) => {
+      console.error("[AudioManager] Audio error:", path, e);
+    });
+
+    audio
+      .play()
+      .then(() => {
+        console.log("[AudioManager] Audio playing:", path);
+      })
+      .catch((error: unknown) => {
+        console.error("[AudioManager] Play failed:", path, error);
+        if (
+          error instanceof DOMException &&
+          AudioManager.IGNORED_PLAYBACK_ERRORS.has(error.name)
+        ) {
+          return;
+        }
+
+        logger.error("AudioManager", "Failed to play sound", {
+          path,
+          error: AudioManager._toLogValue(error),
+        });
+      });
+  }
+
   destroy(): void {
     this._audioPools.forEach((pool) => {
       pool.forEach((audio) => {

src/stateManager/GameStepManager.ts

@@ -0,0 +1,91 @@
+import type { GameStep, GameStepSnapshot } from "@/types/game";
+
+export class GameStepManager {
+  private static _instance: GameStepManager | null = null;
+
+  private _currentStep: GameStep = "intro";
+  private _playerName = "";
+  private _canMove = false;
+  private readonly _listeners = new Set<() => void>();
+  private _cachedSnapshot: GameStepSnapshot | null = null;
+
+  static getInstance(): GameStepManager {
+    if (!GameStepManager._instance) {
+      GameStepManager._instance = new GameStepManager();
+    }
+
+    return GameStepManager._instance;
+  }
+
+  private constructor() {}
+
+  getStep(): GameStep {
+    return this._currentStep;
+  }
+
+  getPlayerName(): string {
+    return this._playerName;
+  }
+
+  canMove(): boolean {
+    return this._canMove;
+  }
+
+  getSnapshot(): GameStepSnapshot {
+    if (!this._cachedSnapshot) {
+      this._cachedSnapshot = {
+        step: this._currentStep,
+        playerName: this._playerName,
+        canMove: this._canMove,
+        transitionTo: this.transitionTo.bind(this),
+        setPlayerName: this.setPlayerName.bind(this),
+      };
+    }
+    return this._cachedSnapshot;
+  }
+
+  transitionTo(step: GameStep): void {
+    if (this._currentStep === step) return;
+
+    this._currentStep = step;
+    this._cachedSnapshot = null;
+    this._emit();
+  }
+
+  setPlayerName(name: string): void {
+    if (this._playerName === name) return;
+
+    this._playerName = name;
+    this._cachedSnapshot = null;
+    this._emit();
+  }
+
+  setCanMove(canMove: boolean): void {
+    if (this._canMove === canMove) return;
+
+    this._canMove = canMove;
+    this._cachedSnapshot = null;
+    this._emit();
+  }
+
+  subscribe(listener: () => void): () => void {
+    this._listeners.add(listener);
+
+    return () => {
+      this._listeners.delete(listener);
+    };
+  }
+
+  destroy(): void {
+    this._currentStep = "intro";
+    this._playerName = "";
+    this._canMove = false;
+    this._listeners.clear();
+    this._cachedSnapshot = null;
+    GameStepManager._instance = null;
+  }
+
+  private _emit(): void {
+    this._listeners.forEach((cb) => cb());
+  }
+}

src/types/game.ts

@@ -0,0 +1,29 @@
+import type { Vector3Tuple } from "@/types/3d";
+
+export type GameStep =
+  | "intro"
+  | "start-intro"
+  | "naming"
+  | "bienvenue"
+  | "star-move"
+  | "bike";
+
+export interface Zone {
+  id: string;
+  position: Vector3Tuple;
+  radius: number;
+  height: number;
+  targetStep: GameStep;
+}
+
+export interface GameState {
+  step: GameStep;
+}
+
+export interface GameStepSnapshot {
+  step: GameStep;
+  playerName: string;
+  canMove: boolean;
+  transitionTo: (step: GameStep) => void;
+  setPlayerName: (name: string) => void;
+}

src/world/World.tsx

@@ -6,6 +6,11 @@ import {
 } from "@/data/playerConfig";
 import { useCameraMode } from "@/hooks/debug/useCameraMode";
 import { useSceneMode } from "@/hooks/debug/useSceneMode";
+import {
+  ZoneDebugVisuals,
+  ZoneDetection,
+} from "@/components/zone/ZoneDetection";
+import { GameFlow } from "@/components/game/GameFlow";
 import { DebugCameraControls } from "@/utils/debug/scene/DebugCameraControls";
 import { DebugHelpers } from "@/utils/debug/scene/DebugHelpers";
 import { Environment } from "@/world/Environment";
@@ -28,6 +33,9 @@ export function World(): React.JSX.Element {
       <Environment />
       <Lighting />
       <DebugHelpers />
+      <ZoneDetection />
+      <ZoneDebugVisuals />
+      <GameFlow />
       {cameraMode === "debug" ? <DebugCameraControls /> : null}
 
       {sceneMode === "game" ? (

src/world/player/PlayerController.tsx

@@ -24,6 +24,7 @@ import {
   PLAYER_XZ_DAMPING_FACTOR,
 } from "@/data/playerConfig";
 import { InteractionManager } from "@/stateManager/InteractionManager";
+import { GameStepManager } from "@/stateManager/GameStepManager";
 import type { Vector3Tuple } from "@/types/3d";
 
 type Keys = {
@@ -63,6 +64,7 @@ export function PlayerController({
   const velocity = useRef(new THREE.Vector3());
   const onFloor = useRef(false);
   const wantsJump = useRef(false);
+  const gameStepManager = GameStepManager.getInstance();
 
   const capsule = useRef(
     new Capsule(
@@ -165,6 +167,12 @@ export function PlayerController({
   }, []);
 
   useFrame((_, delta) => {
+    if (!gameStepManager.canMove()) {
+      velocity.current.set(0, 0, 0);
+      camera.position.copy(capsule.current.end);
+      return;
+    }
+
     const dt = Math.min(delta, PLAYER_MAX_DELTA);
 
     camera.getWorldDirection(_forward);