# singhaman21/tag architecture

> Architecture diagram of the GitHub repository singhaman21/tag, 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/singhaman21/tag
- Repository: https://github.com/singhaman21/tag

## Overview

Rushout is a browser-based arcade tag game with two play modes: same-device local multiplayer and online Colyseus rooms. Players choose a mode or create/join a coded room; online play proceeds through a configurable lobby, authoritative timed arena simulation, and rendered HUD/results, while local play runs its simulation entirely in the browser. Shared maps, gameplay constants, power-up definitions, and room-state schemas support both sides. The graph reflects documented features where source excerpts were unavailable; those limits prevent asserting unsampled page-to-page or server internals wiring.

Main entry points: [`server/src/rooms/TagRoom.ts`](https://github.com/singhaman21/tag/blob/main/server/src/rooms/TagRoom.ts) (Room Server), [`client/src/pages/OnlineGame.tsx`](https://github.com/singhaman21/tag/blob/main/client/src/pages/OnlineGame.tsx) (Online Play), [`client/src/game/engine.ts`](https://github.com/singhaman21/tag/blob/main/client/src/game/engine.ts) (Local Simulation), [`client/src/pages/LocalPlay.tsx`](https://github.com/singhaman21/tag/blob/main/client/src/pages/LocalPlay.tsx) (Local Setup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser Client"]
  node_app["Route App<br/>[App.tsx]"]
  node_menu["Mode Menu<br/>[MainMenu.tsx]"]
  node_local["Local Setup<br/>[LocalPlay.tsx]"]
  node_joystick["Touch Controls<br/>[TouchJoystick.tsx]"]
end

subgraph group_online["Online Rooms"]
  node_onlinegame["Online Play<br/>[OnlineGame.tsx]"]
  node_create["Create Room<br/>[CreateRoom.tsx]"]
  node_join["Join Room<br/>[JoinRoom.tsx]"]
  node_lobby["Room Lobby<br/>[RoomLobby.tsx]"]
  node_roomserver["Room Server<br/>[TagRoom.ts]"]
  node_serverentry["Server Registry<br/>[index.ts]"]
end

subgraph group_runtime["Game Runtime"]
  node_input["Keyboard Inputs<br/>[useLocalInputs.ts]"]
  node_localengine["Local Simulation<br/>[engine.ts]"]
  node_renderer["Canvas Renderer<br/>[renderer.ts]"]
end

subgraph group_shared["Shared Domain"]
  node_mapdata["Arena Maps<br/>[maps.ts]"]
  node_powerdata["Power-Up Rules<br/>[powerups.ts]"]
  node_constants["Game Constants<br/>[constants.ts]"]
  node_schema["Room Schema<br/>[schema.ts]"]
  node_types["Game Types<br/>[types.ts]"]
end

node_player(("Player"))
node_server{{"Colyseus Service"}}

node_player -->|"opens game"| node_app
node_app -->|"routes to"| node_menu
node_menu -->|"chooses local"| node_local
node_menu -->|"creates room"| node_create
node_menu -->|"joins room"| node_join
node_local -->|"reads keys"| node_input
node_local -->|"updates simulation"| node_localengine
node_local -->|"renders state"| node_renderer
node_input -->|"supplies controls"| node_local
node_create -->|"opens room"| node_lobby
node_join -->|"opens room"| node_lobby
node_lobby -->|"starts play"| node_onlinegame
node_onlinegame -->|"connects"| node_server
node_server -->|"accepts WebSockets"| node_serverentry
node_serverentry -->|"registers room"| node_roomserver
node_onlinegame -->|"sends inputs"| node_roomserver
node_roomserver -->|"broadcasts state"| node_onlinegame
node_onlinegame -->|"renders state"| node_renderer
node_joystick -->|"supplies controls"| node_onlinegame
node_localengine -->|"uses maps"| node_mapdata
node_localengine -->|"uses power-ups"| node_powerdata
node_localengine -->|"uses constants"| node_constants
node_roomserver -->|"uses maps"| node_mapdata
node_roomserver -->|"uses power-ups"| node_powerdata
node_roomserver -->|"uses constants"| node_constants
node_roomserver -->|"updates state"| node_schema
node_onlinegame -->|"reads state shape"| node_schema
node_renderer -->|"uses display config"| node_powerdata
node_localengine -->|"uses types"| node_types
node_roomserver -->|"uses types"| node_types

click node_app "https://github.com/singhaman21/tag/blob/main/client/src/App.tsx"
click node_menu "https://github.com/singhaman21/tag/blob/main/client/src/pages/MainMenu.tsx"
click node_local "https://github.com/singhaman21/tag/blob/main/client/src/pages/LocalPlay.tsx"
click node_input "https://github.com/singhaman21/tag/blob/main/client/src/hooks/useLocalInputs.ts"
click node_localengine "https://github.com/singhaman21/tag/blob/main/client/src/game/engine.ts"
click node_onlinegame "https://github.com/singhaman21/tag/blob/main/client/src/pages/OnlineGame.tsx"
click node_create "https://github.com/singhaman21/tag/blob/main/client/src/pages/CreateRoom.tsx"
click node_join "https://github.com/singhaman21/tag/blob/main/client/src/pages/JoinRoom.tsx"
click node_lobby "https://github.com/singhaman21/tag/blob/main/client/src/pages/RoomLobby.tsx"
click node_roomserver "https://github.com/singhaman21/tag/blob/main/server/src/rooms/TagRoom.ts"
click node_serverentry "https://github.com/singhaman21/tag/blob/main/server/src/index.ts"
click node_renderer "https://github.com/singhaman21/tag/blob/main/client/src/game/renderer.ts"
click node_joystick "https://github.com/singhaman21/tag/blob/main/client/src/components/TouchJoystick.tsx"
click node_mapdata "https://github.com/singhaman21/tag/blob/main/shared/src/maps.ts"
click node_powerdata "https://github.com/singhaman21/tag/blob/main/shared/src/powerups.ts"
click node_constants "https://github.com/singhaman21/tag/blob/main/shared/src/constants.ts"
click node_schema "https://github.com/singhaman21/tag/blob/main/shared/src/schema.ts"
click node_types "https://github.com/singhaman21/tag/blob/main/shared/src/types.ts"

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_menu,node_local,node_joystick toneBlue
class node_onlinegame,node_create,node_join,node_lobby,node_roomserver,node_serverentry toneAmber
class node_input,node_localengine,node_renderer toneMint
class node_mapdata,node_powerdata,node_constants,node_schema,node_types toneRose
class node_player,node_server toneIndigo
```

## Components

### Browser Client

- [Route App](https://github.com/singhaman21/tag/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Mode Menu](https://github.com/singhaman21/tag/blob/main/client/src/pages/MainMenu.tsx): `client/src/pages/MainMenu.tsx`
- [Local Setup](https://github.com/singhaman21/tag/blob/main/client/src/pages/LocalPlay.tsx): `client/src/pages/LocalPlay.tsx`
- [Touch Controls](https://github.com/singhaman21/tag/blob/main/client/src/components/TouchJoystick.tsx): `client/src/components/TouchJoystick.tsx`

### Online Rooms

- [Online Play](https://github.com/singhaman21/tag/blob/main/client/src/pages/OnlineGame.tsx): `client/src/pages/OnlineGame.tsx`
- [Create Room](https://github.com/singhaman21/tag/blob/main/client/src/pages/CreateRoom.tsx): `client/src/pages/CreateRoom.tsx`
- [Join Room](https://github.com/singhaman21/tag/blob/main/client/src/pages/JoinRoom.tsx): `client/src/pages/JoinRoom.tsx`
- [Room Lobby](https://github.com/singhaman21/tag/blob/main/client/src/pages/RoomLobby.tsx): `client/src/pages/RoomLobby.tsx`
- [Room Server](https://github.com/singhaman21/tag/blob/main/server/src/rooms/TagRoom.ts): `server/src/rooms/TagRoom.ts`
- [Server Registry](https://github.com/singhaman21/tag/blob/main/server/src/index.ts): `server/src/index.ts`

### Game Runtime

- [Keyboard Inputs](https://github.com/singhaman21/tag/blob/main/client/src/hooks/useLocalInputs.ts): `client/src/hooks/useLocalInputs.ts`
- [Local Simulation](https://github.com/singhaman21/tag/blob/main/client/src/game/engine.ts): `client/src/game/engine.ts`
- [Canvas Renderer](https://github.com/singhaman21/tag/blob/main/client/src/game/renderer.ts): `client/src/game/renderer.ts`

### Shared Domain

- [Arena Maps](https://github.com/singhaman21/tag/blob/main/shared/src/maps.ts): `shared/src/maps.ts`
- [Power-Up Rules](https://github.com/singhaman21/tag/blob/main/shared/src/powerups.ts): `shared/src/powerups.ts`
- [Game Constants](https://github.com/singhaman21/tag/blob/main/shared/src/constants.ts): `shared/src/constants.ts`
- [Room Schema](https://github.com/singhaman21/tag/blob/main/shared/src/schema.ts): `shared/src/schema.ts`
- [Game Types](https://github.com/singhaman21/tag/blob/main/shared/src/types.ts): `shared/src/types.ts`

### Other components

- **Player**
- **Colyseus Service**

## Connections

- Player → Route App: opens game
- Route App → Mode Menu: routes to
- Mode Menu → Local Setup: chooses local
- Mode Menu → Create Room: creates room
- Mode Menu → Join Room: joins room
- Local Setup → Keyboard Inputs: reads keys
- Local Setup → Local Simulation: updates simulation
- Local Setup → Canvas Renderer: renders state
- Keyboard Inputs → Local Setup: supplies controls
- Create Room → Room Lobby: opens room
- Join Room → Room Lobby: opens room
- Room Lobby → Online Play: starts play
- Online Play → Colyseus Service: connects
- Colyseus Service → Server Registry: accepts WebSockets
- Server Registry → Room Server: registers room
- Online Play → Room Server: sends inputs
- Room Server → Online Play: broadcasts state
- Online Play → Canvas Renderer: renders state
- Touch Controls → Online Play: supplies controls
- Local Simulation → Arena Maps: uses maps
- Local Simulation → Power-Up Rules: uses power-ups
- Local Simulation → Game Constants: uses constants
- Room Server → Arena Maps: uses maps
- Room Server → Power-Up Rules: uses power-ups
- Room Server → Game Constants: uses constants
- Room Server → Room Schema: updates state
- Online Play → Room Schema: reads state shape
- Canvas Renderer → Power-Up Rules: uses display config
- Local Simulation → Game Types: uses types
- Room Server → Game Types: uses types