feat: add some css
This commit is contained in:
parent
e8dcdd37ea
commit
8275253adf
SSH key fingerprint:
SHA256:4P0aN6M8ajKukNi6aPOaX0LacanGYtlfjmN+m/sHY/o
9 changed files with 135 additions and 107 deletions
20
src/app.css
Normal file
20
src/app.css
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
@import "@fontsource-variable/inter";
|
||||
@import "@fontsource-variable/inter/wght-italic.css";
|
||||
|
||||
body {
|
||||
font-family: "Inter Variable", sans-serif;
|
||||
}
|
||||
|
||||
.contents {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
max-width: 70ch;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -7,6 +7,6 @@
|
|||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
<div class="contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
5
src/routes/+layout.svelte
Normal file
5
src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import "../app.css";
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
|
|
@ -8,57 +8,74 @@
|
|||
const props: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<h1>TCL-Guessr</h1>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<label>
|
||||
arrets: <select name="stops_type">
|
||||
<option value="metro">Métro</option>
|
||||
<option value="tram">Tram</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<input type="submit" value="LANCER LA PARTIE" />
|
||||
</form>
|
||||
|
||||
<h2><a href="/leaderboard">Leaderboard</a></h2>
|
||||
<div class="login">
|
||||
{#if props.data.user === null}
|
||||
<a href="/login">Se connecter</a>
|
||||
{:else}
|
||||
Connecté en tant que <img
|
||||
src={`https://cdn.discordapp.com/avatars/${props.data.user.id}/${props.data.user.avatarHash}.webp?size=32`}
|
||||
alt="avatar"
|
||||
class="pfp"
|
||||
/> <b>{props.data.user.name}</b> - <a href="logout">Se déconnecter</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<h2><a href="/leaderboard">Meilleurs scores</a></h2>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Jouer</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<label>
|
||||
arrets: <select name="stops_type">
|
||||
<option value="metro">Métro</option>
|
||||
<option value="tram">Tram</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<input type="submit" class="start" value="LANCER LA PARTIE" />
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding: 12px;
|
||||
.login {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.pfp {
|
||||
vertical-align: middle;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
select {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.start {
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -131,29 +131,27 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
{#await Promise.all([mapPromise, gamePromise])}
|
||||
<h1>Loading...</h1>
|
||||
{#await Promise.all([mapPromise, gamePromise])}
|
||||
<h1>Loading...</h1>
|
||||
|
||||
<div><button disabled>Loading...</button></div>
|
||||
{:then [, gameData]}
|
||||
<h1>{gameData.stopNames[currentIndex]}</h1>
|
||||
<div><button disabled>Loading...</button></div>
|
||||
{:then [, gameData]}
|
||||
<h1>{gameData.stopNames[currentIndex]}</h1>
|
||||
|
||||
<div>
|
||||
{#if results === null}
|
||||
<button onclick={checkLocation} disabled={!playerMarker || isChecking}>SUBMIT</button>
|
||||
{:else}
|
||||
<button onclick={restartGame}>NEXT</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/await}
|
||||
<div>
|
||||
{#if results === null}
|
||||
<button onclick={checkLocation} disabled={!playerMarker || isChecking}>SUBMIT</button>
|
||||
{:else}
|
||||
<button onclick={restartGame}>NEXT</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/await}
|
||||
|
||||
<span class="results" hidden={!results}>
|
||||
{results?.score} points! Vous etiez à {results?.distance}m.
|
||||
</span>
|
||||
<span class="results" hidden={!results}>
|
||||
{results?.score} points! Vous etiez à {results?.distance}m.
|
||||
</span>
|
||||
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
|
||||
<style>
|
||||
:global(body),
|
||||
|
|
@ -162,12 +160,8 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
:global(.contents) {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.results {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
<hr />
|
||||
|
||||
{#await leaderboardPromise}
|
||||
<h2>Loading...</h2>
|
||||
<h2>Chargement...</h2>
|
||||
{:then games}
|
||||
{#if games.length === 0}
|
||||
<h2>No scores yet :(</h2>
|
||||
|
|
@ -43,15 +43,21 @@
|
|||
<ul>
|
||||
{#each games as game}
|
||||
<li class:rainbow={game.total_score === 25000}>
|
||||
<b>{game.total_score}</b> points by {game.name} -
|
||||
<a href="/results?gameId={game.id}">Details</a>
|
||||
<b>{game.total_score}</b> points par {game.name} -
|
||||
<a href="/results?gameId={game.id}">Détails</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{/await}
|
||||
|
||||
<a href="/">Page principale</a>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rainbow {
|
||||
animation: rainbow 5s linear;
|
||||
animation-iteration-count: infinite;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import type { PageData } from "./$types";
|
||||
|
||||
interface Props {
|
||||
|
|
@ -15,46 +14,37 @@
|
|||
const saveParams = new URLSearchParams({ next: `/api/save?id=${props.data.gameId}` });
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<h1>yippee !!!</h1>
|
||||
<h1>Score total: {totalScore}</h1>
|
||||
|
||||
<h2>score total: {totalScore}</h2>
|
||||
<span>Mode: <b>{mode}</b></span>
|
||||
|
||||
<span>mode: {mode}</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}
|
||||
|
||||
{#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>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
{#each props.data.rounds as round}
|
||||
<tr>
|
||||
<td>{round.stop_name}</td>
|
||||
<td>{round.points} points</td>
|
||||
<td>{round.distance} metres</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<span class="small">id de partie: {props.data.gameId}</span>
|
||||
|
||||
<span class="small">id de partie: {props.data.gameId}</span>
|
||||
|
||||
<button class="restart" onclick={() => goto("/")}>RELANCER !!!</button>
|
||||
</div>
|
||||
<h2>
|
||||
<a href="/">Page principale</a> - <a href="/leaderboard">Meilleurs scores</a>
|
||||
</h2>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid black;
|
||||
padding: 8px 10px;
|
||||
|
|
@ -65,9 +55,4 @@
|
|||
font-size: 12px;
|
||||
color: darkgray;
|
||||
}
|
||||
|
||||
.restart {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue