# eiz3n/flip-prototype architecture

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

- Interactive diagram: https://gitdiagram.com/eiz3n/flip-prototype
- Repository: https://github.com/eiz3n/flip-prototype

## Overview

Flip is a one-button browser game. The player progresses from title and stage selection through timed rooms, earning stars on stage clear and reaching a win screen. The main loop connects input, game-state orchestration, pure simulation, effects, and canvas rendering; levels and saved per-stage progress support the run. The README and source index document major capabilities, but several implementation details were not excerpted, so some subsystem links are omitted rather than inferred.

Main entry points: [`game/src/main.js`](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/main.js) (Browser loop), [`game/src/sim/world.js`](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/sim/world.js) (World simulation), [`game/src/game.js`](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/game.js) (Game state), [`game/src/view/render.js`](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/view/render.js) (Frame renderer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Game runtime"]
  node_main["Browser loop<br/>[main.js]"]
  node_input["Input binding<br/>[input.js]"]
  node_game["Game state<br/>[game.js]"]
  node_config["Gameplay config<br/>[config.js]"]
end

subgraph group_simulation["Simulation"]
  node_world["World simulation<br/>[world.js]"]
  node_physics["Motion physics<br/>[physics.js]"]
  node_collision["Collision checks<br/>[collision.js]"]
  node_room["Room model<br/>[room.js]"]
  node_entities["Player entities<br/>[entities.js]"]
  node_wave["Wall polarity wave<br/>[wave.js]"]
end

subgraph group_content["Levels and progress"]
  node_levels["Room definitions"]
  node_validation["Level validation<br/>[validate.js]"]
  node_stars["Stage rating<br/>[stars.js]"]
  node_progress[("Saved progress<br/>[progress.js]")]
end

subgraph group_presentation["Presentation"]
  node_theme["Visual theme<br/>[theme.js]"]
  node_effects["Game effects<br/>[effects.js]"]
  node_particles["Particles<br/>[particles.js]"]
  node_camera["Camera<br/>[camera.js]"]
  node_renderer["Frame renderer<br/>[render.js]"]
  node_screens["Game screens<br/>[screens.js]"]
  node_art["Canvas artwork"]
end

node_player(("Player"))

node_player -->|"plays"| node_main
node_main -->|"binds controls"| node_input
node_main -->|"creates and updates"| node_game
node_main -->|"loads rooms"| node_levels
node_main -->|"configures"| node_config
node_main -->|"configures visuals"| node_theme
node_main -->|"updates effects"| node_effects
node_main -->|"renders frames"| node_renderer
node_main -->|"updates camera"| node_camera
node_game -->|"steps simulation"| node_world
node_game -->|"rates stages"| node_stars
node_game -->|"loads and saves"| node_progress
node_world -->|"builds rooms"| node_room
node_world -->|"creates player"| node_entities
node_world -->|"reads polarity"| node_wave
node_world -->|"advances motion"| node_physics
node_world -->|"checks contacts"| node_collision
node_validation -->|"builds posts"| node_room
node_renderer -->|"reads wave"| node_wave
node_renderer -->|"draws room"| node_art
node_renderer -->|"draws screens"| node_screens
node_screens -->|"draws screen elements"| node_art
node_screens -->|"shows ratings"| node_stars
node_screens -->|"shows bests"| node_progress
node_effects -->|"spawns and updates"| node_particles

click node_main "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/main.js"
click node_input "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/input.js"
click node_game "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/game.js"
click node_config "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/config.js"
click node_theme "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/theme.js"
click node_world "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/sim/world.js"
click node_physics "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/sim/physics.js"
click node_collision "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/sim/collision.js"
click node_room "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/sim/room.js"
click node_entities "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/sim/entities.js"
click node_wave "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/sim/wave.js"
click node_levels "https://github.com/eiz3n/flip-prototype/tree/Dev/game/src/levels"
click node_validation "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/levels/validate.js"
click node_stars "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/stars.js"
click node_progress "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/progress.js"
click node_effects "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/view/anim/effects.js"
click node_particles "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/view/particles.js"
click node_camera "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/view/camera.js"
click node_renderer "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/view/render.js"
click node_screens "https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/view/screens.js"
click node_art "https://github.com/eiz3n/flip-prototype/tree/Dev/game/src/view/art"

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_main,node_input,node_game,node_config toneBlue
class node_world,node_physics,node_collision,node_room,node_entities,node_wave toneAmber
class node_levels,node_validation,node_stars,node_progress toneMint
class node_theme,node_effects,node_particles,node_camera,node_renderer,node_screens,node_art toneRose
class node_player toneIndigo
```

## Components

### Game runtime

- [Browser loop](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/main.js): `game/src/main.js`
- [Input binding](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/input.js): `game/src/input.js`
- [Game state](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/game.js): `game/src/game.js`
- [Gameplay config](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/config.js): `game/src/config.js`

### Simulation

- [World simulation](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/sim/world.js): `game/src/sim/world.js`
- [Motion physics](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/sim/physics.js): `game/src/sim/physics.js`
- [Collision checks](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/sim/collision.js): `game/src/sim/collision.js`
- [Room model](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/sim/room.js): `game/src/sim/room.js`
- [Player entities](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/sim/entities.js): `game/src/sim/entities.js`
- [Wall polarity wave](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/sim/wave.js): `game/src/sim/wave.js`

### Levels and progress

- [Room definitions](https://github.com/eiz3n/flip-prototype/tree/Dev/game/src/levels): `game/src/levels`
- [Level validation](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/levels/validate.js): `game/src/levels/validate.js`
- [Stage rating](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/stars.js): `game/src/stars.js`
- [Saved progress](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/progress.js): `game/src/progress.js`

### Presentation

- [Visual theme](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/theme.js): `game/src/theme.js`
- [Game effects](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/view/anim/effects.js): `game/src/view/anim/effects.js`
- [Particles](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/view/particles.js): `game/src/view/particles.js`
- [Camera](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/view/camera.js): `game/src/view/camera.js`
- [Frame renderer](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/view/render.js): `game/src/view/render.js`
- [Game screens](https://github.com/eiz3n/flip-prototype/blob/Dev/game/src/view/screens.js): `game/src/view/screens.js`
- [Canvas artwork](https://github.com/eiz3n/flip-prototype/tree/Dev/game/src/view/art): `game/src/view/art`

### Other components

- **Player**

## Connections

- Player → Browser loop: plays (evidence: `README.md`)
- Browser loop → Input binding: binds controls (evidence: `game/src/main.js`)
- Browser loop → Game state: creates and updates (evidence: `game/src/main.js`)
- Browser loop → Room definitions: loads rooms (evidence: `game/src/main.js`)
- Browser loop → Gameplay config: configures (evidence: `game/src/main.js`)
- Browser loop → Visual theme: configures visuals (evidence: `game/src/main.js`)
- Browser loop → Game effects: updates effects (evidence: `game/src/main.js`)
- Browser loop → Frame renderer: renders frames (evidence: `game/src/main.js`)
- Browser loop → Camera: updates camera (evidence: `game/src/main.js`)
- Game state → World simulation: steps simulation (evidence: `game/src/game.js`)
- Game state → Stage rating: rates stages (evidence: `game/src/game.js`)
- Game state → Saved progress: loads and saves (evidence: `game/src/game.js`)
- World simulation → Room model: builds rooms (evidence: `game/src/sim/world.js`)
- World simulation → Player entities: creates player (evidence: `game/src/sim/world.js`)
- World simulation → Wall polarity wave: reads polarity (evidence: `game/src/sim/world.js`)
- World simulation → Motion physics: advances motion (evidence: `game/src/sim/world.js`)
- World simulation → Collision checks: checks contacts (evidence: `game/src/sim/world.js`)
- Level validation → Room model: builds posts (evidence: `game/src/levels/validate.js`)
- Frame renderer → Wall polarity wave: reads wave (evidence: `game/src/view/render.js`)
- Frame renderer → Canvas artwork: draws room (evidence: `game/src/view/render.js`)
- Frame renderer → Game screens: draws screens (evidence: `game/src/view/render.js`)
- Game screens → Canvas artwork: draws screen elements (evidence: `game/src/view/screens.js`)
- Game screens → Stage rating: shows ratings (evidence: `game/src/view/screens.js`)
- Game screens → Saved progress: shows bests (evidence: `game/src/view/screens.js`)
- Game effects → Particles: spawns and updates (evidence: `game/src/view/anim/effects.js`)