From a14f776e5d5deac336ab9b06d0b2711ca5a7724a Mon Sep 17 00:00:00 2001
From: Tom Boullay <tom@famille-boullay.fr>
Date: Thu, 30 Apr 2026 14:59:41 +0200
Subject: [PATCH] address zustand progression review feedback

---
 src/components/ui/GameStateHUD.tsx  |   7 +-
 src/managers/stores/useGameStore.ts | 196 ++++++++++++----------------
 2 files changed, 88 insertions(+), 115 deletions(-)

diff --git a/src/components/ui/GameStateHUD.tsx b/src/components/ui/GameStateHUD.tsx
index eec8a3d..f38bafd 100644
--- a/src/components/ui/GameStateHUD.tsx
+++ b/src/components/ui/GameStateHUD.tsx
@@ -44,10 +44,15 @@ export function GameStateHUD(): React.JSX.Element | null {
 
       <p className="game-state-hud__detail">Sub state: {detail}</p>
 
-      <div className="game-state-hud__states" aria-label="Main states">
+      <div
+        className="game-state-hud__states"
+        aria-label="Main states"
+        role="group"
+      >
         {MAIN_STATES.map((state) => (
           <button
             key={state}
+            aria-pressed={state === mainState}
             className={state === mainState ? "is-active" : undefined}
             type="button"
             onClick={() => setMainState(state)}
diff --git a/src/managers/stores/useGameStore.ts b/src/managers/stores/useGameStore.ts
index 78e683e..db0a093 100644
--- a/src/managers/stores/useGameStore.ts
+++ b/src/managers/stores/useGameStore.ts
@@ -56,10 +56,12 @@ interface GameActions {
 }
 
 export type GameStore = GameState & GameActions;
+type GameStateUpdate = Partial<GameState>;
 
 function getNextMissionStep(step: MissionStep): MissionStep {
   switch (step) {
     case "locked":
+      return "waiting";
     case "waiting":
       return "inspected";
     case "inspected":
@@ -74,6 +76,76 @@ function getNextMissionStep(step: MissionStep): MissionStep {
   }
 }
 
+function completeIntroState(state: GameState): GameStateUpdate {
+  return {
+    mainState: "bike",
+    intro: {
+      ...state.intro,
+      hasCompleted: true,
+      isBikeUnlocked: true,
+    },
+    bike: {
+      ...state.bike,
+      currentStep: "waiting",
+    },
+  };
+}
+
+function completeBikeState(state: GameState): GameStateUpdate {
+  return {
+    mainState: "pylone",
+    bike: {
+      ...state.bike,
+      currentStep: "done",
+      isRepaired: true,
+    },
+    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",
+    },
+  };
+}
+
+function completeFermeState(state: GameState): GameStateUpdate {
+  return {
+    mainState: "outro",
+    ferme: {
+      ...state.ferme,
+      currentStep: "done",
+      irrigationFixed: true,
+    },
+    outro: {
+      ...state.outro,
+      hasStarted: true,
+    },
+  };
+}
+
+function startOutroState(state: GameState): GameStateUpdate {
+  return {
+    mainState: "outro",
+    outro: {
+      ...state.outro,
+      hasStarted: true,
+    },
+  };
+}
+
 function createInitialGameState(): GameState {
   return {
     mainState: "intro",
@@ -117,98 +189,21 @@ export const useGameStore = create<GameStore>()((set) => ({
     set((state) => ({ ferme: { ...state.ferme, ...ferme } })),
   setOutroState: (outro) =>
     set((state) => ({ outro: { ...state.outro, ...outro } })),
-  completeIntro: () =>
-    set((state) => ({
-      mainState: "bike",
-      intro: {
-        ...state.intro,
-        hasCompleted: true,
-        isBikeUnlocked: true,
-      },
-      bike: {
-        ...state.bike,
-        currentStep: "inspected",
-      },
-    })),
-  completeBike: () =>
-    set((state) => ({
-      mainState: "pylone",
-      bike: {
-        ...state.bike,
-        currentStep: "done",
-        isRepaired: true,
-      },
-      pylone: {
-        ...state.pylone,
-        currentStep: "inspected",
-      },
-    })),
-  completePylone: () =>
-    set((state) => ({
-      mainState: "ferme",
-      pylone: {
-        ...state.pylone,
-        currentStep: "done",
-        isPowered: true,
-      },
-      ferme: {
-        ...state.ferme,
-        currentStep: "inspected",
-      },
-    })),
-  completeFerme: () =>
-    set((state) => ({
-      mainState: "outro",
-      ferme: {
-        ...state.ferme,
-        currentStep: "done",
-        irrigationFixed: true,
-      },
-      outro: {
-        ...state.outro,
-        hasStarted: true,
-      },
-    })),
-  startOutro: () =>
-    set((state) => ({
-      mainState: "outro",
-      outro: {
-        ...state.outro,
-        hasStarted: true,
-      },
-    })),
+  completeIntro: () => set(completeIntroState),
+  completeBike: () => set(completeBikeState),
+  completePylone: () => set(completePyloneState),
+  completeFerme: () => set(completeFermeState),
+  startOutro: () => set(startOutroState),
   advanceGameState: () =>
     set((state) => {
       if (state.mainState === "intro") {
-        return {
-          mainState: "bike",
-          intro: {
-            ...state.intro,
-            hasCompleted: true,
-            isBikeUnlocked: true,
-          },
-          bike: {
-            ...state.bike,
-            currentStep: "inspected",
-          },
-        };
+        return completeIntroState(state);
       }
 
       if (state.mainState === "bike") {
         const nextStep = getNextMissionStep(state.bike.currentStep);
         if (nextStep === "done") {
-          return {
-            mainState: "pylone",
-            bike: {
-              ...state.bike,
-              currentStep: "done",
-              isRepaired: true,
-            },
-            pylone: {
-              ...state.pylone,
-              currentStep: "inspected",
-            },
-          };
+          return completeBikeState(state);
         }
 
         return { bike: { ...state.bike, currentStep: nextStep } };
@@ -217,18 +212,7 @@ export const useGameStore = create<GameStore>()((set) => ({
       if (state.mainState === "pylone") {
         const nextStep = getNextMissionStep(state.pylone.currentStep);
         if (nextStep === "done") {
-          return {
-            mainState: "ferme",
-            pylone: {
-              ...state.pylone,
-              currentStep: "done",
-              isPowered: true,
-            },
-            ferme: {
-              ...state.ferme,
-              currentStep: "inspected",
-            },
-          };
+          return completePyloneState(state);
         }
 
         return { pylone: { ...state.pylone, currentStep: nextStep } };
@@ -237,29 +221,13 @@ export const useGameStore = create<GameStore>()((set) => ({
       if (state.mainState === "ferme") {
         const nextStep = getNextMissionStep(state.ferme.currentStep);
         if (nextStep === "done") {
-          return {
-            mainState: "outro",
-            ferme: {
-              ...state.ferme,
-              currentStep: "done",
-              irrigationFixed: true,
-            },
-            outro: {
-              ...state.outro,
-              hasStarted: true,
-            },
-          };
+          return completeFermeState(state);
         }
 
         return { ferme: { ...state.ferme, currentStep: nextStep } };
       }
 
-      return {
-        outro: {
-          ...state.outro,
-          hasStarted: true,
-        },
-      };
+      return startOutroState(state);
     }),
   resetGame: () => set(createInitialGameState()),
 }));