Replace the global day-level streak + triangular(checks) multiplier
with per-habit streaks: each habit tracks its own consecutive-day
streak and reveals pixels equal to that streak length when checked.
Removes the global streak header/stat chip in favor of an inline
streak badge on each habit row.
title: 'Per-habit streaks: each habit scores its own streak value'
status: completed
type: feature
priority: normal
created_at: 2026-07-16T16:31:23Z
updated_at: 2026-07-16T16:37:00Z
---
Replace the single day-level streak + triangular(checks) reveal formula with per-habit streaks: each habit tracks its own consecutive-day streak, and checking it reveals pixels equal to that habit's current streak length (1st day = 1 pixel, 2nd consecutive day = 2, etc.), with no cross-habit multiplier. Remove the global streak header/stat chip entirely (per user decision) and show each habit's own streak inline on its row instead. Update DESIGN.md, README.md, ARCHITECTURE.md, and index.html (mechanics + About text + UI).
## Summary of Changes
- index.html: replaced the day-level triangular(checks) × streak-multiplier reveal with per-habit streaks. Added `habitStreakEndingOn(log, habitId, day)` and `currentHabitStreak(log, habitId, today)` (display, forgives an unchecked-yet today); `revealedUnits()` now sums each checked habit's own streak length per day. Removed `triangular()`, `streakOnDay()`, and the global `computeStreak()`.
- Removed the global "🔥 N-day streak" header label and stat chip entirely (per user decision); each habit row now shows its own inline streak badge (e.g. 🔥3) when > 0.
- Updated the in-app About text and CSS (`.habit-streak`, removed `.streak-label`).
- Updated docs/DESIGN.md (§2 mockup, §3.2, §3.4, §9), docs/ARCHITECTURE.md, and README.md to describe per-habit streak scoring instead of day-level/triangular + multiplier.
- Validated with a Playwright smoke test (seeded localStorage, checkbox clicks) confirming reveal math, streak badges, and toast deltas; no console errors or non-file:// requests. Also captured a headless screenshot to confirm the UI layout.
@ -5,7 +5,7 @@ Everything lives in one file, `index.html`, organized into sections:
| Component | Responsibility |
|---|---|
| **State** | Single JSON document under localStorage key `bitbybit.v1`; load/save with corruption guards; versioned for future migration. |
| **Mechanics** | Habit check/uncheck logging, daily rollover, streak math, seeded (mulberry32) reveal-order permutation, and log-derived reveal: each day reveals `triangular(checks)` pixels (the Nth check reveals N), multiplied by that day's streak length. |
| **Mechanics** | Habit check/uncheck logging, daily rollover, per-habit streak math, seeded (mulberry32) reveal-order permutation, and log-derived reveal: each habit reveals pixels equal to its own current streak length (1 the first day, 2 the next consecutive day, and so on), independent of any other habit. |
| **Rendering** | Canvas renderer for the artwork (revealed pixels, checkerboard for hidden, pop-in animation for deltas); DOM renderer for checklist, stats, settings. |
| **UI wiring** | Onboarding, settings dialog (habits / artwork / data / about), theme cycling (auto→light→dark via `data-theme` + CSS custom properties), export/import/wipe, confetti celebration, and a page footer disclosing authorship. |
Elijah Voigt
4 days ago