# pavloshaparenko/genius-racer architecture

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

- Interactive diagram: https://gitdiagram.com/pavloshaparenko/genius-racer
- Repository: https://github.com/pavloshaparenko/genius-racer

## Overview

Genius Racer is a browser-based multiplication arcade game. The player selects an available table in the lobby, starts a race, answers multiplication questions at obstacles, and returns to the lobby with earned coins and any newly completed level recorded. From there, coins can unlock cars in the garage; a separate explanation screen teaches multiplication. Localization and audio support the experience. The workflow is based on the sampled app and screen components; broader capabilities such as sound and language choices are also documented in the README.

Main entry points: [`src/App.tsx`](https://github.com/pavloshaparenko/genius-racer/blob/main/src/App.tsx) (App and lobby), [`src/screens/Race/race.tsx`](https://github.com/pavloshaparenko/genius-racer/blob/main/src/screens/Race/race.tsx) (Multiplication race), [`src/i18n/LanguageContext.tsx`](https://github.com/pavloshaparenko/genius-racer/blob/main/src/i18n/LanguageContext.tsx) (Language context), [`src/assets/sounds`](https://github.com/pavloshaparenko/genius-racer/tree/main/src/assets/sounds) (Sound assets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_gameplay["Game flow"]
  node_app["App and lobby<br/>[App.tsx]"]
  node_race["Multiplication race<br/>[race.tsx]"]
end

subgraph group_progress["Progress and cars"]
  node_levels["Level progression<br/>[App.tsx]"]
  node_garage["Car garage<br/>[Garage.tsx]"]
end

subgraph group_support["Learning and localization"]
  node_explanation["Multiplication guide<br/>[Explanation.tsx]"]
  node_language["Language context"]
  node_translations["Translations<br/>[translations.ts]"]
  node_audioassets["Sound assets"]
end

subgraph group_runtime["Browser runtime"]
  node_savedata[("Player progress<br/>[storage.ts]")]
  node_browserstorage[("Browser storage")]
  node_audio["HTML audio"]
  node_entry["React entry<br/>[index.tsx]"]
end

node_player(("Player"))

node_player -->|"chooses level"| node_app
node_player -->|"opens screens"| node_app
node_entry -->|"renders"| node_app
node_app -->|"starts race"| node_race
node_race -->|"reports finish"| node_app
node_app -->|"checks and records"| node_levels
node_levels -->|"updates progress"| node_app
node_app -->|"renders with car data"| node_garage
node_garage -->|"requests purchase or selection"| node_app
node_player -->|"answers questions"| node_race
node_app -->|"opens guide"| node_explanation
node_player -->|"reads guide"| node_explanation
node_entry -->|"provides context"| node_language
node_language -->|"selects language text"| node_translations
node_language -->|"supplies language"| node_app
node_app -->|"reads and writes progress"| node_browserstorage
node_language -->|"persists language"| node_browserstorage
node_race -->|"loads effects"| node_audioassets
node_app -->|"selects level music"| node_audioassets
node_race -->|"plays sounds and music"| node_audio
node_audioassets -->|"provides audio files"| node_audio

click node_app "https://github.com/pavloshaparenko/genius-racer/blob/main/src/App.tsx"
click node_race "https://github.com/pavloshaparenko/genius-racer/blob/main/src/screens/Race/race.tsx"
click node_levels "https://github.com/pavloshaparenko/genius-racer/blob/main/src/App.tsx"
click node_garage "https://github.com/pavloshaparenko/genius-racer/blob/main/src/screens/Garage/Garage.tsx"
click node_savedata "https://github.com/pavloshaparenko/genius-racer/blob/main/src/core/storage.ts"
click node_explanation "https://github.com/pavloshaparenko/genius-racer/blob/main/src/screens/Explanation/Explanation.tsx"
click node_language "https://github.com/pavloshaparenko/genius-racer/blob/main/src/i18n/LanguageContext.tsx"
click node_translations "https://github.com/pavloshaparenko/genius-racer/blob/main/src/i18n/translations.ts"
click node_audioassets "https://github.com/pavloshaparenko/genius-racer/tree/main/src/assets/sounds"
click node_entry "https://github.com/pavloshaparenko/genius-racer/blob/main/src/index.tsx"

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_race toneBlue
class node_levels,node_garage toneAmber
class node_explanation,node_language,node_translations,node_audioassets toneMint
class node_savedata,node_browserstorage,node_audio,node_entry toneRose
class node_player toneIndigo
```

## Components

### Game flow

- [App and lobby](https://github.com/pavloshaparenko/genius-racer/blob/main/src/App.tsx): `src/App.tsx`
- [Multiplication race](https://github.com/pavloshaparenko/genius-racer/blob/main/src/screens/Race/race.tsx): `src/screens/Race/race.tsx`

### Progress and cars

- [Level progression](https://github.com/pavloshaparenko/genius-racer/blob/main/src/App.tsx): `src/App.tsx`
- [Car garage](https://github.com/pavloshaparenko/genius-racer/blob/main/src/screens/Garage/Garage.tsx): `src/screens/Garage/Garage.tsx`

### Learning and localization

- [Multiplication guide](https://github.com/pavloshaparenko/genius-racer/blob/main/src/screens/Explanation/Explanation.tsx): `src/screens/Explanation/Explanation.tsx`
- [Language context](https://github.com/pavloshaparenko/genius-racer/blob/main/src/i18n/LanguageContext.tsx): `src/i18n/LanguageContext.tsx`
- [Translations](https://github.com/pavloshaparenko/genius-racer/blob/main/src/i18n/translations.ts): `src/i18n/translations.ts`
- [Sound assets](https://github.com/pavloshaparenko/genius-racer/tree/main/src/assets/sounds): `src/assets/sounds`

### Browser runtime

- [Player progress](https://github.com/pavloshaparenko/genius-racer/blob/main/src/core/storage.ts): `src/core/storage.ts`
- **Browser storage**
- **HTML audio**
- [React entry](https://github.com/pavloshaparenko/genius-racer/blob/main/src/index.tsx): `src/index.tsx`

### Other components

- **Player**

## Connections

- Player → App and lobby: chooses level
- Player → App and lobby: opens screens
- React entry → App and lobby: renders
- App and lobby → Multiplication race: starts race
- Multiplication race → App and lobby: reports finish
- App and lobby → Level progression: checks and records
- Level progression → App and lobby: updates progress
- App and lobby → Car garage: renders with car data
- Car garage → App and lobby: requests purchase or selection
- Player → Multiplication race: answers questions
- App and lobby → Multiplication guide: opens guide
- Player → Multiplication guide: reads guide
- React entry → Language context: provides context
- Language context → Translations: selects language text
- Language context → App and lobby: supplies language
- App and lobby → Browser storage: reads and writes progress
- Language context → Browser storage: persists language
- Multiplication race → Sound assets: loads effects
- App and lobby → Sound assets: selects level music
- Multiplication race → HTML audio: plays sounds and music
- Sound assets → HTML audio: provides audio files