/** * This code creates a Money Clicker Game using React for the UI. * It uses localStorage for client-side persistence and setInterval for auto-upgrades. * The game features a pixelated, retro-inspired design reminiscent of early computer games. * It includes various upgrades, including factories, workers, and drones. * The maximum number of workers and drones is limited to 12 times the number of factories owned. * "Fire Worker" and "Fire Drone" buttons are included to reduce the number of workers and drones. * The money calculation prevents the balance from dropping below 0. * Work is only increased if there is enough money to pay the workers and drones. * An "Auto-clicker auto-buyer" upgrade is included in the Factory tab. * An Upgrades tab is unlocked when the player reaches 1000 Work and 100 auto-clickers. * The Upgrades tab includes an "Upgrade Auto-clickers" button that increases their efficiency. * The cost of the Upgrade increases by a factor of 10% for each upgrade purchased. * The upgrade-info-container is now hidden when not on the Clickers tab. */ /** @jsxImportSource https://esm.sh/react */ 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 [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 [rentFactories, setRentFactories] = useState(() => { const saved = localStorage.getItem("rentFactories"); return saved ? parseInt(saved) : 0; }); const [workers, setWorkers] = useState(() => { const saved = localStorage.getItem("workers"); return saved ? parseInt(saved) : 0; }); const [drones, setDrones] = useState(() => { const saved = localStorage.getItem("drones"); return saved ? parseInt(saved) : 0; }); const [work, setWork] = useState(() => { const saved = localStorage.getItem("work"); return saved ? parseInt(saved) : 0; }); const [autoClickerAutoBuyers, setAutoClickerAutoBuyers] = useState(() => { const saved = localStorage.getItem("autoClickerAutoBuyers"); return saved ? parseInt(saved) : 0; }); const [autoClickerUpgrades, setAutoClickerUpgrades] = useState(() => { const saved = localStorage.getItem("autoClickerUpgrades"); 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"; }); const [rentFactoryUnlocked, setRentFactoryUnlocked] = useState(() => { return localStorage.getItem("rentFactoryUnlocked") === "true"; }); const [autoClickerAutoBuyerUnlocked, setAutoClickerAutoBuyerUnlocked] = useState(() => { return localStorage.getItem("autoClickerAutoBuyerUnlocked") === "true"; }); const [upgradesTabUnlocked, setUpgradesTabUnlocked] = useState(() => { return localStorage.getItem("upgradesTabUnlocked") === "true"; }); const [activeTab, setActiveTab] = useState("clickers"); 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("rentFactories", rentFactories.toString()); localStorage.setItem("workers", workers.toString()); localStorage.setItem("drones", drones.toString()); localStorage.setItem("work", work.toString()); localStorage.setItem("autoClickerAutoBuyers", autoClickerAutoBuyers.toString()); localStorage.setItem("autoClickerUpgrades", autoClickerUpgrades.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()); localStorage.setItem("rentFactoryUnlocked", rentFactoryUnlocked.toString()); localStorage.setItem("autoClickerAutoBuyerUnlocked", autoClickerAutoBuyerUnlocked.toString()); localStorage.setItem("upgradesTabUnlocked", upgradesTabUnlocked.toString()); }, [ money, autoClickers, dimeSmiths, quarterMakers, dollarMills, twoonieTransformers, fiverFactories, tenTrackers, twentyDetectors, fiftyForgers, hundredHewers, rentFactories, workers, drones, work, autoClickerAutoBuyers, autoClickerUpgrades, autoClickerUnlocked, dimeSmitherUnlocked, quarterMakerUnlocked, dollarMillUnlocked, twoonieTransformerUnlocked, fiverFactoryUnlocked, tenTrackerUnlocked, twentyDetectorUnlocked, fiftyForgerUnlocked, hundredHewerUnlocked, rentFactoryUnlocked, autoClickerAutoBuyerUnlocked, upgradesTabUnlocked, ]); useEffect(() => { const interval = setInterval(() => { setMoney(m => { let newMoney = m + ((0.01 + 0.01 * autoClickerUpgrades) * autoClickers) + (0.1 * dimeSmiths) + (0.25 * quarterMakers) + (1 * dollarMills) + (2 * twoonieTransformers) + (5 * fiverFactories) + (10 * tenTrackers) + (20 * twentyDetectors) + (50 * fiftyForgers) + (100 * hundredHewers); const workerCost = workers * 100; const droneCost = drones * 400; const totalCost = workerCost + droneCost; if (newMoney >= totalCost) { setWork(w => w + workers + (drones * 2)); newMoney -= totalCost; } // Auto-clicker auto-buyer logic for (let i = 0; i < autoClickerAutoBuyers; i++) { const autoClickerCost = 0.10 * Math.pow(1.15, autoClickers); if (newMoney >= autoClickerCost) { newMoney -= autoClickerCost; setAutoClickers(ac => ac + 1); } else { break; } } return newMoney; }); }, 1000); return () => clearInterval(interval); }, [ autoClickers, dimeSmiths, quarterMakers, dollarMills, twoonieTransformers, fiverFactories, tenTrackers, twentyDetectors, fiftyForgers, hundredHewers, workers, drones, autoClickerAutoBuyers, autoClickerUpgrades, ]); useEffect(() => { if (money >= 0.10 && !autoClickerUnlocked) setAutoClickerUnlocked(true); if (money >= 2 && !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); if (money >= 1000000 && !rentFactoryUnlocked) setRentFactoryUnlocked(true); if (work >= 500 && !autoClickerAutoBuyerUnlocked) setAutoClickerAutoBuyerUnlocked(true); if (work >= 1000 && autoClickers >= 100 && !upgradesTabUnlocked) setUpgradesTabUnlocked(true); }, [ money, work, autoClickers, autoClickerUnlocked, dimeSmitherUnlocked, quarterMakerUnlocked, dollarMillUnlocked, twoonieTransformerUnlocked, fiverFactoryUnlocked, tenTrackerUnlocked, twentyDetectorUnlocked, fiftyForgerUnlocked, hundredHewerUnlocked, rentFactoryUnlocked, autoClickerAutoBuyerUnlocked, upgradesTabUnlocked, ]); 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 hireWorker = () => { const cost = 100; // Cost to hire a worker const maxEmployees = rentFactories * 12; if (money >= cost && workers + drones < maxEmployees) { setMoney(m => m - cost); setWorkers(w => w + 1); } }; const fireWorker = () => { if (workers > 0) { setWorkers(w => w - 1); } }; const hireDrone = () => { const cost = 400; // Cost to hire a drone const maxEmployees = rentFactories * 12; if (money >= cost && workers + drones < maxEmployees) { setMoney(m => m - cost); setDrones(d => d + 1); } }; const fireDrone = () => { if (drones > 0) { setDrones(d => d - 1); } }; const buyAutoClickerAutoBuyer = () => { const cost = 1000000 * Math.pow(2, autoClickerAutoBuyers); const workCost = 500 * Math.pow(2, autoClickerAutoBuyers); if (money >= cost && work >= workCost) { setMoney(m => m - cost); setWork(w => w - workCost); setAutoClickerAutoBuyers(prev => prev + 1); } }; const upgradeAutoClickers = () => { const autoClickerCost = 100 * Math.pow(1.1, autoClickerUpgrades); const workCost = 1000 * Math.pow(1.1, autoClickerUpgrades); if (autoClickers >= autoClickerCost && work >= workCost) { setAutoClickers(ac => ac - Math.floor(autoClickerCost)); setWork(w => w - Math.floor(workCost)); setAutoClickerUpgrades(acu => acu + 1); } }; const doubleMoney = () => { setMoney(m => m * 2); }; 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)}

{rentFactories > 0 &&

Current Work: {work}

} {rentFactories > 0 && (

{upgradesTabUnlocked && ( )}

)} {activeTab === "clickers" && (

{renderUpgradeButton("Auto-Clicker", 0.10, autoClickers, setAutoClickers, autoClickerUnlocked)} {renderUpgradeButton("Dime-Smither", 2, 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)} {renderUpgradeButton("Factory", 1000000, rentFactories, setRentFactories, rentFactoryUnlocked)}

)} {activeTab === "factory" && (

Workers: {workers} | Drones: {drones} | Total: {workers + drones} / {rentFactories * 12}

{autoClickerAutoBuyerUnlocked && ( )} {autoClickerAutoBuyers > 0 && (

Auto-clicker auto-buyers: {autoClickerAutoBuyers}

)}

)} {activeTab === "upgrades" && (

{autoClickerUpgrades > 0 && (

Auto-clicker upgrades: {autoClickerUpgrades}{" "} (Each Auto-clicker generates ${formatMoney(0.01 + 0.01 * autoClickerUpgrades)} per second)

)}

)} {activeTab === "clickers" && (

{renderUpgradeInfo("Auto-Clickers", autoClickers, 0.01 + 0.01 * autoClickerUpgrades)} {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)} {rentFactories > 0 &&

Factories: {rentFactories}

}

)} {activeTab === "clickers" && (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 + 0.01 * autoClickerUpgrades) * autoClickers) + (0.1 * dimeSmiths) + (0.25 * quarterMakers) + (1 * dollarMills) + (2 * twoonieTransformers) + (5 * fiverFactories) + (10 * tenTrackers) + (20 * twentyDetectors) + (50 * fiftyForgers) + (100 * hundredHewers), )}

)}

