x

back/volume/src/types.d.ts

@@ -1,5 +1,5 @@
 declare module 'passport-42' {
   export type Profile = any
   export type VerifyCallback = any
-  export class Strategy {}!
+  export class Strategy {}
 }

front/volume/src/App.svelte

@@ -12,6 +12,7 @@
   import Chat2 from "./components/Chat2.svelte";
   import Channels from "./components/Channels.svelte";
   import type { ChannelsType } from "./components/Channels.svelte";
+  import Leaderboard from "./components/Leaderboard.svelte";
 
   import { store, getUser, login, logout, API_URL } from "./Auth";
 
@@ -110,6 +111,13 @@
   const handleSelectChannel = (channel: ChannelsType) => {
     selectedChannel = channel;
   };
+
+  // LEADERBOARD
+  let isLeaderboardOpen = false;
+  function clickLeaderboard() {
+    isLeaderboardOpen = true;
+  }
+
 </script>
 
 <main>
@@ -123,6 +131,7 @@
         {clickFriends}
         {clickSpectate}
         {clickChannels}
+        {clickLeaderboard}
       />
       {#if isChannelsOpen}
         {#if selectedChannel}
@@ -150,6 +159,14 @@
           <Spectate {spectate} />
         </div>
       {/if}
+      {#if isLeaderboardOpen}
+        <div
+          on:click={() => (isLeaderboardOpen = false)}
+          on:keydown={() => (isLeaderboardOpen = false)}
+        >
+          <Leaderboard />
+        </div>
+      {/if}
       {#if isFriendOpen}
         <div
           on:click={() => {

front/volume/src/components/Chat2.svelte

@@ -4,6 +4,7 @@
     name: string;
     text: string;
   }
+  import { createEventDispatcher, onMount } from "svelte";
 </script>
 
 <script lang="ts">
@@ -27,25 +28,18 @@
   export let chatMessages: Array<chatMessagesType> = [];
   let newText = "";
 
-  const openProfile = (id: number) => (event: Event) => {
-    const message = chatMessages.find((m) => m.id === id);
-    if (message) {
-      const optionsModal = document.createElement("div");
-      optionsModal.classList.add("options-modal");
-      optionsModal.innerHTML = `
-        <h3>${message.name}</h3>
-        <ul>
-          <li>View profile</li>
-          <li>View posts</li>
-          <li>View comments</li>
-        </ul>
-      `;
-      document.querySelector(".overlay")?.appendChild(optionsModal);
-      optionsModal.addEventListener("click", () => {
-        document.body.removeChild(optionsModal);
-      });
-    }
-  };
+  const dispatch = createEventDispatcher();
+  let showProfileMenu = false;
+  let selectedUserId = null;
+  function openProfile(id : number) {
+    showProfileMenu = true;
+    selectedUserId = id;
+  }
+  function closeProfileMenu() {
+    showProfileMenu = false;
+    selectedUserId = null;
+  }
+  onMount(closeProfileMenu)
 </script>
 
 <div class="overlay">
@@ -64,6 +58,24 @@
         </p>
       {/each}
     </div>
+    {#if showProfileMenu}
+      <div class="profile-menu" on:click|stopPropagation on:keydown|stopPropagation>
+        <ul>
+          <!-- if admin 
+          <li><button on:click={() => dispatch('delete-user', selectedUserId)}>Delete User</button></li>
+          <li><button on:click={() => dispatch('ban-user', selectedUserId)}>Ban User</button></li>
+          <li><button on:click={() => dispatch('mute-user', selectedUserId)}>Mute User</button></li>
+          <li><button on:click={() => dispatch('promote-user', selectedUserId)}>Promote User</button></li>
+          -->
+          <li><button on:click={() => dispatch('send-message', selectedUserId)}>Send Message</button></li>
+          <li><button on:click={() => dispatch('view-profile', selectedUserId)}>View Profile</button></li>
+          <li><button on:click={() => dispatch('add-friend', selectedUserId)}>Add Friend</button></li>
+          <li><button on:click={() => dispatch('invite-to-game', selectedUserId)}>Invite to Game</button></li>
+          <li><button on:click={() => dispatch('block-user', selectedUserId)}>Block User</button></li>
+          <li><button on:click={closeProfileMenu}>Close</button></li>
+        </ul>
+      </div>
+    {/if}
     <form on:submit|preventDefault={sendMessage}>
       <input type="text" placeholder="Type a message..." bind:value={newText} />
       <button>

front/volume/src/components/Leaderboard.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" context="module">
+    export interface Player {
+        username: string;
+        wins: number;
+        losses: number;
+        rank: number;
+    }
+</script>
+
+<script lang="ts">
+    export let leaderboard: Array<Player> = [];
+</script>
+
+<div class="overlay">
+    <div class="history" on:click|stopPropagation on:keydown|stopPropagation>
+        <div>
+            {#if leaderboard.length > 0}
+                <h2>Leaderboard</h2>
+                {#each leaderboard.slice(0, 10) as match}
+                    <li>
+                        <span>{match.username}</span>
+                        <span>{match.wins} - {match.losses}</span>
+                        <span>MP | rank #{match.rank}</span>
+                    </li>
+                {/each}
+            {:else}
+                <p>No Players to display</p>
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style>
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9998;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.history {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 1rem;
+    width: 300px;
+}
+</style>

front/volume/src/components/NavBar.svelte

@@ -10,6 +10,7 @@
     { text: "Channels" },
     { text: "History" },
     { text: "Friends" },
+    { text: "Leaderboard"},
     { text: "Profile" },
   ];
   export let clickProfile = () => {};
@@ -17,11 +18,19 @@
   export let clickFriends = () => {};
   export let clickSpectate = () => {};
   export let clickChannels = () => {};
+  export let clickLeaderboard = () => {};
 </script>
 
 <nav class="navigation-bar">
   <ul>
     {#each links as link}
+      {#if link.text === "Leaderboard"}
+        <li>
+          <button on:click={clickLeaderboard}>
+            <p>Leaderboard</p>
+          </button>
+        </li>
+      {/if}
       {#if link.text === "Spectate"}
         <li>
           <button on:click={clickSpectate}>