import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; const FloatingNumber = ({ value, x, y }) => { const [opacity, setOpacity] = useState(1); const [posY, setPosY] = useState(y); useEffect(() => { const animation = setInterval(() => { setOpacity(prev => prev - 0.1); setPosY(prev => prev - 2); }, 50); return () => clearInterval(animation); }, []); if (opacity <= 0) return null; return (

+{value}

); }; const Achievement = ({ message }) => { const [show, setShow] = useState(true); useEffect(() => { const timer = setTimeout(() => setShow(false), 3000); return () => clearTimeout(timer); }, []); if (!show) return null; return (

🏆 {message}

); }; const App = () => { const [mainHue, setMainHue] = useState(0); const [multiplierHue, setMultiplierHue] = useState(120); const [autoClickerHue, setAutoClickerHue] = useState(240); const [autoLockerHue, setAutoLockerHue] = useState(60); const [speedHue, setSpeedHue] = useState(180); const [count, setCount] = useState(0); const [multiplier, setMultiplier] = useState(1); const [autoClickers, setAutoClickers] = useState(0); const [autoLockers, setAutoLockers] = useState(0); const [clickSpeed, setClickSpeed] = useState(1); const [lastSaved, setLastSaved] = useState(Date.now()); const [floatingNumbers, setFloatingNumbers] = useState([]); const [achievements, setAchievements] = useState([]); const [unlockedAchievements, setUnlockedAchievements] = useState(new Set()); // Load saved state useEffect(() => { const savedState = localStorage.getItem('clickerState'); if (savedState) { const { count, multiplier, autoClickers, autoLockers, clickSpeed, timestamp } = JSON.parse(savedState); setCount(count); setMultiplier(multiplier); setAutoClickers(autoClickers); setAutoLockers(autoLockers || 0); setClickSpeed(clickSpeed || 1); // Calculate offline progress const timeDiff = Math.floor((Date.now() - timestamp) / 1000); setCount(prev => prev + (autoClickers * timeDiff)); } }, []); // Save state every 5 seconds useEffect(() => { const saveInterval = setInterval(() => { localStorage.setItem('clickerState', JSON.stringify({ count, multiplier, autoClickers, autoLockers, clickSpeed, timestamp: Date.now() })); setLastSaved(Date.now()); }, 5000); return () => clearInterval(saveInterval); }, [count, multiplier, autoClickers]); // RGB cycling effect useEffect(() => { const interval = setInterval(() => { setMainHue(h => (h + 1) % 360); setMultiplierHue(h => (h + 2) % 360); setAutoClickerHue(h => (h + 3) % 360); setAutoLockerHue(h => (h + 4) % 360); setSpeedHue(h => (h + 5) % 360); }, 50); return () => clearInterval(interval); }, []); const getButtonStyle = (isEnabled, hue) => ({ backgroundColor: isEnabled ? `hsl(${hue}, 70%, 40%)` : '#4a4a4a', padding: '10px', border: 'none', borderRadius: '5px', color: '#ffffff', opacity: isEnabled ? 1 : 0.5, transition: 'background-color 0.3s ease' }); // Auto clicker effect useEffect(() => { const interval = setInterval(() => { let totalAutoIncome = 0; if (autoClickers > 0) { totalAutoIncome += autoClickers; } if (autoLockers > 0) { totalAutoIncome += autoLockers * 5; // Auto lockers generate 5x more than auto clickers } if (totalAutoIncome > 0) { setCount(prev => prev + totalAutoIncome); } }, 1000); return () => clearInterval(interval); }, [autoClickers, autoLockers]); const checkAchievements = (newCount) => { const milestones = [ { id: 'points100', value: 100, message: 'First Hundred!' }, { id: 'points1000', value: 1000, message: 'Points Master!' }, { id: 'points10000', value: 10000, message: 'Point God!' }, ]; milestones.forEach(({ id, value, message }) => { if (newCount >= value && !unlockedAchievements.has(id)) { setUnlockedAchievements(prev => new Set([...prev, id])); setAchievements(prev => [...prev, message]); } }); }; const handleClick = (e) => { const newCount = count + (multiplier * clickSpeed); setCount(newCount); checkAchievements(newCount); const id = Date.now(); setFloatingNumbers(prev => [...prev, { id, value: multiplier, x: e.clientX, y: e.clientY, }]); setTimeout(() => { setFloatingNumbers(prev => prev.filter(num => num.id !== id)); }, 1000); }; const buyMultiplier = () => { const cost = multiplier * 10; if (count >= cost) { setCount(prev => prev - cost); setMultiplier(prev => prev + 1); } }; const buyAutoClicker = () => { const cost = (autoClickers + 1) * 50; if (count >= cost) { setCount(prev => prev - cost); setAutoClickers(prev => prev + 1); } }; return (

Clicker Game

{Math.floor(count)} points

Points per click: {(multiplier * clickSpeed).toFixed(1)}

Auto income per second: {autoClickers + (autoLockers * 5)}

Last saved: {new Date(lastSaved).toLocaleTimeString()}

{floatingNumbers.map(num => ( ))} {achievements.map((message, index) => ( ))}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();