Made almost entirely from AI prompts to Townie | View Source

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

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: 'Arial', sans-serif; background-color: #fff; color: #8B4513; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { background-color: #FFF8DC; padding: 2rem; border-radius: 10px; text-align: center; max-width: 800px; } h1 { color: #8B4513; font-size: 24px; margin-bottom: 20px; } button { font-family: 'Arial', sans-serif; margin: 10px; padding: 8px 16px; font-size: 16px; cursor: pointer; border: 2px solid #D2691E; background-color: #FFA500; color: #fff; border-radius: 5px; transition: all 0.3s; } button:hover:not(:disabled), button:active:not(:disabled) { background-color: #FF8C00; color: #fff; } button:disabled { opacity: 0.5; cursor: not-allowed; } .click-button { font-size: 18px; padding: 12px 24px; } .upgrade-button, .hire-button, .fire-button { font-size: 14px; padding: 6px 12px; } .money-display, .work-display { font-size: 18px; margin-bottom: 20px; } .upgrade-container, .factory-container, .upgrades-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; } .upgrade-info-container { font-size: 12px; margin-top: 20px; } .upgrade-info { margin: 5px 0; } .total-earnings { font-size: 14px; margin-top: 20px; } .footer { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .source-link, .license-button { font-size: 10px; margin: 0 10px; } .source-link { color: #8B4513; text-decoration: none; } .source-link:hover { text-decoration: underline; } .tab-bar { display: flex; justify-content: center; margin-bottom: 20px; } .tab-bar button { background-color: #FFA500; color: #fff; border: 1px solid #D2691E; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s; } .tab-bar button.active { background-color: #FF8C00; color: #ffffff; } @media (max-width: 600px) { .container { padding: 1rem; } h1 { font-size: 18px; } button, .click-button { font-size: 18px; padding: 8px 16px; } .upgrade-button, .hire-button, .fire-button, .tab-bar button { font-size: 14px; padding: 6px 12px; } .money-display, .work-display { font-size: 14px; } .upgrade-info-container { font-size: 10px; } .total-earnings { font-size: 12px; } } `; export default server;