# erenster2000/wow_pixi_js architecture

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

- Interactive diagram: https://gitdiagram.com/erenster2000/wow_pixi_js
- Repository: https://github.com/erenster2000/wow_pixi_js

## Overview

1. **Project shape**
   - This is a **browser-based JavaScript app** built with **Webpack** and run from a static HTML shell.
   - The repo is organized around a small set of gameplay/interaction modules rather than a large framework app.

2. **Runtime and entry point**
   - `public/index.html` is the host page.
   - `src/index.js` is the main application entry that boots the app and wires the top-level modules together.
   - `webpack.config.js` and `.babelrc` indicate the source is bundled/transpiled for browser delivery.

3. **Main domain area: game/board logic**
   - `src/game.js` appears to be the central gameplay coordinator.
   - It likely owns the game state, transitions, and orchestration between board rendering, input handling, and any “start/play” flow.

4. **Board/grid subsystem**
   - `src/grid.js` and `src/gridbox.js` form the board model and its cell/unit abstraction.
   - This is the structural core of the app: grid-level layout, individual cells/boxes, and the data representation that other modules read from and update.

5. **Writing/input subsystem**
   - `src/writer.js` and `src/writeboard.js` suggest a second interaction path focused on “writing” or composing on a board.
   - These modules likely handle user input, editing, or drawing/writing actions against the same grid-based surface.

6. **Launch / interaction flow**
   - `src/play_now.js` likely represents the initial call-to-action or a start screen state.
   - The flow is probably: load app → show launch UI → enter game/writer mode → operate on grid state.

7. **Asset handling**
   - `src/assets.js` and `public/assets/core` indicate a dedicated asset layer.
   - That boundary separates static images/audio/other resources from gameplay code, which is useful for diagramming the render/input pipeline versus content loading.

8. **Static/public boundary**
   - `public/` contains assets served directly by the browser, while `src/` contains bundled application logic.
   - `src/manifest.json` suggests the app may be installable or at least packaged like a PWA, but the manifest is still part of the client-side delivery layer.

9. **Data flow to emphasize in a diagram**
   - Browser loads `index.html` → bundled code starts in `index.js` → `game.js` coordinates state → `grid.js`/`gridbox.js` represent the board → `writer.js`/`writeboard.js` apply user actions → `assets.js` and `public/assets/core` supply visual/media resources.
   - The key architectural boundary is between **static delivery** and **runtime board/game state**.

10. **Build and development tooling**
   - `npm start` and `npm run build` imply a standard local-dev and production bundle workflow.
   - Webpack/Babel are the only infrastructure signals visible here, so the architecture is primarily a client-side application with no obvious backend in this repo.

11. **What to draw as the core subsystems**
   - A top-level **App Bootstrap** block.
   - A **Game Orchestrator** block.
   - A **Grid/Cell Model** block.
   - A **Writer/Input** block.
   - An **Assets/Static Resources** block.
   - A **Browser Shell** block containing `index.html`, `manifest.json`, and `public/assets`.

12. **Important caveat**
   - The repository tree strongly suggests a grid-based interactive app, but the exact gameplay semantics are not visible from filenames alone.
   - For an architecture diagram, focus on the module boundaries and flow above rather than assuming a specific game genre or UI framework.

