channels

front/volume/src/App.svelte

@@ -11,6 +11,8 @@
   import Pong from "./components/Pong/Pong.svelte";
   import Chat2 from "./components/Chat2.svelte";
   import type { chatMessagesType } from "./components/Chat2.svelte";
+  import Channels from "./components/Channels.svelte";
+  import type { ChannelsType } from "./components/Channels.svelte";
 
   // PROFILE
 
@@ -76,6 +78,20 @@
     { name: "Alice", text: "Bob" },
     { name: "Alice", text: "Bob" },
   ];
+
+  // CHANNELS
+  let isChannelsOpen = false;
+  function clickChannels() {
+    isChannelsOpen = true;
+  }
+  let channels: Array<ChannelsType> = [
+    { name: "My Imaginary Friends", id: "1" },
+    { name: "Chamber of Secrets", id: "4" },
+    { name: "Meme Team", id: "6" },
+    { name: "Chat 8", id: "8" },
+    { name: "F.R.I.E.N.D.S.", id: "2" },
+    { name: "Chat 3", id: "3" },
+  ];
 </script>
 
 <main>
@@ -85,6 +101,7 @@
     {clickFriends}
     {clickSpectate}
     {clickChat}
+	{clickChannels}
   />
   {#if isChatOpen}
     <div
@@ -94,6 +111,14 @@
       <Chat2 {chatMessages} />
     </div>
   {/if}
+  {#if isChannelsOpen}
+  <div
+	on:click={() => (isChannelsOpen = false)}
+	on:keydown={() => (isChannelsOpen = false)}
+  >
+	<Channels {channels} />
+  </div>
+{/if}
   {#if isSpectateOpen}
     <div
       on:click={() => (isSpectateOpen = false)}

front/volume/src/components/Channels.svelte

@@ -0,0 +1,52 @@
+  <script lang="ts" context="module">
+	export interface ChannelsType {
+	  id: string;
+	  name: string;
+	}
+  </script>
+
+  <script lang="ts">
+	export let channels: Array<ChannelsType> = [];
+	export let enter = (id: string) => {};
+  </script>
+
+  <div class="overlay">
+	<div class="channels" on:click|stopPropagation on:keydown|stopPropagation>
+	  <div>
+		{#if channels.length > 0}
+		  <h2>Channels</h2>
+		  {#each channels.slice(0, 10) as _channels}
+			<li>
+			  <span>{_channels.name}</span>
+			  <button on:click={() => enter(_channels.id)}>Enter</button>
+			</li>
+		  {/each}
+		{:else}
+		  <p>No channels available</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;
+	}
+
+	.channels {
+	  background-color: #fff;
+	  border: 1px solid #ccc;
+	  border-radius: 5px;
+	  padding: 1rem;
+	  width: 300px;
+	}
+  </style>

front/volume/src/components/NavBar.svelte

@@ -2,6 +2,7 @@
   export let links = [
     { text: "Home", url: "img/pong.png" },
     { text: "Spectate" },
+	{ text: "Channels" },
     { text: "Chat" },
     { text: "History" },
     { text: "Friends" },
@@ -12,6 +13,7 @@
   export let clickFriends = () => {};
   export let clickSpectate = () => {};
   export let clickChat = () => {};
+  export let clickChannels = () => {};
 </script>
 
 <nav class="navigation-bar">
@@ -24,6 +26,13 @@
           </button>
         </li>
       {/if}
+	  {#if link.text === "Channels"}
+	  <li>
+		<button on:click={clickChannels}>
+		  <p>Channels</p>
+		</button>
+	  </li>
+	{/if}
       {#if link.text === "Chat"}
         <li>
           <button on:click={clickChat}>