login redesign

- made login section a component
- redesigned login section
- other minor changes

4 files changed, 149 insertions, 117 deletions

diff --git a/README.md b/README.md
index 8989c34..6407dec 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,6 @@ curl -X POST -d '{ "key": "value" }' http://localhost:8000/yourapifile.php
 
 ### Frontend
 
-- login to components
 - sort landing page team clicks by amount
 - rank page
 - play page (token in cookies?)
diff --git a/frontend/hitler-clicker/src/lib/index.ts b/frontend/hitler-clicker/src/lib/index.ts
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/frontend/hitler-clicker/src/lib/index.ts
diff --git a/frontend/hitler-clicker/src/routes/+page.svelte b/frontend/hitler-clicker/src/routes/+page.svelte
index d088973..7dba86c 100644
--- a/frontend/hitler-clicker/src/routes/+page.svelte
+++ b/frontend/hitler-clicker/src/routes/+page.svelte
@@ -9,9 +9,7 @@
 
 	import { page } from '$app/state';
 
-	let name = $state("");
-	let password = $state("");
-	let team = $state("axis");
+	import Login from './lib/login.svelte'; // why is $lib broken?
 
 	let axis = $state(0);
 	let allies = $state(0);
@@ -32,53 +30,6 @@
 		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="
@@ -87,7 +38,7 @@
 
 	<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>
+	<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>
@@ -100,69 +51,12 @@
 
 </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>
+<Login />
 
-</div>
+<footer class="flex flex-col items-center justify-center text-center my-15 mx-25 mx-0">
+	<hr class="text-neutral-400 dark:text-neutral-700 w-[90%] max-w-[90%] md:w-1/2 md:max-w-1/2 mb-3" />
+	<span class="text-md text-neutral-400 dark:text-neutral-700">
+		© 2025 hitler.rip &ltweb@hitler.rip&gt<br />
+		licensed under <a href="https://www.gnu.org/licenses/agpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer" class="text-neutral-400 dark:text-neutral-700 underline">AGPv3-or-later</a>
+	</span>
+</footer>
diff --git a/frontend/hitler-clicker/src/routes/lib/login.svelte b/frontend/hitler-clicker/src/routes/lib/login.svelte
new file mode 100644
index 0000000..cded203
--- /dev/null
+++ b/frontend/hitler-clicker/src/routes/lib/login.svelte
@@ -0,0 +1,139 @@
+<script>
+	// @ts-nocheck
+
+	/* hitler-clicer
+	 * login component
+	 * © 2025 hitler.rip <git@hitler.rip>
+	 * licensed under AGPLv3-or-later; see licenses/code.md for more information
+	 */
+
+	let name = $state("");
+	let password = $state("");
+	let team = $state("axis");
+
+	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>
+
+<div class="
+	flex flex-col md:flex-row items-center md:items-start justify-center mx-15 text-center mt-20
+">
+
+	<div class="w-100 md:w-1/2 lg:w-1/3 xl:w-1/4">
+
+		<h2 class="text-4xl font-bold my-5">Account:</h2>
+
+		<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 />
+
+		<div class="md:my-18"></div>
+		<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>
+
+	<div class="my-10 md:my-0 md:mx-15 border-1 border-neutral-300 dark:border-neutral-700 w-100 md:w-0 md:h-100"></div>
+
+	<div class="w-100 md:w-1/2 lg:w-1/3 xl:w-1/4">
+
+		<h2 class="text-4xl font-bold mb-5 mt-0 md:mt-5">Register:</h2>
+
+		<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>
+
+</div>
+
+<div class="
+	flex flex-col items-center justify-center mb-10 mx-15 text-center
+">
+
+	<div class="my-10 border-1 border-neutral-300 dark:border-neutral-700 w-100 md:border-0"></div>
+
+	<h2 class="text-4xl font-bold mb-10">Play Anonymously:</h2>
+
+	<p class="text-xl text-red-800 dark:text-red-700"><i>(not implemented on backend yet.)</i></p>
+
+</div>