tcl-guessr/src/routes/+page.svelte
2024-11-20 09:30:57 +01:00

62 lines
1.3 KiB
Svelte

<script lang="ts">
import type { PageData } from "./$types";
interface Props {
data: PageData;
}
const props: Props = $props();
</script>
<div class="container">
<h1>TCL-Guessr</h1>
<div class="login">
{#if props.data.user === null}
<a href="/login">Login</a>
{:else}
Logged in as <img
src={`https://cdn.discordapp.com/avatars/${props.data.user.id}/${props.data.user.avatarHash}.webp?size=32`}
alt="avatar"
/> <b>{props.data.user.name}</b> - <a href="logout">Logout</a>
{/if}
</div>
<span class="login"> </span>
<form action="/game" method="GET">
<label>
difficulté: <select name="mode">
<option value="easy">Facile (pour les nuls)</option>
<option value="hard">Dur (pour les gigaillards)</option>
<option value="extreme demon ultra miguel">
EXTREME DEMON ULTRA MIGUEL DE LA MORT QUI TUE
</option>
</select>
</label>
<div>
<label>metro: <input type="checkbox" name="metro" checked /></label>
<label>tram: <input type="checkbox" name="tram" /></label>
</div>
<input type="submit" value="LANCER LA PARTIE" />
</form>
</div>
<style>
.container {
padding: 12px;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
width: fit-content;
}
input[type="submit"] {
height: 50px;
}
</style>