Rework menu and integrate splash screen

front/src/routes/+layout.svelte

@@ -1,33 +1,57 @@
 <script>
-
     import github_mark from '$lib/assets/github-mark-white.svg';
     import twitter_mark from '$lib/assets/twitter-mark-white.svg';
+    import leaderboard from '$lib/assets/leaderboard.svg';
+    import dice from '$lib/assets/dice.svg';
+    import about from '$lib/assets/about.svg';
+    import logo from '$lib/assets/logo2.png'
 
     import {onMount} from "svelte";
+    import SplashScreen from "$lib/components/SplashScreen.svelte";
 
     onMount(async () => {
-        const jQuery = await import('jquery');
-        const $ = jQuery.default;
-
-        window.$ = $;
-        window.jQuery = $;
-
-        window.$(".menu-collapsed").click(function () {
+        /*window.$(".menu-collapsed").click(function () {
             window.$(this).toggleClass("menu-expanded");
-        });
+        });*/
     });
 
 </script>
 
-<div class="menu-collapsed">
+<!--<SplashScreen/>-->
+
+<div class="menu">
+
     <div class="burger"></div>
+
     <nav>
+        <a href="/">
+            <img src={leaderboard}
+                height="30"
+                width="30"
+                alt="leaderboard"
+            >
+            <div>Leaderboard</div>
+        </a>
 
-        <a href="/">Leaderboard</a>
-        <a href="/play">Play</a>
-        <a href="/about">About</a>
+        <a href="/play">
+            <img src={dice}
+                height="30"
+                width="30"
+                alt="dice"
+            >
+            <div>Play</div>
+        </a>
 
+        <a href="/about">
+            <img src={about}
+                height="30"
+                width="30"
+                alt="about"
+            >
+            <div>About</div>
+        </a>
     </nav>
+
 </div>
 
 <div class="container">
@@ -35,7 +59,13 @@
 </div>
 
 <footer>
-    <a href="https://github.com/naaturel">
+
+    <img src="{logo}"
+         height="175px"
+         width="auto"
+         alt="Logo">
+
+    <!--<a href="https://github.com/naaturel">
         <img
                 src={github_mark}
                 height="30"
@@ -49,5 +79,5 @@
                 height="30"
                 width="30"
                 alt="Twitter mark"/>
-    </a>
+    </a>-->
 </footer>

front/src/routes/+page.server.ts

@@ -5,6 +5,5 @@ export const load = async ( {fetch} ) => {
 
     const res = await fetch(`${api_url}/leaderboard`)
     const leaderboard = await res.json()
-
     return { leaderboard };
 }

front/src/routes/+page.svelte

@@ -7,9 +7,21 @@
 
     onMount(async () => {
         scoreStore.load(data.leaderboard)
-    } )
+    })
 
 </script>
 
+
+
+<h1>Phrase d'accroche</h1>
 <LeaderBoard bind:scores={$scoreStore}></LeaderBoard>
 
+<style>
+
+    h1
+    {
+        color: #4b0611;
+        text-decoration: underline;
+    }
+
+</style>

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

@@ -1,7 +1,7 @@
 <script>
 
-    import {onMount} from "svelte";
     import {scoreStore} from "$lib/stores/scoreStore.ts";
+    import bomb from '$lib/assets/bomb.svg';
 
     let scores;
 
@@ -9,14 +9,6 @@
     let range = 100;
     let result = 0;
 
-    onMount(async () => {
-        const jQuery = await import('jquery');
-        const $ = jQuery.default;
-
-        window.$ = $;
-        window.jQuery = $;
-    });
-
     async function roll() {
 
         toggleLoading();
@@ -47,8 +39,10 @@
     </div>
 
     <div class="player">
-        <input class="name" placeholder="Your name" bind:value={playerName}/>
-        <button on:click={roll}>Let's roll !</button>
+        <input class="name" placeholder="Nom de la victime..." bind:value={playerName}/>
+
+        <img class="roll" src={bomb} on:click={roll} alt="Bomb"/>
+
         <div class="result"></div>
     </div>
 </div>
@@ -76,11 +70,16 @@
 
     .name
     {
-        width: 17vw;
-        height: 6vh;
-        border: 2px solid #A1674A;
+        width: 22vmax;
+        height: 5vh;
+        background-color: #fcdcab;
+        border: 3px solid #4b0611;
         border-radius: 10px;
-        box-shadow: 0 0 10px #343232;
+        box-shadow: 5px 5px #4b0611;
+        text-align: left;
+        padding-left: 30px;
+        padding-right: 30px;
+        outline: none;
     }
 
     .circular-loader
@@ -96,19 +95,7 @@
         height: 25vh;
     }
 
-    button
-    {
-        background-color: #f1ecec;
-
-        color: black;
-        width: 18vw;
-        height: 15vh;
-        border-radius: 10px;
-        border: 2px solid #A1674A;
-        box-shadow: 0 0 10px #343232;
-    }
-
-    .name:hover, button:hover{
+    .name:hover, .roll:hover{
         transform: scale(1.1);
     }