// Progress.jsx — "Compare progress": ONE person's learning growth over time // (their past self vs their present self). Works for the signed-in learner // (Today header) and for any individual friend (friend detail → Compare). // Time windows to compare "now" against. `f` is the fraction of this person's // current totals that already existed at the START of that window. const PROGRESS_RANGES = [ { id: '1m', f: 0.86, label: '1 month ago' }, { id: '3m', f: 0.58, label: '3 months ago' }, { id: 'all', f: 0.10, label: 'the start' }, ]; // Deterministic 0..1 jitter from a string, so per-domain deltas vary but never // change between renders. function pHash(str) { let h = 2166136261; for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619); } return ((h >>> 0) % 1000) / 1000; } // Compute the user's own "subject" from the same TOPICS/DOMAINS data the rest of // the app uses. function meSubject(profile, accentId) { const ac = (typeof ACCENTS !== 'undefined' && ACCENTS.find((a) => a.id === accentId)) || null; const domains = DOMAINS.map((d) => { const ts = TOPICS.filter((t) => t.domain === d.id); if (!ts.length) return null; return { id: d.id, name: d.name, accent: d.accent, progress: Math.round(ts.reduce((s, t) => s + t.progress, 0) / ts.length) }; }).filter(Boolean); const overall = Math.round(TOPICS.reduce((s, t) => s + t.progress, 0) / TOPICS.length); const notes = TOPICS.reduce((s, t) => s + (t.notes || 0), 0); return { name: (profile && profile.name) || 'You', you: true, seed: 'me', accent: ac ? ac.light : '#1E8FF0', now: { overall, topics: TOPICS.length, notes, materials: (typeof MATERIALS !== 'undefined') ? MATERIALS.length : 96, cards: 1240, hours: 86 }, domains, }; } window.meSubject = meSubject; // Derive a believable "then" snapshot for `subject` at the chosen window. function buildProgress(range, subject) { const f = range.f; const mF = 0.35 + 0.65 * f; // mastery grows slower than raw totals const now = subject.now; const seed = subject.seed || subject.name || 'x'; const nowOverall = now.overall; const domains = subject.domains.map((d) => { const j = 0.9 + pHash(d.id + range.id + seed) * 0.25; // 0.9..1.15 let then = Math.round(d.progress * mF * j); then = Math.max(0, Math.min(d.progress, then)); // progress only ever grows return { id: d.id, name: d.name, accent: d.accent, now: d.progress, then }; }); const metric = (icon, label, nowV, fac, fmt) => ({ icon, label, now: nowV, then: Math.round(nowV * fac), fmt }); const metrics = [ metric('trending', 'Overall mastery', nowOverall, mF, (v) => v + '%'), metric('layers', 'Topics tracked', now.topics, f), metric('book', 'Notes captured', now.notes, f), metric('sparkles', 'Materials generated', now.materials, f), metric('cards', 'Cards reviewed', now.cards, f), metric('clock', 'Study time logged', now.hours, f, (v) => v + 'h'), ]; const N = 8; const series = Array.from({ length: N }, (_, i) => { const p = i / (N - 1); const base = nowOverall * mF + (nowOverall - nowOverall * mF) * p; const wobble = (pHash('s' + range.id + seed + i) - 0.5) * 3 * (p > 0 && p < 1 ? 1 : 0); return Math.max(0, Math.min(100, Math.round(base + wobble))); }); series[0] = Math.round(nowOverall * mF); series[N - 1] = nowOverall; return { domains, metrics, series, nowOverall, thenOverall: Math.round(nowOverall * mF) }; } // Small SVG area+line sparkline of overall mastery over the window. function ProgressSpark({ series, color }) { const W = 520, H = 92, pad = 6; const xs = (i) => pad + i * (W - pad * 2) / (series.length - 1); const ys = (v) => H - pad - v / 100 * (H - pad * 2); const line = series.map((v, i) => (i ? 'L' : 'M') + xs(i).toFixed(1) + ' ' + ys(v).toFixed(1)).join(' '); const area = line + ' L' + xs(series.length - 1).toFixed(1) + ' ' + (H - pad) + ' L' + xs(0).toFixed(1) + ' ' + (H - pad) + ' Z'; const gid = 'pgSpark' + Math.round(pHash(series.join(',')) * 1e6); return ( ); } function ProgressMetricRow({ icon, label, then, now, fmt, nowColor }) { const f = fmt || ((v) => String(v)); const max = Math.max(now, then, 1); const delta = now - then; return (
{label} {delta > 0 && +{f(delta)}}
Then
{f(then)}
Now
{f(now)}
); } // `subject` = { name, you, accent, seed, now:{overall,topics,notes,materials,cards,hours}, domains:[{id,name,accent,progress}] } function ProgressCompareModal({ subject, onClose }) { const [rangeId, setRangeId] = React.useState('3m'); const range = PROGRESS_RANGES.find((r) => r.id === rangeId) || PROGRESS_RANGES[1]; const data = React.useMemo(() => buildProgress(range, subject), [rangeId, subject]); const overallDelta = data.nowOverall - data.thenOverall; const first = (subject.name || 'You').split(' ')[0]; const nowColor = subject.accent || 'var(--blue)'; const possessive = subject.you ? 'Your' : first + '\u2019s'; // "When you/they started" reads better than the generic 'the start' label. const rangeLabel = (r) => r.id === 'all' ? (subject.you ? 'When you started' : 'When ' + first + ' started') : r.label; return ReactDOM.createPortal(
{ if (e.target === e.currentTarget) onClose(); }}>
{possessive} progress over time
{/* range picker */}
{PROGRESS_RANGES.map((r) => )}
{/* headline: then → now mastery + trend */}
Overall mastery
{data.thenOverall}% {data.nowOverall}%
{overallDelta > 0 && +{overallDelta} points}
{rangeLabel(range)} Today
{/* legend */}
Then Now
{/* metric rows */}
{data.metrics.map((m, i) => )}
{/* per-domain growth */}
Mastery growth by domain
{data.domains.sort((a, b) => (b.now - b.then) - (a.now - a.then)).map((d) => { const delta = d.now - d.then; return (
{d.name} {d.then}% → {d.now}% {delta > 0 && +{delta}}
); })}
, document.body ); } window.ProgressCompareModal = ProgressCompareModal;