mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
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:
@@ -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>);
|
||||||
|
|||||||
Reference in New Issue
Block a user