From c6eec255712474aa449cc8d438fa6924ac6863ff Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 15 Dec 2024 14:58:16 +0000
Subject: [PATCH] Fix dot overlap in animations

Adjusted the positioning of individual dots in the animations to prevent overlap, ensuring they spread out or float at a larger distance from each other for better visibility.
[skip gpt_engineer]
---
 src/components/game/animations/CommunityAnimation.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/game/animations/CommunityAnimation.tsx b/src/components/game/animations/CommunityAnimation.tsx
index fe02114..a8f6e9d 100644
--- a/src/components/game/animations/CommunityAnimation.tsx
+++ b/src/components/game/animations/CommunityAnimation.tsx
@@ -9,6 +9,7 @@ export const CommunityAnimation = ({ className = '' }: { className?: string }) =
       id: i * 8 + j,
       initialX: Math.random() * 100,
       initialY: Math.random() * 100,
+      angle: (j * (360 / 8)) * (Math.PI / 180) // Convert to radians, spread evenly in 360 degrees
     }))
   }));
 
@@ -87,8 +88,8 @@ export const CommunityAnimation = ({ className = '' }: { className?: string }) =
                   scale: 0.5,
                 }}
                 animate={{
-                  x: `${(Math.cos(member.id) * 30)}%`,
-                  y: `${(Math.sin(member.id) * 30)}%`,
+                  x: `${Math.cos(member.angle) * 35}%`, // Increased radius to 35
+                  y: `${Math.sin(member.angle) * 35}%`, // Increased radius to 35
                   opacity: 1,
                   scale: 1,
                 }}