From a346b7d5a2b6118f59a0dae85d1943025179418b Mon Sep 17 00:00:00 2001
From: batche <chebadad@lilo.org>
Date: Mon, 9 Jan 2023 11:09:33 +0100
Subject: [PATCH] remise du tableau de score

---
 .../api_front/src/pages/game/Ranking.svelte   | 108 +++++++++++-------
 1 file changed, 69 insertions(+), 39 deletions(-)

diff --git a/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte b/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
index 8f41369b..5585b051 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
@@ -27,48 +27,78 @@
 	}
 </script>
 <Header />
+<br />
 
-<div class="container">
-	<div class="row">
-		<div class="col-12">
-			<h1>Ranking</h1>
-		</div>
-	</div>
-	<div class="row">
-		<div class="col-12">
-			<table class="table table-striped">
-				<thead>
-					<tr>
-						<th scope="col">#</th>
-						<th scope="col">Username</th>
-						<th scope="col">Win</th>
-						<th scope="col">Lose</th>
-						<th scope="col">Draw</th>
-						<th scope="col">Games Played</th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each allUsers as user, i}
-						<tr>
-							<th scope="row">{i + 1}</th>
-							{#if user.username === currentUser.username}
-								<td><b>You ({user.username})</b></td>
-							{:else}
-							<td>{user.username}</td>
-							{/if}
-							<td>{user.stats.winGame}</td>
-							<td>{user.stats.loseGame}</td>
-							<td>{user.stats.drawGame}</td>
-							<td>{user.stats.totalGame}</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		</div>
-	</div>
+<div class="principal-div">
+	<table class="stats-table">
+		<thead>
+			<tr>
+				<th>#</th>
+				<th>Username</th>
+				<th>Win</th>
+				<th>Lose</th>
+				<th>Draw</th>
+				<th>Games Played</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each allUsers as user, i}
+				<tr>
+					<th>{i + 1}</th>
+					{#if user.username === currentUser.username}
+						<td><b>You ({user.username})</b></td>
+					{:else}
+					<td>{user.username}</td>
+					{/if}
+					<td>{user.stats.winGame}</td>
+					<td>{user.stats.loseGame}</td>
+					<td>{user.stats.drawGame}</td>
+					<td>{user.stats.totalGame}</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
 </div>
 
-
 <style>
 
+		.principal-div {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.stats-table {
+		margin-left: auto;
+		margin-right: auto;
+		font-size: 0.9em;
+		font-family: sans-serif;
+		min-width: 400px;
+	}
+
+	.stats-table thead tr {
+		background-color: #618174;
+		color: #ffffff;
+	}
+
+	.stats-table th,
+	.stats-table td {
+		padding: 12px 15px;
+	}
+
+	.stats-table tbody tr {
+		border-bottom: 1px solid #dddddd;
+	}
+
+	.stats-table tbody tr:nth-of-type(even) {
+		background-color: #f3f3f3;
+	}
+
+	.stats-table tbody tr:last-of-type {
+		border-bottom: 2px solid #618174;
+	}
+
+	.stats-table tbody tr.active-row {
+		font-weight: bold;
+		color: #618174;
+	}
 </style>