diff options
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} |