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.
1.1 KiB
1.1 KiB
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