import type { CSSProperties, ReactNode } from "react"; import { cn } from "@/lib/utils"; import { CARD_SIZE_CLASS, PlayingCard, type CardRank, type PlayingCardFace, type PlayingCardSize, type PlayingCardValue, } from "@/components/ui/playing-card"; /** A blackjack hand is made of ordinary playing cards. */ export type BlackjackCardValue = PlayingCardValue; export type BlackjackHandOutcome = "WIN" | "LOSE" | "PUSH"; const RANK_VALUE: Record = { A: 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9, "10": 10, J: 10, Q: 10, K: 10, }; /** * Settled colours. One value paints both the card ring and the total, so * `outcomeColor` on the hand overrides the whole settled state. */ const OUTCOME_COLOR: Record = { WIN: "#6AE301", LOSE: "#FF0C01", PUSH: "#FDB601", }; const CARD_OVERLAP = "-ml-[calc(var(--playing-card-w)*0.55)]"; const CARDS_MIN_H = "min-h-[calc(var(--playing-card-w)*1.4)]"; const CARD_SETTLED = "ring-1 ring-[var(--bj-outcome)] ring-offset- ring-offset-background"; /** * How tightly the row arcs, as a share of card width. Cards tilt about their * own centre and drop by the arc's sag, so the hand curves without spreading. */ const FAN_SAG = 5.25; /** One card's share of the fan, centred on the row. */ function fanStyle( index: number, count: number, curve: number, ): CSSProperties | undefined { if (curve === 0 || count < 2) { return undefined; } const angle = curve * (index / (count - 1) - 0.5); const sag = FAN_SAG * (1 - Math.cos((Math.abs(angle) * Math.PI) / 180)); return { rotate: `${angle.toFixed(2)}deg`, translate: `0 calc(var(--playing-card-w) * ${sag.toFixed(4)})`, }; } /** * Blackjack totals for a set of cards. * * Aces count as 1 for `hard`; one ace may count as 11 for `soft` when that * stays legal. `best` is the highest legal total, or the hard total when bust. */ export function getBlackjackHandTotals(cards: readonly PlayingCardValue[]): { hard: number; soft: number | null; best: number; bust: boolean; } { let hard = 0; let aces = 0; for (const card of cards) { hard += RANK_VALUE[card.rank]; if (card.rank === "A") { aces += 1; } } const soft = aces > 0 && hard + 10 <= 21 ? hard + 10 : null; const best = soft ?? hard; return { hard, soft, best, bust: best > 21 }; } export type BlackjackHandHeaderState = { label: ReactNode; /** "–" while cards are hidden, otherwise "7 / 17" or "21". */ total: string; }; export type BlackjackHandProps = { label?: ReactNode; cards: readonly PlayingCardValue[]; hiddenCards?: number; /** Card size for the whole hand. */ size?: PlayingCardSize; /** Card face layout for the whole hand. */ face?: PlayingCardFace; /** Background image for every hidden card in this hand. */ backImage?: string; /** Total degrees of arc across the hand; omit or 0 for a flat row. */ curve?: number; /** Overrides the settled colour for this hand; any CSS colour. */ outcomeColor?: string; /** `false` drops the header; a function replaces it with your own. */ header?: false | ((state: BlackjackHandHeaderState) => ReactNode); active?: boolean; outcome?: BlackjackHandOutcome; className?: string; cardsClassName?: string; }; export function BlackjackHand({ label, cards, hiddenCards = 0, size = "base", face, backImage, curve = 0, active, outcome, outcomeColor, header, className, cardsClassName, }: BlackjackHandProps) { const totals = getBlackjackHandTotals(cards); const total = hiddenCards > 0 ? "-" : totals.soft !== null && totals.soft < 21 ? `${totals.hard} / ${totals.soft}` : String(totals.best); const count = cards.length + hiddenCards; const cardClassName = (index: number) => cn(index > 0 && CARD_OVERLAP, outcome && CARD_SETTLED); return (

{header === false ? null : typeof header === "function" ? ( header({ label, total }) ) : (

{label ? ( {label} ) : null} {total}

)}

{cards.map((card, index) => ( ))} {Array.from({ length: hiddenCards }, (_, index) => (

); }

Dealer and player

Code