aboutsummaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
authorhitlerrip <git@hitler.rip>2025-07-30 08:10:12 +0200
committerhitlerrip <git@hitler.rip>2025-07-30 08:10:12 +0200
commit298715b895684afc91b4dd03fb07a9007a70378c (patch)
tree3e42c6176c72cb3565a08c7e6f7575c9263aec10 /frontend
parentb0518897d323264fb376785fbf4ea266eae254d7 (diff)
downloadhitler-clicker-298715b895684afc91b4dd03fb07a9007a70378c.tar.gz
hitler-clicker-298715b895684afc91b4dd03fb07a9007a70378c.tar.bz2
hitler-clicker-298715b895684afc91b4dd03fb07a9007a70378c.zip
functional landing page
grabs token from logins and sends request to the apis
Diffstat (limited to 'frontend')
-rw-r--r--frontend/hitler-clicker/src/routes/+page.svelte91
-rw-r--r--frontend/hitler-clicker/src/routes/main/+layout.svelte8
-rw-r--r--frontend/hitler-clicker/src/routes/main/+page.svelte12
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>