Migrate state management from MobX to Zustand with Immer

CLAUDE.md

@@ -27,17 +27,21 @@ React + TypeScript PacMan game using Create React App.
 
 ### State Management
 
-- **MobX** for reactive state
-- `Store` (src/model/Store.ts) - root store containing `Game` and `DebugState`
-- `Game` (src/model/Game.ts) - game state: PacMan, Ghosts, Maze, score, timers
-- React context provides store access via `useStore()`
+- **Zustand** for reactive state with Immer middleware for immutable updates
+- `src/model/store/` - Zustand store directory:
+  - `gameStore.ts` - main store with state and actions
+  - `types.ts` - TypeScript type definitions for state
+  - `initialState.ts` - factory functions for initial state
+  - `ghostHelpers.ts` - helper functions for ghost computed values
+  - `constants.ts` - game constants (timers, speeds)
+- `useGameStore` hook provides state access with selectors
 
 ### State Machines
 
-- **XState** for PacMan and Ghost behavior
-- `PacManStateChart` - states: eating, chasing, dead
-- `GhostStateChart` - states: chase, scatter, frightened, dead
-- Events trigger transitions (ENERGIZER_EATEN, COLLISION_WITH_GHOST, etc.)
+State machine logic is implemented directly in the Zustand store:
+- `sendPacManEvent` - PacMan state transitions: eating → chasing → dead
+- `sendGhostEvent` - Ghost state transitions: scatter ↔ chase ↔ frightened → dead
+- Events: ENERGIZER_EATEN, COLLISION_WITH_GHOST, PHASE_END, REVIVED, etc.
 
 ### Game Loop
 
@@ -54,13 +58,18 @@ React + TypeScript PacMan game using Create React App.
 ### Key Directories
 
 - `src/model/` - game logic, state machines, movement, collision
+- `src/model/store/` - Zustand store and state management
 - `src/pages/GamePage/` - main game UI components
 - `src/components/` - shared components (Board, Sprite, Grid)
 - `src/mapData/` - maze tile data
 
 ### Tech Stack
 
-- React 18, TypeScript, MobX 5, XState, styled-components, Ant Design, react-router-dom
+- React 18, TypeScript, Zustand, Immer, styled-components, Ant Design, react-router-dom
+
+### Legacy Code
+
+Some test files still import from the old MobX-based classes (Store.ts, Game.ts, PacMan.ts, Ghost.ts) for isolated unit testing. The main application uses Zustand exclusively.
 
 ## Deployment
 

package.json

@@ -15,16 +15,15 @@
     "@types/react-router-dom": "^5.1.7",
     "antd": "^4.24.0",
     "classnames": "^2.2.6",
+    "immer": "^11.1.3",
     "lodash": "^4.17.15",
-    "mobx": "^6.12.0",
-    "mobx-react-lite": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.2.1",
     "typescript": "^4.9.5",
-    "xstate": "^4.7.5"
+    "zustand": "^5.0.10"
   },
   "scripts": {
     "compile": "tsc --noEmit",

src/App.tsx

@@ -5,22 +5,17 @@ import './GlobalStyles.css';
 import { BrowserRouter } from 'react-router-dom';
 import { Routes } from './Routes';
 import { AppMenu } from './components/AppMenu';
-import { Store } from './model/Store';
-import { StoreProvider } from './components/StoreContext';
 
-const App: FC<{ store?: Store; Router?: ComponentType }> = ({
-  store = new Store(),
+const App: FC<{ Router?: ComponentType }> = ({
   Router = BrowserRouter,
 }) => {
   return (
-    <StoreProvider value={store}>
-      <Router>
-        <div className="App">
-          <AppMenu />
-          <Routes />
-        </div>
-      </Router>
-    </StoreProvider>
+    <Router>
+      <div className="App">
+        <AppMenu />
+        <Routes />
+      </div>
+    </Router>
   );
 };
 

src/components/StoreContext.ts

@@ -1,19 +1,17 @@
-import { createContext, useContext } from 'react';
-import { Game } from '../model/Game';
-import { assert } from '../util/assert';
-import { Store } from '../model/Store';
+import { useGameStore, Store, GameState, DebugState } from '../model/store';
 
-export const StoreContext = createContext<Store | null>(null);
+// Re-export the Zustand store hook as the main store access
+export { useGameStore };
 
-export const StoreProvider = StoreContext.Provider;
+// Compatibility hooks that match the old API
+export const useStore = (): Store => useGameStore();
+export const useGame = (): GameState => useGameStore((state) => state.game);
+export const useDebugState = (): DebugState => useGameStore((state) => state.debugState);
 
-export const useStore = (): Store => {
-  const store = useContext(StoreContext);
-  assert(store, 'Store not provided - use <StoreProvider>');
-  return store;
+// For components that need to select specific state
+export const useGameState = <T>(selector: (state: Store) => T): T => {
+  return useGameStore(selector);
 };
 
-export const useGame = (): Game => {
-  const store = useStore();
-  return store.game;
-};
+// Re-export Store type for backwards compatibility
+export type { Store, GameState, DebugState };