# chorusmaster/webmine architecture

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

## Overview

Webmine is a browser-based, Minecraft-like voxel game. The user’s main workflow is to move and look around with keyboard and mouse, inspect targeted blocks, then break or place blocks; the game updates chunk terrain and renders the result. Startup is owned by the Vue canvas component and the game loop by Game. The graph preserves the documented movement, block interaction, chunk world, terrain generation and mesh/texture optimizations. Some Player event and block-editing code is omitted from the excerpt, so uncertain call links are not shown.

Main entry points: [`src/game_engine/Player.js`](https://github.com/chorusmaster/webmine/blob/main/src/game_engine/Player.js) (Player Controls), [`src/game_engine/ChunkManager.js`](https://github.com/chorusmaster/webmine/blob/main/src/game_engine/ChunkManager.js) (Chunk Manager), [`src/game_engine/Game.js`](https://github.com/chorusmaster/webmine/blob/main/src/game_engine/Game.js) (Game Loop), [`src/game_engine/Chunk.js`](https://github.com/chorusmaster/webmine/blob/main/src/game_engine/Chunk.js) (Chunk Data and Mesh)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Vue Application"]
  node_appvue["Canvas App<br/>[App.vue]"]
  node_bootstrap["Vue Bootstrap<br/>[main.js]"]
end

subgraph group_runtime["Game Runtime"]
  node_game["Game Loop<br/>[Game.js]"]
  node_player["Player Controls<br/>[Player.js]"]
  node_three["Three.js Renderer"]
end

subgraph group_world["Voxel World"]
  node_chunkmanager["Chunk Manager<br/>[ChunkManager.js]"]
  node_chunk["Chunk Data and Mesh<br/>[Chunk.js]"]
  node_texture["Texture Atlas"]
end

node_user(("Player"))

node_bootstrap -->|"mounts"| node_appvue
node_appvue -->|"starts"| node_game
node_game -->|"updates"| node_player
node_game -->|"generates world"| node_chunkmanager
node_player -->|"reads controls"| node_user
node_user -->|"moves and targets"| node_player
node_player -->|"queries blocks"| node_chunkmanager
node_player -->|"loads nearby chunks"| node_chunkmanager
node_chunkmanager -->|"creates and updates"| node_chunk
node_chunk -->|"reads neighbor blocks"| node_chunkmanager
node_chunk -->|"loads atlas"| node_texture
node_game -->|"renders scene"| node_three
node_chunk -->|"builds chunk mesh"| node_three

click node_appvue "https://github.com/chorusmaster/webmine/blob/main/src/App.vue"
click node_bootstrap "https://github.com/chorusmaster/webmine/blob/main/src/main.js"
click node_game "https://github.com/chorusmaster/webmine/blob/main/src/game_engine/Game.js"
click node_player "https://github.com/chorusmaster/webmine/blob/main/src/game_engine/Player.js"
click node_chunkmanager "https://github.com/chorusmaster/webmine/blob/main/src/game_engine/ChunkManager.js"
click node_chunk "https://github.com/chorusmaster/webmine/blob/main/src/game_engine/Chunk.js"
click node_texture "https://github.com/chorusmaster/webmine/tree/main/public/textures"

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_appvue,node_bootstrap toneBlue
class node_game,node_player,node_three toneAmber
class node_chunkmanager,node_chunk,node_texture toneMint
class node_user toneIndigo
```

## Components

### Vue Application

- [Canvas App](https://github.com/chorusmaster/webmine/blob/main/src/App.vue): `src/App.vue`
- [Vue Bootstrap](https://github.com/chorusmaster/webmine/blob/main/src/main.js): `src/main.js`

### Game Runtime

- [Game Loop](https://github.com/chorusmaster/webmine/blob/main/src/game_engine/Game.js): `src/game_engine/Game.js`
- [Player Controls](https://github.com/chorusmaster/webmine/blob/main/src/game_engine/Player.js): `src/game_engine/Player.js`
- **Three.js Renderer**

### Voxel World

- [Chunk Manager](https://github.com/chorusmaster/webmine/blob/main/src/game_engine/ChunkManager.js): `src/game_engine/ChunkManager.js`
- [Chunk Data and Mesh](https://github.com/chorusmaster/webmine/blob/main/src/game_engine/Chunk.js): `src/game_engine/Chunk.js`
- [Texture Atlas](https://github.com/chorusmaster/webmine/tree/main/public/textures): `public/textures`

### Other components

- **Player**

## Connections

- Vue Bootstrap → Canvas App: mounts
- Canvas App → Game Loop: starts
- Game Loop → Player Controls: updates
- Game Loop → Chunk Manager: generates world
- Player Controls → Player: reads controls
- Player → Player Controls: moves and targets
- Player Controls → Chunk Manager: queries blocks
- Player Controls → Chunk Manager: loads nearby chunks
- Chunk Manager → Chunk Data and Mesh: creates and updates
- Chunk Data and Mesh → Chunk Manager: reads neighbor blocks
- Chunk Data and Mesh → Texture Atlas: loads atlas
- Game Loop → Three.js Renderer: renders scene
- Chunk Data and Mesh → Three.js Renderer: builds chunk mesh