Current state: {mainState}
; +} +``` + +This is better than reading the whole store, because the component re-renders only when `mainState` changes. + +## Updating State + +Prefer explicit actions from the store. + +```ts +const advanceGameState = useGameStore((state) => state.advanceGameState); + +advanceGameState(); +``` + +For development and debug tooling, direct setters also exist: + +```ts +const setMainState = useGameStore((state) => state.setMainState); + +setMainState("bike"); +``` + +Direct setters are useful for debug panels, but production gameplay should prefer business actions such as `advanceGameState`, `completeBike`, or `completePylone`. + +Mission gameplay that can target `bike`, `pylone`, or `ferme` should prefer the generic mission actions: + +```ts +const setMissionStep = useGameStore((state) => state.setMissionStep); +const completeMission = useGameStore((state) => state.completeMission); + +setMissionStep("bike", "inspected"); +completeMission("bike"); +``` + +This keeps reusable gameplay components such as repair flows from duplicating mission-specific branches like `setBikeState`, `setPyloneState`, and `setFermeState`. + +## World Integration + +`src/world/GameStageContent.tsx` subscribes to `mainState` and mounts stage-specific content. + +For repair missions, it mounts the reusable `RepairGame` component with a mission id: + +```tsx +Aucun dialogue synchronise avec cette cinematic.
+ ) : ( + (selectedCinematic.dialogueCues ?? []).map((cue, cueIndex) => ( +{status}
+{status}
+