# ruupedev/darts-counter architecture

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

- Interactive diagram: https://gitdiagram.com/ruupedev/darts-counter
- Repository: https://github.com/ruupedev/darts-counter

## Overview

Darts Counter is a browser-based scoring app. Players choose a starting score, enter throws using either a numeric pad or dartboard-style controls, and accept each turn to update scores and averages, advance play, and detect a winner. The JavaScript excerpt also shows undo/history and UI updates. The app is small, so its game behavior is represented as responsibilities within the single main script; the available evidence does not establish every page-to-script wiring detail.

Main entry points: [`dartsCounter2.js`](https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js) (Game Display), [`dartsCounter2.html`](https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.html) (Darts Counter Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Browser Interface"]
  node_page["Darts Counter Page<br/>[dartsCounter2.html]"]
  node_styles["Responsive Styling<br/>[dartsCounter2.css]"]
  node_display["Game Display<br/>[dartsCounter2.js]"]
end

subgraph group_input["Throw Input"]
  node_numeric["Numeric Pad<br/>[dartsCounter2.js]"]
  node_board["Dartboard Input<br/>[dartsCounter2.js]"]
end

subgraph group_game["Scoring and Play"]
  node_roster["Player Setup<br/>[dartsCounter2.js]"]
  node_mode["Game Modes<br/>[dartsCounter2.js]"]
  node_turn["Turn Scoring<br/>[dartsCounter2.js]"]
  node_history["Undo History<br/>[dartsCounter2.js]"]
  node_stats["Score and Averages<br/>[dartsCounter2.js]"]
  node_winner["Win Detection<br/>[dartsCounter2.js]"]
end

node_player(("Player"))

node_player -->|"plays"| node_page
node_player -->|"adds players"| node_roster
node_player -->|"selects mode"| node_mode
node_player -->|"enters throws"| node_numeric
node_player -->|"enters throws"| node_board
node_numeric -->|"updates display"| node_display
node_board -->|"shows throw"| node_display
node_turn -->|"saves history"| node_history
node_turn -->|"updates stats"| node_stats
node_turn -->|"refreshes display"| node_display
node_winner -->|"shows winner"| node_display

click node_page "https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.html"
click node_styles "https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.css"
click node_roster "https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js"
click node_mode "https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js"
click node_numeric "https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js"
click node_board "https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js"
click node_turn "https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js"
click node_history "https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js"
click node_stats "https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js"
click node_winner "https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js"
click node_display "https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.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_display toneBlue
class node_numeric,node_board toneAmber
class node_roster,node_mode,node_turn,node_history,node_stats,node_winner toneMint
class node_player toneIndigo
```

## Components

### Browser Interface

- [Darts Counter Page](https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.html): `dartsCounter2.html`
- [Responsive Styling](https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.css): `dartsCounter2.css`
- [Game Display](https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js): `dartsCounter2.js`

### Throw Input

- [Numeric Pad](https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js): `dartsCounter2.js`
- [Dartboard Input](https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js): `dartsCounter2.js`

### Scoring and Play

- [Player Setup](https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js): `dartsCounter2.js`
- [Game Modes](https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js): `dartsCounter2.js`
- [Turn Scoring](https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js): `dartsCounter2.js`
- [Undo History](https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js): `dartsCounter2.js`
- [Score and Averages](https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js): `dartsCounter2.js`
- [Win Detection](https://github.com/ruupedev/darts-counter/blob/main/dartsCounter2.js): `dartsCounter2.js`

### Other components

- **Player**

## Connections

- Player → Darts Counter Page: plays (evidence: `README.md`)
- Player → Player Setup: adds players (evidence: `README.md`)
- Player → Game Modes: selects mode (evidence: `README.md`)
- Player → Numeric Pad: enters throws (evidence: `README.md`)
- Player → Dartboard Input: enters throws (evidence: `README.md`)
- Numeric Pad → Game Display: updates display (evidence: `dartsCounter2.js`)
- Dartboard Input → Game Display: shows throw (evidence: `dartsCounter2.js`)
- Turn Scoring → Undo History: saves history (evidence: `dartsCounter2.js`)
- Turn Scoring → Score and Averages: updates stats (evidence: `dartsCounter2.js`)
- Turn Scoring → Game Display: refreshes display (evidence: `dartsCounter2.js`)
- Win Detection → Game Display: shows winner (evidence: `dartsCounter2.js`)