# shaistaaman/cyberpunk-key-smasher architecture

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

- Interactive diagram: https://gitdiagram.com/shaistaaman/cyberpunk-key-smasher
- Repository: https://github.com/shaistaaman/cyberpunk-key-smasher

## Overview

Cyberpunk Key Smasher is a browser typing game. The player enters a name, selects a difficulty, and starts a timed arena; matching keys score points and relocate the target, while wrong keys or timeouts consume lives. At game over, the app saves the score locally, shows the top five, and lets the player restart. The graph follows the sampled component and hook calls; README documents the sound assets and local-storage leaderboard. Unsampled view details are represented only where README or indexed references support them.

Main entry points: [`src/App.tsx`](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/App.tsx) (Phase coordinator), [`src/components/WelcomeScreen.tsx`](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/WelcomeScreen.tsx) (Name and level), [`src/components/ArenaScreen.tsx`](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/ArenaScreen.tsx) (Arena screen), [`src/hooks/useGame.ts`](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/hooks/useGame.ts) (Game controller)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_flow["Game flow"]
  node_app["Phase coordinator<br/>[App.tsx]"]
  node_welcome["Name and level<br/>[WelcomeScreen.tsx]"]
  node_arena["Arena screen<br/>[ArenaScreen.tsx]"]
end

subgraph group_game["Game mechanics"]
  node_gamehook["Game controller<br/>[useGame.ts]"]
  node_reducer["Game rules<br/>[reducer.ts]"]
  node_keys["Key matching<br/>[keys.ts]"]
  node_target["Target generation<br/>[target.ts]"]
  node_targetbox["Target display<br/>[TargetBox.tsx]"]
  node_topbar["Score and lives<br/>[TopBar.tsx]"]
  node_namevalidation["Name validation<br/>[name.ts]"]
end

subgraph group_results["Results and persistence"]
  node_gameover["Game over screen<br/>[GameOverScreen.tsx]"]
  node_leaderboard["Leaderboard display<br/>[Leaderboard.tsx]"]
  node_storage[("Local leaderboard<br/>[leaderboard.ts]")]
end

subgraph group_audio["Sound effects"]
  node_soundplayer["Sound player<br/>[SoundPlayer.ts]"]
  node_soundfiles["MP3 effects"]
end

node_player(("Player"))

node_player -->|"enters details"| node_welcome
node_welcome -->|"validates name"| node_namevalidation
node_welcome -->|"primes audio"| node_soundplayer
node_welcome -->|"starts game"| node_app
node_app -->|"renders"| node_welcome
node_app -->|"renders"| node_arena
node_arena -->|"runs round"| node_gamehook
node_gamehook -->|"dispatches actions"| node_reducer
node_reducer -->|"checks key"| node_keys
node_reducer -->|"relocates target"| node_target
node_arena -->|"renders target"| node_targetbox
node_arena -->|"renders status"| node_topbar
node_gamehook -->|"signals game over"| node_arena
node_app -->|"renders"| node_gameover
node_gameover -->|"saves score"| node_storage
node_gameover -->|"renders standings"| node_leaderboard
node_leaderboard -->|"uses leaderboard data"| node_storage
node_gameover -->|"restarts flow"| node_app
node_app -->|"preloads effects"| node_soundplayer
node_gamehook -->|"plays event sounds"| node_soundplayer
node_soundplayer -->|"loads MP3s"| node_soundfiles

