diff options
| -rw-r--r-- | frontend/hitler-clicker/src/routes/+page.svelte | 91 | ||||
| -rw-r--r-- | frontend/hitler-clicker/src/routes/main/+layout.svelte | 8 | ||||
| -rw-r--r-- | frontend/hitler-clicker/src/routes/main/+page.svelte | 12 |
3 files changed, 106 insertions, 5 deletions
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> |