mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
fix(wheel): remove the spin-only sparkle lights entirely
The extra lights that appear during a spin (and bunched into a line through the centre) were the SPARKLE_POSITIONS effect — yellow animate-ping dots rendered only while isSpinning. Moving/scattering them never satisfied; they're unwanted during the spin. Remove them outright: while spinning, only the rim LEDs remain — no extra lights, no centre line.
This commit is contained in:
@@ -8,21 +8,6 @@ interface FortuneWheelProps {
|
||||
onSpinComplete: () => void;
|
||||
}
|
||||
|
||||
// Pre-generate sparkle positions (shown only while spinning). They must stay in
|
||||
// the OUTER ring of the wheel and never near the hub — the old formula scattered
|
||||
// some right onto the centre, so during a spin the sparkles bunched into / streaked
|
||||
// through the middle. Distribute by golden angle at a large radius (34–43% from
|
||||
// centre) so they ring the wheel and the centre stays clear.
|
||||
const SPARKLE_POSITIONS = Array.from({ length: 8 }, (_, i) => {
|
||||
const angle = i * 2.39996; // golden angle (radians) → evenly spread, never colinear
|
||||
const radius = 34 + (i % 4) * 3; // 34–43% from centre: outer ring only, never central
|
||||
return {
|
||||
top: `${(50 + radius * Math.sin(angle)).toFixed(1)}%`,
|
||||
left: `${(50 + radius * Math.cos(angle)).toFixed(1)}%`,
|
||||
delay: `${i * 0.15}s`,
|
||||
};
|
||||
});
|
||||
|
||||
const FortuneWheel = memo(function FortuneWheel({
|
||||
prizes,
|
||||
isSpinning,
|
||||
@@ -423,25 +408,6 @@ const FortuneWheel = memo(function FortuneWheel({
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Sparkle effects when spinning - optimized with pre-calculated positions */}
|
||||
{isSpinning && (
|
||||
<div className="pointer-events-none absolute inset-0 overflow-hidden">
|
||||
{SPARKLE_POSITIONS.map((pos, i) => (
|
||||
<div
|
||||
key={`sparkle-${i}`}
|
||||
className="absolute h-2 w-2 animate-ping rounded-full bg-yellow-300"
|
||||
style={{
|
||||
top: pos.top,
|
||||
left: pos.left,
|
||||
animationDelay: pos.delay,
|
||||
animationDuration: '1.5s',
|
||||
opacity: 0.7,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user