# boradmir/online-101-okey-demo architecture

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

- Interactive diagram: https://gitdiagram.com/boradmir/online-101-okey-demo
- Repository: https://github.com/boradmir/online-101-okey-demo

## Overview

101 Okey Online is a browser-based, real-time multiplayer game. Players choose a name and options, join through the home page, then play through a live game interface; the server owns authoritative game state and broadcasts updates. The README also describes automatic tile grouping and scoring, rule enforcement and penalties, reconnect/synchronization support, and interactive tomato effects. The server excerpt is partial, so links for some room-management and client features are left unspecified where their wiring is not established.

Main entry points: [`public/js/main.js`](https://github.com/boradmir/online-101-okey-demo/blob/main/public/js/main.js) (Join client), [`public/game.html`](https://github.com/boradmir/online-101-okey-demo/blob/main/public/game.html) (Game interface), [`server/index.js`](https://github.com/boradmir/online-101-okey-demo/blob/main/server/index.js) (Socket server), [`public/js/game.js`](https://github.com/boradmir/online-101-okey-demo/blob/main/public/js/game.js) (Game client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser experience"]
  node_home["Join and options<br/>[index.html]"]
  node_lobby["Join client<br/>[main.js]"]
  node_gamepage["Game interface<br/>[game.html]"]
  node_gameclient["Game client<br/>[game.js]"]
  node_presentation["Game styling<br/>[style.css]"]
end

subgraph group_runtime["Live game runtime"]
  node_server["Socket server<br/>[index.js]"]
end

subgraph group_rules["Game rules and state"]
  node_logic["Game rules<br/>[gameLogic.js]"]
  node_logger["Runtime logging<br/>[logger.js]"]
end

subgraph group_rooms["Room management"]
  node_rooms["Room state<br/>[roomManager.js]"]
end

node_player(("Player"))
node_socketio["Socket.IO"]

node_player -->|"opens"| node_home
node_home -->|"loads"| node_lobby
node_lobby -->|"emits join"| node_socketio
node_socketio -->|"delivers events"| node_server
node_server -->|"emits updates"| node_socketio
node_socketio -->|"delivers events"| node_lobby
node_lobby -->|"redirects"| node_gamepage
node_gamepage -->|"loads"| node_gameclient
node_gamepage -->|"uses styles"| node_presentation
node_gameclient -->|"sends actions"| node_socketio
node_socketio -->|"delivers updates"| node_gameclient
node_server -->|"creates and calls"| node_logic
node_logic -->|"logs events"| node_logger

click node_home "https://github.com/boradmir/online-101-okey-demo/blob/main/public/index.html"
click node_lobby "https://github.com/boradmir/online-101-okey-demo/blob/main/public/js/main.js"
click node_gamepage "https://github.com/boradmir/online-101-okey-demo/blob/main/public/game.html"
click node_gameclient "https://github.com/boradmir/online-101-okey-demo/blob/main/public/js/game.js"
click node_presentation "https://github.com/boradmir/online-101-okey-demo/blob/main/public/css/style.css"
click node_server "https://github.com/boradmir/online-101-okey-demo/blob/main/server/index.js"
click node_rooms "https://github.com/boradmir/online-101-okey-demo/blob/main/server/roomManager.js"
click node_logic "https://github.com/boradmir/online-101-okey-demo/blob/main/server/gameLogic.js"
click node_logger "https://github.com/boradmir/online-101-okey-demo/blob/main/server/logger.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_home,node_lobby,node_gamepage,node_gameclient,node_presentation toneBlue
class node_server toneAmber
class node_logic,node_logger toneMint
class node_rooms toneRose
class node_player,node_socketio toneIndigo
```

## Components

### Browser experience

- [Join and options](https://github.com/boradmir/online-101-okey-demo/blob/main/public/index.html): `public/index.html`
- [Join client](https://github.com/boradmir/online-101-okey-demo/blob/main/public/js/main.js): `public/js/main.js`
- [Game interface](https://github.com/boradmir/online-101-okey-demo/blob/main/public/game.html): `public/game.html`
- [Game client](https://github.com/boradmir/online-101-okey-demo/blob/main/public/js/game.js): `public/js/game.js`
- [Game styling](https://github.com/boradmir/online-101-okey-demo/blob/main/public/css/style.css): `public/css/style.css`

### Live game runtime

- [Socket server](https://github.com/boradmir/online-101-okey-demo/blob/main/server/index.js): `server/index.js`

### Game rules and state

- [Game rules](https://github.com/boradmir/online-101-okey-demo/blob/main/server/gameLogic.js): `server/gameLogic.js`
- [Runtime logging](https://github.com/boradmir/online-101-okey-demo/blob/main/server/logger.js): `server/logger.js`

### Room management

- [Room state](https://github.com/boradmir/online-101-okey-demo/blob/main/server/roomManager.js): `server/roomManager.js`

### Other components

- **Player**
- **Socket.IO**

## Connections

- Player → Join and options: opens
- Join and options → Join client: loads
- Join client → Socket.IO: emits join
- Socket.IO → Socket server: delivers events
- Socket server → Socket.IO: emits updates
- Socket.IO → Join client: delivers events
- Join client → Game interface: redirects
- Game interface → Game client: loads
- Game interface → Game styling: uses styles
- Game client → Socket.IO: sends actions
- Socket.IO → Game client: delivers updates
- Socket server → Game rules: creates and calls
- Game rules → Runtime logging: logs events