# colochampre/snake-soccer architecture

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

## Overview

Snake Soccer is a browser multiplayer game combining Snake movement with soccer matches. A player registers or signs in, enters the lobby, creates or joins a room, and plays a real-time match; player statistics and rankings provide a post-match progression view. The documented product also includes multiple team sizes, quick chat, and snake/ball customization. The sampled source confirms server setup, authentication, room management, ranking, and P2P coordination; unsampled room and game internals are represented only where paths and ownership are supported by the tree or README.

Main entry points: [`app.js`](https://github.com/colochampre/snake-soccer/blob/main/app.js) (Express app), [`public/js/webrtc/P2PManager.js`](https://github.com/colochampre/snake-soccer/blob/main/public/js/webrtc/P2PManager.js) (P2P manager), [`controllers/rankingController.js`](https://github.com/colochampre/snake-soccer/blob/main/controllers/rankingController.js) (Ranking controller), [`models/userModel.js`](https://github.com/colochampre/snake-soccer/blob/main/models/userModel.js) (User model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web entry and UI"]
  node_browser["Game browser<br/>[main.js]"]
  node_lobby["Lobby UI<br/>[lobbyUI.js]"]
  node_roomui["Room UI<br/>[roomUI.js]"]
  node_renderer["Game renderer<br/>[gameRenderer.js]"]
  node_app["Express app<br/>[app.js]"]
  node_views["Pug views"]
end

subgraph group_identity["Identity and profiles"]
  node_authroutes["Auth routes<br/>[authRouter.js]"]
  node_authctl["Auth controller<br/>[authController.js]"]
  node_authmw["Auth middleware<br/>[auth.js]"]
  node_users["User model<br/>[userModel.js]"]
end

subgraph group_match["Rooms and gameplay"]
  node_roomsroutes["Room routes<br/>[roomRouter.js]"]
  node_roomctl["Room controller<br/>[roomController.js]"]
  node_roomsocket["Room sockets<br/>[roomSocket.js]"]
  node_p2p["P2P manager<br/>[P2PManager.js]"]
  node_hostgame["Host game<br/>[HostGame.js]"]
  node_clientgame["Client game<br/>[ClientGame.js]"]
  node_peer["Peer connection<br/>[PeerConnection.js]"]
  node_gamelogic["Game rules<br/>[gameLogic.js]"]
end

subgraph group_progress["Player progression"]
  node_rankroutes["Ranking routes<br/>[rankingRouter.js]"]
  node_rankctl["Ranking controller"]
  node_stats["Player stats"]
end

node_player(("Player"))
node_database[("Database<br/>[db.js]")]

node_player -->|"uses"| node_browser
node_browser -->|"requests pages"| node_app
node_app -->|"renders"| node_views
node_app -->|"mounts"| node_authroutes
node_app -->|"mounts"| node_roomsroutes
node_app -->|"mounts"| node_rankroutes
node_authroutes -->|"dispatches"| node_authctl
node_authctl -->|"authenticates"| node_users
node_authmw -->|"checks identity"| node_users
node_users -->|"reads/writes"| node_database
node_player -->|"chooses room"| node_lobby
node_lobby -->|"requests room"| node_roomsroutes
node_roomsroutes -->|"dispatches"| node_roomctl
node_roomctl -->|"renders room"| node_views
node_app -->|"sets up sockets"| node_roomsocket
node_app -->|"provides Socket.IO"| node_roomctl
node_roomui -->|"starts match"| node_p2p
node_p2p -->|"creates host"| node_hostgame
node_p2p -->|"creates client"| node_clientgame
node_hostgame -->|"manages peers"| node_peer
node_clientgame -->|"connects peer"| node_peer
node_p2p -->|"forwards updates"| node_renderer
node_roomsocket -->|"relays room events"| node_p2p
node_player -->|"views rankings"| node_rankroutes
node_rankroutes -->|"dispatches"| node_rankctl
node_rankctl -->|"loads rankings"| node_stats
node_stats -->|"reads/writes"| node_database
node_rankctl -->|"renders ranking"| node_views

click node_browser "https://github.com/colochampre/snake-soccer/blob/main/public/js/main.js"
click node_lobby "https://github.com/colochampre/snake-soccer/blob/main/public/js/lobbyUI.js"
click node_roomui "https://github.com/colochampre/snake-soccer/blob/main/public/js/roomUI.js"
click node_renderer "https://github.com/colochampre/snake-soccer/blob/main/public/js/gameRenderer.js"
click node_app "https://github.com/colochampre/snake-soccer/blob/main/app.js"
click node_authroutes "https://github.com/colochampre/snake-soccer/blob/main/routes/authRouter.js"
click node_authctl "https://github.com/colochampre/snake-soccer/blob/main/controllers/authController.js"
click node_authmw "https://github.com/colochampre/snake-soccer/blob/main/middlewares/auth.js"
click node_users "https://github.com/colochampre/snake-soccer/blob/main/models/userModel.js"
click node_roomsroutes "https://github.com/colochampre/snake-soccer/blob/main/routes/roomRouter.js"
click node_roomctl "https://github.com/colochampre/snake-soccer/blob/main/controllers/roomController.js"
click node_roomsocket "https://github.com/colochampre/snake-soccer/blob/main/server/roomSocket.js"
click node_p2p "https://github.com/colochampre/snake-soccer/blob/main/public/js/webrtc/P2PManager.js"
click node_hostgame "https://github.com/colochampre/snake-soccer/blob/main/public/js/webrtc/HostGame.js"
click node_clientgame "https://github.com/colochampre/snake-soccer/blob/main/public/js/webrtc/ClientGame.js"
click node_peer "https://github.com/colochampre/snake-soccer/blob/main/public/js/webrtc/PeerConnection.js"
click node_gamelogic "https://github.com/colochampre/snake-soccer/blob/main/server/gameLogic.js"
click node_rankroutes "https://github.com/colochampre/snake-soccer/blob/main/routes/rankingRouter.js"
click node_rankctl "https://github.com/colochampre/snake-soccer/blob/main/controllers/rankingController.js"
click node_stats "https://github.com/colochampre/snake-soccer/blob/main/models/playerStatsModel.js"
click node_database "https://github.com/colochampre/snake-soccer/blob/main/config/db.js"
click node_views "https://github.com/colochampre/snake-soccer/tree/main/views"

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_browser,node_lobby,node_roomui,node_renderer,node_app,node_views toneBlue
class node_authroutes,node_authctl,node_authmw,node_users,node_database toneAmber
class node_roomsroutes,node_roomctl,node_roomsocket,node_p2p,node_hostgame,node_clientgame,node_peer,node_gamelogic toneMint
class node_rankroutes,node_rankctl,node_stats toneRose
class node_player toneIndigo
```

## Components

### Web entry and UI

- [Game browser](https://github.com/colochampre/snake-soccer/blob/main/public/js/main.js): `public/js/main.js`
- [Lobby UI](https://github.com/colochampre/snake-soccer/blob/main/public/js/lobbyUI.js): `public/js/lobbyUI.js`
- [Room UI](https://github.com/colochampre/snake-soccer/blob/main/public/js/roomUI.js): `public/js/roomUI.js`
- [Game renderer](https://github.com/colochampre/snake-soccer/blob/main/public/js/gameRenderer.js): `public/js/gameRenderer.js`
- [Express app](https://github.com/colochampre/snake-soccer/blob/main/app.js): `app.js`
- [Pug views](https://github.com/colochampre/snake-soccer/tree/main/views): `views`

### Identity and profiles

- [Auth routes](https://github.com/colochampre/snake-soccer/blob/main/routes/authRouter.js): `routes/authRouter.js`
- [Auth controller](https://github.com/colochampre/snake-soccer/blob/main/controllers/authController.js): `controllers/authController.js`
- [Auth middleware](https://github.com/colochampre/snake-soccer/blob/main/middlewares/auth.js): `middlewares/auth.js`
- [User model](https://github.com/colochampre/snake-soccer/blob/main/models/userModel.js): `models/userModel.js`

### Rooms and gameplay

- [Room routes](https://github.com/colochampre/snake-soccer/blob/main/routes/roomRouter.js): `routes/roomRouter.js`
- [Room controller](https://github.com/colochampre/snake-soccer/blob/main/controllers/roomController.js): `controllers/roomController.js`
- [Room sockets](https://github.com/colochampre/snake-soccer/blob/main/server/roomSocket.js): `server/roomSocket.js`
- [P2P manager](https://github.com/colochampre/snake-soccer/blob/main/public/js/webrtc/P2PManager.js): `public/js/webrtc/P2PManager.js`
- [Host game](https://github.com/colochampre/snake-soccer/blob/main/public/js/webrtc/HostGame.js): `public/js/webrtc/HostGame.js`
- [Client game](https://github.com/colochampre/snake-soccer/blob/main/public/js/webrtc/ClientGame.js): `public/js/webrtc/ClientGame.js`
- [Peer connection](https://github.com/colochampre/snake-soccer/blob/main/public/js/webrtc/PeerConnection.js): `public/js/webrtc/PeerConnection.js`
- [Game rules](https://github.com/colochampre/snake-soccer/blob/main/server/gameLogic.js): `server/gameLogic.js`

### Player progression

- [Ranking routes](https://github.com/colochampre/snake-soccer/blob/main/routes/rankingRouter.js): `routes/rankingRouter.js`
- [Ranking controller](https://github.com/colochampre/snake-soccer/blob/main/controllers/rankingController.js): `controllers/rankingController.js`
- [Player stats](https://github.com/colochampre/snake-soccer/blob/main/models/playerStatsModel.js): `models/playerStatsModel.js`

### Other components

- **Player**
- [Database](https://github.com/colochampre/snake-soccer/blob/main/config/db.js): `config/db.js`

## Connections

- Player → Game browser: uses
- Game browser → Express app: requests pages
- Express app → Pug views: renders
- Express app → Auth routes: mounts
- Express app → Room routes: mounts
- Express app → Ranking routes: mounts
- Auth routes → Auth controller: dispatches
- Auth controller → User model: authenticates
- Auth middleware → User model: checks identity
- User model → Database: reads/writes
- Player → Lobby UI: chooses room
- Lobby UI → Room routes: requests room
- Room routes → Room controller: dispatches
- Room controller → Pug views: renders room
- Express app → Room sockets: sets up sockets
- Express app → Room controller: provides Socket.IO
- Room UI → P2P manager: starts match
- P2P manager → Host game: creates host
- P2P manager → Client game: creates client
- Host game → Peer connection: manages peers
- Client game → Peer connection: connects peer
- P2P manager → Game renderer: forwards updates
- Room sockets → P2P manager: relays room events
- Player → Ranking routes: views rankings
- Ranking routes → Ranking controller: dispatches
- Ranking controller → Player stats: loads rankings
- Player stats → Database: reads/writes
- Ranking controller → Pug views: renders ranking