PR: refactor state game

src/components/game/GameFlow.tsx

@@ -4,8 +4,8 @@ import { useGameStore } from "@/managers/stores/useGameStore";
 import { AUDIO_PATHS } from "@/data/audioConfig";
 
 export function GameFlow(): null {
-  const step = useGameStore((state) => state.missionFlow.step);
+  const step = useGameStore((state) => state.intro.currentStep);
-  const setStep = useGameStore((state) => state.setFlowStep);
+  const setStep = useGameStore((state) => state.setIntroStep);
   const setActivityCity = useGameStore((state) => state.setActivityCity);
   const setCanMove = useGameStore((state) => state.setCanMove);
   const hasInitialized = useRef(false);

src/components/three/interaction/NPCHelper.tsx

@@ -8,8 +8,8 @@ interface NPCHelperProps {
 }
 
 export function NPCHelper({ position }: NPCHelperProps): React.JSX.Element {
-  const step = useGameStore((state) => state.missionFlow.step);
+  const step = useGameStore((state) => state.intro.currentStep);
-  const setStep = useGameStore((state) => state.setFlowStep);
+  const setStep = useGameStore((state) => state.setIntroStep);
   const debug = Debug.getInstance();
 
   const handlePress = (): void => {

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.missionFlow.step);
+  const step = useGameStore((state) => state.intro.currentStep);
-  const setStep = useGameStore((state) => state.setFlowStep);
+  const setStep = useGameStore((state) => state.setIntroStep);
   const setCanMove = useGameStore((state) => state.setCanMove);
   const showDialog = useGameStore((state) => state.showDialog);
   const debug = Debug.getInstance();

src/components/ui/IntroUI.tsx

@@ -2,9 +2,9 @@ import { useState } from "react";
 import { useGameStore } from "@/managers/stores/useGameStore";
 
 export function IntroUI(): React.JSX.Element | null {
-  const step = useGameStore((state) => state.missionFlow.step);
+  const step = useGameStore((state) => state.intro.currentStep);
   const setPlayerName = useGameStore((state) => state.setPlayerName);
-  const setStep = useGameStore((state) => state.setFlowStep);
+  const setStep = useGameStore((state) => state.setIntroStep);
   const [inputValue, setInputValue] = useState("");
 
   if (step !== "naming") return null;
@@ -100,7 +100,7 @@ export function IntroUI(): React.JSX.Element | null {
 }
 
 export function BienvenueDisplay(): React.JSX.Element | null {
-  const step = useGameStore((state) => state.missionFlow.step);
+  const step = useGameStore((state) => state.intro.currentStep);
   const playerName = useGameStore((state) => state.missionFlow.playerName);
 
   if (step !== "bienvenue") return null;

src/components/zone/ZoneDetection.tsx

@@ -26,8 +26,8 @@ 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.missionFlow.step);
+  const step = useGameStore((state) => state.intro.currentStep);
-  const setStep = useGameStore((state) => state.setFlowStep);
+  const setStep = useGameStore((state) => state.setIntroStep);
 
   useEffect(() => {
     if (!debug.active) return;
@@ -45,7 +45,7 @@ export function ZoneDetection(): null {
     folder.add(playerPos, "z").name("Player Z").listen().disable();
 
     const unsubStore = useGameStore.subscribe((state) => {
-      gameState.step = state.missionFlow.step;
+      gameState.step = state.intro.currentStep;
       folder.controllersRecursive().forEach((c) => c.updateDisplay());
     });
 

src/managers/stores/useGameStore.ts

@@ -10,6 +10,7 @@ export type MainGameState = "intro" | "bike" | "pylone" | "ferme" | "outro";
 export type { MissionStep, RepairMissionId };
 
 interface IntroState {
+  currentStep: GameStep;
   dialogueAudio: string | null;
   hasCompleted: boolean;
   isBikeUnlocked: boolean;
@@ -25,7 +26,6 @@ interface MissionFlowState {
   canMove: boolean;
   dialogMessage: string | null;
   playerName: string;
-  step: GameStep;
 }
 
 interface GameState {
@@ -54,7 +54,7 @@ interface GameActions {
   hideDialog: () => void;
   setActivityCity: (activityCity: boolean) => void;
   setCanMove: (canMove: boolean) => void;
-  setFlowStep: (step: GameStep) => void;
+  setIntroStep: (step: GameStep) => void;
   setIntroState: (intro: Partial<IntroState>) => void;
   setPlayerName: (playerName: string) => void;
   setBikeState: (bike: Partial<GameState["bike"]>) => void;
@@ -246,9 +246,9 @@ function createInitialGameState(): GameState {
       canMove: false,
       dialogMessage: null,
       playerName: "",
-      step: "intro",
     },
     intro: {
+      currentStep: "intro",
       dialogueAudio: null,
       hasCompleted: false,
       isBikeUnlocked: false,
@@ -291,8 +291,8 @@ export const useGameStore = create<GameStore>()((set) => ({
     set((state) => ({
       missionFlow: { ...state.missionFlow, canMove },
     })),
-  setFlowStep: (step) =>
+  setIntroStep: (step: GameStep) =>
-    set((state) => ({ missionFlow: { ...state.missionFlow, step } })),
+    set((state) => ({ intro: { ...state.intro, currentStep: step } })),
   setIntroState: (intro) =>
     set((state) => ({ intro: { ...state.intro, ...intro } })),
   setPlayerName: (playerName) =>