From d2a4812e997b80e07b359d9f91376b3dd35d48c7 Mon Sep 17 00:00:00 2001
From: hitlerrip <git@hitler.rip>
Date: Sat, 2 Aug 2025 20:27:32 +0200
Subject: styled leaderboard and added refresh button

---
 .../hitler-clicker/src/routes/rank/+page.svelte    | 101 +++++++++++++--------
 1 file changed, 61 insertions(+), 40 deletions(-)

diff --git a/frontend/hitler-clicker/src/routes/rank/+page.svelte b/frontend/hitler-clicker/src/routes/rank/+page.svelte
index 8525d13..51f26b7 100644
--- a/frontend/hitler-clicker/src/routes/rank/+page.svelte
+++ b/frontend/hitler-clicker/src/routes/rank/+page.svelte
@@ -9,46 +9,61 @@
 
 	import { scale, slide } from 'svelte/transition';
 
+	let refresh = $state(0);
+
 </script>
 
 <main class="
-	flex flex-col items-center justify-center my-10 mx-15 text-center
+	flex flex-col items-center justify-center md:my-10 md: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}
+	<button class="
+		my-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 activve:shadow-none
+		border-2 border-amber-500
+		font-bold text-2xl
+		rounded-2xl
+		shadow-sm shadow-amber-500
+	" onclick={() => refresh++}>Refresh</button>
+
+	{#key refresh}
+
+		{#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}
+
+	{/key}
 
 </main>
 
@@ -67,36 +82,42 @@
 </footer>
 
 <style>
-	/* reminder to set styles for mobile layout and colors for dark mode */
 	table {
+		margin-top: 15px;
 		table-layout: auto;
 		width: 100%;
 		border-collapse: collapse;
 		font-family: monospace;
 	}
 	thead th {
-		color: red; /* change */
-		background-color: black; /* change */
+		color: var(--color-red-500);
+		background-color: var(--color-zinc-300);
+		@media (prefers-color-scheme: dark) {
+			color: var(--color-red-700);
+			background-color: var(--color-zinc-700);
+		}
 	}
 	th, td {
-		border: 1px solid red; /* change */
+		border: 1px solid var(--color-neutral-400);
 		padding: 0.5rem;
 		font-size: 1.3rem;
+		color: var(--color-neutral-50);
 	}
 	th:first-child, td:first-child {
 		text-align: left;
+		width: 150px;
 	}
 	th:last-child, td:last-child {
 		text-align: right;
 	}
 	.axis {
-		background-color: green; /* change */
+		background-color: var(--color-amber-900);
 	}
 	.allies {
-		background-color: blue; /* change */
+		background-color: var(--color-sky-700);
 	}
 	.soviet {
-		background-color: red; /* change */
+		background-color: var(--color-red-800);
 	}
 
 </style>
-- 
cgit v1.2.3