* 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,41 +88,43 @@
     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", {
-          credentials: "include",
-          method: "POST",
-          mode: "cors",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            name: "none",
-            owner: $store.ftId,
-            password: "",
-            isPrivate: true,
-            isDM: true,
-            otherDMedUsername: DMUsername
-          }),
-        }).then(async () => {
-          const response = await getDMs(DMUsername)
-          if (response && response.ok) {
-              DMChannel = await response.json(); 
-              if (DMChannel.length != 0) {
-                chan.selectChat(DMChannel[0].id);
-              } else {
-                alert("Error creating DM");
-              }
-          } else {
-            alert("Error creating DM");
-          }
-        }).catch((error) => {
+      console.log("Creating DMChannel: " + $store.username + "&" + DMUsername)
+      fetch(API_URL + "/channels", {
+        credentials: "include",
+        method: "POST",
+        mode: "cors",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: "none",
+          owner: $store.ftId,
+          password: "",
+          isPrivate: true,
+          isDM: true,
+          otherDMedUsername: DMUsername
+        }),
+      }).then(async () => {
+        const response = await getDMs(DMUsername)
+        if (response && response.ok) {
+            DMChannel = await response.json(); 
+            if (DMChannel.length != 0) {
+              await formatChannelNames(DMChannel)
+              setAppState(APPSTATE.CHANNELS + "#" + DMChannel[0].name)
+            } else {
+              alert("Error creating DM");
+            }
+        } else {
           alert("Error creating DM");
-        })
-      }
+        }
+      }).catch(() => {
+        alert("Error creating DM");
+      })
     }
+  }
 
   async function clickHistory() {
     setAppState(APPSTATE.HISTORY);
@@ -192,20 +193,23 @@
       {clickLeaderboard}
     />
     {#if appState.includes(`${APPSTATE.CHANNELS}#`)}
-      <div
-        on:click={() => setAppState(APPSTATE.CHANNELS)}
-        on:keydown={() => setAppState(APPSTATE.CHANNELS)}
-      >
-        <Chat
-          {setAppState}
-          channel={selectedChannel}
-          on:view-profile={openIdProfile}
-          on:add-friend={addFriend}
-          on:invite-to-game={pong.inviteToGame}
-          on:send-message={openDirectChat}
-          on:return-home={resetAppState}
-        />
-      </div>
+      {#key appState}
+        <div
+          on:click={() => setAppState(APPSTATE.CHANNELS)}
+          on:keydown={() => setAppState(APPSTATE.CHANNELS)}
+        >
+          <Chat
+            {appState}
+            {setAppState}
+            bind:channel={selectedChannel}
+            on:view-profile={openIdProfile}
+            on:add-friend={addFriend}
+            on:invite-to-game={pong.inviteToGame}
+            on:send-message={openDirectChat}
+            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-x: auto;
+    overflow: 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;
   }