# colinlquom/minesweeper architecture

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

- Interactive diagram: https://gitdiagram.com/colinlquom/minesweeper
- Repository: https://github.com/colinlquom/minesweeper

## Overview

This is a browser-based Minesweeper game. The player clicks or right-clicks a cell in the DOM; the DOM controller delegates reveal and flag actions to game state, which uses a generated board to determine outcomes, and the controller renders the result. The graph includes the documented board setup, recursive reveals, win/loss handling, flags, and mine display. Edges are limited to relationships shown in excerpts or the README; unsampled styling and page wiring are not expanded.

Main entry points: [`src/game.js`](https://github.com/colinlquom/minesweeper/blob/main/src/game.js) (Game state), [`src/dom.js`](https://github.com/colinlquom/minesweeper/blob/main/src/dom.js) (DOM controller), [`src/main.js`](https://github.com/colinlquom/minesweeper/blob/main/src/main.js) (App entry), [`src/board.js`](https://github.com/colinlquom/minesweeper/blob/main/src/board.js) (Board generation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_startup["Game startup"]
  node_entry["App entry<br/>[main.js]"]
end

subgraph group_board["Board setup"]
  node_board["Board generation<br/>[board.js]"]
  node_cell["Cell state<br/>[cell.js]"]
  node_config["Board settings<br/>[constants.js]"]
end

subgraph group_logic["Game logic"]
  node_game["Game state<br/>[game.js]"]
end

subgraph group_ui["Browser interface"]
  node_dom["DOM controller<br/>[dom.js]"]
end

node_player(("Player"))

node_entry -->|"creates"| node_game
node_entry -->|"creates"| node_dom
node_entry -->|"builds board"| node_dom
node_game -->|"creates"| node_board
node_board -->|"reads settings"| node_config
node_board -->|"creates cells"| node_cell
node_player -->|"clicks cells"| node_dom
node_dom -->|"reveals cells"| node_game
node_dom -->|"toggles flags"| node_game
node_game -->|"reveals neighbors"| node_game
node_dom -->|"reads game state"| node_game

click node_entry "https://github.com/colinlquom/minesweeper/blob/main/src/main.js"
click node_game "https://github.com/colinlquom/minesweeper/blob/main/src/game.js"
click node_board "https://github.com/colinlquom/minesweeper/blob/main/src/board.js"
click node_cell "https://github.com/colinlquom/minesweeper/blob/main/src/cell.js"
click node_config "https://github.com/colinlquom/minesweeper/blob/main/src/constants.js"
click node_dom "https://github.com/colinlquom/minesweeper/blob/main/src/dom.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 toneBlue
class node_board,node_cell,node_config toneAmber
class node_game toneMint
class node_dom toneRose
class node_player toneIndigo
```

## Components

### Game startup

- [App entry](https://github.com/colinlquom/minesweeper/blob/main/src/main.js): `src/main.js`

### Board setup

- [Board generation](https://github.com/colinlquom/minesweeper/blob/main/src/board.js): `src/board.js`
- [Cell state](https://github.com/colinlquom/minesweeper/blob/main/src/cell.js): `src/cell.js`
- [Board settings](https://github.com/colinlquom/minesweeper/blob/main/src/constants.js): `src/constants.js`

### Game logic

- [Game state](https://github.com/colinlquom/minesweeper/blob/main/src/game.js): `src/game.js`

### Browser interface

- [DOM controller](https://github.com/colinlquom/minesweeper/blob/main/src/dom.js): `src/dom.js`

### Other components

- **Player**

## Connections

- App entry → Game state: creates (evidence: `src/main.js`)
- App entry → DOM controller: creates (evidence: `src/main.js`)
- App entry → DOM controller: builds board (evidence: `src/main.js`)
- Game state → Board generation: creates (evidence: `src/game.js`)
- Board generation → Board settings: reads settings (evidence: `src/board.js`)
- Board generation → Cell state: creates cells (evidence: `src/board.js`)
- Player → DOM controller: clicks cells (evidence: `src/dom.js`)
- DOM controller → Game state: reveals cells (evidence: `src/dom.js`)
- DOM controller → Game state: toggles flags (evidence: `src/dom.js`)
- Game state → Game state: reveals neighbors (evidence: `src/game.js`)
- DOM controller → Game state: reads game state (evidence: `src/dom.js`)