From 4590de8347ed94ccae8698ddb6458ba7adb36a37 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:06:52 +0000
Subject: [PATCH] Fix emoji clustering in animation

Adjusted the positioning logic in the MemeAnimation component to ensure emojis spread out more evenly across the animation area, rather than clustering in the upper left corner.
[skip gpt_engineer]
---
 .../game/animations/MemeAnimation.tsx         | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/game/animations/MemeAnimation.tsx b/src/components/game/animations/MemeAnimation.tsx
index 76b9f2b..554765c 100644
--- a/src/components/game/animations/MemeAnimation.tsx
+++ b/src/components/game/animations/MemeAnimation.tsx
@@ -16,19 +16,18 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
     const memes: MemeSymbol[] = [];
     const symbols = ['💡', '🎯', '📱', '🔄', '🌐', '💫'];
     
-    // Create a 3x3 grid of meme symbols
-    for (let row = 0; row < 3; row++) {
-      for (let col = 0; col < 3; col++) {
-        const baseSymbol = symbols[Math.floor(Math.random() * symbols.length)];
-        memes.push({
-          id: row * 3 + col,
-          symbol: baseSymbol,
-          x: 20 + (col * 30), // Spread across horizontally
-          y: 20 + (row * 30), // Spread across vertically
-          scale: 0.8 + Math.random() * 0.4,
-          delay: (row * 3 + col) * 0.15 // Stagger the animations
-        });
-      }
+    // Create a wider spread of meme symbols
+    for (let i = 0; i < 9; i++) {
+      const baseSymbol = symbols[Math.floor(Math.random() * symbols.length)];
+      // Distribute across the full width (10-90%) and height (10-90%)
+      memes.push({
+        id: i,
+        symbol: baseSymbol,
+        x: 10 + (Math.random() * 80), // Spread between 10% and 90% of width
+        y: 10 + (Math.random() * 80), // Spread between 10% and 90% of height
+        scale: 0.8 + Math.random() * 0.4,
+        delay: i * 0.15 // Stagger the animations
+      });
     }
     return memes;
   };
@@ -70,14 +69,14 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
               opacity: 1,
               x: [
                 `${meme.x}%`,
-                `${meme.x + (Math.random() * 40 - 20)}%`,
-                `${meme.x + (Math.random() * 60 - 30)}%`
+                `${meme.x + (Math.random() * 60 - 30)}%`, // Wider movement range
+                `${meme.x + (Math.random() * 80 - 40)}%`  // Even wider final position
               ],
               y: [
                 `${meme.y}%`,
-                `${meme.y + (Math.random() * 40 - 20)}%`,
-                `${meme.y + (Math.random() * 60 - 30)}%`
-              ],
+                `${meme.y + (Math.random() * 60 - 30)}%`, // Wider movement range
+                `${meme.y + (Math.random() * 80 - 40)}%`  // Even wider final position
+              ]
             }}
             transition={{
               delay: meme.delay,