<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>
