# namlhn/winenglishtreeqr architecture

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

## Overview

WinEnglish Tree QR is a browser app that turns a user-entered URL into a QR-informed, interactive seasonal 3D tree. Users can switch seasons and scan mode, then export a top-down QR image or share the encoded URL and season. The main flow is coordinated by App; TreeScene constructs and animates the visual result using tree-generation and canopy-alignment logic. README capabilities are included, but some UI and renderer details are represented only where their paths and responsibilities are supported by the tree or sampled source.

Main entry points: [`src/App.tsx`](https://github.com/namlhn/winenglishtreeqr/blob/main/src/App.tsx) (App coordinator), [`src/core/renderer/TreeScene.ts`](https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/renderer/TreeScene.ts) (3D tree scene), [`src/components/BottomControls.tsx`](https://github.com/namlhn/winenglishtreeqr/blob/main/src/components/BottomControls.tsx) (URL and controls), [`src/core/qr/generator.ts`](https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/qr/generator.ts) (QR generation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["User experience"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_controls["URL and controls<br/>[BottomControls.tsx]"]
  node_seasonpicker["Season picker<br/>[SeasonPicker.tsx]"]
  node_header["Header actions<br/>[TopHeader.tsx]"]
  node_share["Share actions<br/>[SharePopover.tsx]"]
  node_export["Export modal<br/>[ExportModal.tsx]"]
  node_credits["Credits dialog<br/>[CreditModal.tsx]"]
end

subgraph group_qr["QR processing"]
  node_qrgen["QR generation<br/>[generator.ts]"]
  node_qranalyzer["QR analysis<br/>[analyzer.ts]"]
end

subgraph group_visual["Tree and rendering"]
  node_scene["3D tree scene<br/>[TreeScene.ts]"]
  node_branches["Branch generation<br/>[branchGenerator.ts]"]
  node_canopy["Canopy alignment<br/>[canopyAligner.ts]"]
  node_vegetation["Vegetation data<br/>[vegetation.ts]"]
  node_rng["Seeded randomness<br/>[rng.ts]"]
end

subgraph group_state["Theme and state"]
  node_themes["Season themes<br/>[seasons.ts]"]
  node_codec["Share state codec<br/>[urlCodec.ts]"]
  node_sound["Sound effects<br/>[soundEffects.ts]"]
end

node_visitor(("Visitor"))
node_browser(("Browser"))

node_visitor -->|"enters URL"| node_controls
node_visitor -->|"chooses season"| node_seasonpicker
node_visitor -->|"opens actions"| node_header
node_controls -->|"updates state"| node_app
node_seasonpicker -->|"selects season"| node_app
node_header -->|"toggles mode"| node_app
node_app -->|"generates QR"| node_qrgen
node_qrgen -->|"analyzes matrix"| node_qranalyzer
node_app -->|"selects theme"| node_themes
node_app -->|"creates scene"| node_scene
node_app -->|"regenerates QR"| node_qrgen
node_app -->|"rebuilds tree"| node_scene
node_scene -->|"generates skeleton"| node_branches
node_scene -->|"aligns canopy"| node_canopy
node_branches -->|"creates seeded RNG"| node_rng
node_scene -->|"hashes URL"| node_rng
node_scene -->|"uses theme"| node_themes
node_scene -->|"renders interaction"| node_visitor
node_app -->|"sets scan mode"| node_scene
node_app -->|"captures QR image"| node_scene
node_controls -->|"opens sharing"| node_share
node_share -->|"requests download"| node_app
node_app -.->|"provides export"| node_export
node_export -->|"encodes share state"| node_codec
node_app -->|"encodes share URL"| node_codec
node_app -->|"decodes initial state"| node_codec
node_browser -->|"provides URL hash"| node_app
node_app -->|"downloads snapshot"| node_browser
node_controls -->|"plays effects"| node_sound
node_app -->|"toggles mute"| node_sound
node_credits -->|"shows attribution"| node_visitor

click node_app "https://github.com/namlhn/winenglishtreeqr/blob/main/src/App.tsx"
click node_controls "https://github.com/namlhn/winenglishtreeqr/blob/main/src/components/BottomControls.tsx"
click node_seasonpicker "https://github.com/namlhn/winenglishtreeqr/blob/main/src/components/SeasonPicker.tsx"
click node_header "https://github.com/namlhn/winenglishtreeqr/blob/main/src/components/TopHeader.tsx"
click node_share "https://github.com/namlhn/winenglishtreeqr/blob/main/src/components/SharePopover.tsx"
click node_export "https://github.com/namlhn/winenglishtreeqr/blob/main/src/components/ExportModal.tsx"
click node_credits "https://github.com/namlhn/winenglishtreeqr/blob/main/src/components/CreditModal.tsx"
click node_qrgen "https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/qr/generator.ts"
click node_qranalyzer "https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/qr/analyzer.ts"
click node_scene "https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/renderer/TreeScene.ts"
click node_branches "https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/tree/branchGenerator.ts"
click node_canopy "https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/tree/canopyAligner.ts"
click node_vegetation "https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/tree/vegetation.ts"
click node_rng "https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/tree/rng.ts"
click node_themes "https://github.com/namlhn/winenglishtreeqr/blob/main/src/themes/seasons.ts"
click node_codec "https://github.com/namlhn/winenglishtreeqr/blob/main/src/utils/urlCodec.ts"
click node_sound "https://github.com/namlhn/winenglishtreeqr/blob/main/src/utils/soundEffects.ts"

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_app,node_controls,node_seasonpicker,node_header,node_share,node_export,node_credits,node_browser toneBlue
class node_qrgen,node_qranalyzer toneAmber
class node_scene,node_branches,node_canopy,node_vegetation,node_rng toneMint
class node_themes,node_codec,node_sound toneRose
class node_visitor toneIndigo
```

## Components

### User experience

- [App coordinator](https://github.com/namlhn/winenglishtreeqr/blob/main/src/App.tsx): `src/App.tsx`
- [URL and controls](https://github.com/namlhn/winenglishtreeqr/blob/main/src/components/BottomControls.tsx): `src/components/BottomControls.tsx`
- [Season picker](https://github.com/namlhn/winenglishtreeqr/blob/main/src/components/SeasonPicker.tsx): `src/components/SeasonPicker.tsx`
- [Header actions](https://github.com/namlhn/winenglishtreeqr/blob/main/src/components/TopHeader.tsx): `src/components/TopHeader.tsx`
- [Share actions](https://github.com/namlhn/winenglishtreeqr/blob/main/src/components/SharePopover.tsx): `src/components/SharePopover.tsx`
- [Export modal](https://github.com/namlhn/winenglishtreeqr/blob/main/src/components/ExportModal.tsx): `src/components/ExportModal.tsx`
- [Credits dialog](https://github.com/namlhn/winenglishtreeqr/blob/main/src/components/CreditModal.tsx): `src/components/CreditModal.tsx`

### QR processing

- [QR generation](https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/qr/generator.ts): `src/core/qr/generator.ts`
- [QR analysis](https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/qr/analyzer.ts): `src/core/qr/analyzer.ts`

### Tree and rendering

- [3D tree scene](https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/renderer/TreeScene.ts): `src/core/renderer/TreeScene.ts`
- [Branch generation](https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/tree/branchGenerator.ts): `src/core/tree/branchGenerator.ts`
- [Canopy alignment](https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/tree/canopyAligner.ts): `src/core/tree/canopyAligner.ts`
- [Vegetation data](https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/tree/vegetation.ts): `src/core/tree/vegetation.ts`
- [Seeded randomness](https://github.com/namlhn/winenglishtreeqr/blob/main/src/core/tree/rng.ts): `src/core/tree/rng.ts`

### Theme and state

- [Season themes](https://github.com/namlhn/winenglishtreeqr/blob/main/src/themes/seasons.ts): `src/themes/seasons.ts`
- [Share state codec](https://github.com/namlhn/winenglishtreeqr/blob/main/src/utils/urlCodec.ts): `src/utils/urlCodec.ts`
- [Sound effects](https://github.com/namlhn/winenglishtreeqr/blob/main/src/utils/soundEffects.ts): `src/utils/soundEffects.ts`

### Other components

- **Visitor**
- **Browser**

## Connections

- Visitor → URL and controls: enters URL
- Visitor → Season picker: chooses season
- Visitor → Header actions: opens actions
- URL and controls → App coordinator: updates state
- Season picker → App coordinator: selects season
- Header actions → App coordinator: toggles mode
- App coordinator → QR generation: generates QR
- QR generation → QR analysis: analyzes matrix
- App coordinator → Season themes: selects theme
- App coordinator → 3D tree scene: creates scene
- App coordinator → QR generation: regenerates QR
- App coordinator → 3D tree scene: rebuilds tree
- 3D tree scene → Branch generation: generates skeleton
- 3D tree scene → Canopy alignment: aligns canopy
- Branch generation → Seeded randomness: creates seeded RNG
- 3D tree scene → Seeded randomness: hashes URL
- 3D tree scene → Season themes: uses theme
- 3D tree scene → Visitor: renders interaction
- App coordinator → 3D tree scene: sets scan mode
- App coordinator → 3D tree scene: captures QR image
- URL and controls → Share actions: opens sharing
- Share actions → App coordinator: requests download
- App coordinator → Export modal: provides export
- Export modal → Share state codec: encodes share state
- App coordinator → Share state codec: encodes share URL
- App coordinator → Share state codec: decodes initial state
- Browser → App coordinator: provides URL hash
- App coordinator → Browser: downloads snapshot
- URL and controls → Sound effects: plays effects
- App coordinator → Sound effects: toggles mute
- Credits dialog → Visitor: shows attribution