// atelier-screens-d.jsx — Attack Vectors study room. // // Reads window.LESSON.attackVectors (computed by tools/attack-vectors.js) // and draws arrows + battery lines + mating-net glow on the board. Three- // column layout matches Tension and Targets. // // Per INV-001: copy is plain. Per INV-005: this room visualizes existing // computed facts (attacker/defender geometry), not generated tactical claims. const { useState: useAV, useEffect: useAVE, useMemo: useAVM } = React; const VEC_TONE = { convergent_attack: 'sienna', battery: 'brass', mating_net_candidate: 'terracotta', }; const VEC_LABELS = { convergent_attack: 'Convergent', battery: 'Battery', mating_net_candidate: 'Mating net', }; const PIECE_TO_GLYPH_D = { wP: '♙', wN: '♘', wB: '♗', wR: '♖', wQ: '♕', wK: '♔', bP: '♟', bN: '♞', bB: '♝', bR: '♜', bQ: '♛', bK: '♚', }; function sqToXY(sq, sqPx) { const file = sq.charCodeAt(0) - 'a'.charCodeAt(0); const rank = 8 - parseInt(sq[1], 10); return { x: file * sqPx + sqPx / 2, y: rank * sqPx + sqPx / 2 }; } // ── Board overlay ───────────────────────────────────────────────────── function AttackVectorOverlay({ palette, position, vectors, focusVec, hoverVec, size = 520 }) { const C = palette; const SQ = size / 8; const focusOrHover = hoverVec || focusVec; // Only render arrows for active items (focused/hovered) to keep the board // legible. The selected item gets full opacity; nothing else draws. const active = focusOrHover ? [focusOrHover] : vectors; const showFaded = !focusOrHover; // when nothing selected, draw all but faded return ( {/* Squares */} {[...Array(8)].flatMap((_, rank) => [...Array(8)].map((__, file) => { const sq = 'abcdefgh'[file] + (8 - rank); const isLight = (file + rank) % 2 === 0; return ( ); }))} {/* Pieces */} {Object.entries(position).map(([sq, code]) => { const { x, y } = sqToXY(sq, SQ); return ( {PIECE_TO_GLYPH_D[code] || '?'} ); })} {/* Vector lines */} {active.map((v, i) => drawVector(v, C, SQ, showFaded ? 0.35 : 1, i))} ); } function drawVector(v, C, SQ, opacity, key) { const tone = VEC_TONE[v.type] || 'sienna'; const stroke = C[tone] || C.umber; const markerId = `arr-${tone}`; if (v.type === 'convergent_attack') { const target = sqToXY(v.target, SQ); return v.attackers.map((a, j) => { const from = sqToXY(a.from, SQ); return ( ); }); } if (v.type === 'battery') { const rear = sqToXY(v.rear, SQ); const front = sqToXY(v.front, SQ); const target = sqToXY(v.target, SQ); return ( ); } if (v.type === 'mating_net_candidate') { const king = sqToXY(v.kingSquare, SQ); return ( ); } return null; } // ── Right rail breakdown ───────────────────────────────────────────── function VectorBreakdown({ palette, vec }) { const C = palette; const T = window.COPY.attackVectors; if (!vec) { return (
{T.selectPrompt}
); } const tone = VEC_TONE[vec.type]; const palColor = C[tone] || C.umber; return (
{T.typeBlurbs[vec.type]}
{vec.type === 'convergent_attack' && (
{T.attackersLabel(vec.attackers.length)}
    {vec.attackers.map((a, i) => (
  • {a.kind} on {a.from}
    • ))}
Target: {window.PieceTitle ? window.PieceTitle(vec.targetPiece, vec.target) : (vec.target)}
)} {vec.type === 'battery' && (
Rear: {vec.rearPiece && vec.rearPiece[1]} on {vec.rear}
Front: {vec.frontPiece && vec.frontPiece[1]} on {vec.front}
Target: {vec.target}
Axis: {vec.axis}
)} {vec.type === 'mating_net_candidate' && (
King: {vec.kingSquare} ({vec.kingColor})
In check: {vec.inCheck ? 'yes' : 'no'}
Escape squares: {vec.escapeSquares.length === 0 ? 'none' : vec.escapeSquares.join(', ')}
{T.matingNetCaveat}
)}
); } // ── Screen ─────────────────────────────────────────────────────────── function AttackVectorsScreen({ palette, tweaks, setRoute }) { const C = palette; const T = window.COPY.attackVectors; const [lesson, setLesson] = useAV(window.LESSON || null); useAVE(() => { const handler = (e) => setLesson(e.detail); window.addEventListener('lessonLoaded', handler); return () => window.removeEventListener('lessonLoaded', handler); }, []); const av = lesson && lesson.attackVectors; const [filter, setFilter] = useAV('all'); // all / convergent / battery / mating const [focusVec, setFocusVec] = useAV(null); const [hoverVec, setHoverVec] = useAV(null); useAVE(() => { setFocusVec(null); }, [lesson && lesson.id]); const filteredVectors = useAVM(() => { if (!av) return []; if (filter === 'all') return av.vectors; if (filter === 'convergent') return av.convergent; if (filter === 'battery') return av.batteries; if (filter === 'mating') return av.matingNets; return []; }, [av, filter]); if (!lesson || !av) { return (
{T.emptyState}
); } const position = lesson.position || {}; return (
); } Object.assign(window, { AttackVectorsScreen });