From 298715b895684afc91b4dd03fb07a9007a70378c Mon Sep 17 00:00:00 2001
From: hitlerrip <git@hitler.rip>
Date: Wed, 30 Jul 2025 08:10:12 +0200
Subject: functional landing page

grabs token from logins and sends request to the apis
---
 frontend/hitler-clicker/src/routes/+page.svelte    | 91 ++++++++++++++++++++--
 .../hitler-clicker/src/routes/main/+layout.svelte  |  8 ++
 .../hitler-clicker/src/routes/main/+page.svelte    | 12 +++
 3 files changed, 106 insertions(+), 5 deletions(-)
 create mode 100644 frontend/hitler-clicker/src/routes/main/+layout.svelte
 create mode 100644 frontend/hitler-clicker/src/routes/main/+page.svelte

diff --git a/frontend/hitler-clicker/src/routes/+page.svelte b/frontend/hitler-clicker/src/routes/+page.svelte
index 9860c21..c9ed77e 100644
--- a/frontend/hitler-clicker/src/routes/+page.svelte
+++ b/frontend/hitler-clicker/src/routes/+page.svelte
@@ -1,8 +1,78 @@
 <script>
 	// @ts-nocheck
+
+	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="
@@ -13,6 +83,14 @@
 	
 	<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>
 
@@ -36,7 +114,10 @@
 
 		<button class="
 			font-mono p-2 border-1 border-stone-950 dark:border-red-50 bg-neutral-300 dark:bg-neutral-700 w-full
-		">log in</button>
+			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>
 
@@ -66,7 +147,10 @@
 
 		<button class="
 			font-mono p-2 border-1 border-stone-950 dark:border-red-50 bg-neutral-300 dark:bg-neutral-700 w-full
-		">join</button>
+			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>
 
@@ -75,7 +159,4 @@
 
 	<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/+layout.svelte b/frontend/hitler-clicker/src/routes/main/+layout.svelte
new file mode 100644
index 0000000..85b696e
--- /dev/null
+++ b/frontend/hitler-clicker/src/routes/main/+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/main/+page.svelte b/frontend/hitler-clicker/src/routes/main/+page.svelte
new file mode 100644
index 0000000..bb41bb8
--- /dev/null
+++ b/frontend/hitler-clicker/src/routes/main/+page.svelte
@@ -0,0 +1,12 @@
+<script>
+	// @ts-nocheck
+
+</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>
+	
+</main>
-- 
cgit v1.2.3