Main entry points: [`src/game.js`](https://github.com/erenster2000/wow_pixi_js/blob/main/src/game.js) (game), [`src/index.js`](https://github.com/erenster2000/wow_pixi_js/blob/main/src/index.js) (entry), [`webpack.config.js`](https://github.com/erenster2000/wow_pixi_js/blob/main/webpack.config.js) (webpack), [`public/index.html`](https://github.com/erenster2000/wow_pixi_js/blob/main/public/index.html) (index.html)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser_shell["Browser Shell"]
  node_public_index_html["index.html<br/>host page<br/>[index.html]"]
  node_src_manifest_json["manifest<br/>[manifest.json]"]
end

subgraph group_app_runtime["App Runtime"]
  node_src_index_js["entry<br/>[index.js]"]
  node_src_game_js["game<br/>orchestrator<br/>[game.js]"]
  node_src_play_now_js["play now<br/>launch flow<br/>[play_now.js]"]
end

subgraph group_board_model["Board Model"]
  node_src_grid_js["grid<br/>board model<br/>[grid.js]"]
  node_src_gridbox_js["grid box<br/>cell model<br/>[gridbox.js]"]
end

subgraph group_writer_input["Writer/Input"]
  node_src_writer_js["writer<br/>input coordinator<br/>[writer.js]"]
  node_src_writeboard_js["write board<br/>editing surface<br/>[writeboard.js]"]
end

subgraph group_assets_layer["Assets"]
  node_public_assets_core[("core assets<br/>static assets")]
  node_src_assets_js["assets<br/>asset access<br/>[assets.js]"]
end

subgraph group_tooling["Tooling"]
  node_package_json["package<br/>scripts/deps<br/>[package.json]"]
  node_webpack_config_js["webpack<br/>bundler config<br/>[webpack.config.js]"]
  node_babelrc["babel<br/>transpile config<br/>[.babelrc]"]
end

node_public_index_html -->|"loads bundle"| node_src_index_js
node_src_index_js -->|"boots"| node_src_game_js
node_src_index_js -->|"wires launch"| node_src_play_now_js
node_src_game_js -->|"uses"| node_src_grid_js
node_src_game_js -->|"coordinates"| node_src_writer_js
node_src_game_js -->|"requests assets"| node_src_assets_js
node_src_grid_js -->|"composes"| node_src_gridbox_js
node_src_writer_js -->|"edits"| node_src_writeboard_js
node_src_writeboard_js -->|"updates board"| node_src_grid_js
node_src_assets_js -->|"loads"| node_public_assets_core
node_src_play_now_js -->|"enters"| node_src_game_js
node_src_manifest_json -->|"packages"| node_public_index_html
node_webpack_config_js -->|"bundles"| node_src_index_js
node_webpack_config_js -->|"serves"| node_public_index_html
node_babelrc -->|"transpiles"| node_src_index_js
node_package_json -->|"drives build"| node_webpack_config_js

click node_public_index_html "https://github.com/erenster2000/wow_pixi_js/blob/main/public/index.html"
click node_src_manifest_json "https://github.com/erenster2000/wow_pixi_js/blob/main/src/manifest.json"
click node_public_assets_core "https://github.com/erenster2000/wow_pixi_js/tree/main/public/assets/core"
click node_src_index_js "https://github.com/erenster2000/wow_pixi_js/blob/main/src/index.js"
click node_src_game_js "https://github.com/erenster2000/wow_pixi_js/blob/main/src/game.js"
click node_src_play_now_js "https://github.com/erenster2000/wow_pixi_js/blob/main/src/play_now.js"
click node_src_grid_js "https://github.com/erenster2000/wow_pixi_js/blob/main/src/grid.js"
click node_src_gridbox_js "https://github.com/erenster2000/wow_pixi_js/blob/main/src/gridbox.js"
click node_src_writer_js "https://github.com/erenster2000/wow_pixi_js/blob/main/src/writer.js"
click node_src_writeboard_js "https://github.com/erenster2000/wow_pixi_js/blob/main/src/writeboard.js"
click node_src_assets_js "https://github.com/erenster2000/wow_pixi_js/blob/main/src/assets.js"
click node_package_json "https://github.com/erenster2000/wow_pixi_js/blob/main/package.json"
click node_webpack_config_js "https://github.com/erenster2000/wow_pixi_js/blob/main/webpack.config.js"
click node_babelrc "https://github.com/erenster2000/wow_pixi_js/blob/main/.babelrc"

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_public_index_html,node_src_manifest_json toneBlue
class node_src_index_js,node_src_game_js,node_src_play_now_js toneAmber
class node_src_grid_js,node_src_gridbox_js toneMint
class node_src_writer_js,node_src_writeboard_js toneRose
class node_public_assets_core,node_src_assets_js toneIndigo
class node_package_json,node_webpack_config_js,node_babelrc toneTeal
```

## Components

### Browser Shell

Static delivery layer loaded by the browser

- [index.html](https://github.com/erenster2000/wow_pixi_js/blob/main/public/index.html): host page · Static browser shell that loads the app bundle · `public/index.html`
- [manifest](https://github.com/erenster2000/wow_pixi_js/blob/main/src/manifest.json): client manifest · Client packaging metadata for the browser app · `src/manifest.json`

### App Runtime

Bundled client-side entry and orchestration

- [entry](https://github.com/erenster2000/wow_pixi_js/blob/main/src/index.js): bootstrap entry · Main application entry that boots the client · `src/index.js`
- [game](https://github.com/erenster2000/wow_pixi_js/blob/main/src/game.js): orchestrator · Coordinates gameplay state and top-level flow · `src/game.js`
- [play now](https://github.com/erenster2000/wow_pixi_js/blob/main/src/play_now.js): launch flow · Start or call-to-action flow into the main interaction mode · `src/play_now.js`

### Board Model

Grid and cell representation used by gameplay and writing

- [grid](https://github.com/erenster2000/wow_pixi_js/blob/main/src/grid.js): board model · Grid structure and board-level state · `src/grid.js`
- [grid box](https://github.com/erenster2000/wow_pixi_js/blob/main/src/gridbox.js): cell model · Single cell or unit abstraction for the grid · `src/gridbox.js`

### Writer/Input

Editing and interaction path on top of the board

- [writer](https://github.com/erenster2000/wow_pixi_js/blob/main/src/writer.js): input coordinator · Handles writing or composing interactions on the board · `src/writer.js`
- [write board](https://github.com/erenster2000/wow_pixi_js/blob/main/src/writeboard.js): editing surface · Board-facing writing surface or editor-specific state · `src/writeboard.js`

### Assets

Static resources and asset access boundary

- [core assets](https://github.com/erenster2000/wow_pixi_js/tree/main/public/assets/core): static assets · Served asset directory used by the browser runtime · `public/assets/core`
- [assets](https://github.com/erenster2000/wow_pixi_js/blob/main/src/assets.js): asset access · Application-side asset lookup and resource wiring · `src/assets.js`

### Tooling

Build and transpile setup

- [package](https://github.com/erenster2000/wow_pixi_js/blob/main/package.json): scripts/deps · Project scripts and dependency manifest · `package.json`
- [webpack](https://github.com/erenster2000/wow_pixi_js/blob/main/webpack.config.js): bundler config · Webpack build configuration for browser bundling · `webpack.config.js`
- [babel](https://github.com/erenster2000/wow_pixi_js/blob/main/.babelrc): transpile config · Babel configuration for source transpilation · `.babelrc`

## Connections

- index.html → entry: loads bundle · Browser shell loads the bundled entry point
- entry → game: boots · Entry initializes the gameplay coordinator
- entry → play now: wires launch · Entry connects the launch/start flow
- game → grid: uses · Game logic reads and updates the board model
- game → writer: coordinates · Gameplay hands interaction control to the writer path
- game → assets: requests assets · Game orchestration depends on application asset access
- grid → grid box: composes · Grid is built from individual grid boxes or cells
- writer → write board: edits · Writer operates on the writing surface or editor state
- write board → grid: updates board · Writing interactions affect the shared grid structure
- assets → core assets: loads · App asset layer resolves static resources from the public asset tree
- play now → game: enters · Launch flow transitions into gameplay coordination
- manifest → index.html: packages · Manifest is part of the browser-delivered shell
- webpack → entry: bundles · Webpack builds the browser entry from source
- webpack → index.html: serves · Build output is hosted through the public shell
- babel → entry: transpiles · Babel config supports source transpilation for the app bundle
- package → webpack: drives build · Project scripts invoke the bundler configuration