|
|
# Paint by Habits 🎨
|
|
|
|
|
|
A whimsical habit tracker where consistency paints a picture. You define your
|
|
|
daily habits and pick a pixel-art image; every habit you check off reveals a few
|
|
|
pixels. Over days and weeks the artwork emerges — finish it, celebrate, pick the
|
|
|
next one.
|
|
|
|
|
|
## What it is
|
|
|
|
|
|
- **One self-contained file:** `index.html`. Vanilla JS + CSS, no build step,
|
|
|
no frameworks, zero network requests. Works from `file://` or any static host.
|
|
|
- **Local-only:** all data lives in your browser's `localStorage`. No server,
|
|
|
no accounts, no tracking.
|
|
|
- **Portable:** export your full state as a JSON backup and import it on
|
|
|
another device.
|
|
|
|
|
|
## How it works
|
|
|
|
|
|
Each artwork is a pixel grid. On start, a seeded PRNG (mulberry32 +
|
|
|
Fisher–Yates) fixes a random reveal order that stays stable across sessions.
|
|
|
Checking off a habit reveals `pixelsPerCheck` pixels — sized so a typical image
|
|
|
finishes in about 30 days of consistency. Pixels never un-reveal across days;
|
|
|
missing a day just pauses progress. Includes 8 built-in pixel artworks, or
|
|
|
upload any image to pixelate it into a 16–48 cell grid.
|
|
|
|
|
|
Dark/light theme follows your OS by default, with a manual override. Streaks
|
|
|
count any day you checked at least one habit; days where you did everything get
|
|
|
a ✨ perfect-day sparkle.
|
|
|
|
|
|
## Run it
|
|
|
|
|
|
Open `index.html` in a browser. That's it. To host it, copy the file to any
|
|
|
static host.
|
|
|
|
|
|
## Test it
|
|
|
|
|
|
There is no test harness checked in (single-file app). Validation performed:
|
|
|
`node --check` on the extracted script, a grep proving zero external
|
|
|
references, and scripted jsdom flow tests covering onboarding, check/uncheck
|
|
|
persistence, day rollover, uncheck floor clamping, corrupt-state recovery,
|
|
|
storage-unavailable mode, import validation, and the completion/celebration
|
|
|
flow. See `docs/DESIGN.md` §9 for the edge-case checklist.
|
|
|
|
|
|
## License
|
|
|
|
|
|
Dual-licensed under [Apache-2.0](../LICENSE-APACHE) and [MIT](../LICENSE-MIT),
|
|
|
following Rust ecosystem convention for this repository.
|
|
|
|
|
|
## Disclaimer
|
|
|
|
|
|
This software was written with Claude Code. Design by **Claude Fable 5**
|
|
|
(`claude-fable-5`), implementation by **Claude Sonnet 5** (`claude-sonnet-5`),
|
|
|
review and verification by **Claude Opus 4.8** (`claude-opus-4-8`).
|