# diff-d/diffd-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/diff-d/diffd-frontend
- Repository: https://github.com/diff-d/diffd-frontend

## Overview

diff'D is a browser frontend for quick skill games and their social and competitive features; the game server is external. The primary flow is browser navigation into a game or challenge, frontend API/socket interaction with the server, and display of play results. The graph also covers documented daily challenges, parties, profiles, leaderboards, organisations, remote play, and administration. Several page implementations were not sampled, so their internal call relationships are omitted; edges reflect visible routing, cited imports, or README statements.

Main entry points: [`web/src/App.tsx`](https://github.com/diff-d/diffd-frontend/blob/main/web/src/App.tsx) (Route shell), [`web/src/api/client.ts`](https://github.com/diff-d/diffd-frontend/blob/main/web/src/api/client.ts) (API client), [`web/src/party/PartyRoom.tsx`](https://github.com/diff-d/diffd-frontend/blob/main/web/src/party/PartyRoom.tsx) (Party room), [`web/src/party/createParty.ts`](https://github.com/diff-d/diffd-frontend/blob/main/web/src/party/createParty.ts) (Party session)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_shell["Route shell<br/>[App.tsx]"]
end

subgraph group_play["Games and competition"]
  node_home["Game home<br/>[Home.tsx]"]
  node_gameplay["Game pages<br/>[TestPage.tsx]"]
  node_daily["Daily challenges<br/>[Daily.tsx]"]
  node_duel["1v1 room<br/>[DuelRoom.tsx]"]
  node_duelsetup["Duel setup<br/>[createDuel.ts]"]
  node_party["Party room<br/>[PartyRoom.tsx]"]
  node_partysetup["Party session<br/>[createParty.ts]"]
  node_partychat["Party chat<br/>[PartyChat.tsx]"]
  node_sketch["Sketch game<br/>[Sketch.tsx]"]
  node_drawing["Drawing operations<br/>[drawing.ts]"]
  node_remote["Remote controls<br/>[Controls.tsx]"]
end

subgraph group_community["Social features"]
  node_social["Friends and invites<br/>[Friends.tsx]"]
  node_orgs["Organisations<br/>[Org.tsx]"]
  node_invite["Invite UI<br/>[InviteFriends.tsx]"]
end

subgraph group_shared["API and shared state"]
  node_api["API client<br/>[client.ts]"]
  node_identity["Identity state<br/>[identity.ts]"]
  node_notices["Notices state<br/>[notices.ts]"]
  node_remote_state["Remote state<br/>[remote.ts]"]
  node_format["Score formatting<br/>[format.ts]"]
  node_charts["Chart utilities<br/>[chart.ts]"]
  node_stats["Statistics utilities<br/>[stats.ts]"]
end

subgraph group_insight["Profiles and administration"]
  node_profile["Player profiles<br/>[ProfileView.tsx]"]
  node_profilegame["Game history<br/>[GameTile.tsx]"]
  node_leaderboards["Leaderboards<br/>[Leaderboards.tsx]"]
  node_admin["Administration<br/>[Admin.tsx]"]
  node_adminanalytics["Game analytics<br/>[Games.tsx]"]
end

node_player(("Player"))
node_server["diff'D game server"]

node_player -->|"opens site"| node_shell
node_shell -->|"routes to"| node_home
node_shell -->|"routes to"| node_gameplay
node_shell -->|"routes to"| node_daily
node_shell -->|"routes to"| node_duel
node_shell -->|"routes to"| node_party
node_shell -->|"routes to"| node_leaderboards
node_shell -->|"routes to"| node_admin
node_shell -->|"routes to"| node_profile
node_shell -->|"routes to"| node_orgs
node_duel -->|"uses session logic"| node_duelsetup
node_duelsetup -->|"opens duel socket"| node_api
node_party -->|"uses session logic"| node_partysetup
node_partysetup -->|"opens party socket"| node_api
node_party -->|"renders"| node_partychat
node_party -->|"hosts game view"| node_sketch
node_sketch -->|"uses"| node_drawing
node_api -->|"sends requests"| node_server
node_admin -->|"renders"| node_adminanalytics
node_admin -->|"loads admin data"| node_api
node_orgs -->|"loads organisation data"| node_api
node_identity -->|"refreshes identity"| node_api
node_shell -->|"refreshes identity"| node_identity
node_partysetup -->|"reports session notices"| node_notices
node_partysetup -->|"uses remote state"| node_remote_state
node_remote -->|"uses remote state"| node_remote_state
node_profile -->|"renders game tiles"| node_profilegame
node_profilegame -->|"formats scores"| node_format
node_adminanalytics -->|"formats scores"| node_format
node_adminanalytics -->|"uses charts"| node_charts
node_charts -->|"uses statistics"| node_stats
node_invite -->|"sends invitations"| node_api

click node_shell "https://github.com/diff-d/diffd-frontend/blob/main/web/src/App.tsx"
click node_home "https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/Home.tsx"
click node_gameplay "https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/TestPage.tsx"
click node_daily "https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/Daily.tsx"
click node_duel "https://github.com/diff-d/diffd-frontend/blob/main/web/src/duel/DuelRoom.tsx"
click node_duelsetup "https://github.com/diff-d/diffd-frontend/blob/main/web/src/duel/createDuel.ts"
click node_party "https://github.com/diff-d/diffd-frontend/blob/main/web/src/party/PartyRoom.tsx"
click node_partysetup "https://github.com/diff-d/diffd-frontend/blob/main/web/src/party/createParty.ts"
click node_partychat "https://github.com/diff-d/diffd-frontend/blob/main/web/src/party/PartyChat.tsx"
click node_sketch "https://github.com/diff-d/diffd-frontend/blob/main/web/src/party/sketch/Sketch.tsx"
click node_drawing "https://github.com/diff-d/diffd-frontend/blob/main/web/src/party/sketch/drawing.ts"
click node_remote "https://github.com/diff-d/diffd-frontend/blob/main/web/src/remote/Controls.tsx"
click node_social "https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/Friends.tsx"
click node_orgs "https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/Org.tsx"
click node_profile "https://github.com/diff-d/diffd-frontend/blob/main/web/src/profile/ProfileView.tsx"
click node_profilegame "https://github.com/diff-d/diffd-frontend/blob/main/web/src/profile/GameTile.tsx"
click node_leaderboards "https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/Leaderboards.tsx"
click node_admin "https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/Admin.tsx"
click node_adminanalytics "https://github.com/diff-d/diffd-frontend/blob/main/web/src/admin/Games.tsx"
click node_api "https://github.com/diff-d/diffd-frontend/blob/main/web/src/api/client.ts"
click node_identity "https://github.com/diff-d/diffd-frontend/blob/main/web/src/state/identity.ts"
click node_notices "https://github.com/diff-d/diffd-frontend/blob/main/web/src/state/notices.ts"
click node_remote_state "https://github.com/diff-d/diffd-frontend/blob/main/web/src/state/remote.ts"
click node_format "https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/format.ts"
click node_charts "https://github.com/diff-d/diffd-frontend/blob/main/web/src/ui/chart.ts"
click node_stats "https://github.com/diff-d/diffd-frontend/blob/main/web/src/ui/stats.ts"
click node_invite "https://github.com/diff-d/diffd-frontend/blob/main/web/src/ui/InviteFriends.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_shell toneBlue
class node_home,node_gameplay,node_daily,node_duel,node_duelsetup,node_party,node_partysetup,node_partychat,node_sketch,node_drawing,node_remote toneAmber
class node_social,node_orgs,node_invite,node_server toneMint
class node_api,node_identity,node_notices,node_remote_state,node_format,node_charts,node_stats toneRose
class node_profile,node_profilegame,node_leaderboards,node_admin,node_adminanalytics,node_player toneIndigo
```

## Components

### Application shell

- [Route shell](https://github.com/diff-d/diffd-frontend/blob/main/web/src/App.tsx): `web/src/App.tsx`

### Games and competition

- [Game home](https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/Home.tsx): `web/src/pages/Home.tsx`
- [Game pages](https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/TestPage.tsx): `web/src/pages/TestPage.tsx`
- [Daily challenges](https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/Daily.tsx): `web/src/pages/Daily.tsx`
- [1v1 room](https://github.com/diff-d/diffd-frontend/blob/main/web/src/duel/DuelRoom.tsx): `web/src/duel/DuelRoom.tsx`
- [Duel setup](https://github.com/diff-d/diffd-frontend/blob/main/web/src/duel/createDuel.ts): `web/src/duel/createDuel.ts`
- [Party room](https://github.com/diff-d/diffd-frontend/blob/main/web/src/party/PartyRoom.tsx): `web/src/party/PartyRoom.tsx`
- [Party session](https://github.com/diff-d/diffd-frontend/blob/main/web/src/party/createParty.ts): `web/src/party/createParty.ts`
- [Party chat](https://github.com/diff-d/diffd-frontend/blob/main/web/src/party/PartyChat.tsx): `web/src/party/PartyChat.tsx`
- [Sketch game](https://github.com/diff-d/diffd-frontend/blob/main/web/src/party/sketch/Sketch.tsx): `web/src/party/sketch/Sketch.tsx`
- [Drawing operations](https://github.com/diff-d/diffd-frontend/blob/main/web/src/party/sketch/drawing.ts): `web/src/party/sketch/drawing.ts`
- [Remote controls](https://github.com/diff-d/diffd-frontend/blob/main/web/src/remote/Controls.tsx): `web/src/remote/Controls.tsx`

### Social features

- [Friends and invites](https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/Friends.tsx): `web/src/pages/Friends.tsx`
- [Organisations](https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/Org.tsx): `web/src/pages/Org.tsx`
- [Invite UI](https://github.com/diff-d/diffd-frontend/blob/main/web/src/ui/InviteFriends.tsx): `web/src/ui/InviteFriends.tsx`

### API and shared state

- [API client](https://github.com/diff-d/diffd-frontend/blob/main/web/src/api/client.ts): `web/src/api/client.ts`
- [Identity state](https://github.com/diff-d/diffd-frontend/blob/main/web/src/state/identity.ts): `web/src/state/identity.ts`
- [Notices state](https://github.com/diff-d/diffd-frontend/blob/main/web/src/state/notices.ts): `web/src/state/notices.ts`
- [Remote state](https://github.com/diff-d/diffd-frontend/blob/main/web/src/state/remote.ts): `web/src/state/remote.ts`
- [Score formatting](https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/format.ts): `web/src/pages/format.ts`
- [Chart utilities](https://github.com/diff-d/diffd-frontend/blob/main/web/src/ui/chart.ts): `web/src/ui/chart.ts`
- [Statistics utilities](https://github.com/diff-d/diffd-frontend/blob/main/web/src/ui/stats.ts): `web/src/ui/stats.ts`

### Profiles and administration

- [Player profiles](https://github.com/diff-d/diffd-frontend/blob/main/web/src/profile/ProfileView.tsx): `web/src/profile/ProfileView.tsx`
- [Game history](https://github.com/diff-d/diffd-frontend/blob/main/web/src/profile/GameTile.tsx): `web/src/profile/GameTile.tsx`
- [Leaderboards](https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/Leaderboards.tsx): `web/src/pages/Leaderboards.tsx`
- [Administration](https://github.com/diff-d/diffd-frontend/blob/main/web/src/pages/Admin.tsx): `web/src/pages/Admin.tsx`
- [Game analytics](https://github.com/diff-d/diffd-frontend/blob/main/web/src/admin/Games.tsx): `web/src/admin/Games.tsx`

### Other components

- **Player**
- **diff'D game server**

## Connections

- Player → Route shell: opens site (evidence: `README.md`)
- Route shell → Game home: routes to (evidence: `web/src/App.tsx`)
- Route shell → Game pages: routes to (evidence: `web/src/App.tsx`)
- Route shell → Daily challenges: routes to (evidence: `web/src/App.tsx`)
- Route shell → 1v1 room: routes to (evidence: `web/src/App.tsx`)
- Route shell → Party room: routes to (evidence: `web/src/App.tsx`)
- Route shell → Leaderboards: routes to (evidence: `web/src/App.tsx`)
- Route shell → Administration: routes to (evidence: `web/src/App.tsx`)
- Route shell → Player profiles: routes to (evidence: `web/src/App.tsx`)
- Route shell → Organisations: routes to (evidence: `web/src/App.tsx`)
- 1v1 room → Duel setup: uses session logic (evidence: `web/src/duel/DuelRoom.tsx`)
- Duel setup → API client: opens duel socket (evidence: `web/src/duel/createDuel.ts`)
- Party room → Party session: uses session logic (evidence: `web/src/party/PartyRoom.tsx`)
- Party session → API client: opens party socket (evidence: `web/src/party/createParty.ts`)
- Party room → Party chat: renders (evidence: `web/src/party/PartyRoom.tsx`)
- Party room → Sketch game: hosts game view (evidence: `web/src/party/PartyRoom.tsx`)
- Sketch game → Drawing operations: uses (evidence: `web/src/party/sketch/Sketch.tsx`)
- API client → diff'D game server: sends requests (evidence: `README.md`)
- Administration → Game analytics: renders (evidence: `web/src/pages/Admin.tsx`)
- Administration → API client: loads admin data (evidence: `web/src/pages/Admin.tsx`)
- Organisations → API client: loads organisation data (evidence: `web/src/pages/Org.tsx`)
- Identity state → API client: refreshes identity (evidence: `web/src/state/identity.ts`)
- Route shell → Identity state: refreshes identity (evidence: `web/src/App.tsx`)
- Party session → Notices state: reports session notices (evidence: `web/src/party/createParty.ts`)
- Party session → Remote state: uses remote state (evidence: `web/src/party/PartyRoom.tsx`)
- Remote controls → Remote state: uses remote state (evidence: `web/src/state/remote.ts`)
- Player profiles → Game history: renders game tiles (evidence: `web/src/profile/ProfileView.tsx`)
- Game history → Score formatting: formats scores (evidence: `web/src/profile/GameTile.tsx`)
- Game analytics → Score formatting: formats scores (evidence: `web/src/admin/Games.tsx`)
- Game analytics → Chart utilities: uses charts (evidence: `web/src/admin/Games.tsx`)
- Chart utilities → Statistics utilities: uses statistics (evidence: `web/src/ui/TimingChart.tsx`)
- Invite UI → API client: sends invitations (evidence: `web/src/ui/InviteFriends.tsx`)