# tarmizie-razali/mlbb-roulette architecture

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

- Interactive diagram: https://gitdiagram.com/tarmizie-razali/mlbb-roulette
- Repository: https://github.com/tarmizie-razali/mlbb-roulette

## Overview

Hero Roulette is a static, single-page MLBB hero picker. A user selects lane or role filters, starts an animated draw from the matching roster, and sees the winning hero; recent picks appear in a history strip. The README documents roster data, placeholder portraits with optional slug-named artwork, responsive presentation, and Google Fonts. The tree contains index.html but no source excerpts, so component boundaries and wiring are based on README-described behavior rather than inspected implementation.

Main entry points: [`index.html`](https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html) (Animated draw), [`images`](https://github.com/tarmizie-razali/mlbb-roulette/tree/main/images) (Optional hero artwork)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["Picker interaction"]
  node_page["Picker page<br/>[index.html]"]
  node_filters["Lane and role filters<br/>[index.html]"]
  node_presentation["Responsive presentation<br/>[index.html]"]
end

subgraph group_draw["Draw and history"]
  node_draw["Animated draw<br/>[index.html]"]
  node_history["Recent picks<br/>[index.html]"]
end

subgraph group_content["Roster and portraits"]
  node_roster["Hero roster<br/>[index.html]"]
  node_portrait["Hero portrait<br/>[index.html]"]
  node_artwork["Optional hero artwork"]
end

node_user(("User"))
node_fonts["Google Fonts"]

node_user -->|"opens"| node_page
node_user -->|"selects"| node_filters
node_user -->|"starts"| node_draw
node_page -->|"renders"| node_presentation
node_filters -->|"filters pool"| node_draw
node_roster -->|"supplies heroes"| node_draw
node_draw -->|"shows pick"| node_portrait
node_draw -->|"records pick"| node_history
node_artwork -.->|"provides images"| node_portrait
node_fonts -.->|"styles text"| node_page

click node_page "https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html"
click node_filters "https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html"
click node_presentation "https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html"
click node_roster "https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html"
click node_draw "https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html"
click node_portrait "https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html"
click node_history "https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html"
click node_artwork "https://github.com/tarmizie-razali/mlbb-roulette/tree/main/images"

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_page,node_filters,node_presentation,node_user toneBlue
class node_draw,node_history toneAmber
class node_roster,node_portrait,node_artwork toneMint
class node_fonts toneIndigo
```

## Components

### Picker interaction

- [Picker page](https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html): `index.html`
- [Lane and role filters](https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html): `index.html`
- [Responsive presentation](https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html): `index.html`

### Draw and history

- [Animated draw](https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html): `index.html`
- [Recent picks](https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html): `index.html`

### Roster and portraits

- [Hero roster](https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html): `index.html`
- [Hero portrait](https://github.com/tarmizie-razali/mlbb-roulette/blob/main/index.html): `index.html`
- [Optional hero artwork](https://github.com/tarmizie-razali/mlbb-roulette/tree/main/images): `images`

### Other components

- **User**
- **Google Fonts**

## Connections

- User → Picker page: opens
- User → Lane and role filters: selects
- User → Animated draw: starts
- Picker page → Responsive presentation: renders
- Lane and role filters → Animated draw: filters pool
- Hero roster → Animated draw: supplies heroes
- Animated draw → Hero portrait: shows pick
- Animated draw → Recent picks: records pick
- Optional hero artwork → Hero portrait: provides images
- Google Fonts → Picker page: styles text