Public
HTTP
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
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 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());