# johny-max112/typetiles architecture

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

- Interactive diagram: https://gitdiagram.com/johny-max112/typetiles
- Repository: https://github.com/johny-max112/typetiles

## Overview

TypeTiles is a browser-based typing game with player accounts, configurable matches, multiplayer/LAN support, and player progress views, plus a separate admin interface. The main player journey is account access, match setup, real-time typing gameplay, and results/progress. The excerpts confirm the authentication calls and game-scene behavior; most page, API-client, match-route, and LAN internals are unsampled, so their detailed wiring is intentionally limited.

Main entry points: [`src/App.tsx`](https://github.com/johny-max112/typetiles/blob/main/src/App.tsx) (Player router), [`server/src/index.ts`](https://github.com/johny-max112/typetiles/blob/main/server/src/index.ts) (HTTP API), [`src/scenes/GameScene.ts`](https://github.com/johny-max112/typetiles/blob/main/src/scenes/GameScene.ts) (Typing session), [`admin/src/App.tsx`](https://github.com/johny-max112/typetiles/blob/main/admin/src/App.tsx) (Admin interface)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_player["Player experience"]
  node_app["Player router<br/>[App.tsx]"]
  node_authui["Player sign-in<br/>[PlayerAuth.tsx]"]
  node_authstate["Player auth state"]
  node_dashboard["Player dashboard<br/>[Index.tsx]"]
  node_matchsetup["Match setup<br/>[Play.tsx]"]
  node_lobby["Match lobby<br/>[Lobby.tsx]"]
  node_prematch["Pre-match<br/>[PreMatch.tsx]"]
  node_results["Match results<br/>[Results.tsx]"]
  node_progress["Player progress<br/>[Achievements.tsx]"]
  node_social["Friends and history<br/>[Friends.tsx]"]
  node_leaderboard["Leaderboard views<br/>[Leaderboard.tsx]"]
end

subgraph group_game["Typing game"]
  node_gamepage["Game page<br/>[Game.tsx]"]
  node_gamemount["Game mount<br/>[GameMount.tsx]"]
  node_gamescene["Typing session<br/>[GameScene.ts]"]
  node_words["Word bank<br/>[words.ts]"]
  node_wordtarget["Word targets<br/>[WordTarget.ts]"]
  node_water["Water effects<br/>[WaterEffects.ts]"]
  node_pause["Pause controls<br/>[PauseMenu.ts]"]
end

subgraph group_backend["Server services"]
  node_playerapi["Player API client<br/>[playerApi.ts]"]
  node_api["HTTP API<br/>[index.ts]"]
  node_authroutes["Authentication routes<br/>[auth.ts]"]
  node_matchroutes["Match routes<br/>[matches.ts]"]
  node_rankroutes["Leaderboard routes<br/>[leaderboard.ts]"]
  node_lan["LAN multiplayer<br/>[lan.ts]"]
  node_authlogic["Token and passwords<br/>[auth.ts]"]
  node_middleware["Request authentication<br/>[middleware.ts]"]
  node_database[("Application database<br/>[db.ts]")]
  node_adminroutes["Admin routes<br/>[admin.ts]"]
end

subgraph group_admin["Administration"]
  node_adminapp["Admin interface<br/>[App.tsx]"]
  node_adminapi["Admin API client<br/>[api.ts]"]
  node_adminusers["User management<br/>[Users.tsx]"]
  node_adminmetrics["Admin reports<br/>[Dashboard.tsx]"]
  node_adminleaderboard["Admin leaderboard<br/>[Leaderboard.tsx]"]
end

node_player(("Player"))

node_player -->|"opens"| node_app
node_app -->|"routes to"| node_authui
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_matchsetup
node_app -->|"routes to"| node_lobby
node_app -->|"routes to"| node_prematch
node_app -->|"routes to"| node_gamepage
node_app -->|"routes to"| node_results
node_app -->|"routes to"| node_progress
node_app -->|"routes to"| node_social
node_app -->|"routes to"| node_leaderboard
node_authui -->|"calls"| node_authstate
node_authstate -->|"calls"| node_playerapi
node_dashboard -->|"fetches rank"| node_playerapi
node_gamepage -->|"mounts"| node_gamemount
node_gamemount -->|"starts scene"| node_gamescene
node_gamescene -->|"selects words"| node_words
node_gamescene -->|"updates targets"| node_wordtarget
node_gamescene -->|"triggers effects"| node_water
node_gamescene -->|"uses controls"| node_pause
node_gamescene -->|"returns match result"| node_results
node_api -->|"mounts routes"| node_authroutes
node_api -->|"mounts routes"| node_matchroutes
node_api -->|"mounts routes"| node_rankroutes
node_api -->|"mounts routes"| node_adminroutes
node_api -->|"attaches WebSocket"| node_lan
node_authroutes -->|"hashes and signs"| node_authlogic
node_authroutes -->|"protects profile"| node_middleware
node_authroutes -->|"reads and writes"| node_database
node_matchroutes -->|"uses storage"| node_database
node_rankroutes -->|"uses storage"| node_database
node_adminroutes -->|"uses storage"| node_database
node_playerapi -->|"calls endpoints"| node_api
node_adminapp -->|"calls"| node_adminapi
node_adminapp -->|"routes to"| node_adminusers
node_adminapp -->|"routes to"| node_adminmetrics
node_adminapp -->|"routes to"| node_adminleaderboard
node_adminapi -->|"calls endpoints"| node_api
node_adminapi -->|"requests admin data"| node_adminroutes

click node_app "https://github.com/johny-max112/typetiles/blob/main/src/App.tsx"
click node_authui "https://github.com/johny-max112/typetiles/blob/main/src/components/PlayerAuth.tsx"
click node_authstate "https://github.com/johny-max112/typetiles/blob/main/src/lib/PlayerAuthContext.tsx"
click node_dashboard "https://github.com/johny-max112/typetiles/blob/main/src/pages/Index.tsx"
click node_matchsetup "https://github.com/johny-max112/typetiles/blob/main/src/pages/Play.tsx"
click node_lobby "https://github.com/johny-max112/typetiles/blob/main/src/pages/Lobby.tsx"
click node_prematch "https://github.com/johny-max112/typetiles/blob/main/src/pages/PreMatch.tsx"
click node_gamepage "https://github.com/johny-max112/typetiles/blob/main/src/pages/Game.tsx"
click node_gamemount "https://github.com/johny-max112/typetiles/blob/main/src/components/GameMount.tsx"
click node_gamescene "https://github.com/johny-max112/typetiles/blob/main/src/scenes/GameScene.ts"
click node_words "https://github.com/johny-max112/typetiles/blob/main/src/words.ts"
click node_wordtarget "https://github.com/johny-max112/typetiles/blob/main/src/scenes/game/WordTarget.ts"
click node_water "https://github.com/johny-max112/typetiles/blob/main/src/scenes/game/WaterEffects.ts"
click node_pause "https://github.com/johny-max112/typetiles/blob/main/src/scenes/game/PauseMenu.ts"
click node_results "https://github.com/johny-max112/typetiles/blob/main/src/pages/Results.tsx"
click node_progress "https://github.com/johny-max112/typetiles/blob/main/src/pages/Achievements.tsx"
click node_social "https://github.com/johny-max112/typetiles/blob/main/src/pages/Friends.tsx"
click node_leaderboard "https://github.com/johny-max112/typetiles/blob/main/src/pages/Leaderboard.tsx"
click node_playerapi "https://github.com/johny-max112/typetiles/blob/main/src/lib/playerApi.ts"
click node_api "https://github.com/johny-max112/typetiles/blob/main/server/src/index.ts"
click node_authroutes "https://github.com/johny-max112/typetiles/blob/main/server/src/routes/auth.ts"
click node_matchroutes "https://github.com/johny-max112/typetiles/blob/main/server/src/routes/matches.ts"
click node_rankroutes "https://github.com/johny-max112/typetiles/blob/main/server/src/routes/leaderboard.ts"
click node_lan "https://github.com/johny-max112/typetiles/blob/main/server/src/lan.ts"
click node_authlogic "https://github.com/johny-max112/typetiles/blob/main/server/src/auth.ts"
click node_middleware "https://github.com/johny-max112/typetiles/blob/main/server/src/middleware.ts"
click node_database "https://github.com/johny-max112/typetiles/blob/main/server/src/db.ts"
click node_adminapp "https://github.com/johny-max112/typetiles/blob/main/admin/src/App.tsx"
click node_adminapi "https://github.com/johny-max112/typetiles/blob/main/admin/src/api.ts"
click node_adminroutes "https://github.com/johny-max112/typetiles/blob/main/server/src/routes/admin.ts"
click node_adminusers "https://github.com/johny-max112/typetiles/blob/main/admin/src/pages/Users.tsx"
click node_adminmetrics "https://github.com/johny-max112/typetiles/blob/main/admin/src/pages/Dashboard.tsx"
click node_adminleaderboard "https://github.com/johny-max112/typetiles/blob/main/admin/src/pages/Leaderboard.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_authui,node_authstate,node_dashboard,node_matchsetup,node_lobby,node_prematch,node_results,node_progress,node_social,node_leaderboard toneBlue
class node_gamepage,node_gamemount,node_gamescene,node_words,node_wordtarget,node_water,node_pause toneAmber
class node_playerapi,node_api,node_authroutes,node_matchroutes,node_rankroutes,node_lan,node_authlogic,node_middleware,node_database,node_adminroutes toneMint
class node_adminapp,node_adminapi,node_adminusers,node_adminmetrics,node_adminleaderboard toneRose
class node_player toneIndigo
```

## Components

### Player experience

- [Player router](https://github.com/johny-max112/typetiles/blob/main/src/App.tsx): `src/App.tsx`
- [Player sign-in](https://github.com/johny-max112/typetiles/blob/main/src/components/PlayerAuth.tsx): `src/components/PlayerAuth.tsx`
- [Player auth state](https://github.com/johny-max112/typetiles/blob/main/src/lib/PlayerAuthContext.tsx): `src/lib/PlayerAuthContext.tsx`
- [Player dashboard](https://github.com/johny-max112/typetiles/blob/main/src/pages/Index.tsx): `src/pages/Index.tsx`
- [Match setup](https://github.com/johny-max112/typetiles/blob/main/src/pages/Play.tsx): `src/pages/Play.tsx`
- [Match lobby](https://github.com/johny-max112/typetiles/blob/main/src/pages/Lobby.tsx): `src/pages/Lobby.tsx`
- [Pre-match](https://github.com/johny-max112/typetiles/blob/main/src/pages/PreMatch.tsx): `src/pages/PreMatch.tsx`
- [Match results](https://github.com/johny-max112/typetiles/blob/main/src/pages/Results.tsx): `src/pages/Results.tsx`
- [Player progress](https://github.com/johny-max112/typetiles/blob/main/src/pages/Achievements.tsx): `src/pages/Achievements.tsx`
- [Friends and history](https://github.com/johny-max112/typetiles/blob/main/src/pages/Friends.tsx): `src/pages/Friends.tsx`
- [Leaderboard views](https://github.com/johny-max112/typetiles/blob/main/src/pages/Leaderboard.tsx): `src/pages/Leaderboard.tsx`

### Typing game

- [Game page](https://github.com/johny-max112/typetiles/blob/main/src/pages/Game.tsx): `src/pages/Game.tsx`
- [Game mount](https://github.com/johny-max112/typetiles/blob/main/src/components/GameMount.tsx): `src/components/GameMount.tsx`
- [Typing session](https://github.com/johny-max112/typetiles/blob/main/src/scenes/GameScene.ts): `src/scenes/GameScene.ts`
- [Word bank](https://github.com/johny-max112/typetiles/blob/main/src/words.ts): `src/words.ts`
- [Word targets](https://github.com/johny-max112/typetiles/blob/main/src/scenes/game/WordTarget.ts): `src/scenes/game/WordTarget.ts`
- [Water effects](https://github.com/johny-max112/typetiles/blob/main/src/scenes/game/WaterEffects.ts): `src/scenes/game/WaterEffects.ts`
- [Pause controls](https://github.com/johny-max112/typetiles/blob/main/src/scenes/game/PauseMenu.ts): `src/scenes/game/PauseMenu.ts`

### Server services

- [Player API client](https://github.com/johny-max112/typetiles/blob/main/src/lib/playerApi.ts): `src/lib/playerApi.ts`
- [HTTP API](https://github.com/johny-max112/typetiles/blob/main/server/src/index.ts): `server/src/index.ts`
- [Authentication routes](https://github.com/johny-max112/typetiles/blob/main/server/src/routes/auth.ts): `server/src/routes/auth.ts`
- [Match routes](https://github.com/johny-max112/typetiles/blob/main/server/src/routes/matches.ts): `server/src/routes/matches.ts`
- [Leaderboard routes](https://github.com/johny-max112/typetiles/blob/main/server/src/routes/leaderboard.ts): `server/src/routes/leaderboard.ts`
- [LAN multiplayer](https://github.com/johny-max112/typetiles/blob/main/server/src/lan.ts): `server/src/lan.ts`
- [Token and passwords](https://github.com/johny-max112/typetiles/blob/main/server/src/auth.ts): `server/src/auth.ts`
- [Request authentication](https://github.com/johny-max112/typetiles/blob/main/server/src/middleware.ts): `server/src/middleware.ts`
- [Application database](https://github.com/johny-max112/typetiles/blob/main/server/src/db.ts): `server/src/db.ts`
- [Admin routes](https://github.com/johny-max112/typetiles/blob/main/server/src/routes/admin.ts): `server/src/routes/admin.ts`

### Administration

- [Admin interface](https://github.com/johny-max112/typetiles/blob/main/admin/src/App.tsx): `admin/src/App.tsx`
- [Admin API client](https://github.com/johny-max112/typetiles/blob/main/admin/src/api.ts): `admin/src/api.ts`
- [User management](https://github.com/johny-max112/typetiles/blob/main/admin/src/pages/Users.tsx): `admin/src/pages/Users.tsx`
- [Admin reports](https://github.com/johny-max112/typetiles/blob/main/admin/src/pages/Dashboard.tsx): `admin/src/pages/Dashboard.tsx`
- [Admin leaderboard](https://github.com/johny-max112/typetiles/blob/main/admin/src/pages/Leaderboard.tsx): `admin/src/pages/Leaderboard.tsx`

### Other components

- **Player**

## Connections

- Player → Player router: opens
- Player router → Player sign-in: routes to
- Player router → Player dashboard: routes to
- Player router → Match setup: routes to
- Player router → Match lobby: routes to
- Player router → Pre-match: routes to
- Player router → Game page: routes to
- Player router → Match results: routes to
- Player router → Player progress: routes to
- Player router → Friends and history: routes to
- Player router → Leaderboard views: routes to
- Player sign-in → Player auth state: calls
- Player auth state → Player API client: calls
- Player dashboard → Player API client: fetches rank
- Game page → Game mount: mounts
- Game mount → Typing session: starts scene
- Typing session → Word bank: selects words
- Typing session → Word targets: updates targets
- Typing session → Water effects: triggers effects
- Typing session → Pause controls: uses controls
- Typing session → Match results: returns match result
- HTTP API → Authentication routes: mounts routes
- HTTP API → Match routes: mounts routes
- HTTP API → Leaderboard routes: mounts routes
- HTTP API → Admin routes: mounts routes
- HTTP API → LAN multiplayer: attaches WebSocket
- Authentication routes → Token and passwords: hashes and signs
- Authentication routes → Request authentication: protects profile
- Authentication routes → Application database: reads and writes
- Match routes → Application database: uses storage
- Leaderboard routes → Application database: uses storage
- Admin routes → Application database: uses storage
- Player API client → HTTP API: calls endpoints
- Admin interface → Admin API client: calls
- Admin interface → User management: routes to
- Admin interface → Admin reports: routes to
- Admin interface → Admin leaderboard: routes to
- Admin API client → HTTP API: calls endpoints
- Admin API client → Admin routes: requests admin data