# Attention Retro Disorder

A retro-themed HTML5 video game built with **Phaser 3.90**. "Attention Retro Disorder" features a modular architecture where players progress through levels, each consisting of a random selection of mini-games.

## 🎮 About the Game

The game consists of a parent framework that manages levels, lives, and scene flow, alongside several self-contained mini-games:

1.  **Colorado Defense**: A Missile Command-style defense game.
2.  **Code Bug Invaders**: A Space Invaders-style shooter.
3.  **DotDude**: A Pac-Man style maze chase game.
4.  **SmashOut**: [Description pending - check `src/games/smash-out/` for details].

Each mini-game level is designed to be completed in under 2 minutes. Upon completing all mini-games in a level, the player advances to the next level.

## 🛠️ Tech Stack

-   **Framework**: Phaser 3.90 (loaded via CDN)
-   **Language**: JavaScript (ES6 Modules)
-   **Build**: No bundler required (Vanilla JS/HTML)
-   **Assets**: Vector graphics (Phaser Graphics) and temporary sprites during development

## 🚀 Getting Started

No complex build process is required. You can run the game locally using any static HTTP server.

### Prerequisites

-   Python 3 (for the built-in server) OR `npx` (for serve)

### Installation & Run

1.  Clone the repository:
    ```bash
    git clone <repository-url>
    cd attention-retro-disorder
    ```

2.  Start a local server:

    **Option A: Using Python**
    ```bash
    python3 -m http.server 8080
    ```

    **Option B: Using Node.js**
    ```bash
    npx serve .
    ```

3.  Open your browser and navigate to:
    ```
    http://localhost:8080
    ```

## 📂 Project Structure

The project follows a modular architecture. Mini-games are self-contained scenes that can be added independently.

```
index.html              # Main HTML entry point
config/
  game.json             # Global configuration (lives, level mappings, game pool)
src/
  main.js               # Phaser initialization and scene registration
  scenes/
    MainMenu.js         # Title screen and start logic
    GameManager.js      # Core game logic: level sequencing, lives, state management
    GameOver.js         # Game over screen
    LevelComplete.js    # Level transition screen
  games/                # Mini-game directory
    colorado-defense/   # Missile Command clone
      ColoradoDefense.js
    code-bug-invaders/  # Space Invaders clone
      CodeBugInvaders.js
    dot-dude/           # Maze chase game
      DotDude.js
    smash-out/          # [Game Name]
      SmashOut.js
```

## 🧩 Architecture & Mini-Game Contract

### Scene Flow
1.  `MainMenu` → User clicks start.
2.  `GameManager` → Reads `config/game.json`, selects N mini-games for the current level, and sequences them.
3.  `Mini-Game Scene` → Runs the level.
4.  `GameManager` → Receives completion/failure signals, updates global state (lives/level), and transitions to the next scene.

### Adding a New Mini-Game

To add a new mini-game:

1.  Create a new subdirectory under `src/games/` (e.g., `src/games/new-game/`).
2.  Create a JavaScript file (e.g., `NewGame.js`) exporting a Phaser `Scene`.
3.  Implement the **Mini-Game Contract**:
    -   Accept `onComplete` and `onFail` callbacks (passed via Phaser scene data).
    -   Call `onComplete` when the level is beaten.
    -   Call `onFail` when a life is lost.
4.  Register the scene in `src/main.js` by importing it and adding it to the `scene` array in the Phaser config.
5.  Add the game to the active pool in `config/game.json`.

### Configuration

Most game settings are controlled via JSON files:
-   `config/game.json`: Controls level-to-game-count mapping, total lives, and the active game pool.
-   Individual game folders may contain specific JSON configs for that mini-game's balance and layout.

## 📝 Development Guidelines

-   **Scaling**: The codebase is designed for modular scaling. New games do not require changes to the core `GameManager` logic if they adhere to the scene contract.
-   **Assets**: Use Vector Graphics (`Phaser.Graphics`) for initial development. Replace with sprites later as needed.
-   **Modularity**: Use ES6 `import`/`export` for all dependencies. Do not use global variables for game state.
-   **Viewport**: The game renders at 1600x900 and scales to fit the user's viewport.

## 📄 License

MIT