# vmnom/mini-arcade architecture

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

- Interactive diagram: https://gitdiagram.com/vmnom/mini-arcade
- Repository: https://github.com/vmnom/mini-arcade

## Overview

Mini Arcade is a static browser-game site: visitors open the landing page, choose a listed game, and play it in its own page. The landing experience is enhanced by JavaScript interactions and responsive styling; Rainbow Bottles is the documented game, with 3D graphics, themes, difficulty levels, and drag-and-drop play. The README documents these capabilities, but the game and page source were not sampled, so internal game calls and page wiring are not asserted.

Main entry points: [`index.html`](https://github.com/vmnom/mini-arcade/blob/main/index.html) (Game catalog), [`games/3d-rainbow-bottles.html`](https://github.com/vmnom/mini-arcade/blob/main/games/3d-rainbow-bottles.html) (Rainbow Bottles), [`js/main.js`](https://github.com/vmnom/mini-arcade/blob/main/js/main.js) (Site interactions), [`css/main.css`](https://github.com/vmnom/mini-arcade/blob/main/css/main.css) (Site styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Arcade site"]
  node_landing["Game catalog<br/>[index.html]"]
end

subgraph group_presentation["Site experience"]
  node_site_js["Site interactions<br/>[main.js]"]
  node_site_css["Site styling<br/>[main.css]"]
end

subgraph group_games["Game experience"]
  node_rainbow["Rainbow Bottles"]
end

node_visitor(("Visitor"))
node_threejs["Three.js"]

node_visitor -->|"opens"| node_landing
node_landing -->|"enhanced by"| node_site_js
node_landing -->|"styled by"| node_site_css
node_visitor -->|"plays"| node_rainbow
node_rainbow -.->|"renders with"| node_threejs

click node_landing "https://github.com/vmnom/mini-arcade/blob/main/index.html"
click node_site_js "https://github.com/vmnom/mini-arcade/blob/main/js/main.js"
click node_site_css "https://github.com/vmnom/mini-arcade/blob/main/css/main.css"
click node_rainbow "https://github.com/vmnom/mini-arcade/blob/main/games/3d-rainbow-bottles.html"

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_landing toneBlue
class node_site_js,node_site_css toneAmber
class node_rainbow toneMint
class node_visitor,node_threejs toneIndigo
```

## Components

### Arcade site

- [Game catalog](https://github.com/vmnom/mini-arcade/blob/main/index.html): `index.html`

### Site experience

- [Site interactions](https://github.com/vmnom/mini-arcade/blob/main/js/main.js): `js/main.js`
- [Site styling](https://github.com/vmnom/mini-arcade/blob/main/css/main.css): `css/main.css`

### Game experience

- [Rainbow Bottles](https://github.com/vmnom/mini-arcade/blob/main/games/3d-rainbow-bottles.html): `games/3d-rainbow-bottles.html`

### Other components

- **Visitor**
- **Three.js**

## Connections

- Visitor → Game catalog: opens (evidence: `README.md`)
- Game catalog → Site interactions: enhanced by (evidence: `README.md`)
- Game catalog → Site styling: styled by (evidence: `README.md`)
- Visitor → Rainbow Bottles: plays (evidence: `README.md`)
- Rainbow Bottles → Three.js: renders with (evidence: `README.md`)