tcl-guessr/src/routes/results/+page.svelte
2024-11-25 17:22:13 +01:00

58 lines
1.2 KiB
Svelte

<script lang="ts">
import type { PageData } from "./$types";
interface Props {
data: PageData;
}
const props: Props = $props();
const totalScore = props.data.rounds[0].total_score;
const mode = props.data.rounds[0].mode;
const name = props.data.rounds[0].name;
const saveParams = new URLSearchParams({ next: `/api/save?id=${props.data.gameId}` });
</script>
<h1>Score total: {totalScore}</h1>
<span>Mode: <b>{mode}</b></span>
{#if name !== null}
<span>Joué par {name}</span>
{:else if props.data.loggedIn}
<span>Joué par <i>un inconnu...</i></span>
{:else}
<span><a href="/login?{saveParams}">Connectez vous</a> pour sauvegarder votre score!</span>
{/if}
<table>
<tbody>
{#each props.data.rounds as round}
<tr>
<td>{round.stop_name}</td>
<td><b>{round.points}</b> points</td>
<td>{round.distance} mètres</td>
</tr>
{/each}
</tbody>
</table>
<span class="small">id de partie: {props.data.gameId}</span>
<h2>
<a href="/">Page principale</a> - <a href="/leaderboard">Meilleurs scores</a>
</h2>
<style>
td {
border: 1px solid black;
padding: 8px 10px;
}
.small {
padding: 20px;
font-size: 12px;
color: darkgray;
}
</style>