How diff-d/diffd-frontend works
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: App.tsx Route shell · client.ts API client · PartyRoom.tsx Party room · createParty.ts Party session
Components 29
Application shell
- Route shell
web/src/App.tsx
Games and competition
- Game home
web/src/pages/Home.tsx - Game pages
web/src/pages/TestPage.tsx - Daily challenges
web/src/pages/Daily.tsx - 1v1 room
web/src/duel/DuelRoom.tsx - Duel setup
web/src/duel/createDuel.ts - Party room
web/src/party/PartyRoom.tsx - Party session
web/src/party/createParty.ts - Party chat
web/src/party/PartyChat.tsx - Sketch game
web/src/party/sketch/Sketch.tsx - Drawing operations
web/src/party/sketch/drawing.ts - Remote controls
web/src/remote/Controls.tsx
Social features
- Friends and invites
web/src/pages/Friends.tsx - Organisations
web/src/pages/Org.tsx - Invite UI
web/src/ui/InviteFriends.tsx
API and shared state
- API client
web/src/api/client.ts - Identity state
web/src/state/identity.ts - Notices state
web/src/state/notices.ts - Remote state
web/src/state/remote.ts - Score formatting
web/src/pages/format.ts - Chart utilities
web/src/ui/chart.ts - Statistics utilities
web/src/ui/stats.ts
Profiles and administration
- Player profiles
web/src/profile/ProfileView.tsx - Game history
web/src/profile/GameTile.tsx - Leaderboards
web/src/pages/Leaderboards.tsx - Administration
web/src/pages/Admin.tsx - Game analytics
web/src/admin/Games.tsx
Other components
- Player
- diff'D game server
Connections 32
- Player → Route shell: opens site
README.md - Route shell → Game home: routes to
web/src/App.tsx - Route shell → Game pages: routes to
web/src/App.tsx - Route shell → Daily challenges: routes to
web/src/App.tsx - Route shell → 1v1 room: routes to
web/src/App.tsx - Route shell → Party room: routes to
web/src/App.tsx - Route shell → Leaderboards: routes to
web/src/App.tsx - Route shell → Administration: routes to
web/src/App.tsx - Route shell → Player profiles: routes to
web/src/App.tsx - Route shell → Organisations: routes to
web/src/App.tsx - 1v1 room → Duel setup: uses session logic
web/src/duel/DuelRoom.tsx - Duel setup → API client: opens duel socket
web/src/duel/createDuel.ts - Party room → Party session: uses session logic
web/src/party/PartyRoom.tsx - Party session → API client: opens party socket
web/src/party/createParty.ts - Party room → Party chat: renders
web/src/party/PartyRoom.tsx - Party room → Sketch game: hosts game view
web/src/party/PartyRoom.tsx - Sketch game → Drawing operations: uses
web/src/party/sketch/Sketch.tsx - API client → diff'D game server: sends requests
README.md - Administration → Game analytics: renders
web/src/pages/Admin.tsx - Administration → API client: loads admin data
web/src/pages/Admin.tsx - Organisations → API client: loads organisation data
web/src/pages/Org.tsx - Identity state → API client: refreshes identity
web/src/state/identity.ts - Route shell → Identity state: refreshes identity
web/src/App.tsx - Party session → Notices state: reports session notices
web/src/party/createParty.ts - Party session → Remote state: uses remote state
web/src/party/PartyRoom.tsx - Remote controls → Remote state: uses remote state
web/src/state/remote.ts - Player profiles → Game history: renders game tiles
web/src/profile/ProfileView.tsx - Game history → Score formatting: formats scores
web/src/profile/GameTile.tsx - Game analytics → Score formatting: formats scores
web/src/admin/Games.tsx - Game analytics → Chart utilities: uses charts
web/src/admin/Games.tsx - Chart utilities → Statistics utilities: uses statistics
web/src/ui/TimingChart.tsx - Invite UI → API client: sends invitations
web/src/ui/InviteFriends.tsx