Kids Tracking — RPG Chore & Learning Dashboard

A printable, gamified chore and learning dashboard for kids. One active visual theme, eight languages, edited inline in the browser, marker-friendly when printed.

What's Inside

One active A4 portrait dashboard, 794 x 1123 px and printable on a single sheet:

File	Style	Vibe
src/v2-character-sheet.tsx	Character Sheet	D&D-style stat block

Legacy source files for prototype variants remain in src/, but they are not registered in the app while their layouts are unstable.

The sheet data model includes hero name, level, daily quests with XP, per-day checkboxes, blank total boxes, and reward. Bonus quest slots stay blank by design — kids fill them in by hand.

Languages: English, Russian, Dutch, Ukrainian, German, French, Spanish, Italian. The language picker uses flag labels in the toolbar; flags are screen-only and do not print on the sheet.

Quick Start

bun install
bun run build
bunx serve dist

Open the local URL printed by serve. You'll see one A4 sheet centered under a slim toolbar.

1. Pick a saved kid from the toolbar dropdown, or choose "Add new kid..." and enter a name in the modal.
2. Click any field on the sheet (hero name, level, quest names, XP, reward) and type to edit. XP can be left blank. Use the + row to add a quest, the × button to remove one. Click a day cell to turn that chore on/off for that day.
3. Pick a language, week start day, and either 1 or 2 weeks from the toolbar.
4. Toggle Highlight fields in the toolbar if you want editable fields marked on screen.
5. Hit Print (or Cmd/Ctrl-P). Only the artboard prints — the toolbar and edit chrome are hidden.

Persistence

• The URL hash encodes the full live state. Copy the URL, paste it anywhere, the page rebuilds the same sheet.
• Programmatic preview links can seed a sheet with a ?data= parameter. The payload is lz-string URI-compressed JSON with optional compact keys, generated by encodePreviewData / buildPreviewUrl in src/state.tsx. Only include the fields you need; missing fields come from language defaults. Hash state wins after the first edit, so preview links do not clobber later inline changes.
• Each kid's state is auto-saved to localStorage under chorecraft:kid:<name>. Switching kids in the toolbar dropdown restores their last setup; adding a brand-new name starts from defaults.
• The most recently used kid is restored on next page load if the URL has no hash.

Preview URL API

import { buildPreviewUrl } from './src/state';

const url = buildPreviewUrl(
  {
    kid: 'Mira',
    lang: 'nl',
    level: 4,
    reward: 'Museum trip',
    weekCount: 2,
    chores: [
      { name: 'Lees 20 minuten', xp: 15 },
      { name: 'Piano oefenen', xp: null },
    ],
  },
  'https://chorecraft.artems.net/',
);

The app also accepts uncompressed JSON keys in the payload, so external generators do not need the compact-key map unless shorter URLs matter.

File Map

src/index.html             -> single-page app HTML template
src/main.tsx               -> app shell: useChoreState + Toolbar + active variant
src/toolbar.tsx            -> kid / flag language / week / print toolbar
src/state.tsx              -> ChoreState, codec, localStorage, useChoreState hook
src/inline.tsx             -> InlineText / InlineNumber / +Add / ×Remove primitives
src/i18n.tsx               -> EN / RU / NL / UK / DE / FR / ES / IT strings
src/ornaments.tsx          -> shared decorative SVG
src/v1-quest-scroll.tsx    -> disabled prototype variant
src/v2-character-sheet.tsx -> active Character Sheet variant
src/v3-*.tsx through v6-*.tsx -> disabled prototype variants
scripts/build.ts           -> Bun build script (single bundle)
dist/                      -> generated static site, ignored by git

Deployment

Cloudflare Pages deploys via GitHub Actions and Wrangler. Production deploy runs on each merge/push to main. Pull requests get a Cloudflare Pages preview, and the workflow updates the PR description with the preview URL plus prefilled ?data= sample links.

Production hostname:

https://chorecraft.artems.net

Required GitHub secrets:

CLOUDFLARE_API_TOKEN
CLOUDFLARE_ACCOUNT_ID

See DEPLOYMENT.md for setup details.

Design Notes

• Marker-friendly: checkboxes, progress bars, XP cells, and signature lines are outlined and empty.
• Bonus quest names and XP are blank on purpose.
• A4 portrait is fixed at 794 x 1123 px. Inline edits never change layout height.
• No emoji in print. Iconography is SVG.

License

Private project. Feel free to fork for personal/family use.