42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remise du tableau de score

Browse Source
This commit is contained in:
batche
2023-01-09 11:09:33 +01:00
parent 3f9abea672
commit a346b7d5a2
1 changed files with 69 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
View File

@@ -27,48 +27,78 @@
} }
</script> </script>
<Header /> <Header />
<br />
<div class="container"> <div class="principal-div">
<div class="row"> <table class="stats-table">
<div class="col-12"> <thead>
<h1>Ranking</h1> <tr>
</div> <th>#</th>
</div> <th>Username</th>
<div class="row"> <th>Win</th>
<div class="col-12"> <th>Lose</th>
<table class="table table-striped"> <th>Draw</th>
<thead> <th>Games Played</th>
<tr> </tr>
<th scope="col">#</th> </thead>
<th scope="col">Username</th> <tbody>
<th scope="col">Win</th> {#each allUsers as user, i}
<th scope="col">Lose</th> <tr>
<th scope="col">Draw</th> <th>{i + 1}</th>
<th scope="col">Games Played</th> {#if user.username === currentUser.username}
</tr> <td><b>You ({user.username})</b></td>
</thead> {:else}
<tbody> <td>{user.username}</td>
{#each allUsers as user, i} {/if}
<tr> <td>{user.stats.winGame}</td>
<th scope="row">{i + 1}</th> <td>{user.stats.loseGame}</td>
{#if user.username === currentUser.username} <td>{user.stats.drawGame}</td>
<td><b>You ({user.username})</b></td> <td>{user.stats.totalGame}</td>
{:else} </tr>
<td>{user.username}</td> {/each}
{/if} </tbody>
<td>{user.stats.winGame}</td> </table>
<td>{user.stats.loseGame}</td>
<td>{user.stats.drawGame}</td>
<td>{user.stats.totalGame}</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</div> </div>
<style> <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> </style>