anon frontend

added anonymous play to frontend

4 files changed, 154 insertions, 2 deletions

diff --git a/frontend/hitler-clicker/src/lib/login.svelte b/frontend/hitler-clicker/src/lib/login.svelte
index a0a8b73..f591553 100644
--- a/frontend/hitler-clicker/src/lib/login.svelte
+++ b/frontend/hitler-clicker/src/lib/login.svelte
@@ -137,6 +137,20 @@
 
 	<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 class="flex flex-col md:flex-row">
+
+		<a href="anon?team=axis" aria-label="click for axis" class="w-50 opacity-80 hover:opacity-100">
+			<img src="hitler-idle.png" aria-hidden />
+		</a>
+
+		<a href="anon?team=allies" aria-label="click for allies" class="w-50 opacity-80 hover:opacity-100 my-10 md:my-0">
+			<img src="churchill-idle.png" aria-hidden />
+		</a>
+
+		<a href="anon?team=soviets" aria-label="click for soviets" class="w-50 opacity-80 hover:opacity-100">
+			<img src="stalin-idle.png" aria-hidden />
+		</a>
+
+	</div>
 
 </div>
diff --git a/frontend/hitler-clicker/src/routes/anon/+layout.svelte b/frontend/hitler-clicker/src/routes/anon/+layout.svelte
new file mode 100644
index 0000000..85b696e
--- /dev/null
+++ b/frontend/hitler-clicker/src/routes/anon/+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/anon/+page.svelte b/frontend/hitler-clicker/src/routes/anon/+page.svelte
new file mode 100644
index 0000000..cfde4ec
--- /dev/null
+++ b/frontend/hitler-clicker/src/routes/anon/+page.svelte
@@ -0,0 +1,130 @@
+<script>
+	// @ts-nocheck
+
+	/* hitler-clicer
+	 * anonymous play page
+	 * © 2025 hitler.rip <git@hitler.rip>
+	 * licensed under AGPLv3-or-later; see licenses/code.md for more information
+	 */
+
+	import { scale, slide } from 'svelte/transition';
+
+	import { page } from '$app/state';
+
+	let team = "";
+	if (page.url.search === "?team=soviet" || page.url.search === "?team=soviets") {
+		team = "soviet"
+	} else if (page.url.search === "?team=allies") {
+		team = "allies"
+	} else {
+		team = "axis"
+	}
+
+	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) {
+					axis = Number(data.axis.clicks);
+					allies = Number(data.allies.clicks);
+					soviets = Number(data.soviet.clicks);
+				}
+			})
+		})
+		await timer(3000);
+		getstats();
+	}
+	getstats();
+
+	function click() {
+	}
+
+</script>
+
+<div 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 team === "axis"}
+				<h2 class="text-3xl font-bold mt-5 text-amber-900 dark:text-amber-700">࿕ Axis ࿕</h2>
+				{#key axis}
+					<div transition:slide>
+						<h3 class="text-3xl font-bold mb-2 text-amber-900 dark:text-amber-700">{axis}</h3>
+					</div>
+				{/key}
+
+			{:else if team === "allies"}
+				<h2 class="text-3xl font-bold mt-5 text-sky-700 dark:text-sky-400">⊙ Allies ⊙</h2>
+				{#key allies}
+					<div transition:slide>
+						<h3 class="text-3xl font-bold mb-2 text-sky-700 dark:text-sky-400">{allies}</h3>
+					</div>
+				{/key}
+
+			{:else if team === "soviet"}
+				<h2 class="text-3xl font-bold mt-5 text-red-800 dark:text-red-600">☭ Soviets ☭</h2>
+				{#key axis}
+					<div transition:slide>
+						<h3 class="text-3xl font-bold mb-5 text-red-800 dark:text-red-600">{soviets}</h3>
+					</div>
+				{/key}
+			{/if}
+
+			<button class="mt-5 w-70 active:scale-95" onclick={() => {
+				fetch("http://localhost:8000/anon.php", {
+					method: "POST",
+					headers: {
+						"Accept": "application/json",
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify({
+						"team": team
+					})
+				})
+				axis++
+				allies++
+				soviets++
+				contrib++
+			}} aria-label="click to add points!">
+
+			{#if team === "axis"}
+				<div class="bg-[url(/hitler-idle.png)] active:bg-[url(/hitler-blush.png)] bg-cover w-70 h-70"></div>
+				<div class="bg-[url(/hitler-blush.png)] hidden"></div>
+
+			{:else if team === "allies"}
+				<div class="bg-[url(/churchill-idle.png)] active:bg-[url(/churchill-blush.png)] bg-cover w-70 h-70"></div>
+				<div class="bg-[url(/churchill-blush.png)] hidden"></div>
+
+			{:else if team === "soviet"}
+				<div class="bg-[url(/stalin-idle.png)] active:bg-[url(/stalin-blush.png)] bg-cover w-70 h-70"></div>
+				<div class="bg-[url(/stalin-blush.png)] hidden"></div>
+			{/if}
+
+			</button>
+
+			<footer class="
+				flex flex-row justify-between
+				fixed bottom-0 pb-2 pt-3 px-7 rounded-t-xl w-full max-w-300
+				bg-slate-300 dark:bg-slate-400 text-neutral-800 dark:text-neutral-900
+			">
+				<span>[
+				<a href="/" class="text-neutral-800 dark:text-neutral-900 underline">home</a> /
+				<a href="/rank" class="text-neutral-800 dark:text-neutral-900 underline">rank</a>
+				]</span>
+				<p>Anonymous</p>
+				<div>
+				{#key contrib}
+					<p transition:slide>{Number(0) + contrib}</p>
+				{/key}
+				</div>
+			</footer>
+
+</div>
diff --git a/frontend/hitler-clicker/src/routes/play/+page.svelte b/frontend/hitler-clicker/src/routes/play/+page.svelte
index 67de720..4e19650 100644
--- a/frontend/hitler-clicker/src/routes/play/+page.svelte
+++ b/frontend/hitler-clicker/src/routes/play/+page.svelte
@@ -159,7 +159,7 @@
 
 	{: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>
+		<p class="text-xl text-red-800 dark:text-red-700"><i>(if you did not log in, please <a href={page.url.origin} class="underline">return to the landing page</a> and either log in from there or select the anonymous play.)</i></p>
 
 	{/if}