# shadowhedgehog76/webno architecture

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

## Overview

WebNo is a browser-based, serverless UNO game for up to four players in solo play, eight in team play, and up to 32 in Party mode. The host runs the authoritative game: players join a coded room, submit actions, and receive player-specific state; the host can also use bots to fill seats. The graph includes the documented game variants and presentation options, but sampled excerpts do not establish all wiring between the app and rendering modules, so those links are omitted.

Main entry points: [`js/app.js`](https://github.com/shadowhedgehog76/webno/blob/main/js/app.js) (App orchestration), [`js/engine.js`](https://github.com/shadowhedgehog76/webno/blob/main/js/engine.js) (UNO engine), [`js/ui.js`](https://github.com/shadowhedgehog76/webno/blob/main/js/ui.js) (Menus and controls), [`js/net.js`](https://github.com/shadowhedgehog76/webno/blob/main/js/net.js) (Peer networking)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_game["Game rules"]
  node_engine["UNO engine<br/>[engine.js]"]
  node_deck["Decks and settings<br/>[deck.js]"]
  node_party["Party cards<br/>[party.js]"]
  node_bots["Bot AI<br/>[bot.js]"]
end

subgraph group_multiplayer["Multiplayer"]
  node_app["App orchestration<br/>[app.js]"]
  node_net["Peer networking<br/>[net.js]"]
  node_peer{{"PeerJS service"}}
end

subgraph group_interface["Player experience"]
  node_ui["Menus and controls<br/>[ui.js]"]
  node_qr["QR encoder<br/>[qr.js]"]
  node_audio["Synthesized audio<br/>[audio.js]"]
end

subgraph group_visuals["Table rendering"]
  node_scene["3D table<br/>[scene3d.js]"]
  node_table2d["2D table<br/>[plateau2d.js]"]
  node_cardtex["Card artwork<br/>[cardtex.js]"]
end

node_player(("Player"))

node_player -->|"starts or joins"| node_app
node_app -->|"runs game"| node_engine
node_engine -->|"provides state"| node_app
node_engine -->|"builds and checks decks"| node_deck
node_engine -->|"uses party cards"| node_party
node_app -->|"requests bot actions"| node_bots
node_app -->|"opens room or connects"| node_net
node_app -->|"sends state and actions"| node_net
node_net -->|"delivers messages"| node_app
node_net -->|"uses WebRTC service"| node_peer
node_app -->|"updates interface"| node_ui
node_ui -->|"reads game options"| node_deck
node_ui -->|"reads party cards"| node_party
node_ui -->|"renders room QR"| node_qr
node_app -->|"triggers sound"| node_audio
node_scene -->|"paints card textures"| node_cardtex
node_table2d -->|"paints card faces"| node_cardtex

click node_app "https://github.com/shadowhedgehog76/webno/blob/main/js/app.js"
click node_engine "https://github.com/shadowhedgehog76/webno/blob/main/js/engine.js"
click node_deck "https://github.com/shadowhedgehog76/webno/blob/main/js/deck.js"
click node_party "https://github.com/shadowhedgehog76/webno/blob/main/js/party.js"
click node_bots "https://github.com/shadowhedgehog76/webno/blob/main/js/bot.js"
click node_net "https://github.com/shadowhedgehog76/webno/blob/main/js/net.js"
click node_ui "https://github.com/shadowhedgehog76/webno/blob/main/js/ui.js"
click node_qr "https://github.com/shadowhedgehog76/webno/blob/main/js/qr.js"
click node_audio "https://github.com/shadowhedgehog76/webno/blob/main/js/audio.js"
click node_scene "https://github.com/shadowhedgehog76/webno/blob/main/js/scene3d.js"
click node_table2d "https://github.com/shadowhedgehog76/webno/blob/main/js/plateau2d.js"
click node_cardtex "https://github.com/shadowhedgehog76/webno/blob/main/js/cardtex.js"

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_engine,node_deck,node_party,node_bots toneBlue
class node_app,node_net,node_peer toneAmber
class node_ui,node_qr,node_audio toneMint
class node_scene,node_table2d,node_cardtex toneRose
class node_player toneIndigo
```

## Components

### Game rules

- [UNO engine](https://github.com/shadowhedgehog76/webno/blob/main/js/engine.js): `js/engine.js`
- [Decks and settings](https://github.com/shadowhedgehog76/webno/blob/main/js/deck.js): `js/deck.js`
- [Party cards](https://github.com/shadowhedgehog76/webno/blob/main/js/party.js): `js/party.js`
- [Bot AI](https://github.com/shadowhedgehog76/webno/blob/main/js/bot.js): `js/bot.js`

### Multiplayer

- [App orchestration](https://github.com/shadowhedgehog76/webno/blob/main/js/app.js): `js/app.js`
- [Peer networking](https://github.com/shadowhedgehog76/webno/blob/main/js/net.js): `js/net.js`
- **PeerJS service**

### Player experience

- [Menus and controls](https://github.com/shadowhedgehog76/webno/blob/main/js/ui.js): `js/ui.js`
- [QR encoder](https://github.com/shadowhedgehog76/webno/blob/main/js/qr.js): `js/qr.js`
- [Synthesized audio](https://github.com/shadowhedgehog76/webno/blob/main/js/audio.js): `js/audio.js`

### Table rendering

- [3D table](https://github.com/shadowhedgehog76/webno/blob/main/js/scene3d.js): `js/scene3d.js`
- [2D table](https://github.com/shadowhedgehog76/webno/blob/main/js/plateau2d.js): `js/plateau2d.js`
- [Card artwork](https://github.com/shadowhedgehog76/webno/blob/main/js/cardtex.js): `js/cardtex.js`

### Other components

- **Player**

## Connections

- Player → App orchestration: starts or joins
- App orchestration → UNO engine: runs game
- UNO engine → App orchestration: provides state
- UNO engine → Decks and settings: builds and checks decks
- UNO engine → Party cards: uses party cards
- App orchestration → Bot AI: requests bot actions
- App orchestration → Peer networking: opens room or connects
- App orchestration → Peer networking: sends state and actions
- Peer networking → App orchestration: delivers messages
- Peer networking → PeerJS service: uses WebRTC service
- App orchestration → Menus and controls: updates interface
- Menus and controls → Decks and settings: reads game options
- Menus and controls → Party cards: reads party cards
- Menus and controls → QR encoder: renders room QR
- App orchestration → Synthesized audio: triggers sound
- 3D table → Card artwork: paints card textures
- 2D table → Card artwork: paints card faces