diff --git a/src/components/game/animations/MemeAnimation.tsx b/src/components/game/animations/MemeAnimation.tsx index a9d2530..6b87ea6 100644 --- a/src/components/game/animations/MemeAnimation.tsx +++ b/src/components/game/animations/MemeAnimation.tsx @@ -1,32 +1,34 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; -interface MemeSymbol { +interface Emoji { id: number; symbol: string; - direction: number; // angle in degrees - distance: number; + x: number; } export const MemeAnimation = ({ className = '' }: { className?: string }) => { - const createMemeWave = () => { - const memes: MemeSymbol[] = []; - const symbols = ['💡', '🎯', '📱', '🔄', '🌐', '💫']; - - // 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)]; - memes.push({ - id: i, - symbol: baseSymbol, - 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; - }; + const [emojis, setEmojis] = useState([]); + const symbols = ['💡', '🎯', '📱', '🔄', '🌐', '💫', '❤️', '⭐', '🔁']; - const memeSymbols = createMemeWave(); + useEffect(() => { + const interval = setInterval(() => { + // Add new emoji + 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% + }; + return [...current, newEmoji]; + }); + + // Clean up old emojis + setEmojis(current => current.filter(emoji => Date.now() - emoji.id < 3000)); + }, 300); // Add new emoji every 300ms + + return () => clearInterval(interval); + }, []); return (
@@ -46,9 +48,9 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => { ))}
- {/* Central source of memes */} + {/* Central source icon */} { 🌟 - {/* Spreading meme symbols */} + {/* Floating emojis */} - {memeSymbols.map((meme, index) => { - const angle = meme.direction * (Math.PI / 180); - const delay = index * 0.1; - - return ( - - {meme.symbol} - - {/* Echo effect */} - - {meme.symbol} - - - ); - })} + {emojis.map((emoji) => ( + + {emoji.symbol} + + ))} - - {/* Floating engagement indicators */} - {[...Array(5)].map((_, i) => ( - - {['🔁', '❤️', '⭐'][Math.floor(Math.random() * 3)]} - - ))} ); }; \ No newline at end of file