working from 42

srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte

@@ -108,10 +108,10 @@
     </div>
     <section class="main-stats">
       <h4>Match Statistics</h4>
-      <p>Total: {user.stats.totalGame}</p>
       <p>Victories: {user.stats.winGame}</p>
       <p>Losses: {user.stats.loseGame}</p>
       <p>Draws: {user.stats.drawGame}</p>
+      <p class="highlight">Total: {user.stats.totalGame}</p>
     </section>
   </main>
   {/if}
@@ -174,6 +174,30 @@
     color: red;
   }
 
+  .highlight {
+    font-weight: bold;
+  }
+
+  p.highlight{
+    grid-column: 1 / span 3;
+  }
+
+  @media screen and (max-width: 500px) {
+    section.main-stats{
+      grid-template-columns: 1fr;
+    }
+    section.main-stats h4{
+      grid-column: 1;
+    }
+    section.main-stats p{
+      grid-column: 1;
+    }
+
+  }
+
+
+
+
   /* Glittery Star Stuff */
 
 

srcs/requirements/svelte/api_front/src/pieces/Header.svelte

@@ -22,14 +22,15 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <header>
+  <div>
     <img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
     <h1>Potato Pong</h1>
+  </div>
   <nav>
     <button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
     <button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
     <button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
     <button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
-  <!-- <button class:selected="{current === '/profile/settings'}" on:click={() => (push('/profile/settings'))}>Settings</button> -->
     <button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
     <button on:click={handleClickLogout}>Log Out</button>
   </nav>
@@ -76,8 +77,11 @@
     /* for some reason this doesn't do shit! */
     position: sticky;
     /* position: absolute; */
-    display: grid;
+    display: flex;
-    grid-template-columns: 1fr 1fr 1fr;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    /* display: grid; */
+    /* grid-template-columns: 1fr 1fr 1fr; */
   }
 
 /* Headers */
@@ -104,18 +108,39 @@
     justify-self: left;
   }
 
+  header div {
+    display: flex;
+    justify-self: center;
+    align-self: center;
+  }
+
+
+
   nav{
     display: flex;
-    justify-content: right;
+    /* justify-content: flex-end; */
+    justify-content: space-evenly;
+    flex-wrap: wrap;
   }
 
   nav button{
     margin: 7px 20px;
+    /* margin: 7px auto; */
     /* padding: 5px; */
     border-radius: 4px;
   }
 
-  /* .none{
 
-  } */
+  @media screen and (max-width: 350px) {
+    nav button{
+      width: 100%;
+    }
+
+    header div{
+      flex-wrap: wrap;
+      display: flex;
+      justify-content: center;
+    }
+  }
+
 </style>

srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte

@@ -84,7 +84,7 @@
 </ChatBox>
 
 <!-- TMP DEBUG -->
-<Debug bind:layouts />
+<!-- <Debug bind:layouts /> -->
 
 <style></style>
 

srcs/requirements/svelte/api_front/src/routes/profileRoutes.js

@@ -12,6 +12,7 @@ export const profileRoutes = {
   '/': ProfileDisplay,
   '/settings': ProfileSettings,
   '/friends': ProfileFriends,
+  // '/friends/:username': AProfile,
   '*': NotFound
 };