wip mission 2

src/App.tsx

@@ -1,12 +1,26 @@
-import { Suspense } from "react";
+import { Suspense, useEffect } 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 { DialogMessage } from "@/components/ui/DialogMessage";
+import { useGameStore } from "@/stores/gameStore";
 import { DebugPerf } from "@/utils/debug/DebugPerf";
 import { World } from "@/world/World";
 
 function App(): React.JSX.Element {
+  const dialogMessage = useGameStore((state) => state.dialogMessage);
+  const hideDialog = useGameStore((state) => state.hideDialog);
+
+  useEffect(() => {
+    if (dialogMessage) {
+      const timer = setTimeout(() => {
+        hideDialog();
+      }, 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [dialogMessage, hideDialog]);
+
   return (
     <>
       <Canvas camera={{ position: [85, 60, 85], fov: 42 }} shadows>
@@ -19,6 +33,13 @@ function App(): React.JSX.Element {
       <InteractPrompt />
       <IntroUI />
       <BienvenueDisplay />
+      {dialogMessage && (
+        <DialogMessage
+          message={dialogMessage}
+          duration={3000}
+          onClose={hideDialog}
+        />
+      )}
     </>
   );
 }

src/components/3d/CentralObject.tsx

@@ -0,0 +1,60 @@
+import { InteractableObject } from "@/components/3d/InteractableObject";
+import { useGameStore } from "@/stores/gameStore";
+import { Debug } from "@/utils/debug/Debug";
+import type { Vector3Tuple } from "@/types/3d";
+
+interface CentralObjectProps {
+  position: Vector3Tuple;
+}
+
+export function CentralObject({
+  position,
+}: CentralObjectProps): React.JSX.Element {
+  const step = useGameStore((state) => state.step);
+  const setStep = useGameStore((state) => state.setStep);
+  const setCanMove = useGameStore((state) => state.setCanMove);
+  const showDialog = useGameStore((state) => state.showDialog);
+  const debug = Debug.getInstance();
+
+  const handlePress = (): void => {
+    console.log("[CentralObject] handlePress called, current step:", step);
+
+    if (step === "helped") {
+      console.log("[CentralObject] Transitioning to manipulation");
+      setCanMove(false);
+      setStep("manipulation");
+    } else if (step === "searching") {
+      console.log("[CentralObject] Showing help message");
+      showDialog(
+        "Cet objet est trop lourd pour le porter tout seul, trouve de l'aide",
+      );
+    } else {
+      console.log("[CentralObject] Step is not helped or searching, skipping");
+    }
+  };
+
+  const shouldShow =
+    step === "helped" || step === "manipulation" || debug.active;
+
+  if (!shouldShow) {
+    return <></>;
+  }
+
+  console.log("[CentralObject] Rendering, step:", step, "position:", position);
+
+  return (
+    <InteractableObject
+      kind="trigger"
+      label="central"
+      position={position}
+      onPress={handlePress}
+    >
+      <group position={position}>
+        <mesh>
+          <boxGeometry args={[1, 1, 1]} />
+          <meshStandardMaterial color="orange" />
+        </mesh>
+      </group>
+    </InteractableObject>
+  );
+}

src/components/3d/VillageoisHelperObject.tsx

@@ -0,0 +1,53 @@
+import { InteractableObject } from "@/components/3d/InteractableObject";
+import { useGameStore } from "@/stores/gameStore";
+import { Debug } from "@/utils/debug/Debug";
+import type { Vector3Tuple } from "@/types/3d";
+
+interface VillageoisHelperObjectProps {
+  position: Vector3Tuple;
+}
+
+export function VillageoisHelperObject({
+  position,
+}: VillageoisHelperObjectProps): React.JSX.Element {
+  const step = useGameStore((state) => state.step);
+  const setStep = useGameStore((state) => state.setStep);
+  const debug = Debug.getInstance();
+
+  const handlePress = (): void => {
+    console.log("[VillageoisHelper] handlePress called, current step:", step);
+    if (step === "searching") {
+      console.log("[VillageoisHelper] Transitioning to helped");
+      setStep("helped");
+    }
+  };
+
+  const shouldShow = step === "searching" || debug.active;
+
+  if (!shouldShow) {
+    return <></>;
+  }
+
+  console.log(
+    "[VillageoisHelper] Rendering, step:",
+    step,
+    "position:",
+    position,
+  );
+
+  return (
+    <InteractableObject
+      kind="trigger"
+      label="villageois_helper"
+      position={position}
+      onPress={handlePress}
+    >
+      <group position={position}>
+        <mesh>
+          <sphereGeometry args={[0.5, 16, 16]} />
+          <meshStandardMaterial color="cyan" />
+        </mesh>
+      </group>
+    </InteractableObject>
+  );
+}

src/components/game/GameFlow.tsx

@@ -1,28 +1,23 @@
-import { useEffect, useRef, useState } from "react";
-import { GameStepManager } from "@/stateManager/GameStepManager";
+import { useEffect, useRef } from "react";
+import { useGameStore } from "@/stores/gameStore";
 import { AudioManager } from "@/stateManager/AudioManager";
 import { AUDIO_PATHS } from "@/data/audioConfig";
 
 export function GameFlow(): null {
-  const manager = GameStepManager.getInstance();
+  const step = useGameStore((state) => state.step);
+  const setStep = useGameStore((state) => state.setStep);
+  const setActivityCity = useGameStore((state) => state.setActivityCity);
+  const setCanMove = useGameStore((state) => state.setCanMove);
   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");
+      setStep("start-intro");
     }
-  }, [step, manager]);
+  }, [step, setStep]);
 
   useEffect(() => {
     console.log("[GameFlow] useEffect triggered, step:", step);
@@ -32,7 +27,7 @@ export function GameFlow(): null {
       const audio = AudioManager.getInstance();
       audio.playSoundWithCallback(AUDIO_PATHS.intro, 0.5, () => {
         console.log("[GameFlow] Intro audio ended, transition to naming");
-        manager.transitionTo("naming");
+        setStep("naming");
       });
 
       return () => {};
@@ -43,15 +38,43 @@ export function GameFlow(): null {
       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");
+        setCanMove(true);
+        setStep("star-move");
       });
 
       return () => {};
     }
 
+    if (step === "mission2") {
+      console.log("[GameFlow] mission2 - setting activityCity to false");
+      setActivityCity(false);
+      const audio = AudioManager.getInstance();
+      audio.playSound(AUDIO_PATHS.alertCentral, 0.5);
+    }
+
+    if (step === "searching") {
+      console.log("[GameFlow] Playing searching audio");
+      const audio = AudioManager.getInstance();
+      audio.playSoundWithCallback(AUDIO_PATHS.searching, 0.5, () => {
+        console.log("[GameFlow] searching audio ended");
+      });
+
+      return () => {};
+    }
+
+    if (step === "helped") {
+      console.log("[GameFlow] Playing helped audio");
+      const audio = AudioManager.getInstance();
+      audio.playSound(AUDIO_PATHS.helped, 0.5);
+    }
+
+    if (step === "manipulation") {
+      console.log("[GameFlow] manipulation - blocking movement");
+      setCanMove(false);
+    }
+
     return undefined;
-  }, [step, manager]);
+  }, [step, setStep, setActivityCity, setCanMove]);
 
   return null;
 }

