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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
<script>
// @ts-nocheck
/* hitler-clicer
* landing page
* © 2025 hitler.rip <git@hitler.rip>
* licensed under AGPLv3-or-later; see licenses/code.md for more information
*/
import { page } from '$app/state';
let name = $state("");
let password = $state("");
let team = $state("axis");
let axis = $state(0);
let allies = $state(0);
let soviets = $state(0);
const timer = ms => new Promise(response => setTimeout(response, ms))
async function getstats() {
fetch("http://localhost:8000/index.php").then((response) => {
return response.json().then((data) => {
if (data.status === "online") {
axis = Number(data.axis);
allies = Number(data.allies);
soviets = Number(data.soviet);
}
})
})
await timer(3000);
getstats();
}
getstats();
function login() {
fetch("http://localhost:8000/auth.php", {
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
"name": name,
"password": password
})
}).then((response) => {
return response.json().then((data) => {
if (data.token) {
//console.log(data.token);
console.log("logged in!");
window.location.href = `${page.url.origin}/main/`;
} else {
alert((data.status) ? `ERROR: ${data.status}` : `ERROR: something went wrong.`);
}
})
})
}
function join() {
fetch("http://localhost:8000/join.php", {
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
"name": name,
"password": password,
"team": team
})
}).then((response) => {
return response.json().then((data) => {
if (data.status === "success") {
login();
} else {
alert((data.status) ? `ERROR: ${data.status}` : `ERROR: something went wrong.`);
}
})
})
}
</script>
<main class="
flex flex-col items-center justify-center my-10 mx-15 text-center
">
<h1 class="text-6xl font-bold my-5">Welcome to Hitler Clicker!</h1>
<p class="text-2xl">a stupid game where you have to click in order to score points for your team.</p>
<h2 class="text-3xl font-bold mt-5 text-amber-900 dark:text-amber-700">࿕ Axis ࿕</h2>
<h3 class="text-3xl font-bold mb-2 text-amber-900 dark:text-amber-700">{axis}</h3>
<h2 class="text-3xl font-bold mt-5 text-sky-700 dark:text-sky-400">⊙ Allies ⊙</h2>
<h3 class="text-3xl font-bold mb-2 text-sky-700 dark:text-sky-400">{allies}</h3>
<h2 class="text-3xl font-bold mt-5 text-red-800 dark:text-red-600">☭ Soviets ☭</h2>
<h3 class="text-3xl font-bold mb-5 text-red-800 dark:text-red-600">{soviets}</h3>
</main>
<div class="
flex flex-col items-center justify-center my-10 mx-15 text-center mt-20
">
<h2 class="text-4xl font-bold my-5">Play with an Account:</h2>
<div>
<label>
<span>Name:</span><br />
<input class="font-mono p-2 border-1 border-stone-950 dark:border-red-50 bg-neutral-200 dark:bg-neutral-600 w-full" type="text" placeholder="name" bind:value={name} name="name" />
</label><br />
<label>
<span>Password:</span><br />
<input class="font-mono p-2 border-1 border-stone-950 dark:border-red-50 bg-neutral-200 dark:bg-neutral-600 w-full" type="password" placeholder="password" bind:value={password} name="password" />
</label><hr class="my-3" />
<button class="
font-mono p-2 border-1 border-stone-950 dark:border-red-50 bg-neutral-300 dark:bg-neutral-700 w-full
shadow-md shadow-red-200 dark:shadow-red-800
hover:bg-neutral-400 hover:dark:bg-neutral-800
active:bg-neutral-400 active:dark:bg-neutral-800 active:translate-y-0.5 active:shadow-none
" onclick={login}>log in</button>
</div>
<h2 class="text-4xl font-bold my-5">Create an Account:</h2>
<div>
<label>
<span>Name:</span><br />
<input class="font-mono p-2 border-1 border-stone-950 dark:border-red-50 bg-neutral-200 dark:bg-neutral-600 w-full" type="text" placeholder="name" bind:value={name} name="name" />
</label><br />
<label>
<span>Password:</span><br />
<input class="font-mono p-2 border-1 border-stone-950 dark:border-red-50 bg-neutral-200 dark:bg-neutral-600 w-full" type="password" placeholder="password" bind:value={password} name="password" />
</label><br />
<label>
<span>Team:</span><br />
<select class="font-mono p-2 border-1 border-stone-950 dark:border-red-50 bg-neutral-200 dark:bg-neutral-600 w-full" bind:value={team} name="team">
<!-- these could be dynamically generated! -->
<option value="axis">Axis</option>
<option value="allies">Allies</option>
<option value="soviet">Soviets</option>
</select>
</label><hr class="my-3" />
<button class="
font-mono p-2 border-1 border-stone-950 dark:border-red-50 bg-neutral-300 dark:bg-neutral-700 w-full
shadow-md shadow-red-200 dark:shadow-red-800
hover:bg-neutral-400 hover:dark:bg-neutral-800
active:bg-neutral-400 active:dark:bg-neutral-800 active:translate-y-0.5 active:shadow-none
" onclick={join}>join</button>
</div>
<h2 class="text-4xl font-bold my-10">Play Anonymously:</h2>
<p class="text-xl text-red-800 dark:text-red-700"><i>(not implemented on backend yet.)</i></p>
</div>
|
