From f6589b427638071e02ef55ea72feaa6bb92ee6bf 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 13:13:08 +0000
Subject: [PATCH] Improve emoji distribution in animation

Adjusted the positioning of emojis in the MemeAnimation component to spread them horizontally, ensuring they cover the full width of the animation container.
[skip gpt_engineer]
---
 src/components/game/animations/MemeAnimation.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/game/animations/MemeAnimation.tsx b/src/components/game/animations/MemeAnimation.tsx
index 6b87ea6..a5d5913 100644
--- a/src/components/game/animations/MemeAnimation.tsx
+++ b/src/components/game/animations/MemeAnimation.tsx
@@ -13,19 +13,20 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      // Add new emoji
+      // Add new emoji with better horizontal distribution
       setEmojis(current => {
         const newEmoji = {
           id: Date.now(),
           symbol: symbols[Math.floor(Math.random() * symbols.length)],
-          x: Math.random() * 80 + 10, // Random x position between 10% and 90%
+          // Spread more widely across the container width (from 5% to 95%)
+          x: Math.random() * 90 + 5,
         };
         return [...current, newEmoji];
       });
 
       // Clean up old emojis
       setEmojis(current => current.filter(emoji => Date.now() - emoji.id < 3000));
-    }, 300); // Add new emoji every 300ms
+    }, 300);
 
     return () => clearInterval(interval);
   }, []);