diff --git a/src/app/(frontend)/styles.css b/src/app/(frontend)/styles.css index 74a2c4e..fdea189 100644 --- a/src/app/(frontend)/styles.css +++ b/src/app/(frontend)/styles.css @@ -2918,22 +2918,34 @@ exact number always rides alongside in a text label. Pile heights are set inline from the chip count so nothing clips or overlaps. */ .bj-chip-stack { + --bj-chip-w: 1.6rem; + --bj-chip-h: 0.95rem; + --bj-chip-step: 0.3rem; display: inline-flex; align-items: flex-end; gap: 0.3rem; } +/* Compact piles (sm) share the same markup with smaller discs so dense + surfaces like poker's bet pills and console readouts keep their height. */ +.bj-chip-stack-sm { + --bj-chip-w: 1.15rem; + --bj-chip-h: 0.68rem; + --bj-chip-step: 0.2rem; + gap: 0.22rem; +} + .bj-chip-pile { position: relative; display: inline-block; - width: 1.6rem; + width: var(--bj-chip-w, 1.6rem); } .bj-chip { position: absolute; left: 0; - width: 1.6rem; - height: 0.95rem; + width: var(--bj-chip-w, 1.6rem); + height: var(--bj-chip-h, 0.95rem); border: 2px dashed rgb(255 255 255 / 72%); border-radius: 50%; box-shadow: diff --git a/src/components/frontend/minigames/blackjack/BlackjackChipStack.tsx b/src/components/frontend/minigames/blackjack/BlackjackChipStack.tsx index 309f10b..361feb0 100644 --- a/src/components/frontend/minigames/blackjack/BlackjackChipStack.tsx +++ b/src/components/frontend/minigames/blackjack/BlackjackChipStack.tsx @@ -6,7 +6,9 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp /** * Renders an amount as a pile of casino chips: denomination-colored CSS * discs stacked into piles, popping in as the amount grows. Purely visual; - * the exact number always rides alongside in a text label. + * the exact number always rides alongside in a text label. `size="sm"` + * renders smaller discs for dense surfaces (poker bet pills, console + * readouts) without forking the markup. */ interface ChipDenomination { @@ -55,10 +57,6 @@ export function chipFlightChips(amount: number, maxChips = 8): FlightChip[] { return chips; } -/** Must match the .bj-chip height + vertical step in styles.css. */ -const CHIP_HEIGHT_REM = 0.95; -const CHIP_STEP_REM = 0.3; - interface ChipPile { readonly key: string; readonly tone: string; @@ -96,27 +94,37 @@ function pileUp(amount: number): ChipPile[] { export function BlackjackChipStack({ amount, className, + size = "md", }: { readonly amount: number; readonly className?: string; + readonly size?: "md" | "sm"; }) { if (amount <= 0) return null; const piles = pileUp(amount); return ( -