# madujoseph101/pixel-arcade architecture

> Architecture diagram of the GitHub repository madujoseph101/pixel-arcade, 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/madujoseph101/pixel-arcade
- Repository: https://github.com/madujoseph101/pixel-arcade

## Overview

Pixel Arcade is a browser-based number-guessing game. The player starts a round, submits unique whole-number guesses from 1–20, and receives higher/lower hints until winning or exhausting three tries; they can then restart. The JavaScript manages round state, validation, scoring, and display updates, while the HTML and CSS provide the arcade interface. It also saves win streaks and best scores in browser storage and offers optional sound effects. The map reflects the README and shown JavaScript excerpts; HTML and CSS contents were not sampled.

Main entry points: [`Guesser.js`](https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.js) (Round logic), [`Pixel Arcade.html`](https://github.com/madujoseph101/pixel-arcade/blob/main/Pixel%20Arcade.html) (Game interface), [`Guesser.css`](https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.css) (Arcade styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_game["Game flow"]
  node_game_logic["Round logic<br/>[Guesser.js]"]
  node_guess_feedback["Guess feedback<br/>[Guesser.js]"]
  node_results["Round results<br/>[Guesser.js]"]
  node_records["Player records<br/>[Guesser.js]"]
end

subgraph group_interface["Arcade interface"]
  node_game_ui["Game interface<br/>[Pixel Arcade.html]"]
  node_styling["Arcade styling<br/>[Guesser.css]"]
end

subgraph group_integrations["Browser features"]
  node_local_storage[("Browser storage")]
  node_sound["Sound effects<br/>[Guesser.js]"]
  node_web_audio["Web Audio"]
end

node_player(("Player"))

node_player -->|"uses"| node_game_ui
node_game_ui -->|"dispatches actions"| node_game_logic
node_game_logic -->|"updates hints"| node_guess_feedback
node_game_logic -->|"ends round"| node_results
node_game_logic -->|"updates scores"| node_records
node_records -->|"reads and writes"| node_local_storage
node_game_logic -->|"plays cues"| node_sound
node_sound -->|"generates tones"| node_web_audio
node_styling -.->|"styles"| node_game_ui

click node_game_ui "https://github.com/madujoseph101/pixel-arcade/blob/main/Pixel%20Arcade.html"
click node_styling "https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.css"
click node_game_logic "https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.js"
click node_guess_feedback "https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.js"
click node_results "https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.js"
click node_records "https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.js"
click node_sound "https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.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_game_logic,node_guess_feedback,node_results,node_records toneBlue
class node_game_ui,node_styling toneAmber
class node_local_storage,node_sound,node_web_audio toneMint
class node_player toneIndigo
```

## Components

### Game flow

- [Round logic](https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.js): `Guesser.js`
- [Guess feedback](https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.js): `Guesser.js`
- [Round results](https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.js): `Guesser.js`
- [Player records](https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.js): `Guesser.js`

### Arcade interface

- [Game interface](https://github.com/madujoseph101/pixel-arcade/blob/main/Pixel%20Arcade.html): `Pixel Arcade.html`
- [Arcade styling](https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.css): `Guesser.css`

### Browser features

- **Browser storage**
- [Sound effects](https://github.com/madujoseph101/pixel-arcade/blob/main/Guesser.js): `Guesser.js`
- **Web Audio**

### Other components

- **Player**

## Connections

- Player → Game interface: uses (evidence: `README.md`)
- Game interface → Round logic: dispatches actions (evidence: `Guesser.js`)
- Round logic → Guess feedback: updates hints (evidence: `Guesser.js`)
- Round logic → Round results: ends round (evidence: `Guesser.js`)
- Round logic → Player records: updates scores (evidence: `Guesser.js`)
- Player records → Browser storage: reads and writes (evidence: `Guesser.js`)
- Round logic → Sound effects: plays cues (evidence: `Guesser.js`)
- Sound effects → Web Audio: generates tones (evidence: `Guesser.js`)
- Arcade styling → Game interface: styles (evidence: `README.md`)