remise du tableau de score

srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte

@@ -27,30 +27,24 @@
 	}
 </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">
+<div class="principal-div">
+	<table class="stats-table">
 		<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>
+				<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 scope="row">{i + 1}</th>
+					<th>{i + 1}</th>
 					{#if user.username === currentUser.username}
 						<td><b>You ({user.username})</b></td>
 					{:else}
@@ -64,11 +58,47 @@
 			{/each}
 		</tbody>
 	</table>
-		</div>
-	</div>
 </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>