feat(fortune-wheel): add wheel-card and wheel-slice-icon class hooks

Lets a runtime theme scope the wheel card background and scale the slice
prize icons without touching defaults (the hooks add no styles on their own).
This commit is contained in:
medievalshell
2026-05-31 17:28:46 +02:00
parent dc5b1e694d
commit 5a437b7eda
@@ -206,7 +206,7 @@ export const FortuneWheelView: FC<{}> = () =>
const canSpin = ((freeSpins + extraSpins) > 0) && !isSpinning && (prizes.length > 0); const canSpin = ((freeSpins + extraSpins) > 0) && !isSpinning && (prizes.length > 0);
return ( return (
<NitroCard className="w-[780px] max-w-[96vw]" uniqueKey="fortune-wheel"> <NitroCard className="wheel-card w-[780px] max-w-[96vw]" uniqueKey="fortune-wheel">
<NitroCard.Header headerText={ LocalizeText('wheel.title') } onCloseClick={ () => setIsVisible(false) } /> <NitroCard.Header headerText={ LocalizeText('wheel.title') } onCloseClick={ () => setIsVisible(false) } />
<NitroCard.Content> <NitroCard.Content>
<div className="relative"> <div className="relative">
@@ -237,7 +237,7 @@ export const FortuneWheelView: FC<{}> = () =>
key={ prize.id } key={ prize.id }
className="absolute left-1/2 top-1/2" className="absolute left-1/2 top-1/2"
style={ { transform: `rotate(${ centerAngle }deg) translateY(-${ ICON_RADIUS }px) rotate(-${ centerAngle }deg)` } }> style={ { transform: `rotate(${ centerAngle }deg) translateY(-${ ICON_RADIUS }px) rotate(-${ centerAngle }deg)` } }>
<div className="-translate-x-1/2 -translate-y-1/2"> <div className="wheel-slice-icon -translate-x-1/2 -translate-y-1/2">
{ renderPrizeIcon(prize) } { renderPrizeIcon(prize) }
</div> </div>
</div>); </div>);