// Screens for Persian Backgammon — Splash, Home, Difficulty, Game, Settings, Results, Tutorial // Each screen is a function returning JSX sized for IOSDevice content area (402×874 minus chrome). const FONT = { serif: "'Cormorant Garamond', 'Garamond', 'Times New Roman', serif", sans: "'SF Pro Display', -apple-system, system-ui, sans-serif", }; // ───────────────────────────────────────────────────────────── // Top chrome — used by all non-splash screens // ───────────────────────────────────────────────────────────── // iOS 26 glass-pill nav, recolored with our brand glass tint. function ScreenChrome({ dark, onBack, title, onSettings, largeTitle = false }) { const t = themeFor(dark); const muted = dark ? 'rgba(244,235,217,0.7)' : 'rgba(31,27,22,0.65)'; const pill = (content, onClick) => (
{content}
); return (
{onBack ? pill( , onBack) :
} {!largeTitle && (
{title}
)} {onSettings ? pill( , onSettings) :
}
{largeTitle && (
{title}
)}
); } // ───────────────────────────────────────────────────────────── // 1. SPLASH // ───────────────────────────────────────────────────────────── function SplashScreen({ dark }) { const t = themeFor(dark); return (
{/* Large unfurling girih in center, faded */}
NARD
تخته نرد
since 3000 BCE
); } // ───────────────────────────────────────────────────────────── // 2. HOME // ───────────────────────────────────────────────────────────── function HomeScreen({ dark, onPlay, onStats, onSettings, onTutorial, difficulty, setDifficulty }) { const t = themeFor(dark); const levels = [ { id: 'beginner', en: 'Beginner', fa: 'Tazeh-kar' }, { id: 'intermediate', en: 'Intermediate', fa: 'Mian' }, { id: 'master', en: 'Master', fa: 'Ostad' }, ]; return (
{/* Header w/ logo and small icon row */}
{/* Hero title */}
Nard
A backgammon set for the heirs of Isfahan.
{/* Primary CTA card */}
{/* faint girih on cta */}
Play
vs. Computer
Tap to start a match
{/* Difficulty pills */}
Difficulty
{levels.map(l => { const sel = difficulty === l.id; return (
setDifficulty(l.id)} style={{ flex: 1, borderRadius: 12, padding: '10px 8px', textAlign: 'center', cursor: 'pointer', background: sel ? (dark ? NARD.c.gold : NARD.c.charcoal) : t.card, color: sel ? (dark ? NARD.c.charcoal : NARD.c.paper) : t.fg, border: sel ? 'none' : `0.5px solid ${t.line}`, transition: 'all 160ms', }}>
{l.en}
{l.fa}
); })}
{/* Secondary tiles */}
{/* heritage note */}
Backgammon · Persia · since 3000 BCE
); } function Tile({ dark, icon, label, sub, onClick }) { const t = themeFor(dark); return (
{label}
{sub}
); } // ───────────────────────────────────────────────────────────── // 3. GAME // ───────────────────────────────────────────────────────────── function GameScreen({ dark, onBack, onSettings, checkerStyle }) { const game = useGameState(); const t = themeFor(dark); return (
{/* Top HUD: opponent (cobalt) */} {/* Board */}
game.setSelected(game.selected === idx ? null : idx)} dark={dark} checkerStyle={checkerStyle} cube={game.cube} />
{/* Bottom HUD: player (gold) */} {/* Action row */}
{}}/> game.setCube({ value: 2, owner: 'gold' })}/>
); } function PlayerHUD({ dark, side, name, pip, active, bar, off }) { const t = themeFor(dark); const accent = side === 'gold' ? NARD.c.gold : NARD.c.cobalt; return (
{name}
{active ? 'YOUR TURN' : 'WAITING'}
Pip {pip}
{bar > 0 &&
BAR · {bar}
} {off > 0 &&
↗ {off}
}
); } function RollButton({ dark, onClick, rolling }) { return (
{rolling ? 'Rolling…' : 'Roll Dice'}
); } function ActionButton({ dark, icon, label, subtle, onClick }) { const t = themeFor(dark); return (
{label}
); } // ───────────────────────────────────────────────────────────── // 4. DIFFICULTY SELECT // ───────────────────────────────────────────────────────────── function DifficultyScreen({ dark, onBack, onPick }) { const t = themeFor(dark); const levels = [ { id: 'beginner', en: 'Beginner', fa: 'Tazeh-kar', desc: 'Learning the game.', meter: 1, accent: NARD.c.turquoise }, { id: 'intermediate', en: 'Intermediate', fa: 'Mian', desc: 'A worthy match.', meter: 2, accent: NARD.c.gold }, { id: 'master', en: 'Master', fa: 'Ostad', desc: 'A true master.', meter: 3, accent: NARD.c.brick }, ]; return (
Find a worthy opponent.
Each level adapts its play style to yours.
{levels.map(l => (
onPick(l.id)} style={{ borderRadius: 16, padding: 18, background: t.card, border: `0.5px solid ${t.line}`, cursor: 'pointer', position: 'relative', overflow: 'hidden', boxShadow: t.cardElev, }}>
{l.en}
· {l.fa}
{l.desc}
{[1,2,3].map(n => (
))}
))}
); } // ───────────────────────────────────────────────────────────── // 5. SETTINGS // ───────────────────────────────────────────────────────────── function SettingsScreen({ dark, onBack, settings, setSettings }) { const t = themeFor(dark); const set = (k, v) => setSettings({ ...settings, [k]: v }); return (
set('sfx', !settings.sfx)}/>}/> set('music', !settings.music)}/>}/> set('haptics', !settings.haptics)}/>} isLast/> {[ { id: 'isfahan', name: 'Isfahan', sub: 'Turquoise tilework', unlocked: true, c1: NARD.c.turquoise, c2: NARD.c.cobalt }, { id: 'khatam', name: 'Khatam', sub: 'Inlaid marquetry', unlocked: false, c1: NARD.c.gold, c2: NARD.c.brick }, { id: 'garden', name: 'Persian Garden', sub: 'Rose & cypress', unlocked: false, c1: '#7BA068', c2: '#C44E4E' }, { id: 'teahouse', name: 'Tea House', sub: 'Deep saffron', unlocked: false, c1: '#A87A2C', c2: '#3A2218' }, ].map((th, i, arr) => ( ))} set('cube', !settings.cube)}/>}/> {[1,3,5,7].map(n => (
set('matchLen', n)} style={{ padding: '4px 10px', borderRadius: 8, fontFamily: FONT.serif, fontSize: 14, fontWeight: 500, background: settings.matchLen === n ? NARD.c.turquoise : 'transparent', color: settings.matchLen === n ? NARD.c.paper : (dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)'), border: `0.5px solid ${settings.matchLen === n ? NARD.c.turquoise : (dark ? 'rgba(84,84,88,0.5)' : 'rgba(60,60,67,0.18)')}`, cursor: 'pointer', }}>{n}
))}
} isLast/>
Crafted with care · Version 1.0
); } // iOS 26 grouped list — inset card r:26, 52pt rows, 30×30 colored icon tiles function IOS26Group({ title, dark, children }) { const hc = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)'; const bg = dark ? '#1C1C1E' : '#fff'; return (
{title && (
{title}
)}
{children}
); } function IOS26Row({ dark, icon, iconBg, label, detail, right, chevron, isLast }) { const text = dark ? '#fff' : '#000'; const sec = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)'; const ter = dark ? 'rgba(235,235,245,0.3)' : 'rgba(60,60,67,0.3)'; const sep = dark ? 'rgba(84,84,88,0.5)' : 'rgba(60,60,67,0.12)'; return (
{icon && (
)}
{label}
{detail && {detail}} {right} {chevron && ( )} {!isLast && (
)}
); } function IOS26ThemeRow({ dark, th, isLast }) { const text = dark ? '#fff' : '#000'; const sec = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)'; const sep = dark ? 'rgba(84,84,88,0.5)' : 'rgba(60,60,67,0.12)'; const ter = dark ? 'rgba(235,235,245,0.3)' : 'rgba(60,60,67,0.3)'; return (
{th.name}
{th.sub}
{th.unlocked ?
:
} {!isLast &&
}
); } function Toggle({ on, onClick }) { return (
); } // ───────────────────────────────────────────────────────────── // 6. RESULTS // ───────────────────────────────────────────────────────────── function ResultsScreen({ dark, onBack, won = true }) { const t = themeFor(dark); return (
{/* gold particles for win */} {won && Array.from({length: 24}).map((_, i) => { const a = (i / 24) * Math.PI * 2; const r = 80 + (i % 4) * 40; return
; })}
{won ? 'Victory' : 'A close match'}
{won ? 'You won.' : 'Well played.'}
{won && (
GAMMON · 2 PTS
)}
{/* Stats grid */}
{[ { k: 'Match time', v: '12:48' }, { k: 'Hits', v: '4' }, { k: 'Doubles taken', v: '1' }, { k: 'Best roll', v: '6·6' }, { k: 'Final pip', v: '0 / 47' }, { k: 'Avg. luck', v: '+2.1' }, ].map(s => (
{s.k}
{s.v}
))}
{/* Pip-count history sparkline */}
Pip count
You
AI
); } function CTA({ label, primary, icon, dark }) { const t = themeFor(dark); return (
{icon && } {label}
); } // ───────────────────────────────────────────────────────────── // 7. TUTORIAL // ───────────────────────────────────────────────────────────── function TutorialScreen({ dark, onBack }) { const [page, setPage] = React.useState(0); const t = themeFor(dark); const cards = [ { n: '۱', en: 'One', title: 'The board', body: 'Twenty-four points form a circuit. Your home board is the bottom-right; you bear off there at the end.', illust: 'board' }, { n: '۲', en: 'Two', title: 'Roll & move', body: 'Roll two dice. Each die moves a checker that many points. Doubles let you play four moves of the same value.', illust: 'dice' }, { n: '۳', en: 'Three', title: 'Hit & the bar', body: 'Land on a single opposing checker to hit it. The captured checker goes to the bar — you must re-enter it before any other move.', illust: 'hit' }, { n: '۴', en: 'Four', title: 'Build a prime', body: 'Six points in a row form a prime — an unjumpable wall. Use it to block your opponent and gain tempo.', illust: 'prime' }, { n: '۵', en: 'Five', title: 'Bear off', body: 'Once all your checkers are home, dice rolls remove them from the board. First to bear off all fifteen wins.', illust: 'off' }, { n: '۶', en: 'Six', title: 'The cube', body: 'The doubling cube doubles the stakes. Offered before your roll; declined or accepted. A subtle psychological game within the game.', illust: 'cube' }, { n: '۷', en: 'Seven', title: 'Gammon & backgammon', body: 'Win before your opponent bears off any checker for a gammon (2×). If they still have a checker on the bar or in your home board — backgammon (3×).', illust: 'gammon' }, { n: '۸', en: 'Eight', title: 'A Persian heritage', body: 'Backgammon — تخته نرد — was played in the Sassanid courts of Persia over 1500 years ago. Boards have been found in Shahr-e Sukhteh dating back 5,000 years.', illust: 'heritage' }, ]; const card = cards[page]; return (
{/* Illustration */}
{card.n}
Chapter {card.en}
{card.title}
{card.body}
{/* dot pager */}
{cards.map((_, i) => (
setPage(i)} style={{ width: i === page ? 18 : 6, height: 6, borderRadius: 3, background: i === page ? NARD.c.turquoise : t.line, transition: 'all 200ms', cursor: 'pointer', }}/> ))}
setPage(Math.max(0, page - 1))} style={{ flex: 1, padding: '12px', borderRadius: 12, background: t.card, border: `0.5px solid ${t.line}`, fontFamily: FONT.sans, fontSize: 14, fontWeight: 600, textAlign: 'center', color: page === 0 ? t.fgFaint : t.fg, cursor: 'pointer', }}>Previous
setPage(Math.min(cards.length - 1, page + 1))} style={{ flex: 1, padding: '12px', borderRadius: 12, background: NARD.c.turquoise, color: NARD.c.paper, fontFamily: FONT.sans, fontSize: 14, fontWeight: 600, textAlign: 'center', cursor: 'pointer', }}>{page === cards.length - 1 ? 'Done' : 'Next'}
); } function TutorialIllustration({ kind, dark }) { // Simple flat-but-textured illustrations using the design vocabulary const c = themeFor(dark); if (kind === 'dice') return (
); if (kind === 'cube') return ; if (kind === 'board' || kind === 'prime' || kind === 'off') return (
); if (kind === 'hit') return (
→
); if (kind === 'gammon') return (
{Array.from({length: 8}).map((_, i) => )}
Gammon · ×2
); if (kind === 'heritage') return (
تخته نرد
); return ; } Object.assign(window, { SplashScreen, HomeScreen, GameScreen, DifficultyScreen, SettingsScreen, ResultsScreen, TutorialScreen, FONT });