Correct some style stuff

front/src/lib/components/PageTitle.svelte

@@ -0,0 +1,11 @@
+<h1 class="page-title">
+    <slot></slot>
+</h1>
+
+<style>
+    .page-title
+    {
+        position: absolute;
+        top: 50px;
+    }
+</style>

front/src/routes/+layout.svelte

@@ -9,6 +9,7 @@
 
     import {onMount} from "svelte";
     import SplashScreen from "$lib/components/SplashScreen.svelte";
+    import PageTitle from "$lib/components/PageTitle.svelte";
 
     onMount(async () => {
         window.$(".expander").click(function () {
@@ -19,7 +20,6 @@
 </script>
 
 <SplashScreen/>
-
 <div class="menu menu-collapsed">
 
         <a class="expander">
@@ -57,7 +57,6 @@
 </div>
 
 <div class="container">
-
         <slot></slot>
 </div>
 

front/src/routes/+page.svelte

@@ -2,6 +2,7 @@
     import LeaderBoard from "$lib/components/LeaderBoard.svelte";
     import {scoreStore} from "$lib/stores/scoreStore.ts";
     import {onMount} from "svelte";
+    import PageTitle from "$lib/components/PageTitle.svelte";
 
     let { data } = $props()
 
@@ -11,5 +12,5 @@
 
 </script>
 
-<h1>Qui va y passer ?</h1>
+<PageTitle>Qui va y passer ?</PageTitle>
 <LeaderBoard bind:scores={$scoreStore}></LeaderBoard>

front/src/routes/about/+page.svelte

@@ -1 +1,49 @@
-<p>It was revealed to me in a dream</p>
+<script>
+
+import PageTitle from "$lib/components/PageTitle.svelte";
+</script>
+<PageTitle>A propos</PageTitle>
+
+<div class="container">
+    <div class="section">
+        <h2>Design</h2>
+        <p>Arwen Hirsoux</p>
+    </div>
+
+    <hr/>
+
+    <div class="section">
+        <h2>Développement</h2>
+        <p>Laurent Crema</p>
+    </div>
+
+</div>
+
+
+<style>
+
+    hr
+    {
+        width: 75%;
+    }
+
+    .container
+    {
+        border-radius: 7px;
+        background: rgb(252, 220, 171, 0.85);
+        width: 85%;
+        height: fit-content;
+        padding: 25px;
+    }
+
+    .section
+    {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+
+
+</style>

front/src/routes/play/+page.svelte

@@ -2,6 +2,7 @@
     import bomb from '$lib/assets/bomb.svg';
     import {Game, GameState} from "$lib/models/game.ts";
     import {scoreStore} from "$lib/stores/scoreStore.ts";
+    import PageTitle from "$lib/components/PageTitle.svelte";
 
     let game = new Game();
 
@@ -15,7 +16,6 @@
         timer = setTimeout(() => {
             try{
                 validate(inputValue)
-                clearError();
                 game.playerName = inputValue;
             } catch (e){
                 displayError(e.message)
@@ -23,14 +23,6 @@
         }, 150);
     }
 
-    function validate(data){
-        if(!data) throw new Error("Veuillez indiquer votre nom.");
-        $scoreStore.forEach(v => {
-            if(v.owner && v.owner.toLowerCase() === data.toLowerCase()) throw new Error("Ce joueur existe déjà");
-        })
-
-    }
-
     async function roll(){
 
         try{
@@ -45,8 +37,18 @@
         }
     }
 
+    function validate(data){
+        if(!data) throw new Error("Veuillez indiquer votre nom.");
+        $scoreStore.forEach(v => {
+            if(v.owner && v.owner.toLowerCase() === data.toLowerCase()) throw new Error("Cette personne a déjà été évaluée.");
+        })
+    }
+
     function displayError(message){
         window.$(".player").attr('tooltip', message)
+        setTimeout(() => {
+            clearError();
+        }, 3000)
     }
 
     function clearError(){
@@ -55,6 +57,7 @@
 
 </script>
 
+<PageTitle>Évaluez vos chance de survie</PageTitle>
 <div class="container">
 
     {#if isRunning}
@@ -67,20 +70,17 @@
     {/if}
     {#if !isRunning && !hasBeenPlayed}
 
-        <h1>Evaluez vos chances de survie</h1>
         <div class="player"
              tooltip=""
              flow="up">
             <input class="name" placeholder="Nom de la victime..."
-
                    bind:value={game.playerName}
                    on:input={({ target: { value } }) => debounce(value)}
                    on:blur={({ target: { value } }) => debounce(value)}
             />
-
+            <img class="roll" src={bomb} on:click={roll} alt="Bomb"/>
         </div>
 
-        <img class="roll" src={bomb} on:click={roll} alt="Bomb"/>
 
     {/if}
 
@@ -92,7 +92,17 @@
 
 <style>
 
-    .container, .player
+    .container
+    {
+        line-height: 250px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
+
+    .player
     {
         display: flex;
         flex-direction: column;
@@ -101,6 +111,8 @@
         text-align: center;
     }
 
+
+
     .player
     {
         gap: 2vh;
@@ -170,7 +182,7 @@
     [tooltip]::before,
     [tooltip]::after {
         text-transform: none; /* opinion 2 */
-        font-size: .9em; /* opinion 3 */
+
         line-height: 1;
         user-select: none;
         pointer-events: none;
@@ -187,7 +199,6 @@
         content: attr(tooltip); /* magic! */
 
         /* most of the rest of this is opinion */
-        font-family: Helvetica, sans-serif;
         text-align: center;
 
         /*
@@ -246,13 +257,6 @@
         }
     }
 
-    @keyframes tooltips-horz {
-        to {
-            opacity: .9;
-            transform: translate(0, -50%);
-        }
-    }
-
     /* FX All The Things */
     [tooltip]:not([flow])::before,
     [tooltip]:not([flow])::after,