From 92f71743d5f7c791d29790b0f779fc29b8450cdb 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:09:31 +0000
Subject: [PATCH] Refactor clustering logic

Reassess and modify the clustering logic to improve distribution and organization within the codebase.
[skip gpt_engineer]
---
 .../game/animations/MemeAnimation.tsx         | 116 +++++++++---------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/src/components/game/animations/MemeAnimation.tsx b/src/components/game/animations/MemeAnimation.tsx
index 554765c..a9d2530 100644
--- a/src/components/game/animations/MemeAnimation.tsx
+++ b/src/components/game/animations/MemeAnimation.tsx
@@ -4,29 +4,23 @@ import { motion, AnimatePresence } from 'framer-motion';
 interface MemeSymbol {
   id: number;
   symbol: string;
-  x: number;
-  y: number;
-  scale: number;
-  delay: number;
+  direction: number; // angle in degrees
+  distance: number;
 }
 
 export const MemeAnimation = ({ className = '' }: { className?: string }) => {
-  // Create a grid of starting positions
   const createMemeWave = () => {
     const memes: MemeSymbol[] = [];
     const symbols = ['💡', '🎯', '📱', '🔄', '🌐', '💫'];
     
-    // Create a wider spread of meme symbols
-    for (let i = 0; i < 9; i++) {
+    // Create memes that will spread out in different directions
+    for (let i = 0; i < 12; 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
+        direction: (i * 30) + Math.random() * 15, // Spread in different directions (0-360 degrees)
+        distance: 40 + Math.random() * 40, // Variable distance from center (40-80%)
       });
     }
     return memes;
@@ -52,60 +46,65 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
         ))}
       </div>
 
-      {/* Meme symbols with viral spread effect */}
+      {/* Central source of memes */}
+      <motion.div
+        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-3xl"
+        initial={{ scale: 0 }}
+        animate={{ scale: [0, 1.2, 1] }}
+        transition={{ duration: 0.5 }}
+      >
+        🌟
+      </motion.div>
+
+      {/* Spreading meme symbols */}
       <AnimatePresence>
-        {memeSymbols.map((meme) => (
-          <motion.div
-            key={meme.id}
-            className="absolute text-2xl select-none"
-            initial={{
-              x: `${meme.x}%`,
-              y: `${meme.y}%`,
-              scale: 0,
-              opacity: 0
-            }}
-            animate={{
-              scale: meme.scale,
-              opacity: 1,
-              x: [
-                `${meme.x}%`,
-                `${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() * 60 - 30)}%`, // Wider movement range
-                `${meme.y + (Math.random() * 80 - 40)}%`  // Even wider final position
-              ]
-            }}
-            transition={{
-              delay: meme.delay,
-              duration: 2,
-              repeat: Infinity,
-              repeatType: "reverse",
-              ease: "easeInOut"
-            }}
-          >
-            {meme.symbol}
-            
-            {/* Echo effect for viral spread visualization */}
+        {memeSymbols.map((meme, index) => {
+          const angle = meme.direction * (Math.PI / 180);
+          const delay = index * 0.1;
+
+          return (
             <motion.div
-              className="absolute inset-0 text-yellow-500"
-              initial={{ scale: 1, opacity: 0 }}
+              key={meme.id}
+              className="absolute text-2xl select-none"
+              initial={{
+                scale: 0,
+                x: '50%',
+                y: '50%',
+                opacity: 0,
+              }}
               animate={{
-                scale: [1, 1.5, 2],
-                opacity: [0.5, 0.2, 0],
+                scale: 1,
+                opacity: 1,
+                x: `calc(50% + ${Math.cos(angle) * meme.distance}%)`,
+                y: `calc(50% + ${Math.sin(angle) * meme.distance}%)`,
               }}
               transition={{
                 duration: 1.5,
-                repeat: Infinity,
-                delay: meme.delay + 0.5
+                delay,
+                ease: "easeOut"
               }}
             >
               {meme.symbol}
+              
+              {/* Echo effect */}
+              <motion.div
+                className="absolute inset-0 text-yellow-500"
+                initial={{ scale: 1, opacity: 0 }}
+                animate={{
+                  scale: [1, 1.5, 2],
+                  opacity: [0.5, 0.2, 0],
+                }}
+                transition={{
+                  duration: 1.5,
+                  repeat: Infinity,
+                  delay: delay + 0.5
+                }}
+              >
+                {meme.symbol}
+              </motion.div>
             </motion.div>
-          </motion.div>
-        ))}
+          );
+        })}
       </AnimatePresence>
 
       {/* Floating engagement indicators */}
@@ -114,11 +113,12 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
           key={`indicator-${i}`}
           className="absolute text-sm text-yellow-500/70"
           initial={{
-            x: `${Math.random() * 100}%`,
-            y: '100%',
+            x: '50%',
+            y: '50%',
             opacity: 0
           }}
           animate={{
+            x: `${15 + Math.random() * 70}%`,
             y: '-20%',
             opacity: [0, 1, 0],
           }}