From 6c5d1ee0b1cfb3329580879ce6b4be1c6c6a69ec Mon Sep 17 00:00:00 2001 From: c0mrade Date: Mon, 1 Jun 2026 17:46:36 +0300 Subject: [PATCH] fix(wheel): keep spin sparkles in the outer ring, never near the centre MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Confirmed from the user's spin video: the sparkles bunched into the middle during a spin because they were placed at 16-40% from centre (some right by the hub). Push them all to a 34-43% radius (golden-angle distributed) so they ring the outer wheel and the centre stays clear — no sparkles crossing or near the centre. --- src/components/wheel/FortuneWheel.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/wheel/FortuneWheel.tsx b/src/components/wheel/FortuneWheel.tsx index 3bf5974..be28029 100644 --- a/src/components/wheel/FortuneWheel.tsx +++ b/src/components/wheel/FortuneWheel.tsx @@ -8,14 +8,14 @@ interface FortuneWheelProps { onSpinComplete: () => void; } -// Pre-generate sparkle positions (shown only while spinning). The old formula -// `20 + (i*10)%60 / 15 + (i*13)%70` left the first ~6 sparkles colinear (the -// modulo never wrapped for small i), so they lined up as a diagonal streak -// through the centre. Scatter them on a phyllotaxis (golden-angle) spiral -// inside the wheel instead — well-distributed, never colinear. +// 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) - const radius = 16 + (i % 4) * 8; // 16–40% from centre, kept within the wheel + 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)}%`,