// atelier-screens-h.jsx — DashboardScreen (Block C).
//
// Reads /api/dashboard when signed in; falls back to localStorage
// aggregates when not. Per the design-review revisions:
// - Mobile (≤880px): phase bars → drill bars → SORTED LIST of
// piece × motif rows. No grid.
// - Desktop (>880px): piece × motif as a 6×5 heatmap.
// - No "73% accuracy" — only "18 of 24 correct" framing.
const { useState: useSH, useEffect: useEH, useMemo: useMH } = React;
const PIECES_ORDER = ['knight', 'bishop', 'rook', 'queen', 'pawn', 'king'];
const MOTIFS_ORDER = ['pin', 'fork', 'discovered-attack', 'skewer', 'knight-endgame'];
const PIECE_LABEL = { knight: 'Knight', bishop: 'Bishop', rook: 'Rook', queen: 'Queen', pawn: 'Pawn', king: 'King' };
const MOTIF_LABEL = { pin: 'Pin', fork: 'Fork', 'discovered-attack': 'Discovered', skewer: 'Skewer', 'knight-endgame': 'Knight EG' };
const PHASE_LABEL = { look: 'Look', heatmap: 'Heatmap', hero: 'Hero', tension: 'Tension', solve: 'Solve' };
function accuracyTone(palette, attempts, correct) {
const C = palette;
if (!attempts) return { bg: 'transparent', fg: C.umberFaint };
const ratio = correct / attempts;
if (ratio >= 0.85) return { bg: window.withAlpha(C.celadon || '#8FA391', 0.22), fg: C.umber };
if (ratio >= 0.6) return { bg: window.withAlpha(C.celadon || '#8FA391', 0.10), fg: C.umber };
if (ratio >= 0.4) return { bg: window.withAlpha(C.sienna || '#C97B5F', 0.10), fg: C.umberSoft };
return { bg: window.withAlpha(C.sienna || '#C97B5F', 0.20), fg: C.umberSoft };
}
function DashboardScreen({ palette, setRoute }) {
const C = palette;
const isMobile = window.useBreakpoint().isMobile;
const [data, setData] = useSH(null);
const [loading, setLoading] = useSH(true);
const [user, setUser] = useSH(window.CURRENT_USER || null);
useEH(() => {
const onUser = (e) => setUser((e && e.detail) || null);
window.addEventListener('userChanged', onUser);
return () => window.removeEventListener('userChanged', onUser);
}, []);
useEH(() => {
let cancelled = false;
async function load() {
setLoading(true);
if (user) {
try {
const res = await fetch('/api/dashboard', { credentials: 'include' });
if (res.ok) {
const json = await res.json();
if (!cancelled) { setData(json); setLoading(false); return; }
}
} catch (_) {}
}
// Local fallback: synthesise from localStorage progress.
const progress = (window.getProgress && window.getProgress()) || {};
const lessonsCompleted = Object.values(progress).filter((p) => p && p.complete).length;
if (!cancelled) {
setData({
totals: { attempts: 0, lessonsCompleted },
pieceMotif: [],
phase: [],
drills: [],
});
setLoading(false);
}
}
load();
return () => { cancelled = true; };
}, [user]);
if (loading) {
return Loading…
;
}
const totals = data && data.totals ? data.totals : { attempts: 0, lessonsCompleted: 0 };
const phaseRows = data && data.phase ? data.phase : [];
const drillRows = data && data.drills ? data.drills : [];
const pieceMotifRows = data && data.pieceMotif ? data.pieceMotif : [];
// Build a {piece}|{motif} → row map for fast cell lookup.
const pmMap = useMH(() => {
const m = {};
for (const r of pieceMotifRows) m[r.piece + '|' + r.motif] = r;
return m;
}, [pieceMotifRows]);
const sortedPM = useMH(() => {
return [...pieceMotifRows].sort((a, b) => b.attempts - a.attempts);
}, [pieceMotifRows]);
return (
Where you've spent time
Dashboard.
{totals.attempts} attempts · {totals.lessonsCompleted} lessons completed.
{!user && (
Sign in to see history from other devices.
)}
{/* Phase bars */}
{phaseRows.length === 0 &&
No phase data yet.}
{phaseRows.map((r) =>
)}
{/* Drill bars */}
{drillRows.length > 0 && (
)}
{/* Piece × Motif: list on mobile, grid on desktop */}
{sortedPM.length === 0 ? (
Haven't tried any positions yet.
) : isMobile ? (
) : (
)}
);
}
function EmptyNote({ C, children, style }) {
return (
{children}
);
}
function PhaseBar({ palette, row }) {
const C = palette;
const tone = accuracyTone(C, row.attempts, row.correct);
const widthPct = Math.round((row.correct / Math.max(row.attempts, 1)) * 100);
return (
{PHASE_LABEL[row.phase] || row.phase}
{row.correct} of {row.attempts} correct
);
}
function DrillBar({ palette, row }) {
const C = palette;
return (
{row.drill}
{row.correct} of {row.attempts} correct
);
}
function PieceMotifRow({ palette, row }) {
const C = palette;
const tone = accuracyTone(C, row.attempts, row.correct);
return (
{PIECE_LABEL[row.piece] || row.piece}
·
{MOTIF_LABEL[row.motif] || row.motif}
{row.correct} of {row.attempts}
);
}
function PieceMotifGrid({ palette, pmMap }) {
const C = palette;
return (
{MOTIFS_ORDER.map((m) => (
{MOTIF_LABEL[m] || m}
))}
{PIECES_ORDER.map((p) => (
{PIECE_LABEL[p]}
{MOTIFS_ORDER.map((m) => {
const row = pmMap[p + '|' + m];
const tone = accuracyTone(C, row ? row.attempts : 0, row ? row.correct : 0);
return (
{row ? (
<>
{row.correct}/{row.attempts}
) : (
—
)}
);
})}
))}
);
}
Object.assign(window, { DashboardScreen });