app-whac-a-mole

Expo React Native Whac-A-Mole game.

Overview

This project follows a design-first approach. Gameplay behavior is driven by reducer-managed state, UI updates flow from state changes, and side effects stay outside the reducer.

Architecture

The app is organized around three main areas:

• game domain logic for state transitions, spawning, scoring, and configuration
• UI components for board, holes, HUD, and screens
• services for side effects such as persistence

The design documents in design/ describe the intended architecture, data flow, and project structure.

Project Structure

Key source areas:

• src/screens/: route-level composition
• src/components/game/: game-specific presentation components
• src/game/: core game domain logic
• src/services/: persistence and other side-effect utilities
• src/utils/: shared helpers

Gameplay Model

The game uses a unidirectional flow:

1. user interacts with the UI
2. an action is dispatched
3. the reducer updates state
4. the UI re-renders from state
5. side effects run separately when needed

This keeps gameplay predictable and testable.

Board Layout

The board shape is defined in game config with explicit rows and columns. Presentation components render the board from that config so layout and state stay aligned.

Design Docs

See:

• design/architecture.md
• design/state-machine.md
• design/data-flow.md
• design/folder-structure.md
• design/design-patterns.md

Development

Install dependencies:

npm install

Run the app:

npm start

Run tests:

npm test