feat(types): add SiteStep and refactor GameStep for new intro flow

src/components/game/GameFlow.tsx

@@ -1,72 +0,0 @@
-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 setCanMove = useGameStore((state) => state.setCanMove);
-  const completeIntro = useGameStore((state) => state.completeIntro);
-  const hasInitialized = useRef(false);
-
-  useEffect(() => {
-    if (!hasInitialized.current && step === "intro") {
-      hasInitialized.current = true;
-      setStep("start-intro");
-    }
-  }, [step, setStep]);
-
-  useEffect(() => {
-    if (step === "start-intro") {
-      const audio = AudioManager.getInstance();
-      audio.playSoundWithCallback(AUDIO_PATHS.intro, 0.5, () => {
-        setStep("naming");
-      });
-
-      return () => {};
-    }
-
-    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);
-      const timeoutId = window.setTimeout(() => {
-        completeIntro();
-      }, 1000);
-
-      return () => {
-        window.clearTimeout(timeoutId);
-      };
-    }
-
-    return undefined;
-  }, [completeIntro, step, setStep, setActivityCity, setCanMove]);
-
-  return null;
-}

src/components/three/interaction/NPCHelper.tsx

@@ -1,42 +0,0 @@
-import { InteractableObject } from "@/components/three/interaction/InteractableObject";
-import { useGameStore } from "@/managers/stores/useGameStore";
-import { Debug } from "@/utils/debug/Debug";
-import type { Vector3Tuple } from "@/types/three/three";
-
-interface NPCHelperProps {
-  position: Vector3Tuple;
-}
-
-export function NPCHelper({ position }: NPCHelperProps): React.JSX.Element {
-  const step = useGameStore((state) => state.intro.currentStep);
-  const setStep = useGameStore((state) => state.setIntroStep);
-  const debug = Debug.getInstance();
-
-  const handlePress = (): void => {
-    if (step === "searching") {
-      setStep("helped");
-    }
-  };
-
-  const shouldShow = step === "searching" || debug.active;
-
-  if (!shouldShow) {
-    return <></>;
-  }
-
-  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/three/interaction/PyloneDestroyed.tsx

@@ -1,52 +0,0 @@
-import { InteractableObject } from "@/components/three/interaction/InteractableObject";
-import { useGameStore } from "@/managers/stores/useGameStore";
-import { Debug } from "@/utils/debug/Debug";
-import type { Vector3Tuple } from "@/types/three/three";
-
-interface PyloneDestroyedProps {
-  position: Vector3Tuple;
-}
-
-export function PyloneDestroyed({
-  position,
-}: PyloneDestroyedProps): React.JSX.Element {
-  const step = useGameStore((state) => state.intro.currentStep);
-  const setStep = useGameStore((state) => state.setIntroStep);
-  const setCanMove = useGameStore((state) => state.setCanMove);
-  const showDialog = useGameStore((state) => state.showDialog);
-  const debug = Debug.getInstance();
-
-  const handlePress = (): void => {
-    if (step === "helped") {
-      setCanMove(false);
-      setStep("manipulation");
-    } else if (step === "searching") {
-      showDialog(
-        "Cet objet est trop lourd pour le porter tout seul, trouve de l'aide",
-      );
-    }
-  };
-
-  const shouldShow =
-    step === "helped" || step === "manipulation" || debug.active;
-
-  if (!shouldShow) {
-    return <></>;
-  }
-
-  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/ui/IntroUI.tsx

@@ -1,129 +0,0 @@
-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;
-
-  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

@@ -1,148 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { useFrame, useThree } from "@react-three/fiber";
-import * as THREE from "three";
-import { ZONES } from "@/data/zones";
-import { useGameStore } from "@/managers/stores/useGameStore";
-import { Debug } from "@/utils/debug/Debug";
-import { GAME_STEPS } from "@/data/game/gameStateConfig";
-
-const _playerPos = new THREE.Vector3();
-const _zonePos = new THREE.Vector3();
-
-export function ZoneDetection(): null {
-  const camera = useThree((state) => state.camera);
-  const triggeredZones = useRef<Set<string>>(new Set());
-  const debug = Debug.getInstance();
-  const step = useGameStore((state) => state.intro.currentStep);
-  const setStep = useGameStore((state) => state.setIntroStep);
-
-  useEffect(() => {
-    if (!debug.active) return;
-
-    const folder = debug.createFolder("Game");
-    if (!folder) return;
-
-    const gameState = { step: step };
-    const playerPos = { x: 0, y: 0, z: 0 };
-
-    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 unsubStore = useGameStore.subscribe((state) => {
-      gameState.step = state.intro.currentStep;
-      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");
-      unsubStore();
-    };
-  }, [debug, camera, step]);
-
-  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) {
-        setStep(zone.targetStep);
-        triggeredZones.current.add(zone.id);
-        break;
-      }
-    }
-  });
-
-  return null;
-}
-
-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)}
-        />
-      ))}
-    </>
-  );
-}
-
-function ZoneVisual({
-  position,
-  radius,
-  height,
-  triggered,
-}: {
-  position: [number, number, number];
-  radius: number;
-  height: number;
-  triggered: boolean;
-}): 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>
-  );
-}