Mae's website :3
maemoon.me
personal
website
svelte
sveltekit
click
+190
-19
+1
src/routes/+layout.svelte
+1
src/routes/+layout.svelte
-4
src/routes/+page.svelte
-4
src/routes/+page.svelte
-3
src/routes/archive/+page.svelte
-3
src/routes/archive/+page.svelte
-4
src/routes/blog/post/[slug]/+page.svelte
-4
src/routes/blog/post/[slug]/+page.svelte
-4
src/routes/experiments/+page.svelte
-4
src/routes/experiments/+page.svelte
+189
src/routes/experiments/click/+page.svelte
+189
src/routes/experiments/click/+page.svelte
···
1
+
<script>
2
+
let score = $state(0);
3
+
let clickPower = $state(1);
4
+
let upgradePrice = $state(50);
5
+
let featuresUnlocked = $state([]);
6
+
let autoclickPower = $state(0);
7
+
let autoUpgradePrice = $state(500);
8
+
9
+
let code = $derived.by(() => {
10
+
if (featuresUnlocked.includes(1)) {
11
+
return `// click v0.1
12
+
// by Mae Moon
13
+
// TODO: add saving
14
+
15
+
function click() {
16
+
score += ${clickPower};
17
+
// TODO: add new stuff
18
+
}
19
+
20
+
function upgrade() {
21
+
if (score >= ${upgradePrice}) {
22
+
score -= ${upgradePrice};
23
+
clickPower += 1;
24
+
upgradePrice *= 2;
25
+
}
26
+
}
27
+
28
+
function upgradeAuto() {
29
+
if (score >= ${autoUpgradePrice}) {
30
+
score -= ${autoUpgradePrice};
31
+
autoclickPower += 1;
32
+
autoUpgradePrice *= 3;
33
+
}
34
+
}
35
+
36
+
function autoclick() {
37
+
score += ${autoclickPower};
38
+
}
39
+
40
+
setInterval(autoclick, 1000);`;
41
+
}
42
+
if (featuresUnlocked.includes(0)) {
43
+
return `// click v0.1
44
+
// by Mae Moon
45
+
// TODO: add saving
46
+
47
+
function click() {
48
+
score += ${clickPower};
49
+
if (score >= 300) {
50
+
unlockNewFeature();
51
+
}
52
+
}
53
+
54
+
function upgrade() {
55
+
if (score >= ${upgradePrice}) {
56
+
score -= ${upgradePrice};
57
+
clickPower += 1;
58
+
upgradePrice *= 3;
59
+
}
60
+
}`;
61
+
}
62
+
return `// click v0.1
63
+
// by Mae Moon
64
+
// TODO: add saving
65
+
66
+
function click() {
67
+
score += 1;
68
+
if (score >= 25) {
69
+
unlockNewFeature();
70
+
}
71
+
}`;
72
+
});
73
+
74
+
function click() {
75
+
score += clickPower;
76
+
if (score >= 25 && !featuresUnlocked.includes(0)) {
77
+
featuresUnlocked = [...featuresUnlocked, 0];
78
+
}
79
+
if (score >= 300 && !featuresUnlocked.includes[1]) {
80
+
featuresUnlocked = [...featuresUnlocked, 1];
81
+
}
82
+
}
83
+
84
+
function upgrade() {
85
+
if (score >= upgradePrice) {
86
+
score -= upgradePrice;
87
+
clickPower += 1;
88
+
upgradePrice *= 2;
89
+
}
90
+
}
91
+
92
+
function upgradeAuto() {
93
+
if (score >= autoUpgradePrice) {
94
+
score -= autoUpgradePrice;
95
+
autoclickPower += 1;
96
+
autoUpgradePrice *= 3;
97
+
}
98
+
}
99
+
100
+
function autoclick() {
101
+
score += autoclickPower;
102
+
}
103
+
104
+
setInterval(autoclick, 1000);
105
+
</script>
106
+
107
+
<h1>{score == 0 ? 'Click' : score}</h1>
108
+
109
+
<div class="buttons">
110
+
<button class="button" onclick={click}>click();</button>
111
+
{#if featuresUnlocked.includes(0)}
112
+
<button class="button" onclick={upgrade}>upgrade();</button>
113
+
{/if}
114
+
{#if featuresUnlocked.includes(1)}
115
+
<button class="button" onclick={upgradeAuto}>upgradeAuto();</button>
116
+
{/if}
117
+
</div>
118
+
<div class="code-block">
119
+
<div class="code-header">
120
+
<span class="file-name">game.js</span>
121
+
</div>
122
+
<code>{code}</code>
123
+
</div>
124
+
125
+
<style>
126
+
.buttons {
127
+
display: flex;
128
+
gap: 1rem;
129
+
align-items: flex-start;
130
+
margin: 1em 0;
131
+
}
132
+
133
+
.code-block {
134
+
background-color: var(--color-fg-1);
135
+
border-radius: 8px;
136
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
137
+
overflow: hidden;
138
+
margin: 0;
139
+
padding: 0;
140
+
color: var(--color-bg);
141
+
font-family: monospace;
142
+
font-size: 1rem;
143
+
line-height: 1.5;
144
+
overflow-x: auto;
145
+
}
146
+
147
+
.code-header {
148
+
display: flex;
149
+
justify-content: space-between;
150
+
align-items: center;
151
+
padding: 0.5rem 1rem;
152
+
background-color: rgba(0, 0, 0, 0.1);
153
+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
154
+
}
155
+
156
+
.file-name {
157
+
font-size: 0.9rem;
158
+
opacity: 0.8;
159
+
}
160
+
161
+
code {
162
+
display: block;
163
+
padding: 1.5rem;
164
+
white-space: pre;
165
+
}
166
+
167
+
.button {
168
+
padding: 1rem 2rem;
169
+
font-size: 1.2rem;
170
+
font-family: monospace;
171
+
background-color: var(--color-fg-1);
172
+
color: var(--color-bg);
173
+
border: none;
174
+
border-radius: 8px;
175
+
cursor: pointer;
176
+
transition: all 0.3s ease;
177
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
178
+
}
179
+
180
+
.button:hover {
181
+
transform: translateY(-2px);
182
+
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
183
+
}
184
+
185
+
.button:active {
186
+
transform: translateY(0);
187
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
188
+
}
189
+
</style>