# huxin0817/dots-and-boxes architecture

> Architecture diagram of the GitHub repository huxin0817/dots-and-boxes, 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/huxin0817/dots-and-boxes
- Repository: https://github.com/huxin0817/dots-and-boxes

## Overview

Dots and Boxes is a browser game: players choose edges, the board updates scores and turns, and the game ends with a result and restart option. Robot turns are dispatched to a web worker, which reconstructs the board and asks the search-based robot for a move. The graph follows the supplied source excerpts; the README is empty, and some robot implementation lines were omitted, so uncertain internal search wiring is not expanded.

Main entry points: [`src/App.jsx`](https://github.com/huxin0817/dots-and-boxes/blob/main/src/App.jsx) (Game controller), [`src/game/robot-worker.js`](https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/robot-worker.js) (Robot worker), [`src/game/robots.js`](https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/robots.js) (Move search), [`src/config.js`](https://github.com/huxin0817/dots-and-boxes/blob/main/src/config.js) (Player settings)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Game interface"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["Game controller<br/>[App.jsx]"]
  node_boardview["Board and result UI<br/>[App.jsx]"]
end

subgraph group_state["Game model"]
  node_config["Player settings<br/>[config.js]"]
  node_topology["Board topology<br/>[board-topology.js]"]
  node_board["Live game state<br/>[board.js]"]
end

subgraph group_robot["Robot play"]
  node_worker["Robot worker<br/>[robot-worker.js]"]
  node_robots["Move search<br/>[robots.js]"]
  node_searchboard["Search state<br/>[search-board.js]"]
  node_cache["Exact-search cache<br/>[search-cache.js]"]
  node_random["Random selection<br/>[random.js]"]
end

node_player(("Player"))

node_player -->|"selects edge"| node_boardview
node_entry -->|"renders"| node_app
node_app -->|"reads settings"| node_config
node_config -->|"parses player type"| node_robots
node_app -->|"updates or resets"| node_board
node_app -->|"creates model"| node_topology
node_app -->|"renders state"| node_boardview
node_boardview -->|"edge click"| node_app
node_app -->|"dispatches snapshot"| node_worker
node_worker -->|"replays moves"| node_board
node_worker -->|"creates model"| node_topology
node_worker -->|"requests move"| node_robots
node_robots -->|"evaluates positions"| node_searchboard
node_robots -->|"looks up positions"| node_cache
node_robots -->|"selects randomly"| node_random
node_worker -->|"returns edge"| node_app

click node_entry "https://github.com/huxin0817/dots-and-boxes/blob/main/src/main.jsx"
click node_app "https://github.com/huxin0817/dots-and-boxes/blob/main/src/App.jsx"
click node_boardview "https://github.com/huxin0817/dots-and-boxes/blob/main/src/App.jsx"
click node_config "https://github.com/huxin0817/dots-and-boxes/blob/main/src/config.js"
click node_topology "https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/board-topology.js"
click node_board "https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/board.js"
click node_worker "https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/robot-worker.js"
click node_robots "https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/robots.js"
click node_searchboard "https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/search-board.js"
click node_cache "https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/search-cache.js"
click node_random "https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/random.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_entry,node_app,node_boardview toneBlue
class node_config,node_topology,node_board toneAmber
class node_worker,node_robots,node_searchboard,node_cache,node_random toneMint
class node_player toneIndigo
```

## Components

### Game interface

- [React entry](https://github.com/huxin0817/dots-and-boxes/blob/main/src/main.jsx): `src/main.jsx`
- [Game controller](https://github.com/huxin0817/dots-and-boxes/blob/main/src/App.jsx): `src/App.jsx`
- [Board and result UI](https://github.com/huxin0817/dots-and-boxes/blob/main/src/App.jsx): `src/App.jsx`

### Game model

- [Player settings](https://github.com/huxin0817/dots-and-boxes/blob/main/src/config.js): `src/config.js`
- [Board topology](https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/board-topology.js): `src/game/board-topology.js`
- [Live game state](https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/board.js): `src/game/board.js`

### Robot play

- [Robot worker](https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/robot-worker.js): `src/game/robot-worker.js`
- [Move search](https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/robots.js): `src/game/robots.js`
- [Search state](https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/search-board.js): `src/game/search-board.js`
- [Exact-search cache](https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/search-cache.js): `src/game/search-cache.js`
- [Random selection](https://github.com/huxin0817/dots-and-boxes/blob/main/src/game/random.js): `src/game/random.js`

### Other components

- **Player**

## Connections

- Player → Board and result UI: selects edge
- React entry → Game controller: renders
- Game controller → Player settings: reads settings
- Player settings → Move search: parses player type
- Game controller → Live game state: updates or resets
- Game controller → Board topology: creates model
- Game controller → Board and result UI: renders state
- Board and result UI → Game controller: edge click
- Game controller → Robot worker: dispatches snapshot
- Robot worker → Live game state: replays moves
- Robot worker → Board topology: creates model
- Robot worker → Move search: requests move
- Move search → Search state: evaluates positions
- Move search → Exact-search cache: looks up positions
- Move search → Random selection: selects randomly
- Robot worker → Game controller: returns edge