# bertman12/wc3-w3ts-frame-components architecture

> Architecture diagram of the GitHub repository bertman12/wc3-w3ts-frame-components, 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/bertman12/wc3-w3ts-frame-components
- Repository: https://github.com/bertman12/wc3-w3ts-frame-components

## Overview

This is a Warcraft III TypeScript library for composing reusable UI frame components. A map developer creates configured or themed components; those components create and arrange Warcraft frames, with Grid and Tooltip supporting richer layouts and presentation. Shared base-frame defaults, themes, frame utilities, event contracts, and debugging tools form the main internal layer. The README documents the component capabilities; some subsystem paths and interactions are represented only at directory level because their source was not sampled.

Main entry points: [`src/components/Tooltip.ts`](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/Tooltip.ts) (Tooltip), [`src/components/timer.ts`](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/timer.ts) (Timer), [`src/components/button.ts`](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/button.ts) (Button), [`src/grid/grid.ts`](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/grid/grid.ts) (Grid)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_components["Frame components"]
  node_button["Button<br/>[button.ts]"]
  node_gluebutton["Glue text button"]
  node_backdrop["Backdrop<br/>[backdrop.ts]"]
  node_empty["Empty frame<br/>[empty-frame.ts]"]
  node_icon["Icon<br/>[icon.ts]"]
  node_textarea["Text area<br/>[text-area.ts]"]
  node_timer["Timer<br/>[timer.ts]"]
  node_tooltip["Tooltip<br/>[Tooltip.ts]"]
  node_resourcecard["Resource card<br/>[resource-card.ts]"]
end

subgraph group_layout["Layout and text"]
  node_grid["Grid<br/>[grid.ts]"]
  node_text["Text<br/>[text.ts]"]
  node_alerttext["Player alert text<br/>[playerAlertText.ts]"]
end

subgraph group_shared["Shared runtime"]
  node_base["Frame base"]
  node_frameutils["Frame utilities<br/>[frame-utils.ts]"]
  node_theme["Theme config<br/>[theme.ts]"]
  node_events["Event contracts<br/>[IEvents.ts]"]
end

subgraph group_tools["Debug and definitions"]
  node_navigator["Frame navigator<br/>[frame-navigator.ts]"]
  node_definitions["Custom frame definitions"]
end

node_developer(("Map developer"))
node_warcraft["Warcraft III UI"]

node_developer -->|"creates"| node_button
node_developer -->|"configures"| node_grid
node_developer -->|"saves theme"| node_theme
node_button -->|"creates frames"| node_warcraft
node_grid -->|"creates layout frames"| node_warcraft
node_base -->|"gets default owner"| node_frameutils
node_grid -->|"uses origin frame"| node_frameutils
node_button -->|"reads theme"| node_theme
node_timer -->|"creates"| node_backdrop
node_timer -->|"creates"| node_button
node_timer -->|"creates"| node_text
node_timer -->|"creates"| node_tooltip
node_tooltip -->|"uses"| node_grid
node_tooltip -->|"creates"| node_empty
node_tooltip -->|"creates"| node_icon
node_tooltip -->|"creates"| node_text
node_navigator -->|"renders with"| node_backdrop
node_navigator -->|"renders with"| node_gluebutton
node_navigator -->|"renders with"| node_text
node_frameutils -->|"loads TOC"| node_definitions

