diff options
| -rw-r--r-- | README.md | 4 | ||||
| -rw-r--r-- | frontend/hitler-clicker/src/lib/login.svelte | 2 | ||||
| -rw-r--r-- | frontend/hitler-clicker/src/routes/main/+page.svelte | 64 | ||||
| -rw-r--r-- | frontend/hitler-clicker/src/routes/play/+layout.svelte (renamed from frontend/hitler-clicker/src/routes/main/+layout.svelte) | 0 | ||||
| -rw-r--r-- | frontend/hitler-clicker/src/routes/play/+page.svelte | 123 |
5 files changed, 127 insertions, 66 deletions
@@ -48,5 +48,7 @@ curl -X POST -d '{ "key": "value" }' http://localhost:8000/yourapifile.php - sort landing page team clicks by amount - rank page -- design play page and make functional +- play page: team-based images +- play page: functional navigation bar +- play page: click on any key press - find out if cookie banner is legally required diff --git a/frontend/hitler-clicker/src/lib/login.svelte b/frontend/hitler-clicker/src/lib/login.svelte index 9ee938c..a0a8b73 100644 --- a/frontend/hitler-clicker/src/lib/login.svelte +++ b/frontend/hitler-clicker/src/lib/login.svelte @@ -30,7 +30,7 @@ //console.log(data.token); console.log("logged in!"); document.cookie = `token=${data.token}`; - window.location.href = `${page.url.origin}/main/`; + window.location.href = `${page.url.origin}/play/`; } else { alert((data.status) ? `ERROR: ${data.status}` : `ERROR: something went wrong.`); } diff --git a/frontend/hitler-clicker/src/routes/main/+page.svelte b/frontend/hitler-clicker/src/routes/main/+page.svelte deleted file mode 100644 index dc7842c..0000000 --- a/frontend/hitler-clicker/src/routes/main/+page.svelte +++ /dev/null @@ -1,64 +0,0 @@ -<script> - // @ts-nocheck - - /* hitler-clicer - * main page - * © 2025 hitler.rip <git@hitler.rip> - * licensed under AGPLv3-or-later; see licenses/code.md for more information - */ - - import { onMount } from 'svelte'; - - let token = $state(""); - - onMount(() => { - - if (document.cookie) { - - token = document.cookie.slice(6); - console.log(token); - - } else { - - console.log("no token provided. anonymous play is not supported yet!") - - } - - }); - -</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> - - {#if token} - - {#await fetch("http://localhost:8000/info.php", { - method: "POST", - headers: { - "Accept": "application/json", - "Content-Type": "application/json", - }, - body: JSON.stringify({ - "token": token - }) - }).then((response) => response.json())} - <p>...</p> - {:then response} - - <p>{response.name} {response.team} {response.clicks}</p> - - {:catch error} - <pre>{error.message}</pre> - {/await} - - {:else} - - <p>anonymous play not supported yet. please return to the landing page and log in from there.</p> - - {/if} - -</main> diff --git a/frontend/hitler-clicker/src/routes/main/+layout.svelte b/frontend/hitler-clicker/src/routes/play/+layout.svelte index 85b696e..85b696e 100644 --- a/frontend/hitler-clicker/src/routes/main/+layout.svelte +++ b/frontend/hitler-clicker/src/routes/play/+layout.svelte diff --git a/frontend/hitler-clicker/src/routes/play/+page.svelte b/frontend/hitler-clicker/src/routes/play/+page.svelte new file mode 100644 index 0000000..ad58a72 --- /dev/null +++ b/frontend/hitler-clicker/src/routes/play/+page.svelte @@ -0,0 +1,123 @@ +<script> + // @ts-nocheck + + /* hitler-clicer + * main page + * © 2025 hitler.rip <git@hitler.rip> + * licensed under AGPLv3-or-later; see licenses/code.md for more information + */ + + import { page } from '$app/state'; + + import { onMount } from 'svelte'; + + let token = $state(""); + + onMount(() => { + if (document.cookie) { + token = document.cookie.slice(6); + } else { + console.log("no token provided.") + } + }); + + 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.status === "online") { + axis = Number(data.axis); + allies = Number(data.allies); + soviets = Number(data.soviet); + } + }) + }) + await timer(3000); + getstats(); + } + getstats(); + + function click() { + } + +</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> + + {#if token} + + {#await fetch("http://localhost:8000/info.php", { + method: "POST", + headers: { + "Accept": "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + "token": token + }) + }).then((response) => response.json())} + <p>...</p> + {:then response} + + {#if response.status === "success"} + + <!-- <p>{response.name} {response.team} {response.clicks}</p> --> + + {#if response.team === "axis"} + <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> + {:else if response.team === "allies"} + <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> + {:else if response.team === "soviet"} + <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> + {/if} + + {#if response.team} + <input type="image" src="/favicon.svg" alt="click to add points!" class="w-70" onclick={() => { + fetch("http://localhost:8000/click.php", { + method: "POST", + headers: { + "Accept": "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + "token": token + }) + }) + axis++ + allies++ + soviets++ + contrib++ + }} /> + {/if} + + <p>user ui and navigation bar goes here, permanently pinned to the bottom of the screen</p> + <p>{Number(response.clicks) + contrib}</p> + + {:else} + <p class="text-xl text-red-800 dark:text-red-700"><b>ERROR: {response.status}</b></p> + {/if} + + {:catch error} + <pre>{error.message}</pre> + {/await} + + {: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> + + {/if} + +</main> |