// ui-bits.jsx — Shared UI primitives for the parents guide.
const { useState, useEffect, useRef } = React;
// ── tiny utils ──────────────────────────────────────────────────────────────
function cls(...xs) { return xs.filter(Boolean).join(" "); }
function readLS(key, fallback) {
try { const v = localStorage.getItem(key); return v == null ? fallback : JSON.parse(v); }
catch { return fallback; }
}
function writeLS(key, value) {
try { localStorage.setItem(key, JSON.stringify(value)); } catch {}
}
// ── HandUnderline: a wobbly hand-drawn underline ────────────────────────────
function HandUnderline({ color = "currentColor", width = 200, height = 12, style }) {
return (
);
}
// ── Circle stamp number — "Station 03" style ────────────────────────────────
function StationStamp({ number, color, size = 96 }) {
const id = `stamp-${number}-${size}`;
const radius = size * 0.42;
const cx = size / 2, cy = size / 2;
return (
);
}
// ── ProgressDots: 5 stations done/not ───────────────────────────────────────
function ProgressDots({ stations, completed, onJump }) {
return (
{stations.map((s) => {
const done = completed.has(s.id);
return (
);
})}
);
}
// ── QuestionCard: shuffleable "pull a question" deck ────────────────────────
function QuestionCard({ questions, accentColor }) {
// Normalize: accept legacy string[] OR new {q, hint}[].
const cards = questions.map((x) => typeof x === "string" ? { q: x } : x);
const [order, setOrder] = useState(() =>
[...Array(cards.length).keys()].sort(() => Math.random() - 0.5));
const [i, setI] = useState(0);
const [revealed, setRevealed] = useState(false);
const [showHint, setShowHint] = useState(false);
const total = cards.length;
const current = revealed ? cards[order[i]] : null;
function next() {
if (!revealed) { setRevealed(true); return; }
setRevealed(false);
setShowHint(false);
setTimeout(() => {
const nextI = (i + 1) % total;
setI(nextI);
if (nextI === 0) setOrder([...order].sort(() => Math.random() - 0.5));
setRevealed(true);
}, 160);
}
return (
{/* Tape strips */}
Ask your kid
{revealed ? `${i + 1} / ${total}` : `${total} cards`}
{revealed ? (
"{current.q}"
) : (
Tap to draw a card
👉
)}
{/* Grown-up hint — collapsible. Kid sees only the question; parent taps for context. */}
{revealed && current.hint && (
{showHint && (
)}
)}
{revealed && (
)}