click node_base "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/AbstractFrameBase.ts"
click node_frameutils "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/frame-utils.ts"
click node_theme "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/theme/theme.ts"
click node_events "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/models/IEvents.ts"
click node_button "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/button.ts"
click node_gluebutton "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/glue-text-button.ts"
click node_backdrop "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/backdrop.ts"
click node_empty "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/empty-frame.ts"
click node_icon "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/icon.ts"
click node_textarea "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/text-area.ts"
click node_timer "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/timer.ts"
click node_tooltip "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/Tooltip.ts"
click node_resourcecard "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/resource-card.ts"
click node_grid "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/grid/grid.ts"
click node_text "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/text.ts"
click node_alerttext "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/text/playerAlertText.ts"
click node_navigator "https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/debugging/frame-navigator.ts"
click node_definitions "https://github.com/bertman12/wc3-w3ts-frame-components/tree/main/frame-definitions"

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_button,node_gluebutton,node_backdrop,node_empty,node_icon,node_textarea,node_timer,node_tooltip,node_resourcecard,node_warcraft toneBlue
class node_grid,node_text,node_alerttext toneAmber
class node_base,node_frameutils,node_theme,node_events toneMint
class node_navigator,node_definitions toneRose
class node_developer toneIndigo
```

## Components

### Frame components

- [Button](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/button.ts): `src/components/button.ts`
- [Glue text button](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/glue-text-button.ts): `src/components/glue-text-button.ts`
- [Backdrop](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/backdrop.ts): `src/components/backdrop.ts`
- [Empty frame](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/empty-frame.ts): `src/components/empty-frame.ts`
- [Icon](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/icon.ts): `src/components/icon.ts`
- [Text area](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/text-area.ts): `src/components/text-area.ts`
- [Timer](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/timer.ts): `src/components/timer.ts`
- [Tooltip](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/Tooltip.ts): `src/components/Tooltip.ts`
- [Resource card](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/resource-card.ts): `src/components/resource-card.ts`

### Layout and text

- [Grid](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/grid/grid.ts): `src/grid/grid.ts`
- [Text](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/text.ts): `src/components/text.ts`
- [Player alert text](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/text/playerAlertText.ts): `src/text/playerAlertText.ts`

### Shared runtime

- [Frame base](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/components/AbstractFrameBase.ts): `src/components/AbstractFrameBase.ts`
- [Frame utilities](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/frame-utils.ts): `src/frame-utils.ts`
- [Theme config](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/theme/theme.ts): `src/theme/theme.ts`
- [Event contracts](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/models/IEvents.ts): `src/models/IEvents.ts`

### Debug and definitions

- [Frame navigator](https://github.com/bertman12/wc3-w3ts-frame-components/blob/main/src/debugging/frame-navigator.ts): `src/debugging/frame-navigator.ts`
- [Custom frame definitions](https://github.com/bertman12/wc3-w3ts-frame-components/tree/main/frame-definitions): `frame-definitions`

### Other components

- **Map developer**
- **Warcraft III UI**

## Connections

- Map developer → Button: creates (evidence: `README.md`)
- Map developer → Grid: configures (evidence: `README.md`)
- Map developer → Theme config: saves theme (evidence: `README.md`)
- Button → Warcraft III UI: creates frames (evidence: `src/components/button.ts`)
- Grid → Warcraft III UI: creates layout frames (evidence: `src/grid/grid.ts`)
- Frame base → Frame utilities: gets default owner (evidence: `src/components/AbstractFrameBase.ts`)
- Grid → Frame utilities: uses origin frame (evidence: `src/grid/grid.ts`)
- Button → Theme config: reads theme (evidence: `src/components/button.ts`)
- Timer → Backdrop: creates (evidence: `src/components/timer.ts`)
- Timer → Button: creates (evidence: `src/components/timer.ts`)
- Timer → Text: creates (evidence: `src/components/timer.ts`)
- Timer → Tooltip: creates (evidence: `src/components/timer.ts`)
- Tooltip → Grid: uses (evidence: `src/components/Tooltip.ts`)
- Tooltip → Empty frame: creates (evidence: `src/components/Tooltip.ts`)
- Tooltip → Icon: creates (evidence: `src/components/Tooltip.ts`)
- Tooltip → Text: creates (evidence: `src/components/Tooltip.ts`)
- Frame navigator → Backdrop: renders with (evidence: `src/debugging/frame-navigator.ts`)
- Frame navigator → Glue text button: renders with (evidence: `src/debugging/frame-navigator.ts`)
- Frame navigator → Text: renders with (evidence: `src/debugging/frame-navigator.ts`)
- Frame utilities → Custom frame definitions: loads TOC (evidence: `src/frame-utils.ts`)