/* eslint-disable */
// Visual primitives for the craps felt — chips, dice, place cells, bet zones,
// brass rail, hint panel, result banner.
const { useState, useEffect, useRef } = React;
const CHIP_DEFS = window.CR_RULES.CHIP_DEFS;
// ── Chip ────────────────────────────────────────────────────────────────────
function Chip({ value, size = 64, onClick, disabled, raised, label }) {
const def = CHIP_DEFS.find(c => c.value === value) || CHIP_DEFS[0];
return (
);
}
// Compact stake indicator shown inside bet zones.
function ChipBadge({ amount, size = 28, label }) {
if (!amount) return null;
// Pick the largest chip that fits; e.g., $250 → $100; $5 → $5.
let def = CHIP_DEFS[0];
for (const c of CHIP_DEFS) if (amount >= c.value) def = c;
return (
{label != null ? label : '$' + amount}
);
}
// ── Die / DiceTray ──────────────────────────────────────────────────────────
const PIPS = {
1: [[50, 50]],
2: [[27, 27], [73, 73]],
3: [[27, 27], [50, 50], [73, 73]],
4: [[27, 27], [73, 27], [27, 73], [73, 73]],
5: [[27, 27], [73, 27], [50, 50], [27, 73], [73, 73]],
6: [[27, 25], [73, 25], [27, 50], [73, 50], [27, 75], [73, 75]]
};
function Die({ value, rolling }) {
const [face, setFace] = useState(value);
useEffect(() => {
if (rolling) {
const id = setInterval(() => setFace(1 + Math.floor(Math.random() * 6)), 60);
return () => clearInterval(id);
}
setFace(value);
}, [rolling, value]);
return (
{PIPS[face].map(([x, y], i) => (
))}
);
}
// ── FeltBackdrop ────────────────────────────────────────────────────────────
function FeltBackdrop() {
return (
);
}
function FeltLogo() {
return (
Limestone
CRAPS · 3× ODDS
);
}
// ── BrassRail ───────────────────────────────────────────────────────────────
function BrassRail({ bankroll, streak, rolls, peak, showHints, onToggleHints, soundOn, onToggleSound }) {
return (
);
}
function RailStat({ label, value, accent, highlight, small }) {
return (
);
}
// ── BetZone (generic clickable rectangular area) ────────────────────────────
function BetZone({ id, label, sublabel, hint, amount, disabled, illegal, isPoint, onClick, onHoverChange, children, style, badgeAmount }) {
const baseStyle = {
position: 'relative',
padding: '12px 14px',
background: isPoint
? 'linear-gradient(180deg, rgba(80,52,18,.5), rgba(40,24,10,.55))'
: 'rgba(20,12,6,.32)',
border: isPoint
? '1.5px solid rgba(245,216,150,.85)'
: '1px solid rgba(201,162,106,.4)',
borderRadius: 10,
cursor: disabled ? 'not-allowed' : 'pointer',
opacity: disabled ? 0.4 : 1,
transition: 'all .15s ease',
boxShadow: isPoint
? 'inset 0 0 30px rgba(245,216,150,.15), 0 0 18px rgba(245,216,150,.25)'
: 'inset 0 1px 0 rgba(255,255,255,.05)',
color: 'var(--ivory)',
overflow: 'hidden',
...style
};
return (
onHoverChange && onHoverChange(true, id)}
onMouseLeave={() => onHoverChange && onHoverChange(false, id)}
>
{label && (
{label}
)}
{sublabel && (
{sublabel}
)}
{hint && (
{hint}
)}
{disabled && (
🔒
)}
{amount > 0 && (
)}
{children}
onHoverChange && onHoverChange(true, 'place' + n)}
onMouseLeave={() => onHoverChange && onHoverChange(false, 'place' + n)}
>
{n}
Place {placeStr}
{totals.place > 0 && (
)}
{totals.comePoint > 0 && (
0 ? `+O${totals.comeOdds}` : '')}
amount={totals.comePoint}
color="#9eddb8"
onClick={(e) => { e.stopPropagation(); if (onClickComeOdds) onClickComeOdds(); }}
title="Click to add come odds"
/>
)}
{totals.dontPoint > 0 && (
0 ? `+O${totals.dontOdds}` : '')}
amount={totals.dontPoint}
color="#ff9286"
onClick={(e) => { e.stopPropagation(); if (onClickDontComeOdds) onClickDontComeOdds(); }}
title="Click to lay don't-come odds"
/>
)}
{isPoint && (
ON
)}
{label}
${amount}
);
}
// ── HintPanel ───────────────────────────────────────────────────────────────
function HintPanel({ hint, onLearnMore, expanded }) {
if (!hint) return null;
const headerLabel =
hint.kind === 'caution' ? 'Caution' :
hint.kind === 'odds' ? 'Best move' :
hint.kind === 'come' ? 'Suggested' :
hint.kind === 'note' ? 'Note' :
hint.kind === 'roll' ? 'Ready' :
'Strategy';
const riskColor =
hint.riskClass === 'risk-good' ? '#9eddb8' :
hint.riskClass === 'risk-bad' ? '#ff9286' : '#e6c590';
return (
{headerLabel}
{hint.action}
{hint.explanation}
{hint.riskLabel}
{hint.detail && (
)}
{expanded && hint.detail && (
{hint.detail}
)}
);
}
// ── ResultBanner ────────────────────────────────────────────────────────────
function ResultBanner({ kind, total, totalWon }) {
if (!kind) return null;
const map = {
natural: { title: 'NATURAL', sub: total === 7 ? 'Seven on the come-out' : 'Eleven on the come-out', color: '#ffd97a', glow: '#ffd97a' },
craps: { title: 'CRAPS', sub: `Came out on ${total}`, color: '#f29a8c', glow: '#c0392b' },
point_set: { title: 'POINT IS ' + total, sub: 'Roll the point before a seven', color: '#9eddb8', glow: '#9eddb8' },
point_made: { title: 'POINT MADE', sub: totalWon > 0 ? `+$${totalWon}` : 'Pass line wins', color: '#ffd97a', glow: '#ffd97a' },
seven_out: { title: 'SEVEN OUT', sub: 'Line away — new shooter', color: '#f29a8c', glow: '#c0392b' },
win: { title: 'WIN', sub: totalWon > 0 ? `+$${totalWon}` : 'Hit', color: '#9eddb8', glow: '#9eddb8' },
lose: { title: 'LOSE', sub: 'Bets cleared', color: '#f29a8c', glow: '#c0392b' },
push: { title: 'PUSH', sub: 'Bet returned', color: '#e6c590', glow: '#c9a26a' }
};
const m = map[kind] || map.win;
return (
);
}
// ── Tooltip overlay ─────────────────────────────────────────────────────────
function BetTooltip({ id, info }) {
if (!id || !info) return null;
return (
{info.name}
Pays {info.payout} · Edge {info.edge.toFixed(2)}%
);
}
// ── BrokeModal ──────────────────────────────────────────────────────────────
function BrokeModal({ playerName, onReload }) {
return (
Limestone Games
Out of chips.
{`The dice cleaned you out, ${playerName || 'friend'}.`}
);
}
// ── NameModal ───────────────────────────────────────────────────────────────
function NameModal({ initialName = '', onSave, onCancel }) {
const [name, setName] = useState(initialName);
const inputRef = useRef(null);
useEffect(() => {
const id = setTimeout(() => {
inputRef.current?.focus();
inputRef.current?.select();
}, 50);
return () => clearTimeout(id);
}, []);
function submit(e) {
if (e) e.preventDefault();
if (name.trim()) onSave(name);
}
return (
);
}
Object.assign(window, {
Chip, ChipBadge,
Die, DiceTray,
FeltBackdrop, FeltLogo,
BrassRail,
BetZone, PlaceNumberCell,
HintPanel, ResultBanner, BetTooltip,
BrokeModal, NameModal
});