etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(wheel): keep spin sparkles in the outer ring, never near the centre

Browse Source 
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.
This commit is contained in:
c0mrade
2026-06-01 17:46:36 +03:00
parent 7716e32eec
commit 6c5d1ee0b1
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/wheel/FortuneWheel.tsx
View File

@@ -8,14 +8,14 @@ interface FortuneWheelProps {
onSpinComplete: () => void; onSpinComplete: () => void;
} }
// Pre-generate sparkle positions (shown only while spinning). The old formula // Pre-generate sparkle positions (shown only while spinning). They must stay in
// `20 + (i*10)%60 / 15 + (i*13)%70` left the first ~6 sparkles colinear (the // the OUTER ring of the wheel and never near the hub — the old formula scattered
// modulo never wrapped for small i), so they lined up as a diagonal streak // some right onto the centre, so during a spin the sparkles bunched into / streaked
// through the centre. Scatter them on a phyllotaxis (golden-angle) spiral // through the middle. Distribute by golden angle at a large radius (34–43% from
// inside the wheel instead — well-distributed, never colinear. // centre) so they ring the wheel and the centre stays clear.
const SPARKLE_POSITIONS = Array.from({ length: 8 }, (_, i) => { const SPARKLE_POSITIONS = Array.from({ length: 8 }, (_, i) => {
const angle = i * 2.39996; // golden angle (radians) const angle = i * 2.39996; // golden angle (radians) → evenly spread, never colinear
const radius = 16 + (i % 4) * 8; // 16–40% from centre, kept within the wheel const radius = 34 + (i % 4) * 3; // 34–43% from centre: outer ring only, never central
return { return {
top: `${(50 + radius * Math.sin(angle)).toFixed(1)}%`, top: `${(50 + radius * Math.sin(angle)).toFixed(1)}%`,
left: `${(50 + radius * Math.cos(angle)).toFixed(1)}%`, left: `${(50 + radius * Math.cos(angle)).toFixed(1)}%`,