docs: update game patterns documentation

This commit is contained in:
hypercross 2026-04-19 13:10:09 +08:00
parent 4d34f9fa78
commit 82df3f2a2f
1 changed files with 10 additions and 4 deletions

View File

@ -13,7 +13,7 @@ packages/my-game/
│ ├── game/ # Pure game logic (re-exported from boardgame-core) │ ├── game/ # Pure game logic (re-exported from boardgame-core)
│ ├── scenes/ # Phaser scenes (MenuScene, GameScene) │ ├── scenes/ # Phaser scenes (MenuScene, GameScene)
│ ├── spawners/ # Data-driven object lifecycle │ ├── spawners/ # Data-driven object lifecycle
│ ├── renderers/ # Renderers for game objects │ ├── gameobjects/ # Phaser GameObject or Container extensions
│ ├── state/ # UI-only reactive state │ ├── state/ # UI-only reactive state
│ ├── config.ts # Centralized layout & style constants │ ├── config.ts # Centralized layout & style constants
│ └── ui/App.tsx # Preact root component │ └── ui/App.tsx # Preact root component
@ -24,7 +24,7 @@ packages/my-game/
| `game/` | State, commands, prompts, validation (pure logic) | | `game/` | State, commands, prompts, validation (pure logic) |
| `scenes/` | Phaser lifecycle, input handling, visual composition | | `scenes/` | Phaser lifecycle, input handling, visual composition |
| `spawners/` | Reactive game object spawn/update/despawn | | `spawners/` | Reactive game object spawn/update/despawn |
| `renderers/` | Phaser visual representation of game objects | | `gameobjects/` | Phaser GameObjects or containers |
| `state/` | UI-only reactive state (selection, hover, etc.) | | `state/` | UI-only reactive state (selection, hover, etc.) |
| `ui/` | Preact components bridging Phaser and DOM | | `ui/` | Preact components bridging Phaser and DOM |
@ -51,9 +51,9 @@ Use `MutableSignal` for UI-only state, separate from game state.
- Clean up effects on object `'destroy'` to prevent leaks. - Clean up effects on object `'destroy'` to prevent leaks.
- See: `packages/onitama-game/src/state/ui.ts` - See: `packages/onitama-game/src/state/ui.ts`
### 4. Custom Containers ### 4. Custom GameObjects / Containers
Extend `Phaser.GameObjects.Container` to encapsulate visuals and state. Extend `Phaser.GameObjects.Container` to encapsulate visuals and state.
- Store logical state as private signals. - Use signals from `states/`, avoid relying on complex interal state.
- Use `effect()` for reactive highlights/selections. - Use `effect()` for reactive highlights/selections.
### 5. Tween Interruption ### 5. Tween Interruption
@ -66,6 +66,12 @@ Otherwise the game logic will hang.
Use `await this.sceneController.launch('SceneKey')`. Use `await this.sceneController.launch('SceneKey')`.
Register scenes in `App.tsx` via `<PhaserScene>`. Pass data via `data` prop. Register scenes in `App.tsx` via `<PhaserScene>`. Pass data via `data` prop.
### 7. Central Config
Use `src/config/layout.ts` for shared constants like `CELL_SIZE`, `BOARD_OFFSET`, etc.
Use `src/config/colors.ts` for shared colors.
Use `src/config/text.ts` for text styles.
## Best Practices ## Best Practices
- **Centralize Config**: Keep `CELL_SIZE`, `BOARD_OFFSET`, colors, etc., in `src/config.ts` with `as const`. Avoid magic numbers. - **Centralize Config**: Keep `CELL_SIZE`, `BOARD_OFFSET`, colors, etc., in `src/config.ts` with `as const`. Avoid magic numbers.