/* eslint-disable */
// Table-side components: FeltBackdrop, BrassRail, Paytable, ResultBanner, HintPanel, CoinSelector, DealDrawButton.
const PAYTABLE_ORDER = [
'royal-flush','straight-flush','four-of-a-kind','full-house','flush',
'straight','three-of-a-kind','two-pair','jacks-or-better'
];
function FeltBackdrop() {
return (
);
}
function BrassRail({ bankroll, hands, wins, royals, best, showHints, onToggleHints }) {
const winRate = hands ? Math.round(wins/hands*100) : null;
return (
);
}
function RailStat({ label, value, accent, highlight, small }) {
return (
);
}
function Paytable({ coinsBet, winningKey }) {
return (
| Hand |
{[1,2,3,4,5].map(c => (
{c} coin{c === 1 ? '' : 's'} |
))}
{PAYTABLE_ORDER.map(key => {
const row = VP_HAND.PAYTABLE[key];
const isActive = winningKey === key;
return (
| {row.name} |
{[0,1,2,3,4].map(i => (
{row.pay[i]} |
))}
);
})}
);
}
function ResultBanner({ name, payout }) {
if (!name) return null;
const isWin = payout > 0;
return (
{name}{isWin ? ` +${payout}` : ''}
);
}
function HintPanel({ rec }) {
if (!rec || !rec.action) return null;
const riskColor = rec.riskClass === 'risk-good' ? '#9eddb8'
: rec.riskClass === 'risk-bad' ? '#ff9286' : 'var(--brass-2)';
return (
Basic strategy says
{rec.action}
{rec.explanation}
{rec.riskLabel && (
{rec.riskLabel}
)}
);
}
function CoinSelector({ coins, onChange, onBetMax, disabled }) {
return (
Coins
{[1,2,3,4,5].map(n => (
))}
);
}
function DealDrawButton({ phase, canDeal, onClick }) {
const label = phase === 'holding' ? 'Draw' : 'Deal';
const enabled = (phase === 'betting' && canDeal) || phase === 'holding';
return (
);
}
Object.assign(window, { FeltBackdrop, BrassRail, Paytable, ResultBanner, HintPanel, CoinSelector, DealDrawButton });