# felipedenuzzo/gravidade-web architecture

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

- Interactive diagram: https://gitdiagram.com/felipedenuzzo/gravidade-web
- Repository: https://github.com/felipedenuzzo/gravidade-web

## Overview

Gravidade Web is a browser version of a tilt-controlled, phase-based collection game. The player selects a mode and difficulty, then steers the ball to collect phase items; timed modes can end in timeout, while clearing the orange targets leads to victory and phase progression. The runtime is organized around `js/main.js`, with separate physics, phase configuration, item, magnet, black-hole, HUD, overlay, and transition-video systems. The excerpts show key interactions, but not every runtime call site, so uncertain links are omitted.

Main entry points: [`js/main.js`](https://github.com/felipedenuzzo/gravidade-web/blob/main/js/main.js) (Game orchestrator), [`index.html`](https://github.com/felipedenuzzo/gravidade-web/blob/main/index.html) (Game page), [`js/ItemFactory.js`](https://github.com/felipedenuzzo/gravidade-web/blob/main/js/ItemFactory.js) (Items and targets), [`js/Physics.js`](https://github.com/felipedenuzzo/gravidade-web/blob/main/js/Physics.js) (Ball physics)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_gameplay["Game flow"]
  node_main["Game orchestrator<br/>[main.js]"]
  node_state["Game state<br/>[GameState.js]"]
  node_phases["Phase rules<br/>[PhaseManager.js]"]
end

subgraph group_simulation["Simulation"]
  node_items["Items and targets<br/>[ItemFactory.js]"]
  node_physics["Ball physics<br/>[Physics.js]"]
  node_magnets["Magnet obstacles<br/>[MagnetSystem.js]"]
  node_blackhole["Black holes<br/>[BlackHole.js]"]
end

subgraph group_interface["Player interface"]
  node_entry["Game page<br/>[index.html]"]
  node_hud["Status HUD<br/>[HUD.js]"]
  node_overlays["Menus and outcomes<br/>[OverlayManager.js]"]
  node_styles["Game presentation<br/>[style.css]"]
end

subgraph group_media["Game media"]
  node_intro["Transition videos<br/>[IntroSystem.js]"]
  node_assets["Game assets"]
end

node_player(("Player"))
node_browser(("Browser sensors"))

node_player -->|"opens"| node_entry
node_entry -->|"loads"| node_main
node_main -->|"updates"| node_state
node_main -->|"gets phase rules"| node_phases
node_main -->|"initializes"| node_items
node_main -->|"checks collection"| node_items
node_main -->|"starts loop"| node_physics
node_browser -->|"orientation input"| node_physics
node_physics -->|"applies repulsion"| node_magnets
node_main -->|"creates obstacles"| node_magnets
node_main -->|"creates field"| node_blackhole
node_main -->|"updates display"| node_hud
node_main -->|"shows menus and outcomes"| node_overlays
node_main -->|"plays transitions"| node_intro
node_items -->|"loads item images"| node_assets
node_magnets -->|"loads magnet images"| node_assets
node_blackhole -->|"loads image"| node_assets
node_entry -->|"uses styles"| node_styles

click node_entry "https://github.com/felipedenuzzo/gravidade-web/blob/main/index.html"
click node_main "https://github.com/felipedenuzzo/gravidade-web/blob/main/js/main.js"
click node_state "https://github.com/felipedenuzzo/gravidade-web/blob/main/js/GameState.js"
click node_phases "https://github.com/felipedenuzzo/gravidade-web/blob/main/js/PhaseManager.js"
click node_items "https://github.com/felipedenuzzo/gravidade-web/blob/main/js/ItemFactory.js"
click node_physics "https://github.com/felipedenuzzo/gravidade-web/blob/main/js/Physics.js"
click node_magnets "https://github.com/felipedenuzzo/gravidade-web/blob/main/js/MagnetSystem.js"
click node_blackhole "https://github.com/felipedenuzzo/gravidade-web/blob/main/js/BlackHole.js"
click node_hud "https://github.com/felipedenuzzo/gravidade-web/blob/main/js/HUD.js"
click node_overlays "https://github.com/felipedenuzzo/gravidade-web/blob/main/js/OverlayManager.js"
click node_intro "https://github.com/felipedenuzzo/gravidade-web/blob/main/js/IntroSystem.js"
click node_assets "https://github.com/felipedenuzzo/gravidade-web/tree/main/assets"
click node_styles "https://github.com/felipedenuzzo/gravidade-web/blob/main/style.css"

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_state,node_phases,node_browser toneBlue
class node_items,node_physics,node_magnets,node_blackhole toneAmber
class node_entry,node_hud,node_overlays,node_styles toneMint
class node_intro,node_assets toneRose
class node_player toneIndigo
```

## Components

### Game flow

- [Game orchestrator](https://github.com/felipedenuzzo/gravidade-web/blob/main/js/main.js): `js/main.js`
- [Game state](https://github.com/felipedenuzzo/gravidade-web/blob/main/js/GameState.js): `js/GameState.js`
- [Phase rules](https://github.com/felipedenuzzo/gravidade-web/blob/main/js/PhaseManager.js): `js/PhaseManager.js`

### Simulation

- [Items and targets](https://github.com/felipedenuzzo/gravidade-web/blob/main/js/ItemFactory.js): `js/ItemFactory.js`
- [Ball physics](https://github.com/felipedenuzzo/gravidade-web/blob/main/js/Physics.js): `js/Physics.js`
- [Magnet obstacles](https://github.com/felipedenuzzo/gravidade-web/blob/main/js/MagnetSystem.js): `js/MagnetSystem.js`
- [Black holes](https://github.com/felipedenuzzo/gravidade-web/blob/main/js/BlackHole.js): `js/BlackHole.js`

### Player interface

- [Game page](https://github.com/felipedenuzzo/gravidade-web/blob/main/index.html): `index.html`
- [Status HUD](https://github.com/felipedenuzzo/gravidade-web/blob/main/js/HUD.js): `js/HUD.js`
- [Menus and outcomes](https://github.com/felipedenuzzo/gravidade-web/blob/main/js/OverlayManager.js): `js/OverlayManager.js`
- [Game presentation](https://github.com/felipedenuzzo/gravidade-web/blob/main/style.css): `style.css`

### Game media

- [Transition videos](https://github.com/felipedenuzzo/gravidade-web/blob/main/js/IntroSystem.js): `js/IntroSystem.js`
- [Game assets](https://github.com/felipedenuzzo/gravidade-web/tree/main/assets): `assets`

### Other components

- **Player**
- **Browser sensors**

## Connections

- Player → Game page: opens
- Game page → Game orchestrator: loads
- Game orchestrator → Game state: updates
- Game orchestrator → Phase rules: gets phase rules
- Game orchestrator → Items and targets: initializes
- Game orchestrator → Items and targets: checks collection
- Game orchestrator → Ball physics: starts loop
- Browser sensors → Ball physics: orientation input
- Ball physics → Magnet obstacles: applies repulsion
- Game orchestrator → Magnet obstacles: creates obstacles
- Game orchestrator → Black holes: creates field
- Game orchestrator → Status HUD: updates display
- Game orchestrator → Menus and outcomes: shows menus and outcomes
- Game orchestrator → Transition videos: plays transitions
- Items and targets → Game assets: loads item images
- Magnet obstacles → Game assets: loads magnet images
- Black holes → Game assets: loads image
- Game page → Game presentation: uses styles