# 23020640-cyber/ottv2-test architecture

> Architecture diagram of the GitHub repository 23020640-cyber/ottv2-test, 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/23020640-cyber/ottv2-test
- Repository: https://github.com/23020640-cyber/ottv2-test

## Overview

OTTv2 is a browser-based 9×9 rock–paper–scissors chess game, offered as local two-player play and a four-board online arena. Players select and move pieces; shared game rules validate moves and determine wins. In the arena, the network layer adds seats, turn ownership, synchronized state, and spectator rendering through playhtml. The README documents these product flows; some HTML wiring and network implementation details are not included in the sampled source, so the graph omits uncertain links.

Main entry points: [`arenaNetwork.js`](https://github.com/23020640-cyber/ottv2-test/blob/main/arenaNetwork.js) (Seats and network play), [`arena.html`](https://github.com/23020640-cyber/ottv2-test/blob/main/arena.html) (Arena interface), [`index.html`](https://github.com/23020640-cyber/ottv2-test/blob/main/index.html) (Local game UI), [`gameLogic.js`](https://github.com/23020640-cyber/ottv2-test/blob/main/gameLogic.js) (Move and win rules)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_rules["Game rules"]
  node_game_logic["Move and win rules<br/>[gameLogic.js]"]
end

subgraph group_local["Local game"]
  node_index_ui["Local game UI<br/>[index.html]"]
end

subgraph group_arena["Online arena"]
  node_arena_ui["Arena interface<br/>[arena.html]"]
  node_arena_network["Seats and network play<br/>[arenaNetwork.js]"]
  node_board_state["Board and seat state<br/>[arenaNetwork.js]"]
  node_playhtml["playhtml sync"]
  node_sync_server["playhtml server"]
end

node_local_players(("Local players"))
node_arena_users(("Players and viewers"))

node_local_players -->|"play locally"| node_index_ui
node_index_ui -->|"use shared rules"| node_game_logic
node_arena_users -->|"join or watch"| node_arena_ui
node_arena_ui -->|"provide arena"| node_arena_network
node_arena_network -->|"validate moves"| node_game_logic
node_arena_network -->|"update state"| node_board_state
node_playhtml -->|"dispatch callbacks"| node_arena_network
node_playhtml -->|"sync state"| node_sync_server
node_sync_server -->|"broadcast state"| node_playhtml
node_arena_network -->|"render boards"| node_arena_ui

click node_index_ui "https://github.com/23020640-cyber/ottv2-test/blob/main/index.html"
click node_arena_ui "https://github.com/23020640-cyber/ottv2-test/blob/main/arena.html"
click node_game_logic "https://github.com/23020640-cyber/ottv2-test/blob/main/gameLogic.js"
click node_arena_network "https://github.com/23020640-cyber/ottv2-test/blob/main/arenaNetwork.js"
click node_board_state "https://github.com/23020640-cyber/ottv2-test/blob/main/arenaNetwork.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_game_logic,node_arena_users toneBlue
class node_index_ui toneAmber
class node_arena_ui,node_arena_network,node_board_state,node_playhtml,node_sync_server toneMint
class node_local_players toneIndigo
```

## Components

### Game rules

- [Move and win rules](https://github.com/23020640-cyber/ottv2-test/blob/main/gameLogic.js): `gameLogic.js`

### Local game

- [Local game UI](https://github.com/23020640-cyber/ottv2-test/blob/main/index.html): `index.html`

### Online arena

- [Arena interface](https://github.com/23020640-cyber/ottv2-test/blob/main/arena.html): `arena.html`
- [Seats and network play](https://github.com/23020640-cyber/ottv2-test/blob/main/arenaNetwork.js): `arenaNetwork.js`
- [Board and seat state](https://github.com/23020640-cyber/ottv2-test/blob/main/arenaNetwork.js): `arenaNetwork.js`
- **playhtml sync**
- **playhtml server**

### Other components

- **Local players**
- **Players and viewers**

## Connections

- Local players → Local game UI: play locally
- Local game UI → Move and win rules: use shared rules
- Players and viewers → Arena interface: join or watch
- Arena interface → Seats and network play: provide arena
- Seats and network play → Move and win rules: validate moves
- Seats and network play → Board and seat state: update state
- playhtml sync → Seats and network play: dispatch callbacks
- playhtml sync → playhtml server: sync state
- playhtml server → playhtml sync: broadcast state
- Seats and network play → Arena interface: render boards