From 6bc031459fdd8cf89bd8567487fe65a8b268c739 Mon Sep 17 00:00:00 2001
From: hitlerrip <git@hitler.rip>
Date: Wed, 30 Jul 2025 11:19:34 +0200
Subject: play page

added basic functionality to the play page and moved it to /play/
---
 README.md                                          |   4 +-
 frontend/hitler-clicker/src/lib/login.svelte       |   2 +-
 .../hitler-clicker/src/routes/main/+layout.svelte  |   8 --
 .../hitler-clicker/src/routes/main/+page.svelte    |  64 -----------
 .../hitler-clicker/src/routes/play/+layout.svelte  |   8 ++
 .../hitler-clicker/src/routes/play/+page.svelte    | 123 +++++++++++++++++++++
 6 files changed, 135 insertions(+), 74 deletions(-)
 delete mode 100644 frontend/hitler-clicker/src/routes/main/+layout.svelte
 delete mode 100644 frontend/hitler-clicker/src/routes/main/+page.svelte
 create mode 100644 frontend/hitler-clicker/src/routes/play/+layout.svelte
 create mode 100644 frontend/hitler-clicker/src/routes/play/+page.svelte

diff --git a/README.md b/README.md
index 4b084d9..22976c8 100644
--- a/README.md
+++ b/README.md
@@ -48,5 +48,7 @@ curl -X POST -d '{ "key": "value" }' http://localhost:8000/yourapifile.php
 
 - sort landing page team clicks by amount
 - rank page
-- design play page and make functional
+- play page: team-based images
+- play page: functional navigation bar
+- play page: click on any key press
 - 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
index 9ee938c..a0a8b73 100644
--- a/frontend/hitler-clicker/src/lib/login.svelte
+++ b/frontend/hitler-clicker/src/lib/login.svelte
@@ -30,7 +30,7 @@
 					//console.log(data.token);
 					console.log("logged in!");
 					document.cookie = `token=${data.token}`;
-					window.location.href = `${page.url.origin}/main/`;
+					window.location.href = `${page.url.origin}/play/`;
 				} else {
 					alert((data.status) ? `ERROR: ${data.status}` : `ERROR: something went wrong.`);
 				}
diff --git a/frontend/hitler-clicker/src/routes/main/+layout.svelte b/frontend/hitler-clicker/src/routes/main/+layout.svelte
deleted file mode 100644
index 85b696e..0000000
--- a/frontend/hitler-clicker/src/routes/main/+layout.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-	import '../../app.css';
-	
-	let { children } = $props();
-</script>
-
-{@render children()}
-
diff --git a/frontend/hitler-clicker/src/routes/main/+page.svelte b/frontend/hitler-clicker/src/routes/main/+page.svelte
deleted file mode 100644
index dc7842c..0000000
--- a/frontend/hitler-clicker/src/routes/main/+page.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-	// @ts-nocheck
-
-	/* hitler-clicer
-	 * main page
-	 * © 2025 hitler.rip <git@hitler.rip>
-	 * 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="
-	flex flex-col items-center justify-center my-10 mx-15 text-center
-">
-
-	<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>
diff --git a/frontend/hitler-clicker/src/routes/play/+layout.svelte b/frontend/hitler-clicker/src/routes/play/+layout.svelte
new file mode 100644
index 0000000..85b696e
--- /dev/null
+++ b/frontend/hitler-clicker/src/routes/play/+layout.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import '../../app.css';
+	
+	let { children } = $props();
+</script>
+
+{@render children()}
+
diff --git a/frontend/hitler-clicker/src/routes/play/+page.svelte b/frontend/hitler-clicker/src/routes/play/+page.svelte
new file mode 100644
index 0000000..ad58a72
--- /dev/null
+++ b/frontend/hitler-clicker/src/routes/play/+page.svelte
@@ -0,0 +1,123 @@
+<script>
+	// @ts-nocheck
+
+	/* hitler-clicer
+	 * main page
+	 * © 2025 hitler.rip <git@hitler.rip>
+	 * licensed under AGPLv3-or-later; see licenses/code.md for more information
+	 */
+
+	import { page } from '$app/state';
+
+	import { onMount } from 'svelte';
+
+	let token = $state("");
+
+	onMount(() => {
+		if (document.cookie) {
+			token = document.cookie.slice(6);
+		} else {
+			console.log("no token provided.")
+		}
+	});
+
+	let contrib = $state(0);
+
+	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 click() {
+	}
+
+</script>
+
+<main class="
+	flex flex-col items-center justify-center my-10 mx-15 text-center
+">
+
+	<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}
+
+		{#if response.status === "success"}
+
+			<!-- <p>{response.name} {response.team} {response.clicks}</p> -->
+
+			{#if response.team === "axis"}
+				<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>
+			{:else if response.team === "allies"}
+				<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>
+			{:else if response.team === "soviet"}
+				<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>
+			{/if}
+
+			{#if response.team}
+				<input type="image" src="/favicon.svg" alt="click to add points!" class="w-70" onclick={() => {
+					fetch("http://localhost:8000/click.php", {
+						method: "POST",
+						headers: {
+							"Accept": "application/json",
+							"Content-Type": "application/json",
+						},
+						body: JSON.stringify({
+							"token": token
+						})
+					})
+					axis++
+					allies++
+					soviets++
+					contrib++
+				}} />
+			{/if}
+
+			<p>user ui and navigation bar goes here, permanently pinned to the bottom of the screen</p>
+			<p>{Number(response.clicks) + contrib}</p>
+
+		{:else}
+			<p class="text-xl text-red-800 dark:text-red-700"><b>ERROR: {response.status}</b></p>
+		{/if}
+
+	{:catch error}
+		<pre>{error.message}</pre>
+	{/await}
+
+	{:else}
+
+		<p class="text-xl text-red-800 dark:text-red-700"><i>(anonymous play not supported yet. please <a href={page.url.origin} class="underline">return to the landing page and log in</a> from there.)</i></p>
+
+	{/if}
+
+</main>
-- 
cgit v1.2.3