* Chat fixes

* Some CSS

front/volume/src/App.svelte

@@ -81,7 +81,6 @@
 		return null;
   }
 
-  let chan: Channels;
   async function openDirectChat(event: CustomEvent<string>) {
     const DMUsername = event.detail;
     let DMChannel: Array<ChannelsType> = [];
@@ -89,7 +88,8 @@
     if (res && res.ok) {
       DMChannel = await res.json();
       if (DMChannel.length != 0)
-        chan.selectChat(DMChannel[0].id);
+        await formatChannelNames(DMChannel)
+        setAppState(APPSTATE.CHANNELS + "#" + DMChannel[0].name)
 	  } else {
       console.log("Creating DMChannel: " + $store.username + "&" + DMUsername)
       fetch(API_URL + "/channels", {
@@ -112,14 +112,15 @@
         if (response && response.ok) {
             DMChannel = await response.json(); 
             if (DMChannel.length != 0) {
-                chan.selectChat(DMChannel[0].id);
+              await formatChannelNames(DMChannel)
+              setAppState(APPSTATE.CHANNELS + "#" + DMChannel[0].name)
             } else {
               alert("Error creating DM");
             }
         } else {
           alert("Error creating DM");
         }
-        }).catch((error) => {
+      }).catch(() => {
         alert("Error creating DM");
       })
     }
@@ -192,13 +193,15 @@
       {clickLeaderboard}
     />
     {#if appState.includes(`${APPSTATE.CHANNELS}#`)}
+      {#key appState}
         <div
           on:click={() => setAppState(APPSTATE.CHANNELS)}
           on:keydown={() => setAppState(APPSTATE.CHANNELS)}
         >
           <Chat
+            {appState}
             {setAppState}
-          channel={selectedChannel}
+            bind:channel={selectedChannel}
             on:view-profile={openIdProfile}
             on:add-friend={addFriend}
             on:invite-to-game={pong.inviteToGame}
@@ -206,6 +209,7 @@
             on:return-home={resetAppState}
           />
         </div>
+      {/key}
     {/if}
     {#if appState.includes(APPSTATE.CHANNELS)}
       <div
@@ -213,7 +217,7 @@
         on:click={resetAppState}
         on:keydown={resetAppState}
       >
-        <Channels bind:this={chan} onSelectChannel={handleSelectChannel} />
+        <Channels onSelectChannel={handleSelectChannel} />
       </div>
     {/if}
     {#if appState === APPSTATE.LEADERBOARD}

front/volume/src/components/Channels.svelte

@@ -281,8 +281,7 @@
     border-radius: 5px;
     padding: 1rem;
     width: 500px;
-    overflow-y: scroll;
+    overflow: auto;
-    overflow-x: auto;
     max-height: 80%;
   }
 

front/volume/src/components/Chat.svelte

@@ -4,26 +4,49 @@
   import { io, Socket } from "socket.io-client";
   import { show_popup, content } from "./Alert/content";
   import { APPSTATE } from "../App.svelte";
-  import type { ChannelsType, chatMessagesType } from "./Channels.svelte";
+  import { formatChannelNames, type ChannelsType, type chatMessagesType } from "./Channels.svelte";
   import type User from "./Profile.svelte";
 </script>
 
 <script lang="ts">
-  let usersInterval: ReturnType<typeof setInterval>;
-  let blockedUsers: Array<User> = [];
-  let chatMembers: Array<User> = [];
   export let channel: ChannelsType;
   export let messages: Array<chatMessagesType> = [];
-  let newText = "";
+  export let appState: string;
-
   export let setAppState: (newState: APPSTATE | string) => void;
+
   let socket: Socket;
+  let newText = "";
+  let usersInterval: ReturnType<typeof setInterval>;
+  let blockedUsers: Array<User> = [];
+  let chatMembers: Array<User> = [];
+
+  async function getCurrentChannel() {
+    const res = await fetch(API_URL + "/channels", {
+      credentials: "include",
+      mode: "cors",
+    });
+    if (res.ok) {
+      const newChannels: Array<ChannelsType> = await res.json();
+      await formatChannelNames(newChannels);
+      newChannels.forEach((newChannel) => {
+        const urlSplit = appState.split("#", 2)
+        if (urlSplit.length > 1) {
+          const currentChannelName = appState.split("#", 2)[1];
+          if (newChannel.name === currentChannelName) {
+            channel = newChannel;
+          }
+        }
+      });
+    }
+  }
+
   onMount(async () => {
     socket = io(
       "http://" + (import.meta.env.VITE_HOST ?? "localhost") + ":3001"
     );
     socket.connect();
-    if (!channel) setAppState("/channels");
+    await getCurrentChannel();
+    if (!channel) setAppState(APPSTATE.CHANNELS);
     if (!channel.password) {
       socket.emit("joinChannel", {
         UserId: $store.ftId,
@@ -442,6 +465,7 @@
     border-radius: 5px;
     padding: 1rem;
     max-width: 90%;
+    max-height: 80vh;
     width: auto;
     margin: auto;
     display: flex;
@@ -451,7 +475,7 @@
   .messages {
     height: 400px;
     width: 100%;
-    overflow-y: scroll;
+    overflow-y: auto;
     border-bottom: 1px solid #dedede;
     padding-bottom: 1rem;
   }
@@ -509,7 +533,7 @@
     border-radius: 5px;
     padding: 1rem;
     max-height: 70%;
-    overflow-y: scroll;
+    overflow-y: auto;
     z-index: 1;
   }
 

front/volume/src/components/Friends.svelte

@@ -121,6 +121,8 @@
     padding: 1rem;
     width: 300px;
     color: #e8e6e3;
+    max-height: 80vh;
+    overflow: auto;
   }
 
   h2,

front/volume/src/components/Pong/GameCreation.svelte

@@ -79,6 +79,9 @@
     border-radius: 5px;
     padding: 1rem;
     width: 50vw;
+    max-width: 80vw;
+    max-height: 80vh;
+    overflow: auto;
   }
 
   .name-input {

front/volume/src/components/Pong/Matchmaking.svelte

@@ -28,5 +28,8 @@
     border: 1px solid #ccc;
     border-radius: 5px;
     padding: 1rem;
+    max-width: 80vw;
+    max-height: 80vh;
+    overflow: auto;
   }
 </style>

front/volume/src/components/Pong/Pong.svelte

@@ -224,6 +224,7 @@
 
   h1 {
     margin-bottom: 2rem;
+    text-align: center;
   }
 
   button {

front/volume/src/components/Profile.svelte

@@ -169,6 +169,8 @@
     border-radius: 5px;
     padding: 1rem;
     max-width: 80%;
+    max-height: 80vh;
+    overflow: auto;
     width: 375px;
     color: #e8e6e3;
   }