How johny-max112/typetiles works
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 Player router · index.ts HTTP API · GameScene.ts Typing session · src/App.tsx Admin interface
Components 34
Player experience
- Player router
src/App.tsx - Player sign-in
src/components/PlayerAuth.tsx - Player auth state
src/lib/PlayerAuthContext.tsx - Player dashboard
src/pages/Index.tsx - Match setup
src/pages/Play.tsx - Match lobby
src/pages/Lobby.tsx - Pre-match
src/pages/PreMatch.tsx - Match results
src/pages/Results.tsx - Player progress
src/pages/Achievements.tsx - Friends and history
src/pages/Friends.tsx - Leaderboard views
src/pages/Leaderboard.tsx
Typing game
- Game page
src/pages/Game.tsx - Game mount
src/components/GameMount.tsx - Typing session
src/scenes/GameScene.ts - Word bank
src/words.ts - Word targets
src/scenes/game/WordTarget.ts - Water effects
src/scenes/game/WaterEffects.ts - Pause controls
src/scenes/game/PauseMenu.ts
Server services
- Player API client
src/lib/playerApi.ts - HTTP API
server/src/index.ts - Authentication routes
server/src/routes/auth.ts - Match routes
server/src/routes/matches.ts - Leaderboard routes
server/src/routes/leaderboard.ts - LAN multiplayer
server/src/lan.ts - Token and passwords
server/src/auth.ts - Request authentication
server/src/middleware.ts - Application database
server/src/db.ts - Admin routes
server/src/routes/admin.ts
Administration
- Admin interface
admin/src/App.tsx - Admin API client
admin/src/api.ts - User management
admin/src/pages/Users.tsx - Admin reports
admin/src/pages/Dashboard.tsx - Admin leaderboard
admin/src/pages/Leaderboard.tsx
Other components
- Player
Connections 39
- 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