simplified version of chat, easier to work with and responsive, fixed some bugs

front/volume/src/App.svelte

@@ -9,12 +9,18 @@
   import type { SpectateType } from "./components/Spectate.svelte";
   import Play from "./components/Play.svelte";
   import Pong from "./components/Pong/Pong.svelte";
-  import Chat from "./components/Chat.svelte";
+  import Chat2 from "./components/Chat2.svelte";
+  import type { chatMessagesType } from "./components/Chat2.svelte";
+
+  // PROFILE
 
   let isProfileOpen = false;
   function clickProfile() {
     isProfileOpen = true;
   }
+
+  // HISTORY
+
   let isHistoryOpen = false;
   function clickHistory() {
     isHistoryOpen = true;
@@ -27,6 +33,9 @@
     { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
     { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
   ];
+
+  // FRIENDS
+
   let isFriendOpen = false;
   function clickFriends() {
     isFriendOpen = true;
@@ -39,6 +48,8 @@
     { username: "Eve", status: "in a game" },
     { username: "Frank", status: "online" },
   ];
+
+  // SPECTATE
   let isSpectateOpen = false;
   function clickSpectate() {
     isSpectateOpen = true;
@@ -51,10 +62,32 @@
     { player1: "Alice", player2: "Bob", id: "2" },
     { 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" },
+  ];
 </script>
 
 <main>
-  <Navbar {clickProfile} {clickHistory} {clickFriends} {clickSpectate} />
+  <Navbar {clickProfile} {clickHistory} {clickFriends} {clickSpectate} {clickChat} />
+  {#if isChatOpen}
+    <div
+      on:click={() => (isChatOpen = false)}
+      on:keydown={() => (isChatOpen = false)}
+    >
+      <Chat2 {chatMessages} />
+    </div>
+  {/if}
   {#if isSpectateOpen}
     <div
       on:click={() => (isSpectateOpen = false)}
@@ -96,7 +129,6 @@
   {/if}
   <Play />
   <Pong />
-  <Chat />
 </main>
 
 <style>

front/volume/src/components/Chat.svelte

@@ -1,123 +0,0 @@
-<script lang="ts">
-  let chatIsOpen = false;
-  const toggleChat = () => (chatIsOpen = !chatIsOpen);
-  let newText = "";
-
-  let chatMessages = [
-    {
-      name: "Alice",
-      text: "Hello guys! Happy to see you here!",
-    },
-    {
-      name: "Bob",
-      text: "Wanna play?",
-    },
-    {
-      name: "Carl",
-      text: "cyka blyat",
-    },
-  ];
-
-  const sendMessage = () => {
-    if (newText !== "") {
-      const newMessage = {
-        name: "You",
-        text: newText,
-      };
-      chatMessages = [...chatMessages, newMessage];
-      newText = "";
-    }
-  };
-</script>
-
-<!-- Main chat div, changes style to hide/unhide the chat depending if it's open or closed -->
-<div class={chatIsOpen ? "chat-open chat-container" : "chat-container"}>
-  <!-- Button to toggle chat -->
-  <div class="chat-view-button">
-    <button on:click={toggleChat}>
-      {#if chatIsOpen}
-        <img src="img/close.png" alt="Close" />
-      {:else}
-        <img src="img/chat.png" alt="Open" />
-      {/if}
-    </button>
-  </div>
-  <div class="chat">
-    <!-- Chat history -->
-    <div class="messages">
-      {#each chatMessages as message}
-        <p class="message">
-          <span class="message-name">
-            {message.name}
-          </span>: {message.text}
-        </p>
-      {/each}
-    </div>
-    <!-- Form to send message -->
-    <form on:submit|preventDefault={sendMessage}>
-      <input type="text" placeholder="Type a message..." bind:value={newText} />
-      <button>
-        <img src="img/send.png" alt="send" />
-      </button>
-    </form>
-  </div>
-</div>
-
-<style>
-  .chat-container {
-    position: absolute;
-    top: 10rem;
-    height: calc(100vh - 10rem);
-    z-index: 42; /* Show it above everything */
-    display: flex;
-    width: 300px;
-    right: -300px;
-    transition: right 0.3s ease-out;
-  }
-  .chat-view-button {
-    position: absolute;
-    left: -64px;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    height: 64px;
-  }
-  .chat-view-button button {
-    border: none;
-    cursor: pointer;
-    border-radius: 16px 0 0 16px;
-    padding: 16px 16px 16px 16px;
-  }
-  .chat-open {
-    right: 0; /* Shows chat */
-  }
-  .chat {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-  .messages {
-    display: flex;
-    flex-direction: column;
-    height: calc(100vh - 10rem);
-    padding: 1rem;
-    overflow-y: scroll;
-  }
-  .message-name {
-    cursor: pointer;
-  }
-  form {
-    /* border-bottom: var(--grey) 1px solid; */
-    margin: 1rem;
-    display: flex;
-    justify-content: space-between;
-  }
-  input {
-    border: none;
-  }
-  form button {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-  }
-</style>

front/volume/src/components/Chat2.svelte

@@ -0,0 +1,68 @@
+<script lang="ts" context="module">
+  export interface chatMessagesType {
+    name: string;
+    text: string;
+  }
+</script>
+
+<script lang="ts">
+	const sendMessage = () => {
+		if (newText !== '')
+		{
+			const newMessage = {
+				name: 'You',
+				text: newText
+			};
+			chatMessages = [
+				...chatMessages,
+				newMessage
+			];
+			newText = '';
+		}
+	}
+  export let chatMessages: Array<chatMessagesType> = [];
+  let newText = "";
+</script>
+
+<div class="overlay">
+  <div class="chat" on:click|stopPropagation on:keydown|stopPropagation>
+    <div class="messages">
+      {#each chatMessages as message}
+        <p class="message">
+          <span class="message-name">
+            {message.name}
+          </span>: {message.text}
+        </p>
+      {/each}
+    </div>
+    <form on:submit|preventDefault={sendMessage}>
+      <input type="text" placeholder="Type a message..." bind:value={newText} />
+      <button>
+        <img src="img/send.png" alt="send" />
+      </button>
+    </form>
+  </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;
+  }
+
+  .chat {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 1rem;
+    width: 300px;
+  }
+</style>

front/volume/src/components/NavBar.svelte

@@ -11,6 +11,7 @@
   export let clickHistory = () => {};
   export let clickFriends = () => {};
   export let clickSpectate = () => {};
+  export let clickChat = () => {};
 </script>
 
 <nav class="navigation-bar">
@@ -23,6 +24,13 @@
           </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}>

front/volume/src/components/Play.svelte

@@ -1,20 +1,8 @@
 <script lang="ts">
-  // import { navigate } from 'svelte-routing';
-
-  // function handleMatchmakingClick() {
-  //   navigate('/matchmaking');
-  // }
-
-  // function handlePlayWithFriendClick() {
-  //   navigate('/play-with-friend');
-  // }
 </script>
 
-<!-- dr -->
 <main>
   <h1>Choose a gamemode</h1>
-  <!-- <button on:click={handleMatchmakingClick}>Matchmaking</button>
-    <button on:click={handlePlayWithFriendClick}>Play with a friend</button> -->
   <button>Matchmaking</button>
   <button>Play with a friend</button>
 </main>

front/volume/src/components/Spectate.svelte

@@ -8,7 +8,7 @@
 
 <script lang="ts">
   export let spectate: Array<SpectateType> = [];
-  export let watch = () => {};
+  export let watch = (id: string) => {};
 </script>
 
 <div class="overlay">