From 478350195b9da0bdd62ede9146e5b9966b66ecc4 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:27:11 +0000
Subject: [PATCH] Fix emoji positioning in animation

Adjusted the starting position of emojis in the MemeAnimation component to ensure they begin at the bottom of the container and utilize the full width for randomization, preventing clustering in the upper left corner.
[skip gpt_engineer]
---
 src/components/game/animations/MemeAnimation.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/game/animations/MemeAnimation.tsx b/src/components/game/animations/MemeAnimation.tsx
index 0d08ea7..278d57b 100644
--- a/src/components/game/animations/MemeAnimation.tsx
+++ b/src/components/game/animations/MemeAnimation.tsx
@@ -17,7 +17,7 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
         const newEmoji = {
           id: Date.now(),
           symbol: symbols[Math.floor(Math.random() * symbols.length)],
-          x: Math.random() * 100,
+          x: Math.random() * 100, // Random position across full width (0-100%)
         };
         return [...current, newEmoji];
       });
@@ -56,21 +56,25 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
         🌟
       </motion.div>
 
-      {/* Floating emojis with full width container */}
-      <div className="absolute inset-0 w-full">
+      {/* Container for emojis with explicit positioning context */}
+      <div className="absolute inset-0">
         <AnimatePresence>
           {emojis.map((emoji) => (
             <motion.div
               key={emoji.id}
-              className="absolute text-2xl bottom-0"
+              className="absolute text-2xl"
+              style={{
+                left: `${emoji.x}%`,
+                bottom: 0, // Start at bottom
+                transform: 'translateX(-50%)', // Center horizontally
+              }}
               initial={{ 
                 y: '0%',
-                x: `${emoji.x}%`,
                 opacity: 0,
                 scale: 0.5
               }}
               animate={{ 
-                y: '-100%',
+                y: '-400%', // Move up relative to container height
                 opacity: [0, 1, 1, 0],
                 scale: [0.5, 1, 1, 0.8]
               }}