# zhuyinghua6961/uno architecture

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

- Interactive diagram: https://gitdiagram.com/zhuyinghua6961/uno
- Repository: https://github.com/zhuyinghua6961/uno

## Overview

UNO is a multiplayer card-game product spanning Web, Flutter, and backend services. The main player journey is account access, lobby and room setup (including invitations and team assignment), then live classic or 2v2 play; room/team chat and teammate voice complement the match. The graph shows the documented service and persistence capabilities, but backend and Flutter implementation details were not sampled, so their internal wiring is intentionally limited.

Main entry points: [`backend`](https://github.com/zhuyinghua6961/uno/tree/master/backend) (API gateway), [`web/src/App.vue`](https://github.com/zhuyinghua6961/uno/blob/master/web/src/App.vue) (Web application), [`web/src/views/MatchView.vue`](https://github.com/zhuyinghua6961/uno/blob/master/web/src/views/MatchView.vue) (Match view), [`web/src/components/RoomChat.vue`](https://github.com/zhuyinghua6961/uno/blob/master/web/src/components/RoomChat.vue) (Room chat)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web client"]
  node_webapp["Web application<br/>[App.vue]"]
  node_router["Route access<br/>[router.ts]"]
  node_authstore["Account state<br/>[auth.ts]"]
  node_authapi["Account API<br/>[auth.ts]"]
  node_lobby["Lobby and rooms<br/>[lobby.ts]"]
  node_roomviews["Room views"]
  node_matchview["Match view<br/>[MatchView.vue]"]
  node_matchapi["Match API<br/>[matches.ts]"]
  node_matchsocket["Match socket<br/>[matchSocket.ts]"]
  node_chatui["Room chat<br/>[RoomChat.vue]"]
  node_chatapi["Chat API<br/>[chat.ts]"]
  node_chatsocket["Chat socket<br/>[chatSocket.ts]"]
  node_voiceui["Teammate voice<br/>[TeamVoice.vue]"]
  node_voiceapi["Voice API<br/>[voice.ts]"]
end

subgraph group_services["Backend services"]
  node_gateway["API gateway"]
  node_identity["Identity service"]
  node_game["Game service"]
end

subgraph group_mobile["Flutter client"]
  node_flutter["Flutter app"]
end

subgraph group_runtime["Runtime integrations"]
  node_gamedb[("Game database")]
  node_identitydb[("Identity database")]
  node_mail["Email delivery"]
  node_livekit["LiveKit"]
end

node_player(("Player"))

node_player -->|"uses"| node_webapp
node_webapp -->|"renders routes"| node_router
node_webapp -->|"restores session"| node_authstore
node_router -->|"guards routes"| node_authstore
node_authstore -->|"requests account"| node_authapi
node_authapi -->|"calls API"| node_gateway
node_webapp -->|"checks bootstrap"| node_gateway
node_player -->|"browses rooms"| node_lobby
node_lobby -->|"supplies room state"| node_roomviews
node_roomviews -->|"room requests"| node_gateway
node_player -->|"plays match"| node_matchview
node_matchview -->|"loads and acts"| node_matchapi
node_matchview -->|"subscribes and commands"| node_matchsocket
node_matchapi -->|"calls API"| node_gateway
node_matchsocket -->|"WebSocket messages"| node_game
node_gateway -->|"routes account calls"| node_identity
node_gateway -->|"routes game calls"| node_game
node_game -->|"verifies sessions"| node_identity
node_game -->|"persists game state"| node_gamedb
node_identity -->|"stores accounts"| node_identitydb
node_identity -->|"sends verification"| node_mail
node_player -->|"exchanges messages"| node_chatui
node_chatui -->|"loads and sends"| node_chatapi
node_chatui -->|"subscribes"| node_chatsocket
node_chatapi -->|"calls API"| node_gateway
node_chatsocket -->|"connects"| node_gateway
node_player -->|"joins voice"| node_voiceui
node_voiceui -->|"requests credentials"| node_voiceapi
node_voiceapi -->|"calls API"| node_gateway
node_voiceui -.->|"joins audio room"| node_livekit
node_player -->|"uses"| node_flutter
node_flutter -->|"uses APIs"| node_gateway
node_flutter -.->|"joins audio room"| node_livekit

click node_webapp "https://github.com/zhuyinghua6961/uno/blob/master/web/src/App.vue"
click node_router "https://github.com/zhuyinghua6961/uno/blob/master/web/src/router.ts"
click node_authstore "https://github.com/zhuyinghua6961/uno/blob/master/web/src/stores/auth.ts"
click node_authapi "https://github.com/zhuyinghua6961/uno/blob/master/web/src/api/auth.ts"
click node_lobby "https://github.com/zhuyinghua6961/uno/blob/master/web/src/stores/lobby.ts"
click node_roomviews "https://github.com/zhuyinghua6961/uno/blob/master/web/src/views/WaitingRoomView.vue"
click node_matchview "https://github.com/zhuyinghua6961/uno/blob/master/web/src/views/MatchView.vue"
click node_matchapi "https://github.com/zhuyinghua6961/uno/blob/master/web/src/api/matches.ts"
click node_matchsocket "https://github.com/zhuyinghua6961/uno/blob/master/web/src/game/matchSocket.ts"
click node_chatui "https://github.com/zhuyinghua6961/uno/blob/master/web/src/components/RoomChat.vue"
click node_chatapi "https://github.com/zhuyinghua6961/uno/blob/master/web/src/api/chat.ts"
click node_chatsocket "https://github.com/zhuyinghua6961/uno/blob/master/web/src/api/chatSocket.ts"
click node_voiceui "https://github.com/zhuyinghua6961/uno/blob/master/web/src/components/TeamVoice.vue"
click node_voiceapi "https://github.com/zhuyinghua6961/uno/blob/master/web/src/api/voice.ts"
click node_flutter "https://github.com/zhuyinghua6961/uno/tree/master/flutter"
click node_gateway "https://github.com/zhuyinghua6961/uno/tree/master/backend"
click node_identity "https://github.com/zhuyinghua6961/uno/tree/master/backend"
click node_game "https://github.com/zhuyinghua6961/uno/tree/master/backend"
click node_gamedb "https://github.com/zhuyinghua6961/uno/tree/master/backend"
click node_identitydb "https://github.com/zhuyinghua6961/uno/tree/master/backend"

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_webapp,node_router,node_authstore,node_authapi,node_lobby,node_roomviews,node_matchview,node_matchapi,node_matchsocket,node_chatui,node_chatapi,node_chatsocket,node_voiceui,node_voiceapi toneBlue
class node_gateway,node_identity,node_game toneAmber
class node_flutter toneMint
class node_gamedb,node_identitydb,node_mail,node_livekit toneRose
class node_player toneIndigo
```

## Components

### Web client

- [Web application](https://github.com/zhuyinghua6961/uno/blob/master/web/src/App.vue): `web/src/App.vue`
- [Route access](https://github.com/zhuyinghua6961/uno/blob/master/web/src/router.ts): `web/src/router.ts`
- [Account state](https://github.com/zhuyinghua6961/uno/blob/master/web/src/stores/auth.ts): `web/src/stores/auth.ts`
- [Account API](https://github.com/zhuyinghua6961/uno/blob/master/web/src/api/auth.ts): `web/src/api/auth.ts`
- [Lobby and rooms](https://github.com/zhuyinghua6961/uno/blob/master/web/src/stores/lobby.ts): `web/src/stores/lobby.ts`
- [Room views](https://github.com/zhuyinghua6961/uno/blob/master/web/src/views/WaitingRoomView.vue): `web/src/views/WaitingRoomView.vue`
- [Match view](https://github.com/zhuyinghua6961/uno/blob/master/web/src/views/MatchView.vue): `web/src/views/MatchView.vue`
- [Match API](https://github.com/zhuyinghua6961/uno/blob/master/web/src/api/matches.ts): `web/src/api/matches.ts`
- [Match socket](https://github.com/zhuyinghua6961/uno/blob/master/web/src/game/matchSocket.ts): `web/src/game/matchSocket.ts`
- [Room chat](https://github.com/zhuyinghua6961/uno/blob/master/web/src/components/RoomChat.vue): `web/src/components/RoomChat.vue`
- [Chat API](https://github.com/zhuyinghua6961/uno/blob/master/web/src/api/chat.ts): `web/src/api/chat.ts`
- [Chat socket](https://github.com/zhuyinghua6961/uno/blob/master/web/src/api/chatSocket.ts): `web/src/api/chatSocket.ts`
- [Teammate voice](https://github.com/zhuyinghua6961/uno/blob/master/web/src/components/TeamVoice.vue): `web/src/components/TeamVoice.vue`
- [Voice API](https://github.com/zhuyinghua6961/uno/blob/master/web/src/api/voice.ts): `web/src/api/voice.ts`

### Backend services

- [API gateway](https://github.com/zhuyinghua6961/uno/tree/master/backend): `backend`
- [Identity service](https://github.com/zhuyinghua6961/uno/tree/master/backend): `backend`
- [Game service](https://github.com/zhuyinghua6961/uno/tree/master/backend): `backend`

### Flutter client

- [Flutter app](https://github.com/zhuyinghua6961/uno/tree/master/flutter): `flutter`

### Runtime integrations

- [Game database](https://github.com/zhuyinghua6961/uno/tree/master/backend): `backend`
- [Identity database](https://github.com/zhuyinghua6961/uno/tree/master/backend): `backend`
- **Email delivery**
- **LiveKit**

### Other components

- **Player**

## Connections

- Player → Web application: uses
- Web application → Route access: renders routes
- Web application → Account state: restores session
- Route access → Account state: guards routes
- Account state → Account API: requests account
- Account API → API gateway: calls API
- Web application → API gateway: checks bootstrap
- Player → Lobby and rooms: browses rooms
- Lobby and rooms → Room views: supplies room state
- Room views → API gateway: room requests
- Player → Match view: plays match
- Match view → Match API: loads and acts
- Match view → Match socket: subscribes and commands
- Match API → API gateway: calls API
- Match socket → Game service: WebSocket messages
- API gateway → Identity service: routes account calls
- API gateway → Game service: routes game calls
- Game service → Identity service: verifies sessions
- Game service → Game database: persists game state
- Identity service → Identity database: stores accounts
- Identity service → Email delivery: sends verification
- Player → Room chat: exchanges messages
- Room chat → Chat API: loads and sends
- Room chat → Chat socket: subscribes
- Chat API → API gateway: calls API
- Chat socket → API gateway: connects
- Player → Teammate voice: joins voice
- Teammate voice → Voice API: requests credentials
- Voice API → API gateway: calls API
- Teammate voice → LiveKit: joins audio room
- Player → Flutter app: uses
- Flutter app → API gateway: uses APIs
- Flutter app → LiveKit: joins audio room