From fa9fa85b11735f6ffa34cd6260d64c3a5fd0532b 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:32:01 +0000
Subject: [PATCH] Adjust Community Animation Sizing

Ensure the CommunityAnimation component utilizes the full width and height of its container. Review and address any limitations that may have been overlooked in the current implementation.
[skip gpt_engineer]
---
 .../game/animations/CommunityAnimation.tsx    | 43 ++++++++++++++-----
 1 file changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/components/game/animations/CommunityAnimation.tsx b/src/components/game/animations/CommunityAnimation.tsx
index 4aa2002..d3aab66 100644
--- a/src/components/game/animations/CommunityAnimation.tsx
+++ b/src/components/game/animations/CommunityAnimation.tsx
@@ -2,14 +2,15 @@ import React from 'react';
 import { motion } from 'framer-motion';
 
 export const CommunityAnimation = ({ className = '' }: { className?: string }) => {
-  // Create multiple community groups with members
+  // Create multiple community groups with members, now using percentages for better spacing
   const groups = Array.from({ length: 3 }, (_, i) => ({
-    x: 25 + i * 25, // Spread groups horizontally
+    x: 20 + i * 30, // Better horizontal distribution (20%, 50%, 80%)
     y: 50, // Center vertically
     members: Array.from({ length: 8 }, (_, j) => ({
       id: i * 8 + j,
-      initialX: Math.random() * 100,
-      initialY: Math.random() * 100,
+      // Distribute initial positions across the full container
+      initialX: Math.random() * 90 + 5, // 5-95% to keep within bounds
+      initialY: Math.random() * 90 + 5, // 5-95% to keep within bounds
     }))
   }));
 
@@ -21,36 +22,56 @@ export const CommunityAnimation = ({ className = '' }: { className?: string }) =
           {group.members.map((member) => (
             <motion.div
               key={member.id}
-              className="absolute w-3 h-3 bg-yellow-500 rounded-full"
+              className="absolute w-2 h-2 bg-yellow-500 rounded-full"
               initial={{
                 x: `${member.initialX}%`,
                 y: `${member.initialY}%`,
                 opacity: 0,
+                scale: 0.5,
               }}
               animate={{
                 x: `${group.x}%`,
                 y: `${group.y}%`,
                 opacity: 1,
+                scale: 1,
               }}
               transition={{
                 duration: 2,
-                delay: member.id * 0.2,
+                delay: member.id * 0.1, // Reduced delay for faster animation
                 ease: "easeOut",
               }}
+              style={{
+                position: 'absolute',
+                transform: 'translate(-50%, -50%)', // Center the dot
+              }}
             />
           ))}
           
-          {/* Community boundary circles */}
+          {/* Community boundary circles with improved sizing and positioning */}
           <motion.div
-            className="absolute w-20 h-20 rounded-full border-2 border-yellow-500/30"
+            className="absolute rounded-full border-2 border-yellow-500/30"
             style={{
+              width: '25%', // Relative sizing
+              height: '60%', // Taller to accommodate members
               x: `${group.x}%`,
               y: `${group.y}%`,
               transform: 'translate(-50%, -50%)',
             }}
-            initial={{ scale: 0, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            transition={{ delay: 1.5, duration: 1 }}
+            initial={{ 
+              scale: 0, 
+              opacity: 0,
+              rotate: -180,
+            }}
+            animate={{ 
+              scale: 1, 
+              opacity: 1,
+              rotate: 0,
+            }}
+            transition={{ 
+              delay: 1.5, 
+              duration: 1,
+              ease: "easeOut",
+            }}
           />
         </React.Fragment>
       ))}