// atelier-board.jsx — Interactive Atelier chess board.
// Props:
// palette (object from atelierPalette)
// layers { heatmap, hero, trajectory, tension } booleans
// heatmapStyle 'wash' | 'dotted' | 'contour'
// heatmapIntensity 0..1
// trajectoryStyle 'painterly' | 'clean'
// hovered, selected, onHover, onSelect (square strings or null)
// focus square to spotlight (lesson screen)
// size board pixel size (default 640)
// showCoords bool
const B_FILES = ['a','b','c','d','e','f','g','h'];
const B_RANKS = [1,2,3,4,5,6,7,8];
const B_SQ = 80;
const B_BOARD = B_SQ * 8;
const B_PAD = 24;
const B_WIDTH = B_BOARD + B_PAD * 2;
const B_GLYPH = {
wK:'♔',wQ:'♕',wR:'♖',wB:'♗',wN:'♘',wP:'♙',
bK:'♚',bQ:'♛',bR:'♜',bB:'♝',bN:'♞',bP:'♟',
};
function sqXY(sq) {
const f = B_FILES.indexOf(sq[0]);
const r = parseInt(sq[1], 10);
return { x: B_PAD + f * B_SQ, y: B_PAD + (8 - r) * B_SQ };
}
function sqCenter(sq) {
const { x, y } = sqXY(sq);
return { cx: x + B_SQ / 2, cy: y + B_SQ / 2 };
}
function AtelierBoard({
palette = window.atelierPalette(0.5),
layers = { heatmap: true, hero: true, trajectory: false, tension: false },
heatmapStyle = 'wash',
heatmapIntensity = 1,
trajectoryStyle = 'painterly',
hovered = null, selected = null,
onHover, onSelect,
focus = null,
size = 720,
showCoords = true,
showTrajectoriesFor = null, // explicit list of pieces to draw trajectories for
onSquareClick = null, // fires when user clicks an empty square rect
markedSquares = null, // array of { sq, label } — A/B/C markers
hiddenPieces = null, // Set of square strings — render at opacity 0.08
highlightSquare = null, // single square — dashed destination ring
noTrajectoryOnSelect = false, // suppress trajectory auto-show on hover/select
positionOverride = null, // {square: pieceCode} — render this instead of window.A_POSITION
}) {
const C = palette;
// Decide which piece's trajectory we're showing.
const trajectoryPiece = (noTrajectoryOnSelect ? null : (selected || hovered))
|| focus
|| (layers.trajectory ? window.A_HERO : null);
const trajectory = trajectoryPiece ? window.A_TRAJECTORIES[trajectoryPiece] : null;
// Heatmap source: board influence; if a piece is selected, isolate to that piece.
const isolatedInfluence = (selected && window.A_INFLUENCE_BY_PIECE[selected]) || null;
const heatmapData = isolatedInfluence || window.A_INFLUENCE_BOARD;
return (
);
}
function PiecesLayer({ palette, hovered, selected, onHover, onSelect, heroSquare, hiddenPieces, positionOverride }) {
const C = palette;
const position = positionOverride || window.A_POSITION;
return (
{Object.entries(position).map(([sq, code]) => {
const { cx, cy } = sqCenter(sq);
const isWhite = code[0] === 'w';
const isHero = sq === heroSquare;
const isHover = sq === hovered;
const isSel = sq === selected;
const isHidden = hiddenPieces && hiddenPieces.has(sq);
const lift = isHover || isSel ? -2 : 0;
return (
onHover && onHover(sq)}
onMouseLeave={() => onHover && onHover(null)}
onClick={(e) => { e.stopPropagation(); onSelect && onSelect(isSel ? null : sq); }}
style={{ cursor: 'pointer', transition: 'transform 240ms ' + window.ATELIER_EASE }}
transform={`translate(0 ${lift})`}
opacity={isHidden ? 0.08 : 1}
>
{B_GLYPH[code]}
);
})}
);
}
function SelectionRing({ square, palette }) {
const { cx, cy } = sqCenter(square);
return (
);
}
function HighlightRing({ square, palette }) {
const { cx, cy } = sqCenter(square);
return (
);
}
// === HEATMAP STYLES ==========================================================
function HeatmapLayer({ data, palette, style, intensity }) {
const C = palette;
const k = Math.max(0, Math.min(1.5, intensity));
if (style === 'wash') {
return (
{Object.entries(data).map(([sq, inf]) => {
const v = Math.abs(inf);
if (v < 0.08) return null;
const { cx, cy } = sqCenter(sq);
const color = inf > 0 ? C.sienna : C.celadon;
const r = 28 + v * 32;
return (
);
})}
);
}
if (style === 'dotted') {
const dots = [];
Object.entries(data).forEach(([sq, inf]) => {
const v = Math.abs(inf);
if (v < 0.1) return;
const { x, y } = sqXY(sq);
const color = inf > 0 ? C.sienna : C.celadon;
// density grid inside square: 1 to 6 dots per side based on v*intensity
const n = Math.max(1, Math.min(6, Math.round(v * 6 * k)));
// pseudo-random offsets stable per square
let seed = sq.charCodeAt(0) * 131 + sq.charCodeAt(1) * 17;
const rand = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; };
const margin = 12;
const range = B_SQ - margin * 2;
const count = n * n;
for (let i = 0; i < count; i++) {
dots.push(
);
}
});
return {dots};
}
// contour
const rings = [];
Object.entries(data).forEach(([sq, inf]) => {
const v = Math.abs(inf);
if (v < 0.18) return;
const { cx, cy } = sqCenter(sq);
const color = inf > 0 ? C.sienna : C.celadon;
const ringCount = Math.max(1, Math.round(v * 5 * k));
for (let i = 0; i < ringCount; i++) {
const r = 12 + i * 10;
rings.push(
);
}
});
return {rings};
}
// === HERO ====================================================================
function HeroLayer({ square, palette }) {
const C = palette;
const { cx, cy } = sqCenter(square);
const topY = B_PAD - 4;
const wTop = 26;
const wBot = B_SQ * 0.7;
return (
);
}
// === TRAJECTORY ==============================================================
function TrajectoryLayer({ path, palette, style }) {
const C = palette;
if (!path || path.length < 2) return null;
const pts = path.map(sqCenter);
if (style === 'clean') {
const d = pts.map((p, i) => (i ? 'L' : 'M') + p.cx + ' ' + p.cy).join(' ');
const last = pts[pts.length - 1];
const before = pts[pts.length - 2];
const ang = Math.atan2(last.cy - before.cy, last.cx - before.cx);
const ah = 9;
return (
{pts.map((p, i) => (
))}
);
}
// painterly
let d = `M ${pts[0].cx} ${pts[0].cy}`;
for (let i = 1; i < pts.length; i++) {
const prev = pts[i - 1];
const curr = pts[i];
const mx = (prev.cx + curr.cx) / 2;
const my = (prev.cy + curr.cy) / 2 - 22;
d += ` Q ${mx} ${my} ${curr.cx} ${curr.cy}`;
}
const last = pts[pts.length - 1];
const before = pts[pts.length - 2];
const ang = Math.atan2(last.cy - before.cy + 22, last.cx - before.cx);
const ah = 9;
return (
{pts.map((p, i) => (
))}
);
}
// === TENSION =================================================================
function TensionLayer({ list, palette }) {
const C = palette;
return (
{list.flatMap((t) => {
const def = sqCenter(t.defender);
const overloaded = t.load > t.support;
return t.attackers.map((atk, i) => {
const a = sqCenter(atk.from);
const mx = (def.cx + a.cx) / 2;
const my = (def.cy + a.cy) / 2 + 14;
const d = `M ${a.cx} ${a.cy} Q ${mx} ${my} ${def.cx} ${def.cy}`;
return (
);
});
})}
{list.map((t, i) => {
const def = sqCenter(t.defender);
const overloaded = t.load > t.support;
return (
{t.load}/{t.support} strain
);
})}
);
}
// === HEATMAP HOVER TOOLTIP ====================================================
// Renders a small SVG panel near the hovered square showing per-side control
// counts and the pieces that contribute to that control. Reads
// window.A_INFLUENCE_BY_PIECE — every piece's influence map already lists which
// squares it bears on, so we just transpose that data per hovered square.
function HeatmapTooltipLayer({ square, palette, position, influenceByPiece }) {
if (!square || !influenceByPiece || !position) return null;
const C = palette;
const kindName = (code) => {
const k = { K: 'king', Q: 'queen', R: 'rook', B: 'bishop', N: 'knight', P: 'pawn' };
return k[code[1]] || code[1];
};
// Find all pieces whose influence map touches `square`.
const whiteAttackers = [];
const blackAttackers = [];
for (const [fromSq, infMap] of Object.entries(influenceByPiece)) {
if (!infMap || !(square in infMap)) continue;
const code = position[fromSq];
if (!code) continue;
const entry = { from: fromSq, code, kind: kindName(code) };
if (code[0] === 'w') whiteAttackers.push(entry);
else blackAttackers.push(entry);
}
const wN = whiteAttackers.length;
const bN = blackAttackers.length;
if (wN === 0 && bN === 0) return null;
// Position the tooltip near the hovered square, snapping to whichever side
// has room (right edge usually, flip to left if hovered square is on the
// right half of the board).
const { x: sqX, y: sqY } = sqXY(square);
const isRight = sqX > B_WIDTH / 2;
const tw = 220;
const th = 32 + (wN + bN) * 14 + (wN && bN ? 8 : 0);
let tx = sqX + B_SQ + 12;
if (isRight) tx = sqX - tw - 12;
let ty = sqY - 6;
if (ty + th > B_WIDTH) ty = B_WIDTH - th - 4;
if (ty < 4) ty = 4;
const renderLine = (entry, color, idx) => (
{color === 'w' ? '■' : '□'}
{entry.kind} on {entry.from}
);
let cursor = 0;
return (
{/* Halo around the hovered square */}
{/* Tooltip panel */}
SQUARE · {square.toUpperCase()}
bN ? C.sienna : bN > wN ? C.celadon : C.umberSoft}
textAnchor="end"
>
{wN === bN ? `contested ${wN}/${bN}` : `${wN > bN ? 'white +' : 'black +'}${Math.abs(wN - bN)}`}
{/* Lines */}
{(() => {
const out = [];
whiteAttackers.forEach((e) => { out.push(renderLine(e, 'w', cursor)); cursor++; });
if (wN && bN) cursor += 0.5; // spacer handled below visually if needed
blackAttackers.forEach((e) => { out.push(renderLine(e, 'b', cursor)); cursor++; });
return out;
})()}
);
}
Object.assign(window, { AtelierBoard, sqXY, sqCenter, B_FILES, B_RANKS, B_SQ, B_BOARD, B_PAD, B_WIDTH, B_GLYPH });