moved components specific methods to their modules

front/volume/src/App.svelte

@@ -25,12 +25,9 @@
   import Leaderboard from "./components/Leaderboard.svelte";
 
   import Pong from "./components/Pong/Pong.svelte";
-  import type { Player } from "./components/Profile.svelte";
-  import type { Match } from "./components/MatchHistory.svelte";
-  import type { Friend } from "./components/Friends.svelte";
   import type { ChannelsType } from "./components/Channels.svelte";
 
-  import { store, getUser, login, verify, API_URL } from "./Auth";
+  import { store, getUser, login, verify } from "./Auth";
   import FakeLogin from "./FakeLogin.svelte";
 
   // Single Page Application config
@@ -53,7 +50,6 @@
     history.pushState({ appState }, "", appState);
   }
 
-  // PROFILE
   onMount(() => {
     getUser();
   });
@@ -62,21 +58,15 @@
   }, 15000);
 
   function clickProfile() {
-    userProfile = $store;
     setAppState(APPSTATE.PROFILE);
   }
 
-  let userProfile: Player;
+  let profileUsername: string;
   async function openIdProfile(event: CustomEvent<string>) {
-    console.log("Opening profile: " + event.detail);
+    profileUsername = event.detail;
-    const res = await fetch(API_URL + "/user/" + event.detail, {
-      mode: "cors",
-    });
-    userProfile = await res.json();
     setAppState(APPSTATE.PROFILE_ID);
   }
 
-  // HISTORY
   async function clickHistory() {
     setAppState(APPSTATE.HISTORY);
   }
@@ -85,37 +75,14 @@
     setAppState(APPSTATE.HISTORY_ID);
   }
 
-  // FRIENDS
-  let friends: Friend[] = [];
-  let invits: Friend[] = [];
-  let friendsInterval: ReturnType<typeof setInterval>;
-
-  async function getFriends(): Promise<Friend[]> {
-    let response = await fetch(API_URL + "/friends", {
-      credentials: "include",
-      mode: "cors",
-    });
-    return await response.json();
-  }
-  async function getInvits(): Promise<Friend[]> {
-    let response = await fetch(API_URL + "/invits", {
-      credentials: "include",
-      mode: "cors",
-    });
-    return await response.json();
-  }
-
   async function clickFriends() {
     setAppState(APPSTATE.FRIENDS);
-    friends = await getFriends();
-    invits = await getInvits();
-    friendsInterval = setInterval(async () => {
-      friends = await getFriends();
-      invits = await getInvits();
-    }, 5000);
   }
 
-  // CHANNELS
+  async function clickLeaderboard() {
+    setAppState(APPSTATE.LEADERBOARD);
+  }
+
   function clickChannels() {
     setAppState(APPSTATE.CHANNELS);
   }
@@ -136,22 +103,6 @@
     setAppState(APPSTATE.CHANNELS + "#" + channel.name);
   };
 
-  // LEADERBOARD
-  let leaderboard: Array<Player> = [];
-
-  export async function getLeader(): Promise<Player[]> {
-    let response = await fetch(API_URL + "/leaderboard", {
-      credentials: "include",
-      mode: "cors",
-    });
-    return await response.json();
-  }
-
-  async function clickLeaderboard() {
-    leaderboard = await getLeader();
-    setAppState(APPSTATE.LEADERBOARD);
-  }
-
   // GAME
   let pong: Pong;
 
