// Backgammon board — visual + minimal game state for prototype // Exposes: Board, useGameState, START_POSITION const START_POSITION = (() => { // points[0..23]; positive = gold (player), negative = cobalt (AI) // Standard starting position from gold's perspective const p = Array(24).fill(0); p[0] = 2; p[11] = 5; p[16] = 3; p[18] = 5; p[23] = -2; p[12] = -5; p[7] = -3; p[5] = -5; return { points: p, bar: { gold: 0, cobalt: 0 }, off: { gold: 0, cobalt: 0 } }; })(); function useGameState() { const [pos, setPos] = React.useState(START_POSITION); const [dice, setDice] = React.useState([5, 3]); const [used, setUsed] = React.useState([false, false]); const [turn, setTurn] = React.useState('gold'); const [selected, setSelected] = React.useState(null); const [rolling, setRolling] = React.useState(false); const [cube, setCube] = React.useState({ value: 1, owner: null }); const roll = () => { setRolling(true); setTimeout(() => { setDice([1 + Math.floor(Math.random() * 6), 1 + Math.floor(Math.random() * 6)]); setUsed([false, false]); setRolling(false); }, 600); }; return { pos, setPos, dice, setDice, used, setUsed, turn, setTurn, selected, setSelected, rolling, roll, cube, setCube }; } // ───────────────────────────────────────────────────────────── // Board visual — premium walnut + lapis + turquoise + pomegranate // ───────────────────────────────────────────────────────────── function Board({ pos = START_POSITION, dice = [5,3], used = [false,false], selected = null, onPointTap, dark = false, checkerStyle = 'khatam', cube = { value: 1, owner: null }, }) { const t = themeFor(dark); // Designed for 360 wide × 460 tall. const W = 360, H = 460; const FRAME = 14; const TRAY = 26; const BAR = 30; const innerW = W - FRAME * 2 - TRAY * 2; const halfW = (innerW - BAR) / 2; const pointW = halfW / 6; const pointH = (H - FRAME * 2) * 0.42; const innerH = H - FRAME * 2; // pointIndex → layout const layout = (i) => { let col, row, dir; if (i >= 12) { row = 'top'; col = i - 12; dir = 'down'; } else { row = 'bottom'; col = 11 - i; dir = 'up'; } const past = col >= 6 ? BAR : 0; const x = col * pointW + past + pointW / 2; const y = row === 'top' ? 0 : innerH; return { x, y, row, col, dir }; }; const stackChecker = (idx, count, side) => { const { x, y, dir } = layout(idx); const checkers = []; const max = Math.min(Math.abs(count), 5); const cSize = 28; const overflow = Math.abs(count) > 5; for (let k = 0; k < max; k++) { const offset = k * (cSize - 6); const cy = dir === 'down' ? y + 6 + offset : y - 6 - offset - cSize; checkers.push({ x: x - cSize / 2, y: cy, k, side, size: cSize, top: k === max - 1 }); } return { checkers, overflow, count: Math.abs(count) }; }; // colors const surface = dark ? '#1A0F07' : '#E8DCC2'; const surfaceShade = dark ? '#0F0804' : '#D9CAA8'; return (
{/* Wood grain — diagonal long fibers */}
{/* Cross-grain highlight band */}
{/* corner sheen */}
{/* Decorative inlay border — brass + pomegranate hairlines */} {/* Inner well — recessed plaster surface */}
{/* plaster speckle texture */}
{/* points */} {/* vertical gradient for triangles for subtle depth */} {/* faint center seam (down the middle of each point) */} {Array.from({length: 12}, (_, col) => { const past = col >= 6 ? BAR : 0; const x = col * pointW + past; const isLight = col % 2 === 0; const accentKey = col % 4 < 2 ? 'lapis' : 'firuzeh'; const fillTop = isLight ? `url(#pt-light-top)` : `url(#pt-${accentKey}-top)`; const fillBot = isLight ? `url(#pt-light-bot)` : `url(#pt-${accentKey}-bot)`; const tipColor = accentKey === 'lapis' ? '#C9A24C' : '#C9A24C'; return ( {/* TOP triangle */} {/* inner shadow at base */} {/* tiny brass dot at tip */} {/* BOTTOM triangle */} ); })} {/* center bar — walnut band w/ vertical brass hairlines */} {/* inset shadow */} {/* brass hairlines */} {/* khatam stack on bar */} {[0, 30, 60, 90, 120].map((yOff, idx) => { const stars = ['gold','red','turq','red','gold']; const tone = stars[idx]; const fill = tone === 'gold' ? '#D9B25C' : tone === 'red' ? '#B53A2E' : '#3FB8B0'; const edge = tone === 'gold' ? '#8E6D24' : tone === 'red' ? '#7E251D' : '#2A8A85'; return ( { const a = (i * Math.PI) / 8 - Math.PI / 2; const r = i % 2 === 0 ? 7 : 3; return `${(r * Math.cos(a)).toFixed(1)},${(r * Math.sin(a)).toFixed(1)}`; }).join(' ')} fill={fill} stroke={edge} strokeWidth="0.5" strokeLinejoin="round" /> ); })} {/* horizontal mid-line score band — subtle */} {/* checkers */} {pos.points.map((count, idx) => { if (count === 0) return null; const side = count > 0 ? 'gold' : 'cobalt'; const { checkers, overflow, count: total } = stackChecker(idx, count, side); const isSelected = selected === idx; return (
{checkers.map((c, i) => (
{c.top && overflow && (
{total}
)}
))}
onPointTap && onPointTap(idx)} style={{ position: 'absolute', left: layout(idx).x - pointW/2, top: layout(idx).row === 'top' ? 0 : innerH - pointH, width: pointW, height: pointH, cursor: 'pointer', }} />
); })} {/* dice */}
{/* doubling cube on bar */} {cube.value > 1 && (
)} {cube.value === 1 && (
)} {/* bar checkers */} {pos.bar.gold > 0 && Array.from({length: pos.bar.gold}, (_, i) => (
))} {pos.bar.cobalt > 0 && Array.from({length: pos.bar.cobalt}, (_, i) => (
))}
{/* bear-off trays */}
); } function BearOffTray({ side, off = 0, W, H, FRAME, TRAY, dark, sideColor, checkerStyle }) { const left = side === 'left' ? FRAME : W - FRAME - TRAY; return (
{/* brass capline */}
{Array.from({length: Math.min(off, 15)}, (_, i) => (
))}
); } // ───────────────────────────────────────────────────────────── // Khatam-style border around board — brass + pomegranate inlay // Two thin hairlines and small khatam stars at each corner. // ───────────────────────────────────────────────────────────── function KhatamBorder({ W, H, dark }) { const brass = '#C9A24C'; const brassDeep = '#8E6D24'; const red = '#B53A2E'; const corner = (cx, cy) => ( { const a = (i * Math.PI) / 8 - Math.PI / 2; const r = i % 2 === 0 ? 4.5 : 2; return `${(r * Math.cos(a)).toFixed(1)},${(r * Math.sin(a)).toFixed(1)}`; }).join(' ')} fill={brass} stroke={brassDeep} strokeWidth="0.4" strokeLinejoin="round" /> ); return ( {/* outer hairline */} {/* mid hairline */} {/* inner red hairline */} {/* corner khatams */} {corner(7, 7)} {corner(W - 7, 7)} {corner(7, H - 7)} {corner(W - 7, H - 7)} ); } Object.assign(window, { Board, useGameState, START_POSITION });