click node_app "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/App.tsx"
click node_welcome "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/WelcomeScreen.tsx"
click node_arena "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/ArenaScreen.tsx"
click node_gameover "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/GameOverScreen.tsx"
click node_gamehook "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/hooks/useGame.ts"
click node_reducer "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/game/reducer.ts"
click node_keys "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/game/keys.ts"
click node_target "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/game/target.ts"
click node_targetbox "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/TargetBox.tsx"
click node_topbar "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/TopBar.tsx"
click node_namevalidation "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/game/name.ts"
click node_leaderboard "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/Leaderboard.tsx"
click node_storage "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/storage/leaderboard.ts"
click node_soundplayer "https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/audio/SoundPlayer.ts"
click node_soundfiles "https://github.com/shaistaaman/cyberpunk-key-smasher/tree/main/public/sounds"

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_app,node_welcome,node_arena toneBlue
class node_gamehook,node_reducer,node_keys,node_target,node_targetbox,node_topbar,node_namevalidation toneAmber
class node_gameover,node_leaderboard,node_storage toneMint
class node_soundplayer,node_soundfiles toneRose
class node_player toneIndigo
```

## Components

### Game flow

- [Phase coordinator](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/App.tsx): `src/App.tsx`
- [Name and level](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/WelcomeScreen.tsx): `src/components/WelcomeScreen.tsx`
- [Arena screen](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/ArenaScreen.tsx): `src/components/ArenaScreen.tsx`

### Game mechanics

- [Game controller](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/hooks/useGame.ts): `src/hooks/useGame.ts`
- [Game rules](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/game/reducer.ts): `src/game/reducer.ts`
- [Key matching](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/game/keys.ts): `src/game/keys.ts`
- [Target generation](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/game/target.ts): `src/game/target.ts`
- [Target display](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/TargetBox.tsx): `src/components/TargetBox.tsx`
- [Score and lives](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/TopBar.tsx): `src/components/TopBar.tsx`
- [Name validation](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/game/name.ts): `src/game/name.ts`

### Results and persistence

- [Game over screen](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/GameOverScreen.tsx): `src/components/GameOverScreen.tsx`
- [Leaderboard display](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/components/Leaderboard.tsx): `src/components/Leaderboard.tsx`
- [Local leaderboard](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/storage/leaderboard.ts): `src/storage/leaderboard.ts`

### Sound effects

- [Sound player](https://github.com/shaistaaman/cyberpunk-key-smasher/blob/main/src/audio/SoundPlayer.ts): `src/audio/SoundPlayer.ts`
- [MP3 effects](https://github.com/shaistaaman/cyberpunk-key-smasher/tree/main/public/sounds): `public/sounds`

### Other components

- **Player**

## Connections

- Player → Name and level: enters details (evidence: `src/components/WelcomeScreen.tsx`)
- Name and level → Name validation: validates name (evidence: `src/components/WelcomeScreen.tsx`)
- Name and level → Sound player: primes audio (evidence: `src/components/WelcomeScreen.tsx`)
- Name and level → Phase coordinator: starts game (evidence: `src/App.tsx`)
- Phase coordinator → Name and level: renders (evidence: `src/App.tsx`)
- Phase coordinator → Arena screen: renders (evidence: `src/App.tsx`)
- Arena screen → Game controller: runs round (evidence: `src/components/ArenaScreen.tsx`)
- Game controller → Game rules: dispatches actions (evidence: `src/hooks/useGame.ts`)
- Game rules → Key matching: checks key (evidence: `src/game/reducer.ts`)
- Game rules → Target generation: relocates target (evidence: `src/game/reducer.ts`)
- Arena screen → Target display: renders target (evidence: `src/components/ArenaScreen.tsx`)
- Arena screen → Score and lives: renders status (evidence: `src/components/ArenaScreen.tsx`)
- Game controller → Arena screen: signals game over (evidence: `src/hooks/useGame.ts`)
- Phase coordinator → Game over screen: renders (evidence: `src/App.tsx`)
- Game over screen → Local leaderboard: saves score (evidence: `src/components/GameOverScreen.tsx`)
- Game over screen → Leaderboard display: renders standings (evidence: `src/components/GameOverScreen.tsx`)
- Leaderboard display → Local leaderboard: uses leaderboard data (evidence: `src/components/Leaderboard.tsx`)
- Game over screen → Phase coordinator: restarts flow (evidence: `src/App.tsx`)
- Phase coordinator → Sound player: preloads effects (evidence: `src/App.tsx`)
- Game controller → Sound player: plays event sounds (evidence: `src/hooks/useGame.ts`)
- Sound player → MP3 effects: loads MP3s (evidence: `README.md`)