@@ -214,21 +165,12 @@
     {/if}
     {#if appState === APPSTATE.LEADERBOARD}
       <div on:click={resetAppState} on:keydown={resetAppState}>
-        <Leaderboard {leaderboard} />
+        <Leaderboard />
       </div>
     {/if}
     {#if appState === APPSTATE.FRIENDS}
-      <div
+      <div on:click={resetAppState} on:keydown={resetAppState}>
-        on:click={() => {
+        <Friends />
-          resetAppState();
-          clearInterval(friendsInterval);
-        }}
-        on:keydown={() => {
-          resetAppState();
-          clearInterval(friendsInterval);
-        }}
-      >
-        <Friends {friends} {invits} />
       </div>
     {/if}
     {#if appState === APPSTATE.HISTORY}
@@ -241,12 +183,12 @@
         on:click={() => setAppState(APPSTATE.PROFILE)}
         on:keydown={() => setAppState(APPSTATE.PROFILE)}
       >
-        <MatchHistory username={userProfile.username} />
+        <MatchHistory username={profileUsername} />
       </div>
     {/if}
     {#if appState === APPSTATE.PROFILE}
       <div on:click={resetAppState} on:keydown={resetAppState}>
-        <Profile user={userProfile} edit={1} on:view-history={openIdHistory} />
+        <Profile on:view-history={openIdHistory} />
       </div>
     {/if}
     {#if appState === APPSTATE.PROFILE_ID}
@@ -256,7 +198,7 @@
         on:keydown={() =>
           setAppState(APPSTATE.CHANNELS + "#" + selectedChannel.name)}
       >
-        <Profile user={userProfile} edit={0} on:view-history={openIdHistory} />
+        <Profile username={profileUsername} on:view-history={openIdHistory} />
       </div>
     {/if}
 

front/volume/src/components/Friends.svelte

@@ -26,32 +26,67 @@
 </script>
 
 <script lang="ts">
-  import { API_URL } from "../Auth";
+  import {onMount, onDestroy} from "svelte";
+  import { API_URL, store } from "../Auth";
 
-  export let friends: Friend[];
+  let friends: Friend[] = [];
-  export let invits: Friend[];
+  let invits: Friend[] = [];
+  let friendsInterval: ReturnType<typeof setInterval>;
+
+  async function getFriends(): Promise<void> {
+    let response = await fetch(API_URL + "/friends", {
+      credentials: "include",
+      mode: "cors",
+    });
+    friends = await response.json();
+  }
+  async function getInvits(): Promise<void> {
+    let response = await fetch(API_URL + "/invits", {
+      credentials: "include",
+      mode: "cors",
+    });
+    invits = await response.json();
+  }
+
+  onMount(() => {
+    getFriends();
+    getInvits();
+    friendsInterval = setInterval(async () => {
+      getFriends();
+      getInvits();
+    }, 5000);
+  })
+
+  onDestroy(() => {
+    clearInterval(friendsInterval);
+  })
 </script>
 
 <div class="overlay">
   <div class="friends" on:click|stopPropagation on:keydown|stopPropagation>
     <div>
+      <h2>{$store.username} friends:</h2>
       {#if friends.length > 0}
-        <h2>Monkey friends</h2>
+        <div class="friends-list">
-        {#each friends.slice(0, 10) as friend}
+        {#each friends as friend}
           <li>
             <span>{friend.username} is {friend.status}</span>
           </li>
         {/each}
+        />
+      </div>
       {:else}
         <p>No friends to display</p>
       {/if}
+      <h2>{$store.username} invits:</h2>
       {#if invits.length > 0}
-        <h2>Monkey invits</h2>
+      <div class="invits-list">
-        {#each invits.slice(0, 10) as invit}
+        {#each invits as invit}
           <li>
             <span>{invit.username} invited you to be friend.</span>
           </li>
         {/each}
+      </div>
       {:else}
         <p>No invitations to display</p>
       {/if}
@@ -87,4 +122,10 @@
     padding: 1rem;
     width: 300px;
   }
+
+  .friends-list,
+  .invits-list {
+      overflow-y: scroll;
+      max-height: 200px;
+  }
 </style>

front/volume/src/components/Leaderboard.svelte

@@ -1,7 +1,21 @@
 <script lang="ts">
   import type { Player } from "./Profile.svelte";
+  import { onMount } from "svelte";
+  import { API_URL } from "../Auth";
 
-  export let leaderboard: Array<Player>;
+  let leaderboard: Array<Player> = [];
+
+  async function getLeader(): Promise<void> {
+    let response = await fetch(API_URL + "/leaderboard", {
+      credentials: "include",
+      mode: "cors",
+    });
+    leaderboard = await response.json();
+  }
+
+  onMount(() => {
+    getLeader();
+  });
 </script>
 
 <div class="overlay">
@@ -21,13 +35,13 @@
             <td>Matchs</td>
             <td>Winrates</td>
           </tr>
-          {#each leaderboard.slice(0, 10) as player}
+          {#each leaderboard as player}
             <tr>
               <td>{player.rank}</td>
               <td>{player.username}</td>
               <td>{player.wins}</td>
               <td>{player.matchs}</td>
-              <td>{player.winrate}%</td>
+              <td>{player.winrate.toFixed(2)}%</td>
             </tr>
           {/each}
         </tbody>
@@ -60,6 +74,8 @@
     width: 300px;
     display: flex;
     justify-content: center;
+    max-height: 500px;
+    overflow-y: scroll;
   }
 
   td {

front/volume/src/components/MatchHistory.svelte

@@ -115,7 +115,7 @@
     display: flex;
     justify-content: center;
     max-height: 500px;
-    overflow-x: scroll;
+    overflow-y: scroll;
   }
 
   td {

front/volume/src/components/Profile.svelte

@@ -11,14 +11,30 @@
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import { API_URL, store, logout } from "../Auth";
 
-  export let edit: number;
+  export let username: string = $store.username;
-  export let user: any;
+
+  let edit: boolean = true;
+  let user: any = $store;
 
   let avatarForm: HTMLFormElement;
 
+  async function getUser() {
+    if (username !== $store.username) {
+      edit = false;
+      const res = await fetch(API_URL + "/user/" + username, {
+        mode: "cors",
+      });
+      user = res.json();
+    }
+  }
+
+  onMount(() => {
+    getUser();
+  });
+
   const dispatch = createEventDispatcher();
   async function handleSubmit() {
     let response = await fetch(API_URL, {
@@ -52,7 +68,7 @@
   <div class="profile" on:click|stopPropagation on:keydown|stopPropagation>
     <h3>===| <mark>{user.username}'s Profile</mark> |===</h3>
     <div class="profile-header">
-      {#if edit == 0}
+      {#if edit}
         <img src={API_URL + "/avatar"} alt="avatar" class="profile-img" />
       {:else}
         <form
@@ -82,10 +98,10 @@
       </p>
       <p>Wins: {user.wins}</p>
       <p>Looses: {user.looses}</p>
-      <p>Winrate: {user.winrate}%</p>
+      <p>Winrate: {user.winrate.toFixed(2)}%</p>
       <p>Rank: {user.rank}</p>
     </div>
-    {#if edit == 1}
+    {#if edit}
       <form
         id="username-form"
         class="username"