/** * This clicker game allows users to earn virtual money by clicking. * It includes an upgrade system where users can purchase multiple auto-clickers, dime-smithers, quarter-makers, dollar-mills, twoonie-transformers, fiver-factories, ten-trackers, twenty-detectors, fifty-forgers, and hundred-hewers. * Each upgrade adds to the overall effect, increasing earnings per second. * Upgrades are hidden until they are unlocked for the first time. * The game state is stored client-side using localStorage for persistence. * React is used for the UI, and setInterval for the auto-upgrade functionality. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } 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 [quarterMakers, setQuarterMakers] = useState(() => { const saved = localStorage.getItem('quarterMakers'); return saved ? parseInt(saved) : 0; }); const [dollarMills, setDollarMills] = useState(() => { const saved = localStorage.getItem('dollarMills'); return saved ? parseInt(saved) : 0; }); const [twoonieTransformers, setTwoonieTransformers] = useState(() => { const saved = localStorage.getItem('twoonieTransformers'); return saved ? parseInt(saved) : 0; }); const [fiverFactories, setFiverFactories] = useState(() => { const saved = localStorage.getItem('fiverFactories'); return saved ? parseInt(saved) : 0; }); const [tenTrackers, setTenTrackers] = useState(() => { const saved = localStorage.getItem('tenTrackers'); return saved ? parseInt(saved) : 0; }); const [twentyDetectors, setTwentyDetectors] = useState(() => { const saved = localStorage.getItem('twentyDetectors'); return saved ? parseInt(saved) : 0; }); const [fiftyForgers, setFiftyForgers] = useState(() => { const saved = localStorage.getItem('fiftyForgers'); return saved ? parseInt(saved) : 0; }); const [hundredHewers, setHundredHewers] = useState(() => { const saved = localStorage.getItem('hundredHewers'); return saved ? parseInt(saved) : 0; }); const [autoClickerUnlocked, setAutoClickerUnlocked] = useState(() => { return localStorage.getItem('autoClickerUnlocked') === 'true'; }); const [dimeSmitherUnlocked, setDimeSmitherUnlocked] = useState(() => { return localStorage.getItem('dimeSmitherUnlocked') === 'true'; }); const [quarterMakerUnlocked, setQuarterMakerUnlocked] = useState(() => { return localStorage.getItem('quarterMakerUnlocked') === 'true'; }); const [dollarMillUnlocked, setDollarMillUnlocked] = useState(() => { return localStorage.getItem('dollarMillUnlocked') === 'true'; }); const [twoonieTransformerUnlocked, setTwoonieTransformerUnlocked] = useState(() => { return localStorage.getItem('twoonieTransformerUnlocked') === 'true'; }); const [fiverFactoryUnlocked, setFiverFactoryUnlocked] = useState(() => { return localStorage.getItem('fiverFactoryUnlocked') === 'true'; }); const [tenTrackerUnlocked, setTenTrackerUnlocked] = useState(() => { return localStorage.getItem('tenTrackerUnlocked') === 'true'; }); const [twentyDetectorUnlocked, setTwentyDetectorUnlocked] = useState(() => { return localStorage.getItem('twentyDetectorUnlocked') === 'true'; }); const [fiftyForgerUnlocked, setFiftyForgerUnlocked] = useState(() => { return localStorage.getItem('fiftyForgerUnlocked') === 'true'; }); const [hundredHewerUnlocked, setHundredHewerUnlocked] = useState(() => { return localStorage.getItem('hundredHewerUnlocked') === 'true'; }); useEffect(() => { localStorage.setItem('money', money.toString()); localStorage.setItem('autoClickers', autoClickers.toString()); localStorage.setItem('dimeSmiths', dimeSmiths.toString()); localStorage.setItem('quarterMakers', quarterMakers.toString()); localStorage.setItem('dollarMills', dollarMills.toString()); localStorage.setItem('twoonieTransformers', twoonieTransformers.toString()); localStorage.setItem('fiverFactories', fiverFactories.toString()); localStorage.setItem('tenTrackers', tenTrackers.toString()); localStorage.setItem('twentyDetectors', twentyDetectors.toString()); localStorage.setItem('fiftyForgers', fiftyForgers.toString()); localStorage.setItem('hundredHewers', hundredHewers.toString()); localStorage.setItem('autoClickerUnlocked', autoClickerUnlocked.toString()); localStorage.setItem('dimeSmitherUnlocked', dimeSmitherUnlocked.toString()); localStorage.setItem('quarterMakerUnlocked', quarterMakerUnlocked.toString()); localStorage.setItem('dollarMillUnlocked', dollarMillUnlocked.toString()); localStorage.setItem('twoonieTransformerUnlocked', twoonieTransformerUnlocked.toString()); localStorage.setItem('fiverFactoryUnlocked', fiverFactoryUnlocked.toString()); localStorage.setItem('tenTrackerUnlocked', tenTrackerUnlocked.toString()); localStorage.setItem('twentyDetectorUnlocked', twentyDetectorUnlocked.toString()); localStorage.setItem('fiftyForgerUnlocked', fiftyForgerUnlocked.toString()); localStorage.setItem('hundredHewerUnlocked', hundredHewerUnlocked.toString()); }, [money, autoClickers, dimeSmiths, quarterMakers, dollarMills, twoonieTransformers, fiverFactories, tenTrackers, twentyDetectors, fiftyForgers, hundredHewers, autoClickerUnlocked, dimeSmitherUnlocked, quarterMakerUnlocked, dollarMillUnlocked, twoonieTransformerUnlocked, fiverFactoryUnlocked, tenTrackerUnlocked, twentyDetectorUnlocked, fiftyForgerUnlocked, hundredHewerUnlocked]); useEffect(() => { const interval = setInterval(() => { setMoney(m => m + (0.01 * autoClickers) + (0.1 * dimeSmiths) + (0.25 * quarterMakers) + (1 * dollarMills) + (2 * twoonieTransformers) + (5 * fiverFactories) + (10 * tenTrackers) + (20 * twentyDetectors) + (50 * fiftyForgers) + (100 * hundredHewers)); }, 1000); return () => clearInterval(interval); }, [autoClickers, dimeSmiths, quarterMakers, dollarMills, twoonieTransformers, fiverFactories, tenTrackers, twentyDetectors, fiftyForgers, hundredHewers]); useEffect(() => { if (money >= 0.25 && !autoClickerUnlocked) setAutoClickerUnlocked(true); if (money >= 5 && !dimeSmitherUnlocked) setDimeSmitherUnlocked(true); if (money >= 25 && !quarterMakerUnlocked) setQuarterMakerUnlocked(true); if (money >= 100 && !dollarMillUnlocked) setDollarMillUnlocked(true); if (money >= 200 && !twoonieTransformerUnlocked) setTwoonieTransformerUnlocked(true); if (money >= 500 && !fiverFactoryUnlocked) setFiverFactoryUnlocked(true); if (money >= 1000 && !tenTrackerUnlocked) setTenTrackerUnlocked(true); if (money >= 2000 && !twentyDetectorUnlocked) setTwentyDetectorUnlocked(true); if (money >= 5000 && !fiftyForgerUnlocked) setFiftyForgerUnlocked(true); if (money >= 10000 && !hundredHewerUnlocked) setHundredHewerUnlocked(true); }, [money, autoClickerUnlocked, dimeSmitherUnlocked, quarterMakerUnlocked, dollarMillUnlocked, twoonieTransformerUnlocked, fiverFactoryUnlocked, tenTrackerUnlocked, twentyDetectorUnlocked, fiftyForgerUnlocked, hundredHewerUnlocked]); const handleClick = () => { setMoney(m => m + 0.01); }; const buyUpgrade = (cost: number, setter: React.Dispatch>) => { if (money >= cost) { setMoney(m => m - cost); setter(prev => prev + 1); } }; const formatMoney = (amount: number) => amount.toFixed(2); const renderUpgradeButton = (name: string, cost: number, count: number, setter: React.Dispatch>, unlocked: boolean) => { if (!unlocked) return null; const actualCost = cost * Math.pow(1.15, count); return ( ); }; const renderUpgradeInfo = (name: string, count: number, earningsPerSecond: number) => { if (count === 0) return null; return

{name}: {count} (Earning ${formatMoney(earningsPerSecond * count)} per second)

; }; return (

💰 Money Clicker Game

Current Money: ${formatMoney(money)}

{renderUpgradeButton("Auto-Clicker", 0.25, autoClickers, setAutoClickers, autoClickerUnlocked)} {renderUpgradeButton("Dime-Smither", 5, dimeSmiths, setDimeSmiths, dimeSmitherUnlocked)} {renderUpgradeButton("Quarter-Maker", 25, quarterMakers, setQuarterMakers, quarterMakerUnlocked)} {renderUpgradeButton("Dollar-Mill", 100, dollarMills, setDollarMills, dollarMillUnlocked)} {renderUpgradeButton("Twoonie-Transformer", 200, twoonieTransformers, setTwoonieTransformers, twoonieTransformerUnlocked)} {renderUpgradeButton("Fiver-Factory", 500, fiverFactories, setFiverFactories, fiverFactoryUnlocked)} {renderUpgradeButton("Ten-Tracker", 1000, tenTrackers, setTenTrackers, tenTrackerUnlocked)} {renderUpgradeButton("Twenty-Detector", 2000, twentyDetectors, setTwentyDetectors, twentyDetectorUnlocked)} {renderUpgradeButton("Fifty-Forger", 5000, fiftyForgers, setFiftyForgers, fiftyForgerUnlocked)} {renderUpgradeButton("Hundred-Hewer", 10000, hundredHewers, setHundredHewers, hundredHewerUnlocked)} {renderUpgradeInfo("Auto-Clickers", autoClickers, 0.01)} {renderUpgradeInfo("Dime-Smithers", dimeSmiths, 0.1)} {renderUpgradeInfo("Quarter-Makers", quarterMakers, 0.25)} {renderUpgradeInfo("Dollar-Mills", dollarMills, 1)} {renderUpgradeInfo("Twoonie-Transformers", twoonieTransformers, 2)} {renderUpgradeInfo("Fiver-Factories", fiverFactories, 5)} {renderUpgradeInfo("Ten-Trackers", tenTrackers, 10)} {renderUpgradeInfo("Twenty-Detectors", twentyDetectors, 20)} {renderUpgradeInfo("Fifty-Forgers", fiftyForgers, 50)} {renderUpgradeInfo("Hundred-Hewers", hundredHewers, 100)} {(autoClickers > 0 || dimeSmiths > 0 || quarterMakers > 0 || dollarMills > 0 || twoonieTransformers > 0 || fiverFactories > 0 || tenTrackers > 0 || twentyDetectors > 0 || fiftyForgers > 0 || hundredHewers > 0) && (

Total earnings per second: ${formatMoney((0.01 * autoClickers) + (0.1 * dimeSmiths) + (0.25 * quarterMakers) + (1 * dollarMills) + (2 * twoonieTransformers) + (5 * fiverFactories) + (10 * tenTrackers) + (20 * twentyDetectors) + (50 * fiftyForgers) + (100 * hundredHewers))}

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response(` Money Clicker Game

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { background-color: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center; } h1 { color: #333; } button { margin: 10px; padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; transition: background-color 0.3s; } button:disabled { opacity: 0.5; cursor: not-allowed; } .click-button { background-color: #4CAF50; color: white; } .click-button:hover:not(:disabled) { background-color: #45a049; } .upgrade-button { background-color: #008CBA; color: white; } .upgrade-button:hover:not(:disabled) { background-color: #007B9A; } .source-link { margin-top: 20px; font-size: 0.8em; } .source-link a { color: #666; text-decoration: none; } .source-link a:hover { text-decoration: underline; } `; export default server;

clickerGame