Mae's website :3
maemoon.me
personal
website
svelte
sveltekit
Improved clicker logic and formatting
+140
-127
+27
-127
src/routes/experiments/click/+page.svelte
+27
-127
src/routes/experiments/click/+page.svelte
···
1
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
2
+
import Codedisplay from "./lib/codedisplay.svelte";
14
3
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 *= 2;
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
-
});
4
+
let game = $state({
5
+
score: 0,
6
+
clickPower: 1,
7
+
upgradePrice: 50,
8
+
featuresUnlocked: [],
9
+
autoclickPower: 0,
10
+
autoUpgradePrice: 500
11
+
})
73
12
74
13
function click() {
75
-
score += clickPower;
76
-
if (score >= 25 && !featuresUnlocked.includes(0)) {
77
-
featuresUnlocked = [...featuresUnlocked, 0];
14
+
game.score += game.clickPower;
15
+
if (game.score >= 25 && !game.featuresUnlocked.includes(0)) {
16
+
game.featuresUnlocked = [...game.featuresUnlocked, 0];
78
17
}
79
-
if (score >= 300 && !featuresUnlocked.includes[1]) {
80
-
featuresUnlocked = [...featuresUnlocked, 1];
18
+
if (game.score >= 300 && !game.featuresUnlocked.includes[1]) {
19
+
game.featuresUnlocked = [...game.featuresUnlocked, 1];
81
20
}
82
21
}
83
22
84
23
function upgrade() {
85
-
if (score >= upgradePrice) {
86
-
score -= upgradePrice;
87
-
clickPower += 1;
88
-
upgradePrice *= 2;
24
+
if (game.score >= game.upgradePrice) {
25
+
game.score -= game.upgradePrice;
26
+
game.clickPower += 1;
27
+
game.upgradePrice *= 2;
89
28
}
90
29
}
91
30
92
31
function upgradeAuto() {
93
-
if (score >= autoUpgradePrice) {
94
-
score -= autoUpgradePrice;
95
-
autoclickPower += 1;
96
-
autoUpgradePrice *= 3;
32
+
if (game.score >= game.autoUpgradePrice) {
33
+
game.score -= game.autoUpgradePrice;
34
+
game.autoclickPower += 1;
35
+
game.autoUpgradePrice *= 3;
97
36
}
98
37
}
99
38
100
39
function autoclick() {
101
-
score += autoclickPower;
40
+
game.score += game.autoclickPower;
102
41
}
103
42
104
43
setInterval(autoclick, 1000);
105
44
</script>
106
45
107
-
<h1>{score == 0 ? 'Click' : score}</h1>
46
+
<h1>{game.score == 0 ? 'Click' : game.score}</h1>
108
47
109
48
<div class="buttons">
110
49
<button class="button" onclick={click}>click();</button>
111
-
{#if featuresUnlocked.includes(0)}
50
+
{#if game.featuresUnlocked.includes(0)}
112
51
<button class="button" onclick={upgrade}>upgrade();</button>
113
52
{/if}
114
-
{#if featuresUnlocked.includes(1)}
53
+
{#if game.featuresUnlocked.includes(1)}
115
54
<button class="button" onclick={upgradeAuto}>upgradeAuto();</button>
116
55
{/if}
117
56
</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>
57
+
<Codedisplay {game}></Codedisplay>
124
58
125
59
<style>
126
60
.buttons {
···
128
62
gap: 1rem;
129
63
align-items: flex-start;
130
64
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
65
}
166
66
167
67
.button {
+105
src/routes/experiments/click/lib/codedisplay.svelte
+105
src/routes/experiments/click/lib/codedisplay.svelte
···
1
+
<script>
2
+
let { game } = $props();
3
+
4
+
let code = $derived.by(() => {
5
+
// Header
6
+
let codeString = `// click v0.1
7
+
// by Mae Moon
8
+
// TODO: add saving\n\n`;
9
+
// Click
10
+
if (game.featuresUnlocked.includes(1)) {
11
+
codeString += `function click() {
12
+
score += ${game.clickPower};
13
+
// TODO: add new stuff
14
+
}`
15
+
} else if (game.featuresUnlocked.includes(0)) {
16
+
codeString += `function click() {
17
+
score += ${game.clickPower};
18
+
if (score >= 300) {
19
+
unlockNewFeature();
20
+
}
21
+
}`
22
+
} else {
23
+
codeString += `function click() {
24
+
score += ${game.clickPower};
25
+
if (score >= 25) {
26
+
unlockNewFeature();
27
+
}
28
+
}`
29
+
}
30
+
31
+
// Click Upgrade
32
+
if (game.featuresUnlocked.includes(0)) {
33
+
codeString += `
34
+
function upgrade() {
35
+
if (score >= ${game.upgradePrice}) {
36
+
score -= ${game.upgradePrice};
37
+
clickPower += 1;
38
+
upgradePrice *= 2;
39
+
}
40
+
}`
41
+
}
42
+
43
+
// Autoclicker
44
+
if (game.featuresUnlocked.includes(1)) {
45
+
codeString += `
46
+
function upgradeAuto() {
47
+
if (score >= ${game.autoUpgradePrice}) {
48
+
score -= ${game.autoUpgradePrice};
49
+
autoclickPower += 1;
50
+
autoUpgradePrice *= 3;
51
+
}
52
+
}
53
+
54
+
function autoclick() {
55
+
score += ${game.autoclickPower};
56
+
}
57
+
58
+
setInterval(autoclick, 1000);`
59
+
}
60
+
return codeString;
61
+
});
62
+
</script>
63
+
64
+
<div class="code-block">
65
+
<div class="code-header">
66
+
<span class="file-name">game.js</span>
67
+
</div>
68
+
<code>{code}</code>
69
+
</div>
70
+
71
+
<style>
72
+
.code-block {
73
+
background-color: var(--color-fg-1);
74
+
border-radius: 8px;
75
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
76
+
overflow: hidden;
77
+
margin: 0;
78
+
padding: 0;
79
+
color: var(--color-bg);
80
+
font-family: monospace;
81
+
font-size: 1rem;
82
+
line-height: 1.5;
83
+
overflow-x: auto;
84
+
}
85
+
86
+
.code-header {
87
+
display: flex;
88
+
justify-content: space-between;
89
+
align-items: center;
90
+
padding: 0.5rem 1rem;
91
+
background-color: rgba(0, 0, 0, 0.1);
92
+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
93
+
}
94
+
95
+
.file-name {
96
+
font-size: 0.9rem;
97
+
opacity: 0.8;
98
+
}
99
+
100
+
code {
101
+
display: block;
102
+
padding: 1.5rem;
103
+
white-space: pre;
104
+
}
105
+
</style>