diff options
| -rw-r--r-- | README.md | 1 | ||||
| -rw-r--r-- | frontend/hitler-clicker/src/routes/+page.svelte | 19 | ||||
| -rw-r--r-- | frontend/hitler-clicker/src/routes/play/+page.svelte | 3 | ||||
| -rw-r--r-- | frontend/hitler-clicker/src/routes/rank/+layout.svelte | 8 | ||||
| -rw-r--r-- | frontend/hitler-clicker/src/routes/rank/+page.svelte | 102 |
5 files changed, 131 insertions, 2 deletions
@@ -47,7 +47,6 @@ curl -X POST -d '{ "key": "value" }' http://localhost:8000/yourapifile.php ### Frontend - sort landing page team clicks by amount -- rank page - play page: team-based images - play page: click on any key press - find out if cookie banner is legally required diff --git a/frontend/hitler-clicker/src/routes/+page.svelte b/frontend/hitler-clicker/src/routes/+page.svelte index c21a283..ed1657c 100644 --- a/frontend/hitler-clicker/src/routes/+page.svelte +++ b/frontend/hitler-clicker/src/routes/+page.svelte @@ -9,6 +9,8 @@ import { slide, scale } from 'svelte/transition'; + import { page } from '$app/state'; + import Login from '$lib/login.svelte'; let axis = $state(0); @@ -63,6 +65,23 @@ </main> +<section class="flex items-center justify-center"> + + <button class=" + py-5 px-10 + bg-amber-300 dark:bg-amber-300 text-stone-900 + hover:bg-amber-400 hover:dark:bg-amber-400 + active:translate-y-0.5 active:shadow-none + border-2 border-amber-500 + font-bold text-2xl + rounded-2xl + shadow-sm shadow-amber-500 + " onclick={() => { + window.location.href = `${page.url.origin}/rank/`; + }}>Leaderboard</button> + +</section> + <Login /> <footer class="flex flex-col items-center justify-center text-center my-15 mx-25 mx-0"> diff --git a/frontend/hitler-clicker/src/routes/play/+page.svelte b/frontend/hitler-clicker/src/routes/play/+page.svelte index 2593fe2..784bbb4 100644 --- a/frontend/hitler-clicker/src/routes/play/+page.svelte +++ b/frontend/hitler-clicker/src/routes/play/+page.svelte @@ -138,7 +138,8 @@ 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="/" 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>{response.name}</p> <div> diff --git a/frontend/hitler-clicker/src/routes/rank/+layout.svelte b/frontend/hitler-clicker/src/routes/rank/+layout.svelte new file mode 100644 index 0000000..85b696e --- /dev/null +++ b/frontend/hitler-clicker/src/routes/rank/+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/rank/+page.svelte b/frontend/hitler-clicker/src/routes/rank/+page.svelte new file mode 100644 index 0000000..8525d13 --- /dev/null +++ b/frontend/hitler-clicker/src/routes/rank/+page.svelte @@ -0,0 +1,102 @@ +<script> + // @ts-nocheck + + /* hitler-clicer + * leaderboard 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'; + +</script> + +<main class=" + flex flex-col items-center justify-center my-10 mx-15 text-center +"> + + <h1 class="text-6xl font-bold my-5">Leaderboard:</h1> + + <p>reminder: refresh button goes here</p> + + {#await fetch("http://localhost:8000/rank.php").then((response) => response.json())} + <p>...</p> + {:then response} + + <table> + <thead> + <tr> + <th>Team:</th> + <th>Name:</th> + <th>Contribution:</th> + </tr> + </thead> + <tbody> + + {#each Object.keys(response) as id} + + <tr class={response[id].team}> + <td>{response[id].team}</td> + <td>{id}</td> + <td>{response[id].clicks}</td> + </tr> + + {/each} + + </tbody> + </table> + + {:catch error} + <pre>{error}</pre> + {/await} + +</main> + +<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="/play" class="text-neutral-800 dark:text-neutral-900 underline">play</a> + ]</span> + <p></p> + <div> + </div> +</footer> + +<style> + /* reminder to set styles for mobile layout and colors for dark mode */ + table { + table-layout: auto; + width: 100%; + border-collapse: collapse; + font-family: monospace; + } + thead th { + color: red; /* change */ + background-color: black; /* change */ + } + th, td { + border: 1px solid red; /* change */ + padding: 0.5rem; + font-size: 1.3rem; + } + th:first-child, td:first-child { + text-align: left; + } + th:last-child, td:last-child { + text-align: right; + } + .axis { + background-color: green; /* change */ + } + .allies { + background-color: blue; /* change */ + } + .soviet { + background-color: red; /* change */ + } + +</style> |