Eveything still works, cool, adding fetch user to the ProfileDisplay, good stuff, so far so good

srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 
+  import { onMount } from 'svelte';
+
   import {location} from 'svelte-spa-router';
   // this could be how i 
 
@@ -13,37 +15,55 @@
 // wait maybe this won't work, cuz like it's still going through a route, i would have to update a Store Var each time...
 // not sure if that's what i want...
 
-// All the variables that will eventually be replaced by the real values
-  let username = 'Username';
-  let games = { total: 7, won: 4, lost: 3};
-  let rank = 'gold or whatever the fuck who cares...';
-
-  export const user = {
-    username: 'chaboi',
-  }
 
   // maybe the rank is determined dynamically just in the front based on win loss ratio or something no one cares about
   // why bother storing that shit in the back...
   // maybe i need a Rank.svelte component
     // ohhh i could make above a certain rank glitter! like that CSS tutorial showed me!
 
+  let user;
+  let rank = '';
+
+  onMount( async() => {
+    user = await fetch('http://transcendance:8080/api/v2/user')
+      .then( (x) => x.json() );
+
+    if (user.loseGame > user.winGame) {
+      rank = 'Bitch Ass Loser!'
+    } else if (user.loseGame === user.winGame) {
+      rank = 'Fine i guess...'
+    } else {
+      rank = 'Yea you da Boss!'
+    }
+
+  })
+
+
+
+
 </script>
 
 <!-- i don't think i need a div around this anymore, do i? -->
+
+<!-- is this if excessive? -->
+{#if user !== undefined}
 <main>
   <!-- what the fuck do we even want in here? messges, about the user, STATISTICS!!! -->
   <!-- <div>some stuff goes here</div> -->
-  <img class="icon" src="img/default_user_icon.png" alt="default user icon">
+  <!-- <img class="icon" src="img/default_user_icon.png" alt="default user icon"> -->
-  <div>{username}</div>
+  <div>{user.image_url}</div>
+  <img class="icon" src="{user.image_url}" alt="default user icon">
+  <div>{user.username}</div>
   <div>Rank: {rank}</div>
   <section class="main-stats">
     <h4>Match Statistics</h4>
-    <p>Total: {games.total}</p>
+    <p>Total: {user.stats.totalGame}</p>
-    <p>Victories: {games.won}</p>
+    <p>Victories: {user.stats.winGame}</p>
-    <p>Losses: {games.lost}</p>
+    <p>Losses: {user.stats.loseGame}</p>
+    <p>Draws: {user.stats.drawGame}</p>
   </section>
 </main>
-
+{/if}
 
 <style>