# leyllio/blackjack architecture

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

- Interactive diagram: https://gitdiagram.com/leyllio/blackjack
- Repository: https://github.com/leyllio/blackjack

## Overview

Blackjack is a single-player browser game with virtual chips and no server-side account or payment flow. The user enters a stake, starts a hand, makes available play decisions, and sees the hand result and updated balance. The implementation is a JavaScript monolith; the nodes below separate its documented responsibilities rather than implying separate modules. The README documents the main rules and capabilities, while the source excerpt confirms selected DOM, deck, rendering, and event-handler behavior; other internal links are based on the README’s architecture description.

Main entry points: [`script/bjtable.js`](https://github.com/leyllio/blackjack/blob/main/script/bjtable.js) (Round orchestration), [`index.html`](https://github.com/leyllio/blackjack/blob/main/index.html) (Game page), [`css/style.css`](https://github.com/leyllio/blackjack/blob/main/css/style.css) (Responsive themes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Browser interface"]
  node_page["Game page<br/>[index.html]"]
  node_styles["Responsive themes<br/>[style.css]"]
  node_ui["DOM rendering<br/>[bjtable.js]"]
  node_theme["Theme toggle<br/>[bjtable.js]"]
end

subgraph group_gameplay["Blackjack gameplay"]
  node_round["Round orchestration<br/>[bjtable.js]"]
  node_deck["Deck and cards<br/>[bjtable.js]"]
  node_scoring["Hand scoring<br/>[bjtable.js]"]
  node_turns["Turn state<br/>[bjtable.js]"]
  node_actions["Player actions<br/>[bjtable.js]"]
  node_dealer["Dealer play<br/>[bjtable.js]"]
end

subgraph group_economy["Virtual chips"]
  node_stakes["Stake handling<br/>[bjtable.js]"]
  node_settlement["Payout settlement<br/>[bjtable.js]"]
  node_balance["Chip balance<br/>[bjtable.js]"]
end

node_player(("Player"))
node_fonts(("Google Fonts"))

node_player -->|"uses"| node_page
node_page -->|"starts game"| node_round
node_page -->|"styled by"| node_styles
node_round -->|"deals cards"| node_deck
node_round -->|"validates stake"| node_stakes
node_round -->|"updates display"| node_ui
node_round -->|"sets state"| node_turns
node_actions -->|"advances turn"| node_turns
node_actions -->|"draws cards"| node_deck
node_actions -->|"ends player turn"| node_dealer
node_dealer -->|"draws cards"| node_deck
node_dealer -->|"checks total"| node_scoring
node_round -->|"checks hands"| node_scoring
node_round -->|"settles round"| node_settlement
node_settlement -->|"updates balance"| node_balance
node_stakes -->|"deducts stake"| node_balance
node_ui -->|"renders into"| node_page
node_theme -->|"updates theme"| node_page
node_styles -.->|"loads fonts"| node_fonts

click node_page "https://github.com/leyllio/blackjack/blob/main/index.html"
click node_styles "https://github.com/leyllio/blackjack/blob/main/css/style.css"
click node_ui "https://github.com/leyllio/blackjack/blob/main/script/bjtable.js"
click node_theme "https://github.com/leyllio/blackjack/blob/main/script/bjtable.js"
click node_round "https://github.com/leyllio/blackjack/blob/main/script/bjtable.js"
click node_deck "https://github.com/leyllio/blackjack/blob/main/script/bjtable.js"
click node_scoring "https://github.com/leyllio/blackjack/blob/main/script/bjtable.js"
click node_turns "https://github.com/leyllio/blackjack/blob/main/script/bjtable.js"
click node_actions "https://github.com/leyllio/blackjack/blob/main/script/bjtable.js"
click node_dealer "https://github.com/leyllio/blackjack/blob/main/script/bjtable.js"
click node_stakes "https://github.com/leyllio/blackjack/blob/main/script/bjtable.js"
click node_settlement "https://github.com/leyllio/blackjack/blob/main/script/bjtable.js"
click node_balance "https://github.com/leyllio/blackjack/blob/main/script/bjtable.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_page,node_styles,node_ui,node_theme toneBlue
class node_round,node_deck,node_scoring,node_turns,node_actions,node_dealer toneAmber
class node_stakes,node_settlement,node_balance toneMint
class node_player,node_fonts toneIndigo
```

## Components

### Browser interface

- [Game page](https://github.com/leyllio/blackjack/blob/main/index.html): `index.html`
- [Responsive themes](https://github.com/leyllio/blackjack/blob/main/css/style.css): `css/style.css`
- [DOM rendering](https://github.com/leyllio/blackjack/blob/main/script/bjtable.js): `script/bjtable.js`
- [Theme toggle](https://github.com/leyllio/blackjack/blob/main/script/bjtable.js): `script/bjtable.js`

### Blackjack gameplay

- [Round orchestration](https://github.com/leyllio/blackjack/blob/main/script/bjtable.js): `script/bjtable.js`
- [Deck and cards](https://github.com/leyllio/blackjack/blob/main/script/bjtable.js): `script/bjtable.js`
- [Hand scoring](https://github.com/leyllio/blackjack/blob/main/script/bjtable.js): `script/bjtable.js`
- [Turn state](https://github.com/leyllio/blackjack/blob/main/script/bjtable.js): `script/bjtable.js`
- [Player actions](https://github.com/leyllio/blackjack/blob/main/script/bjtable.js): `script/bjtable.js`
- [Dealer play](https://github.com/leyllio/blackjack/blob/main/script/bjtable.js): `script/bjtable.js`

### Virtual chips

- [Stake handling](https://github.com/leyllio/blackjack/blob/main/script/bjtable.js): `script/bjtable.js`
- [Payout settlement](https://github.com/leyllio/blackjack/blob/main/script/bjtable.js): `script/bjtable.js`
- [Chip balance](https://github.com/leyllio/blackjack/blob/main/script/bjtable.js): `script/bjtable.js`

### Other components

- **Player**
- **Google Fonts**

## Connections

- Player → Game page: uses (evidence: `README.md`)
- Game page → Round orchestration: starts game (evidence: `README.md`)
- Game page → Responsive themes: styled by (evidence: `README.md`)
- Round orchestration → Deck and cards: deals cards (evidence: `script/bjtable.js`)
- Round orchestration → Stake handling: validates stake (evidence: `README.md`)
- Round orchestration → DOM rendering: updates display (evidence: `script/bjtable.js`)
- Round orchestration → Turn state: sets state (evidence: `README.md`)
- Player actions → Turn state: advances turn (evidence: `README.md`)
- Player actions → Deck and cards: draws cards (evidence: `README.md`)
- Player actions → Dealer play: ends player turn (evidence: `README.md`)
- Dealer play → Deck and cards: draws cards (evidence: `README.md`)
- Dealer play → Hand scoring: checks total (evidence: `README.md`)
- Round orchestration → Hand scoring: checks hands (evidence: `README.md`)
- Round orchestration → Payout settlement: settles round (evidence: `README.md`)
- Payout settlement → Chip balance: updates balance (evidence: `README.md`)
- Stake handling → Chip balance: deducts stake (evidence: `README.md`)
- DOM rendering → Game page: renders into (evidence: `script/bjtable.js`)
- Theme toggle → Game page: updates theme (evidence: `script/bjtable.js`)
- Responsive themes → Google Fonts: loads fonts (evidence: `README.md`)