From 4a852b58a566c8d29f08a3b2519917b668ff6a6f Mon Sep 17 00:00:00 2001
From: hitlerrip <git@hitler.rip>
Date: Wed, 30 Jul 2025 10:39:20 +0200
Subject: play page

- moved login component to proper directory (oops)
- created play page
- other minor changes
---
 README.md                                          |   3 +-
 frontend/hitler-clicker/src/lib/login.svelte       | 142 +++++++++++++++++++++
 frontend/hitler-clicker/src/routes/+page.svelte    |   4 +-
 .../hitler-clicker/src/routes/lib/login.svelte     | 139 --------------------
 .../hitler-clicker/src/routes/main/+page.svelte    |  48 ++++++-
 5 files changed, 192 insertions(+), 144 deletions(-)
 create mode 100644 frontend/hitler-clicker/src/lib/login.svelte
 delete mode 100644 frontend/hitler-clicker/src/routes/lib/login.svelte

diff --git a/README.md b/README.md
index 6407dec..4b084d9 100644
--- a/README.md
+++ b/README.md
@@ -48,4 +48,5 @@ curl -X POST -d '{ "key": "value" }' http://localhost:8000/yourapifile.php
 
 - sort landing page team clicks by amount
 - rank page
-- play page (token in cookies?)
+- design play page and make functional
+- find out if cookie banner is legally required
diff --git a/frontend/hitler-clicker/src/lib/login.svelte b/frontend/hitler-clicker/src/lib/login.svelte
new file mode 100644
index 0000000..9ee938c
--- /dev/null
+++ b/frontend/hitler-clicker/src/lib/login.svelte
@@ -0,0 +1,142 @@
+<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
+	 */
+
+	import { page } from '$app/state';
+
+	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!");
+					document.cookie = `token=${data.token}`;
+					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>
diff --git a/frontend/hitler-clicker/src/routes/+page.svelte b/frontend/hitler-clicker/src/routes/+page.svelte
index 7dba86c..b05a3b9 100644
--- a/frontend/hitler-clicker/src/routes/+page.svelte
+++ b/frontend/hitler-clicker/src/routes/+page.svelte
@@ -7,9 +7,7 @@
 	 * licensed under AGPLv3-or-later; see licenses/code.md for more information
 	 */
 
-	import { page } from '$app/state';
-
-	import Login from './lib/login.svelte'; // why is $lib broken?
+	import Login from '$lib/login.svelte';
 
 	let axis = $state(0);
 	let allies = $state(0);
diff --git a/frontend/hitler-clicker/src/routes/lib/login.svelte b/frontend/hitler-clicker/src/routes/lib/login.svelte
deleted file mode 100644
index cded203..0000000
--- a/frontend/hitler-clicker/src/routes/lib/login.svelte
+++ /dev/null
@@ -1,139 +0,0 @@
-<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>
diff --git a/frontend/hitler-clicker/src/routes/main/+page.svelte b/frontend/hitler-clicker/src/routes/main/+page.svelte
index d999323..dc7842c 100644
--- a/frontend/hitler-clicker/src/routes/main/+page.svelte
+++ b/frontend/hitler-clicker/src/routes/main/+page.svelte
@@ -7,6 +7,25 @@
 	 * licensed under AGPLv3-or-later; see licenses/code.md for more information
 	 */
 
+	import { onMount } from 'svelte';
+
+	let token = $state("");
+
+	onMount(() => {
+
+		if (document.cookie) {
+
+			token = document.cookie.slice(6);
+			console.log(token);
+
+		} else {
+
+			console.log("no token provided. anonymous play is not supported yet!")
+
+		}
+
+	});
+
 </script>
 
 <main class="
@@ -14,5 +33,32 @@
 ">
 
 	<h1 class="text-6xl font-bold my-5">Hitler Clicker!</h1>
-	
+
+	{#if token}
+
+	{#await fetch("http://localhost:8000/info.php", {
+		method: "POST",
+		headers: {
+			"Accept": "application/json",
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify({
+			"token": token
+		})
+	}).then((response) => response.json())}
+		<p>...</p>
+	{:then response}
+
+		<p>{response.name} {response.team} {response.clicks}</p>
+
+	{:catch error}
+		<pre>{error.message}</pre>
+	{/await}
+
+	{:else}
+
+		<p>anonymous play not supported yet. please return to the landing page and log in from there.</p>
+
+	{/if}
+
 </main>
-- 
cgit v1.2.3