# bradygaster/brickbreak architecture

> Architecture diagram of the GitHub repository bradygaster/brickbreak, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/bradygaster/brickbreak
- Repository: https://github.com/bradygaster/brickbreak

## Overview

BRICKBREAK is a browser Breakout game. A player uses keyboard controls, or enables demo mode; the browser entry point advances the deterministic game, renders each frame, and turns game events into optional sound. Separate branches provide keyboard input, saved sound/theme preferences, and accessible theme and motion behavior. The README documents the play, demo, sound, and light/dark capabilities. Some setup and rendering details are unsampled, so only documented or excerpt-supported connections are shown.

Main entry points: [`src/main.js`](https://github.com/bradygaster/brickbreak/blob/main/src/main.js) (Game Loop), [`src/game/step.js`](https://github.com/bradygaster/brickbreak/blob/main/src/game/step.js) (Game Step), [`src/game/constants.js`](https://github.com/bradygaster/brickbreak/blob/main/src/game/constants.js) (Game Tuning), [`index.html`](https://github.com/bradygaster/brickbreak/blob/main/index.html) (HTML Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_play["Browser Play"]
  node_entry["Game Loop<br/>[main.js]"]
  node_shell["HTML Page<br/>[index.html]"]
end

subgraph group_game["Game Simulation"]
  node_core["Game API<br/>[index.js]"]
  node_step["Game Step<br/>[step.js]"]
  node_state["Game State<br/>[state.js]"]
  node_physics["Collision Physics<br/>[physics.js]"]
  node_rng["Seeded RNG<br/>[rng.js]"]
  node_constants["Game Tuning<br/>[constants.js]"]
  node_autopilot["Demo Autopilot<br/>[autopilot.js]"]
end

subgraph group_visual["Rendering and Themes"]
  node_renderer["Canvas Renderer<br/>[renderer.js]"]
  node_themes["Theme Roles<br/>[themes.js]"]
  node_palette["Color Palette<br/>[palette.js]"]
end

subgraph group_extras["Input, Preferences, Audio"]
  node_input["Keyboard Input<br/>[input.js]"]
  node_prefs["Saved Preferences<br/>[prefs.js]"]
  node_cues["Sound Cues<br/>[cues.js]"]
  node_audio["Web Audio Engine<br/>[engine.js]"]
end

node_player(("Player"))

node_player -->|"opens"| node_shell
node_shell -.->|"loads game"| node_entry
node_entry -->|"calls step, demo"| node_core
node_entry -->|"reads controls"| node_input
node_entry -->|"renders frames"| node_renderer
node_entry -->|"resolves preferences"| node_prefs
node_entry -->|"maps events"| node_cues
node_entry -->|"plays cues"| node_audio
node_entry -->|"gets demo input"| node_autopilot
node_entry -->|"advances state"| node_step
node_step -->|"builds game state"| node_state
node_step -->|"calculates collisions"| node_physics
node_step -->|"gets random values"| node_rng
node_step -->|"uses tuning"| node_constants
node_state -->|"normalizes seed"| node_rng
node_physics -->|"uses dimensions"| node_constants
node_autopilot -->|"uses deadzone"| node_constants
node_renderer -->|"selects theme"| node_themes
node_themes -->|"uses colors"| node_palette
node_audio -->|"validates notes"| node_cues

click node_entry "https://github.com/bradygaster/brickbreak/blob/main/src/main.js"
click node_shell "https://github.com/bradygaster/brickbreak/blob/main/index.html"
click node_input "https://github.com/bradygaster/brickbreak/blob/main/src/input.js"
click node_core "https://github.com/bradygaster/brickbreak/blob/main/src/game/index.js"
click node_step "https://github.com/bradygaster/brickbreak/blob/main/src/game/step.js"
click node_state "https://github.com/bradygaster/brickbreak/blob/main/src/game/state.js"
click node_physics "https://github.com/bradygaster/brickbreak/blob/main/src/game/physics.js"
click node_rng "https://github.com/bradygaster/brickbreak/blob/main/src/game/rng.js"
click node_constants "https://github.com/bradygaster/brickbreak/blob/main/src/game/constants.js"
click node_autopilot "https://github.com/bradygaster/brickbreak/blob/main/src/game/autopilot.js"
click node_renderer "https://github.com/bradygaster/brickbreak/blob/main/src/render/renderer.js"
click node_themes "https://github.com/bradygaster/brickbreak/blob/main/src/render/themes.js"
click node_palette "https://github.com/bradygaster/brickbreak/blob/main/src/render/palette.js"
click node_prefs "https://github.com/bradygaster/brickbreak/blob/main/src/prefs.js"
click node_cues "https://github.com/bradygaster/brickbreak/blob/main/src/audio/cues.js"
click node_audio "https://github.com/bradygaster/brickbreak/blob/main/src/audio/engine.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_shell toneBlue
class node_core,node_step,node_state,node_physics,node_rng,node_constants,node_autopilot toneAmber
class node_renderer,node_themes,node_palette toneMint
class node_input,node_prefs,node_cues,node_audio toneRose
class node_player toneIndigo
```

## Components

### Browser Play

- [Game Loop](https://github.com/bradygaster/brickbreak/blob/main/src/main.js): `src/main.js`
- [HTML Page](https://github.com/bradygaster/brickbreak/blob/main/index.html): `index.html`

### Game Simulation

- [Game API](https://github.com/bradygaster/brickbreak/blob/main/src/game/index.js): `src/game/index.js`
- [Game Step](https://github.com/bradygaster/brickbreak/blob/main/src/game/step.js): `src/game/step.js`
- [Game State](https://github.com/bradygaster/brickbreak/blob/main/src/game/state.js): `src/game/state.js`
- [Collision Physics](https://github.com/bradygaster/brickbreak/blob/main/src/game/physics.js): `src/game/physics.js`
- [Seeded RNG](https://github.com/bradygaster/brickbreak/blob/main/src/game/rng.js): `src/game/rng.js`
- [Game Tuning](https://github.com/bradygaster/brickbreak/blob/main/src/game/constants.js): `src/game/constants.js`
- [Demo Autopilot](https://github.com/bradygaster/brickbreak/blob/main/src/game/autopilot.js): `src/game/autopilot.js`

### Rendering and Themes

- [Canvas Renderer](https://github.com/bradygaster/brickbreak/blob/main/src/render/renderer.js): `src/render/renderer.js`
- [Theme Roles](https://github.com/bradygaster/brickbreak/blob/main/src/render/themes.js): `src/render/themes.js`
- [Color Palette](https://github.com/bradygaster/brickbreak/blob/main/src/render/palette.js): `src/render/palette.js`

### Input, Preferences, Audio

- [Keyboard Input](https://github.com/bradygaster/brickbreak/blob/main/src/input.js): `src/input.js`
- [Saved Preferences](https://github.com/bradygaster/brickbreak/blob/main/src/prefs.js): `src/prefs.js`
- [Sound Cues](https://github.com/bradygaster/brickbreak/blob/main/src/audio/cues.js): `src/audio/cues.js`
- [Web Audio Engine](https://github.com/bradygaster/brickbreak/blob/main/src/audio/engine.js): `src/audio/engine.js`

### Other components

- **Player**

## Connections

- Player → HTML Page: opens (evidence: `README.md`)
- HTML Page → Game Loop: loads game
- Game Loop → Game API: calls step, demo (evidence: `src/main.js`)
- Game Loop → Keyboard Input: reads controls (evidence: `src/main.js`)
- Game Loop → Canvas Renderer: renders frames (evidence: `src/main.js`)
- Game Loop → Saved Preferences: resolves preferences (evidence: `src/main.js`)
- Game Loop → Sound Cues: maps events (evidence: `src/main.js`)
- Game Loop → Web Audio Engine: plays cues (evidence: `src/main.js`)
- Game Loop → Demo Autopilot: gets demo input (evidence: `src/main.js`)
- Game Loop → Game Step: advances state (evidence: `src/main.js`)
- Game Step → Game State: builds game state (evidence: `src/game/step.js`)
- Game Step → Collision Physics: calculates collisions (evidence: `src/game/step.js`)
- Game Step → Seeded RNG: gets random values (evidence: `src/game/step.js`)
- Game Step → Game Tuning: uses tuning (evidence: `src/game/step.js`)
- Game State → Seeded RNG: normalizes seed (evidence: `src/game/state.js`)
- Collision Physics → Game Tuning: uses dimensions (evidence: `src/game/physics.js`)
- Demo Autopilot → Game Tuning: uses deadzone (evidence: `src/game/autopilot.js`)
- Canvas Renderer → Theme Roles: selects theme (evidence: `src/render/renderer.js`)
- Theme Roles → Color Palette: uses colors (evidence: `src/render/themes.js`)
- Web Audio Engine → Sound Cues: validates notes (evidence: `src/audio/engine.js`)