rimple leaderboard

added a simple leaderboard that is not properly styled and is still
missing some features, most notably a refresh button; along with other
minor changes

4 files changed, 131 insertions, 1 deletions

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>