1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
* 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";
});