ok

front/volume/src/App.svelte

@@ -65,33 +65,20 @@
     { player1: "Alice", player2: "Bob", id: "3" },
   ];
 
-  // CHAT
-  let isChatOpen = false;
-  function clickChat() {
-    isChatOpen = true;
-  }
-  let chatMessages: Array<chatMessagesType> = [
-    { name: "Alice", text: "Bob" },
-    { name: "Alice", text: "Bob" },
-    { name: "Alice", text: "Bob" },
-    { name: "Alice", text: "Bob" },
-    { 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" },
+    { id: "1", name: "General", messages: [] },
-    { name: "Chamber of Secrets", id: "4" },
+    { id: "2", name: "Lobby", messages: [] },
-    { name: "Meme Team", id: "6" },
+    { id: "3", name: "Game", messages: [] },
-    { name: "Chat 8", id: "8" },
-    { name: "F.R.I.E.N.D.S.", id: "2" },
-    { name: "Chat 3", id: "3" },
   ];
+  let selectedChannel: ChannelsType;
+  const handleSelectChannel = (channel: ChannelsType) => {
+    selectedChannel = channel;
+  };
 </script>
 
 <main>
@@ -100,25 +87,23 @@
     {clickHistory}
     {clickFriends}
     {clickSpectate}
-    {clickChat}
 	  {clickChannels}
   />
-  {#if isChatOpen}
+  {#if isChannelsOpen}
-    <div
+    {#if selectedChannel}
-      on:click={() => (isChatOpen = false)}
+      <div on:click={() => (selectedChannel = undefined)} on:keydown={() => (selectedChannel = undefined)}>
-      on:keydown={() => (isChatOpen = false)}
+        <Chat2 chatMessages={selectedChannel.messages} />  
-    >
-      <Chat2 {chatMessages} />
       </div>              
     {/if}
-  {#if isChannelsOpen}
+    {#if !selectedChannel}
       <div
         on:click={() => (isChannelsOpen = false)}
         on:keydown={() => (isChannelsOpen = false)}
       >
-	<Channels {channels} />
+      <Channels channels={channels} onSelectChannel={handleSelectChannel} />
       </div>
     {/if}
+  {/if}
   {#if isSpectateOpen}
     <div
       on:click={() => (isSpectateOpen = false)}

front/volume/src/components/Channels.svelte

@@ -1,13 +1,33 @@
 <script lang="ts" context="module">
+  	import type { chatMessagesType } from "./Chat2.svelte";
 	export interface ChannelsType {
 		id: string;
 		name: string;
+		messages: Array<chatMessagesType>;
 	}
 </script>
 
 <script lang="ts">
 	export let channels: Array<ChannelsType> = [];
-	export let enter = (id: string) => {};
+	export let onSelectChannel: (channel: ChannelsType) => void;
+	const selectChat = (id: string) => {
+		const channel = channels.find(c => c.id === id);
+		if (channel) {
+			onSelectChannel(channel);
+		}
+	}
+	const createChannel = () => {
+		const name = prompt("Enter a name for the new channel:");
+		if (name) {
+			const newChannel: ChannelsType = {
+				id: Math.random().toString(),
+				name,
+				messages: []
+			};
+			channels = [newChannel, ...channels];
+		}
+		// TODO: save to database
+  	};
 </script>
 
 <div class="overlay">
@@ -18,12 +38,13 @@
 			{#each channels.slice(0, 10) as _channels}
 			<li>
 				<span>{_channels.name}</span>
-			  <button on:click={() => enter(_channels.id)}>Enter</button>
+				<button on:click={() => selectChat(_channels.id)}>Enter</button>
 			</li>
 			{/each}
 		{:else}
 			<p>No channels available</p>
 		{/if}
+		<button on:click={createChannel}>Create Channel</button>
 		</div>
 	</div>
 </div>

front/volume/src/components/Chat2.svelte

@@ -1,23 +1,41 @@
 <script lang="ts" context="module">
   export interface chatMessagesType {
+    id: number;
     name: string;
     text: string;
   }
 </script>
 
+
 <script lang="ts">
   const sendMessage = () => {
     if (newText !== "") {
       const newMessage = {
+        id: chatMessages.length + 1,
         name: "You",
         text: newText,
       };
-      chatMessages = [...chatMessages, newMessage];
+      chatMessages = [...chatMessages.slice(-5 + 1), newMessage];
       newText = "";
     }
+    // TODO: save to database
   };
+
   export let chatMessages: Array<chatMessagesType> = [];
   let newText = "";
+
+  // const openProfile = (id: number) => (event: Event) => {
+  //   const message = chatMessages.find((m) => m.id === id);
+  //   if (message) {
+  //     const { name } = message;
+  //     const options = ["View profile", "Send private message", "Block user"];
+  //     const option = prompt(`Select an option for ${name}: ${options.join(", ")}`);
+  //     if (option === "View profile") {
+  //     } else if (option === "Send private message") {
+  //     } else if (option === "Block user") {
+  //     }
+  //   }
+  // };
 </script>
 
 <div class="overlay">

front/volume/src/components/NavBar.svelte

@@ -3,7 +3,6 @@
     { text: "Home", url: "img/pong.png" },
     { text: "Spectate" },
 	  { text: "Channels" },
-    { text: "Chat" },
     { text: "History" },
     { text: "Friends" },
     { text: "Profile" },
@@ -33,13 +32,6 @@
 		</button>
 	  </li>
 	{/if}
-      {#if link.text === "Chat"}
-        <li>
-          <button on:click={clickChat}>
-            <p>Chat</p>
-          </button>
-        </li>
-      {/if}
       {#if link.text === "Friends"}
         <li>
           <button on:click={clickFriends}>