// Persian Backgammon — design tokens + shared visual primitives // Exposes: NARD, GirihPattern, GirihTile, Checker, Die, DoublingCube, Icon, Logo const NARD = { // Palette — Persian Heritage moodboard c: { // Ancient Turquoise (Firuzeh) patina turquoise: '#3FB8B0', turquoiseDeep: '#2A8A85', // Polished Lapis Lazuli cobalt: '#1E3A8A', cobaltDeep: '#0F2766', // Brass / gold accent (kept for inlay) gold: '#C9A24C', goldDeep: '#8E6D24', // Warm Pomegranate Red brick: '#B53A2E', brickDeep: '#7E251D', // Deep Walnut Brown walnut: '#3E2A1C', walnutMid: '#5C3F28', walnutLight: '#8C6240', // Charcoal (dark mode) charcoal: '#1A130E', charcoalDeep: '#100A07', // Plaster / stone neutrals ivory: '#EFE6D2', cream: '#F2EAD7', paper: '#F8F2E2', line: 'rgba(62,42,28,0.14)', lineDk: 'rgba(239,230,210,0.14)', }, // Type scales fs: { xs: 11, sm: 13, base: 15, md: 17, lg: 20, xl: 24, xxl: 32, hero: 44 }, // Spacing s: (n) => n * 4, // Radius r: { sm: 6, md: 10, lg: 14, xl: 22, pill: 9999 }, }; // Theme helpers const themeFor = (dark) => ({ bg: dark ? NARD.c.charcoal : NARD.c.cream, bg2: dark ? NARD.c.charcoalDeep : NARD.c.paper, fg: dark ? NARD.c.ivory : NARD.c.charcoal, fgMute: dark ? 'rgba(244,235,217,0.62)' : 'rgba(31,27,22,0.58)', fgFaint: dark ? 'rgba(244,235,217,0.38)' : 'rgba(31,27,22,0.34)', line: dark ? NARD.c.lineDk : NARD.c.line, card: dark ? '#2A2520' : '#FFFFFF', cardElev: dark ? '0 2px 10px rgba(0,0,0,0.4)' : '0 2px 10px rgba(31,27,22,0.06), 0 1px 2px rgba(31,27,22,0.04)', accent: NARD.c.turquoise, accentAlt: NARD.c.gold, // Board — Persian Heritage moodboard // Light points = polished plaster/lapis ivory, dark points = lapis blue // Accent point group = ancient turquoise (firuzeh) patina pointA: dark ? '#2A1F14' : NARD.c.ivory, pointB: dark ? NARD.c.cobalt : NARD.c.cobalt, pointAccent: NARD.c.turquoise, boardFrame: dark ? NARD.c.walnut : NARD.c.walnutMid, bar: dark ? '#1A0F08' : NARD.c.walnut, }); // ───────────────────────────────────────────────────────────── // Girih — geometric strapwork SVG (10-pointed star tessellation) // Hand-tuned: a single tile that tessellates seamlessly. // ───────────────────────────────────────────────────────────── function GirihTile({ size = 120, stroke = '#2BB7B3', fill = 'none', bg = 'transparent', strokeWidth = 1, opacity = 1 }) { // Decagonal star with surrounding strapwork const cx = size / 2, cy = size / 2; const R = size * 0.42, r = size * 0.18; // 10-point star const star = []; for (let i = 0; i < 20; i++) { const a = (i * Math.PI) / 10 - Math.PI / 2; const rad = i % 2 === 0 ? R : r; star.push(`${cx + rad * Math.cos(a)},${cy + rad * Math.sin(a)}`); } // Outer ring of small hexagons const ringR = size * 0.46; const sats = []; for (let i = 0; i < 10; i++) { const a = (i * Math.PI) / 5 - Math.PI / 2; sats.push({ x: cx + ringR * Math.cos(a), y: cy + ringR * Math.sin(a) }); } return ( {bg !== 'transparent' && } {/* outer frame */} {/* connecting lines from star points to corners (strapwork) */} {[0,1,2,3,4,5,6,7,8,9].map(i => { const a = (i * Math.PI) / 5 - Math.PI / 2; const x1 = cx + R * Math.cos(a), y1 = cy + R * Math.sin(a); const x2 = cx + (size * 0.62) * Math.cos(a), y2 = cy + (size * 0.62) * Math.sin(a); return ; })} {/* small satellite pentagons */} {sats.map((p, i) => { const pent = []; for (let j = 0; j < 5; j++) { const a = (j * 2 * Math.PI) / 5 + (i * Math.PI) / 5; pent.push(`${p.x + size * 0.07 * Math.cos(a)},${p.y + size * 0.07 * Math.sin(a)}`); } return ; })} {/* main 10-point star */} {/* inner decagon */} { const a = (i * Math.PI) / 5 - Math.PI / 2; return `${cx + r * 0.7 * Math.cos(a)},${cy + r * 0.7 * Math.sin(a)}`; }).join(' ')} fill="none" stroke={stroke} strokeWidth={strokeWidth * 0.7} /> ); } // Tiled background pattern via repeating SVG dataURL function GirihPattern({ size = 120, color = '#2BB7B3', opacity = 0.06, style = {} }) { const svg = encodeURIComponent(` ${girihPathString(size, color)} `); return (
); } function girihPathString(size, color) { const cx = size / 2, cy = size / 2; const R = size * 0.4, r = size * 0.16; const star = []; for (let i = 0; i < 20; i++) { const a = (i * Math.PI) / 10 - Math.PI / 2; const rad = i % 2 === 0 ? R : r; star.push(`${(cx + rad * Math.cos(a)).toFixed(2)},${(cy + rad * Math.sin(a)).toFixed(2)}`); } let lines = ''; for (let i = 0; i < 10; i++) { const a = (i * Math.PI) / 5 - Math.PI / 2; const x1 = cx + R * Math.cos(a), y1 = cy + R * Math.sin(a); const x2 = cx + (size * 0.55) * Math.cos(a), y2 = cy + (size * 0.55) * Math.sin(a); lines += ``; } return ` ${lines} `; } // ───────────────────────────────────────────────────────────── // Checker — three styles // khatam: radial inlay rings + center rosette // minimal: solid disc with thin ring + monogram // carved: raised concentric grooves // ───────────────────────────────────────────────────────────── function Checker({ size = 38, side = 'gold', style = 'khatam', selected = false, captured = false, dark = false }) { const isGold = side === 'gold'; // "gold" side = warm pomegranate red (moodboard); "cobalt" side = ivory plaster with cobalt monogram const mainA = isGold ? '#C84638' : '#F2EAD7'; const mainB = isGold ? '#7E251D' : '#C7B898'; const inlay = isGold ? '#F2EAD7' : '#1E3A8A'; const opacity = captured ? 0.55 : 1; const sz = captured ? size * 0.78 : size; return (
{/* base disc */} {style === 'khatam' && <> {/* outer ring */} {/* 8-point khatam rosette */} {Array.from({length: 16}, (_, i) => { const a = (i * Math.PI) / 8; const rIn = 6, rOut = i % 2 === 0 ? 18 : 11; return `${50 + rOut * Math.cos(a)},${50 + rOut * Math.sin(a)}`; }) && ( { const a = (i * Math.PI) / 8 - Math.PI / 2; const rOut = i % 2 === 0 ? 18 : 10; return `${(50 + rOut * Math.cos(a)).toFixed(1)},${(50 + rOut * Math.sin(a)).toFixed(1)}`; }).join(' ')} fill={inlay} opacity="0.85" stroke={mainB} strokeWidth="0.4" /> )} {/* tiny radiating wedges between star points */} {Array.from({length: 8}, (_, i) => { const a = (i * Math.PI) / 4 - Math.PI / 2; const x1 = 50 + 22 * Math.cos(a), y1 = 50 + 22 * Math.sin(a); const x2 = 50 + 36 * Math.cos(a), y2 = 50 + 36 * Math.sin(a); return ; })} {/* center dot */} } {style === 'minimal' && <> {/* simple monogram — N (Nard) for gold, persian-ish dot for cobalt */} {isGold ? ( N ) : ( )} } {style === 'carved' && <> {[42, 34, 26, 18].map((r, i) => ( ))} {/* center brass nail */} } {/* highlight on top */}
); } // ───────────────────────────────────────────────────────────── // Die — ivory with cobalt pips // ───────────────────────────────────────────────────────────── const PIPS = { 1: [[0.5,0.5]], 2: [[0.28,0.28],[0.72,0.72]], 3: [[0.28,0.28],[0.5,0.5],[0.72,0.72]], 4: [[0.28,0.28],[0.72,0.28],[0.28,0.72],[0.72,0.72]], 5: [[0.28,0.28],[0.72,0.28],[0.5,0.5],[0.28,0.72],[0.72,0.72]], 6: [[0.28,0.25],[0.72,0.25],[0.28,0.5],[0.72,0.5],[0.28,0.75],[0.72,0.75]], }; function Die({ value = 1, size = 44, used = false, rolling = false }) { return (
{PIPS[value].map(([x, y], i) => (
))}
); } // ───────────────────────────────────────────────────────────── // Doubling cube — brass with engraved numeral // ───────────────────────────────────────────────────────────── function DoublingCube({ value = 64, size = 40 }) { return (
{value}
); } // ───────────────────────────────────────────────────────────── // Icons — line-art, 24x24, single stroke color // ───────────────────────────────────────────────────────────── function Icon({ name, size = 22, color = 'currentColor', strokeWidth = 1.6 }) { const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' }; switch (name) { case 'back': return ; case 'gear': return ; case 'undo': return ; case 'sound': return ; case 'mute': return ; case 'music': return ; case 'haptic': return ; case 'share': return ; case 'info': return ; case 'lock': return ; case 'check': return ; case 'chevron': return ; case 'play': return ; case 'home': return ; case 'stats': return ; case 'book': return ; case 'trophy': return ; default: return null; } } // ───────────────────────────────────────────────────────────── // Logo — Persian geometric monogram (10-pt star + interlace) // ───────────────────────────────────────────────────────────── function Logo({ size = 80, color = '#2BB7B3', accent = '#D4A24C' }) { return ( {/* outer ring */} {/* 10-point star */} { const a = (i * Math.PI) / 10 - Math.PI / 2; const r = i % 2 === 0 ? 36 : 16; return `${(50 + r * Math.cos(a)).toFixed(1)},${(50 + r * Math.sin(a)).toFixed(1)}`; }).join(' ')} fill="none" stroke="url(#logo-fill)" strokeWidth="1.8" strokeLinejoin="round" /> {/* inner pentagon */} { const a = (i * 2 * Math.PI) / 5 - Math.PI / 2; return `${(50 + 12 * Math.cos(a)).toFixed(1)},${(50 + 12 * Math.sin(a)).toFixed(1)}`; }).join(' ')} fill="none" stroke={accent} strokeWidth="1.4" /> {/* center dot */} ); } Object.assign(window, { NARD, themeFor, GirihPattern, GirihTile, Checker, Die, DoublingCube, Icon, Logo });