import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
const [money, setMoney] = useState(() => {
const saved = localStorage.getItem("money");
return saved ? parseFloat(saved) : 0;
});
const [autoClickers, setAutoClickers] = useState(() => {
const saved = localStorage.getItem("autoClickers");
return saved ? parseInt(saved) : 0;
});
const [dimeSmiths, setDimeSmiths] = useState(() => {
const saved = localStorage.getItem("dimeSmiths");
return saved ? parseInt(saved) : 0;
});
const [autoClickerUnlocked, setAutoClickerUnlocked] = useState(() => {
return localStorage.getItem("autoClickerUnlocked") === "true";
});
const [dimeSmitherUnlocked, setDimeSmitherUnlocked] = useState(() => {
return localStorage.getItem("dimeSmitherUnlocked") === "true";
});
useEffect(() => {
localStorage.setItem("money", money.toString());
localStorage.setItem("autoClickers", autoClickers.toString());
localStorage.setItem("dimeSmiths", dimeSmiths.toString());
localStorage.setItem("autoClickerUnlocked", autoClickerUnlocked.toString());
localStorage.setItem("dimeSmitherUnlocked", dimeSmitherUnlocked.toString());
}, [money, autoClickers, dimeSmiths, autoClickerUnlocked, dimeSmitherUnlocked]);
useEffect(() => {
const interval = setInterval(() => {
setMoney(m => m + (0.01 * autoClickers) + (0.1 * dimeSmiths));
}, 1000);
return () => clearInterval(interval);
}, [autoClickers, dimeSmiths]);
useEffect(() => {
if (money >= 0.25 && !autoClickerUnlocked) {
setAutoClickerUnlocked(true);
}
if (money >= 5 && !dimeSmitherUnlocked) {
setDimeSmitherUnlocked(true);
}
}, [money, autoClickerUnlocked, dimeSmitherUnlocked]);
const handleClick = () => {
setMoney(m => m + 0.01);
};
const buyAutoClicker = () => {
const cost = 0.25 * Math.pow(1.15, autoClickers);
if (money >= cost) {
setMoney(m => m - cost);
setAutoClickers(ac => ac + 1);
}
};
const buyDimeSmith = () => {
const cost = 5 * Math.pow(1.15, dimeSmiths);
if (money >= cost) {
setMoney(m => m - cost);
setDimeSmiths(ds => ds + 1);
}
};
const formatMoney = (amount: number) => {
return amount.toFixed(2);
};
return (
<div className="container">
<h1>💰 Money Clicker Game</h1>
<p>Current Money: ${formatMoney(money)}</p>
<button onClick={handleClick} className="click-button">Click to earn $0.01</button>
{autoClickerUnlocked && (
<button
onClick={buyAutoClicker}
className="upgrade-button"
disabled={money < 0.25 * Math.pow(1.15, autoClickers)}
>
Buy Auto-Clicker (${formatMoney(0.25 * Math.pow(1.15, autoClickers))})
</button>
)}
{dimeSmitherUnlocked && (
<button onClick={buyDimeSmith} className="upgrade-button" disabled={money < 5 * Math.pow(1.15, dimeSmiths)}>
Buy Dime-Smither (${formatMoney(5 * Math.pow(1.15, dimeSmiths))})
</button>
)}
{autoClickers > 0 && <p>Auto-Clickers: {autoClickers} (Earning ${formatMoney(0.01 * autoClickers)} per second)