How namlhn/winenglishtreeqr works
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: App.tsx App coordinator · TreeScene.ts 3D tree scene · BottomControls.tsx URL and controls · generator.ts QR generation
Components 19
User experience
- App coordinator
src/App.tsx - URL and controls
src/components/BottomControls.tsx - Season picker
src/components/SeasonPicker.tsx - Header actions
src/components/TopHeader.tsx - Share actions
src/components/SharePopover.tsx - Export modal
src/components/ExportModal.tsx - Credits dialog
src/components/CreditModal.tsx
QR processing
- QR generation
src/core/qr/generator.ts - QR analysis
src/core/qr/analyzer.ts
Tree and rendering
- 3D tree scene
src/core/renderer/TreeScene.ts - Branch generation
src/core/tree/branchGenerator.ts - Canopy alignment
src/core/tree/canopyAligner.ts - Vegetation data
src/core/tree/vegetation.ts - Seeded randomness
src/core/tree/rng.ts
Theme and state
- Season themes
src/themes/seasons.ts - Share state codec
src/utils/urlCodec.ts - Sound effects
src/utils/soundEffects.ts
Other components
- Visitor
- Browser
Connections 31
- 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