src/components/ui/DialogMessage.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+
+interface DialogMessageProps {
+  message: string;
+  duration?: number;
+  onClose?: () => void;
+}
+
+export function DialogMessage({
+  message,
+  duration = 3000,
+  onClose,
+}: DialogMessageProps): React.JSX.Element | null {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(false);
+      onClose?.();
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        bottom: "20%",
+        left: "50%",
+        transform: "translateX(-50%)",
+        backgroundColor: "rgba(0, 0, 0, 0.9)",
+        padding: "1rem 2rem",
+        borderRadius: "8px",
+        border: "2px solid #fff",
+        zIndex: 200,
+        maxWidth: "80%",
+      }}
+    >
+      <p
+        style={{
+          color: "#fff",
+          margin: 0,
+          fontSize: "1rem",
+          textAlign: "center",
+        }}
+      >
+        {message}
+      </p>
+    </div>
+  );
+}

src/components/ui/IntroUI.tsx

@@ -1,8 +1,10 @@
 import { useState } from "react";
-import { useGameStep } from "@/hooks/useGameStep";
+import { useGameStore } from "@/stores/gameStore";
 
 export function IntroUI(): React.JSX.Element | null {
-  const { step, setPlayerName, transitionTo } = useGameStep();
+  const step = useGameStore((state) => state.step);
+  const setPlayerName = useGameStore((state) => state.setPlayerName);
+  const setStep = useGameStore((state) => state.setStep);
   const [inputValue, setInputValue] = useState("");
 
   if (step !== "naming") return null;
@@ -13,7 +15,7 @@ export function IntroUI(): React.JSX.Element | null {
     console.log("[IntroUI] Submitting, name:", inputValue.trim());
     setPlayerName(inputValue.trim());
     console.log("[IntroUI] Calling transitionTo('bienvenue')");
-    transitionTo("bienvenue");
+    setStep("bienvenue");
     console.log("[IntroUI] After transitionTo, step should be:", step);
   };
 
@@ -98,7 +100,8 @@ export function IntroUI(): React.JSX.Element | null {
 }
 
 export function BienvenueDisplay(): React.JSX.Element | null {
-  const { step, playerName } = useGameStep();
+  const step = useGameStore((state) => state.step);
+  const playerName = useGameStore((state) => state.playerName);
 
   if (step !== "bienvenue") return null;
 

src/components/zone/ZoneDetection.tsx

@@ -3,16 +3,31 @@ import { useFrame, useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import { ZONES } from "@/data/zones";
 import { GameStepManager } from "@/stateManager/GameStepManager";
+import { useGameStore } from "@/stores/gameStore";
 import { Debug } from "@/utils/debug/Debug";
+import type { GameStep } from "@/types/game";
 
 const _playerPos = new THREE.Vector3();
 const _zonePos = new THREE.Vector3();
 
+const GAME_STEPS: GameStep[] = [
+  "intro",
+  "start-intro",
+  "naming",
+  "bienvenue",
+  "star-move",
+  "mission2",
+  "searching_problem",
+  "preparation",
+  "outOfFabrik",
+];
+
 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();
+  const step = useGameStore((state) => state.step);
 
   useEffect(() => {
     if (!debug.active) return;
@@ -20,20 +35,17 @@ export function ZoneDetection(): null {
     const folder = debug.createFolder("Game");
     if (!folder) return;
 
-    const gameState = { step: manager.getStep() };
+    const gameState = { step: step };
     const playerPos = { x: 0, y: 0, z: 0 };
 
-    folder
-      .add(gameState, "step", ["intro", "bike"])
-      .name("Game Step")
-      .disable();
+    folder.add(gameState, "step", GAME_STEPS).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();
+    const unsubStore = useGameStore.subscribe((state) => {
+      gameState.step = state.step;
       folder.controllersRecursive().forEach((c) => c.updateDisplay());
     });
 
@@ -51,9 +63,9 @@ export function ZoneDetection(): null {
     return () => {
       cancelAnimationFrame(frameId);
       debug.destroyFolder("Game");
-      unsubManager();
+      unsubStore();
     };
-  }, [debug, manager, camera]);
+  }, [debug, camera, step]);
 
   useFrame(() => {
     camera.getWorldPosition(_playerPos);

src/data/audioConfig.ts

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

src/data/zones.ts

@@ -7,6 +7,13 @@ export const ZONES: Zone[] = [
     position: [-5, 25, -15] as Vector3Tuple,
     radius: 10,
     height: 20,
-    targetStep: "bike",
+    targetStep: "mission2",
+  },
+  {
+    id: "searchingZone",
+    position: [-5, 25, -30] as Vector3Tuple,
+    radius: 10,
+    height: 20,
+    targetStep: "searching",
   },
 ];

src/hooks/useActivityCity.ts

@@ -0,0 +1,5 @@
+import { useGameStore } from "@/stores/gameStore";
+
+export function useActivityCity(): boolean {
+  return useGameStore((state) => state.activityCity);
+}

src/hooks/useDialog.ts

@@ -0,0 +1,27 @@
+import { useState } from "react";
+
+interface DialogState {
+  message: string;
+  visible: boolean;
+}
+
+export function useDialog(): {
+  dialog: DialogState;
+  showDialog: (message: string) => void;
+  hideDialog: () => void;
+} {
+  const [dialog, setDialog] = useState<DialogState>({
+    message: "",
+    visible: false,
+  });
+
+  const showDialog = (message: string): void => {
+    setDialog({ message, visible: true });
+  };
+
+  const hideDialog = (): void => {
+    setDialog((prev) => ({ ...prev, visible: false }));
+  };
+
+  return { dialog, showDialog, hideDialog };
+}

src/stateManager/GameStepManager.ts

@@ -1,4 +1,5 @@
 import type { GameStep, GameStepSnapshot } from "@/types/game";
+import { useGameStore } from "@/stores/gameStore";
 
 export class GameStepManager {
   private static _instance: GameStepManager | null = null;
@@ -49,6 +50,7 @@ export class GameStepManager {
 
     this._currentStep = step;
     this._cachedSnapshot = null;
+    useGameStore.getState().setStep(step);
     this._emit();
   }
 
@@ -57,6 +59,7 @@ export class GameStepManager {
 
     this._playerName = name;
     this._cachedSnapshot = null;
+    useGameStore.getState().setPlayerName(name);
     this._emit();
   }
 
@@ -65,6 +68,7 @@ export class GameStepManager {
 
     this._canMove = canMove;
     this._cachedSnapshot = null;
+    useGameStore.getState().setCanMove(canMove);
     this._emit();
   }
 

src/stores/gameStore.ts

@@ -0,0 +1,30 @@
+import { create } from "zustand";
+import type { GameStep } from "@/types/game";
+
+interface GameState {
+  step: GameStep;
+  activityCity: boolean;
+  playerName: string;
+  canMove: boolean;
+  dialogMessage: string | null;
+  setStep: (step: GameStep) => void;
+  setActivityCity: (value: boolean) => void;
+  setPlayerName: (name: string) => void;
+  setCanMove: (canMove: boolean) => void;
+  showDialog: (message: string) => void;
+  hideDialog: () => void;
+}
+
+export const useGameStore = create<GameState>((set) => ({
+  step: "intro",
+  activityCity: true,
+  playerName: "",
+  canMove: false,
+  dialogMessage: null,
+  setStep: (step) => set({ step }),
+  setActivityCity: (value) => set({ activityCity: value }),
+  setPlayerName: (name) => set({ playerName: name }),
+  setCanMove: (canMove) => set({ canMove }),
+  showDialog: (message) => set({ dialogMessage: message }),
+  hideDialog: () => set({ dialogMessage: null }),
+}));

src/types/game.ts

@@ -6,7 +6,11 @@ export type GameStep =
   | "naming"
   | "bienvenue"
   | "star-move"
-  | "bike";
+  | "mission2"
+  | "searching"
+  | "helped"
+  | "manipulation"
+  | "outOfFabrik";
 
 export interface Zone {
   id: string;

src/world/World.tsx

@@ -11,6 +11,8 @@ import {
   ZoneDetection,
 } from "@/components/zone/ZoneDetection";
 import { GameFlow } from "@/components/game/GameFlow";
+import { CentralObject } from "@/components/3d/CentralObject";
+import { VillageoisHelperObject } from "@/components/3d/VillageoisHelperObject";
 import { DebugCameraControls } from "@/utils/debug/scene/DebugCameraControls";
 import { DebugHelpers } from "@/utils/debug/scene/DebugHelpers";
 import { Environment } from "@/world/Environment";
@@ -36,6 +38,8 @@ export function World(): React.JSX.Element {
       <ZoneDetection />
       <ZoneDebugVisuals />
       <GameFlow />
+      <VillageoisHelperObject position={[1, 12, -55]} />
+      <CentralObject position={[1, 15, -45]} />
       {cameraMode === "debug" ? <DebugCameraControls /> : null}
 
       {sceneMode === "game" ? (

src/world/player/PlayerController.tsx

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