début du changement du css

srcs/requirements/svelte/api_front/public/global.css

@@ -13,11 +13,6 @@ body {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	/* tmp? */
 	background: bisque;
-
-	/* overflow-x: hidden; */
-	/* This seems to have fixed my pages that are too long */
-	/* but now i can't scroll anywhere ... */
-	/* overflow-y: hidden; */
 }
 
 a {

srcs/requirements/svelte/api_front/public/img/wave-haikei.svg

@@ -1 +0,0 @@
-<svg id="visual" viewBox="0 0 900 150" width="900" height="150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 36L21.5 33.7C43 31.3 86 26.7 128.8 32.5C171.7 38.3 214.3 54.7 257.2 63.5C300 72.3 343 73.7 385.8 65.7C428.7 57.7 471.3 40.3 514.2 30.5C557 20.7 600 18.3 642.8 25.8C685.7 33.3 728.3 50.7 771.2 59.5C814 68.3 857 68.7 878.5 68.8L900 69L900 0L878.5 0C857 0 814 0 771.2 0C728.3 0 685.7 0 642.8 0C600 0 557 0 514.2 0C471.3 0 428.7 0 385.8 0C343 0 300 0 257.2 0C214.3 0 171.7 0 128.8 0C86 0 43 0 21.5 0L0 0Z" fill="#618174" stroke-linecap="round" stroke-linejoin="miter"></path></svg>

srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte

@@ -9,22 +9,8 @@
     user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
       .then((resp) => resp.json())
 
-    // i mean i could do a failed to load user or some shit, maybe with a .catch or something? but atm why bother
-
-      console.log('User var');
-      console.log(user);
-      // if (user && user.statusCode && user.statusCode === 403) {
-      //   console.log('user not logged in')
-      // }
-      // if (user && user.username) {
-      //   console.log('we have a user');
-      // }
-
-    // user === undefined doesn't work cuz we declared user in the scope of onMount
-    // if (user === undefined) {
     if (user && user.statusCode && user.statusCode === 403) {
       console.log('on mount no user, returned status code 403 so logging out of userStore')
-      // userLogout(); // which i think should delete any previous local storage
     }
 
 	});
@@ -34,8 +20,6 @@
     console.log('you are now logged in');
   }
 
-// i could prolly put this in it's own compoent, i seem to use it in several places... or maybe just some JS? like no need for html
-// we could .then( () => replace('/') ) need the func so TS compatible...
   const logout = async() => {
 		await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`, {
         method: 'POST',
@@ -46,108 +30,71 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<header class="grid-container">
+<div class="container">
-  <h1>Potato Pong</h1>
+  <div class="splash-page">
-  <nav>
+      {#if user && user.username}
-    <!-- {#if user !== undefined} -->
+        <button class="button-in" on:click={ () => (push('/profile')) }>Profile</button>
-    {#if user && user.username}
+        <button class="button-out"  on:click={logout}>Logout</button>
-      <div on:click={ () => (push('/profile')) }>Profile</div>
+      {:else}
-      <div on:click={logout}>Logout</div>
+        <button class="button-in" on:click={login}>Login</button>
-    {:else}
+      {/if}
-      <div on:click={login}>Login</div>
+  </div>
-    {/if}
+</div>
-  </nav>
-  <h2>
-    <div>Welcome to</div>
-    <div>Potato Pong</div>
-  </h2>
-</header>
-
-<Canvas/>
-
-<!-- doesn't work :( -->
-<!-- <svelte:body style="overflow-y: hidden"/> -->
 
 <style>
+@font-face {
+	font-family: "Bit5x3";
+	src:
+		url("/fonts/Bit5x3.woff2") format("woff2"),
+		local("Bit5x3"),
+		url("/fonts/Bit5x3.woff") format("woff");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
 
-  /* :global(body) {
+.container {
-    overflow-y: hidden;
+  height: 100%;
-  } */
+  width: 100%;
-
+  position: relative;
-  header {
+  background-image: url('/img/SPLASH_PAGE_BACKGROUND.png');
-    /* didn't work... */
+  background-position: center center;
-    overflow-y: hidden;
+  background-repeat: no-repeat;
-  }
+  background-attachment: fixed;
+  background-size: cover;
+}
 
 
-  /* The actually important stuff */
+.splash-page {
+  margin: 0;
+  position: absolute;
+  top: 80%;
+  -ms-transform: translateY(-80%);
+  transform: translateY(-80%);
+  left: 50%;
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
 
-  .grid-container{
+.button-in {
-    position: absolute;
+  background-color: #8c0000;
-    left: 0;
+  border-color: black;
-    top: 0;
+  border-width: 4px;
+  color: white;
+  font-family: "Bit5x3";
+  font-size: x-large;
+	padding: 10px;
+}
 
-    box-sizing: border-box;
+.button-out {
-    width: 100%;
+  background-color: #008c8c;
-    height: 100%;
+  border-color: black;
-    /* max-height: 100%; */
+  border-width: 4px;
-    white-space: nowrap;
+  color: white;
-    /* padding-bottom: 0; */
+  font-family: "Bit5x3";
-    margin-bottom: 0px;
+  font-size: x-large;
-    overflow: hidden;
+	padding: 10px;
-    padding: 20px 40px;
+}
-    margin: 0px;
 
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
-    align-items: center;
-  }
-
-  header h1{
-    grid-column: 1 / 7;
-    grid-row: 1;
-    /* grid-column: span 6; */
-    /* tmp? */
-    padding: 20px;
-    border: 1px solid bisque;
-  }
-  header nav{
-    /* make it a flexbox? */
-    grid-column: 7 / 13;
-    grid-row: 1;
-    justify-self: end;
-    /* tmp? */
-    padding: 20px;
-    border: 1px solid bisque;
-  }
-
-  header h2{
-    grid-row: 3;
-    grid-column: 5 / span 4;
-    justify-self: center;
-    /* tmp */
-    border: 1px solid black;
-    z-index: 3;
-  }
-  header h2 div{
-    font-size: 2em;
-    /* color: red; */
-  }
-
-  nav div {
-    display: inline;
-    color: bisque;
-    font-weight: bold;
-  }
-  nav > div {
-    padding-left: 1em;
-    /* didn't quite work, applies to both for some reason */
-    /* nav:first-child doesn't work either*/
-  }
-  nav div:hover{
-    text-decoration: underline;
-    cursor: pointer;
-  }
 
 </style>