// atelier-screens-e.jsx — Overloaded Defender study room. // // Reads window.LESSON.overload (computed by tools/overload-analysis.js). // Where Targets asks "which piece falls first?", this room asks "which piece // has too many jobs to keep them all?" Same three-column layout. // // Per INV-001 plain copy. Per INV-005 the room visualizes existing defender // geometry — no invented tactical claims. const { useState: useOD, useEffect: useODE, useMemo: useODM } = React; const OD_GLYPH = { wP: '♙', wN: '♘', wB: '♗', wR: '♖', wQ: '♕', wK: '♔', bP: '♟', bN: '♞', bB: '♝', bR: '♜', bQ: '♛', bK: '♚', }; function odSqToXY(sq, sqPx) { const f = sq.charCodeAt(0) - 'a'.charCodeAt(0); const r = 8 - parseInt(sq[1], 10); return { x: f * sqPx + sqPx / 2, y: r * sqPx + sqPx / 2 }; } // ── Board overlay ──────────────────────────────────────────────── function OverloadOverlay({ palette, position, defenders, focus, hover, size = 520 }) { const C = palette; const SQ = size / 8; const active = hover || focus; const drawList = active ? [active] : defenders; const dim = !active; return ( {[...Array(8)].flatMap((_, rank) => [...Array(8)].map((__, file) => { const sq = 'abcdefgh'[file] + (8 - rank); const isLight = (file + rank) % 2 === 0; return ( ); }))} {Object.entries(position).map(([sq, code]) => { const { x, y } = odSqToXY(sq, SQ); return ( {OD_GLYPH[code] || '?'} ); })} {/* Defender outline and burden lines */} {drawList.map((d, i) => { const opacity = dim ? 0.4 : 1; const tone = d.isPinned ? (C.terracotta || C.sienna) : C.sienna; const def = odSqToXY(d.square, SQ); return ( {/* Outline the overloaded defender */} {/* Dotted lines from defender to each burden */} {d.burdens.map((b, j) => { const burdenXY = odSqToXY(b.square, SQ); return ( ); })} ); })} ); } // ── Right-rail breakdown ──────────────────────────────────────── function DefenderBreakdown({ palette, defender }) { const C = palette; const T = window.COPY.overload; if (!defender) { return (
{T.selectPrompt}
); } const tone = defender.isPinned ? (C.terracotta || C.sienna) : C.sienna; return (
{defender.isPinned ? T.pinnedBlurb : T.overloadedBlurb}
{T.jobsLabel(defender.burdens.length)}
    {defender.burdens.map((b, i) => (
  • {String(i + 1).padStart(2, '0')} Defends the {b.kind} on {b.square}
    Attacked by {b.attackers.map((a) => `${a.kind} on ${a.from}`).join(', ')}
    • ))}
{T.ideaLabel}
{defender.isPinned ? T.ideaPinned : T.ideaDeflect}
); } // ── Screen ────────────────────────────────────────────────────── function OverloadedDefenderScreen({ palette, tweaks, setRoute }) { const C = palette; const T = window.COPY.overload; const [lesson, setLesson] = useOD(window.LESSON || null); useODE(() => { const handler = (e) => setLesson(e.detail); window.addEventListener('lessonLoaded', handler); return () => window.removeEventListener('lessonLoaded', handler); }, []); const data = lesson && lesson.overload; const [focus, setFocus] = useOD(null); const [hover, setHover] = useOD(null); useODE(() => { setFocus(null); }, [lesson && lesson.id]); if (!lesson || !data) { return (
{T.emptyState}
); } const position = lesson.position || {}; const defenders = data.overloadedDefenders || []; return (
); } Object.assign(window, { OverloadedDefenderScreen });