Danilo Reyes
2f096d0265
- Introduced export schema for JSON data structure. - Created renderer contract detailing canvas/SVG rendering requirements. - Defined IndexedDB storage schema and migration strategies. - Documented data model including entities and relationships. - Developed implementation plan outlining execution flow and project structure. - Provided quickstart guide for development environment setup. - Compiled research documentation on performance, accessibility, and theming. - Established feature specification with user scenarios and functional requirements.
32 lines
1.1 KiB
Markdown
32 lines
1.1 KiB
Markdown
# Renderer Contract — Canvas/SVG
|
|
|
|
## Purpose
|
|
Render a grid of DayTiles with mood hue, glow intensity from net habit score, negative overlay static, and glyph counts.
|
|
|
|
## Inputs
|
|
- containerSize: { width: px, height: px, devicePixelRatio }
|
|
- days: DayTile[] (ordered by date)
|
|
- theme: palette + CSS variables
|
|
- options:
|
|
- showLegend: boolean
|
|
- pngScale: number (for export)
|
|
|
|
## Outputs
|
|
- On-screen render at 60 fps target
|
|
- Exported PNG at screen resolution (pngScale defaults to 1.0)
|
|
|
|
## Rules
|
|
- Base hue from mood.hue; luminance curve f(netScore) with easing and clamping
|
|
- Negative entries: apply subtle static texture overlay (non-hue-altering)
|
|
- Glyphs: ticks = count(positive), dots = count(negative)
|
|
- No hue change from overlays; only luminance/texture affected
|
|
|
|
## Performance
|
|
- Batch draw tiles; minimize layout/paint; avoid per-frame allocations
|
|
- Prefer Canvas for tiles; SVG for glyph overlays and interactive focus rings
|
|
- Ensure keyboard focus indicators meet WCAG AA contrast
|
|
|
|
## Accessibility
|
|
- Keyboard navigable tiles (tab/arrow); ARIA labels describing day, mood, counts
|
|
- High-contrast theme variant; color-blind palettes via CSS variables
|