From bc8503469dc6651accb77f41b865e443849b75f2 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Mon, 1 Jun 2026 18:12:55 +0300
Subject: [PATCH] fix(wheel): remove the spin-only sparkle lights entirely
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/components/wheel/FortuneWheel.tsx | 34 ---------------------------
 1 file changed, 34 deletions(-)

diff --git a/src/components/wheel/FortuneWheel.tsx b/src/components/wheel/FortuneWheel.tsx
index 7b64fd4..3fd8de1 100644
--- a/src/components/wheel/FortuneWheel.tsx
+++ b/src/components/wheel/FortuneWheel.tsx
@@ -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>
   );
 });