chat menu

front/volume/src/components/Channels.svelte

@@ -10,7 +10,11 @@
 </script>
 
 <script lang="ts">
+  //--------------------------------------------------------------------------------/
+
   export let channels: Array<ChannelsType> = [];
+
+  //--------------------------------------------------------------------------------/
   export let onSelectChannel: (channel: ChannelsType) => void;
   const selectChat = (id: string) => {
     const channel = channels.find((c) => c.id === id);
@@ -18,6 +22,9 @@
       onSelectChannel(channel);
     }
   };
+
+  //--------------------------------------------------------------------------------/
+
   const createChannel = () => {
     const name = prompt("Enter a name for the new channel:");
     if (name) {
@@ -47,6 +54,18 @@
     }
     // TODO: save to database
   };
+
+  //--------------------------------------------------------------------------------/
+
+  const removeChannel = (id: string) => {
+    let string = prompt("type 'delete' to delete this channel");
+    if (string === "delete") {
+      channels = channels.filter((c) => c.id !== id);
+    }
+    // TODO: save to database
+  }
+
+  //--------------------------------------------------------------------------------/
 </script>
 
 <div class="overlay">
@@ -58,7 +77,7 @@
           <li>
             <span>{_channels.name}</span>
             <button on:click={() => selectChat(_channels.id)}>Enter</button>
-          </li>
+            <button on:click={() => removeChannel(_channels.id)} on:keydown={() => removeChannel(_channels.id)}>delete</button>
         {/each}
       {:else}
         <p>No channels available</p>
@@ -76,7 +95,6 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9998;
     display: flex;
     justify-content: center;
     align-items: center;

front/volume/src/components/Chat.svelte

@@ -5,10 +5,21 @@
     text: string;
   }
   import { createEventDispatcher, onMount } from "svelte";
-  import { store } from "../Auth";
+  import { store, API_URL } from "../Auth";
+  import type { Player } from "./Profile.svelte";
+  interface User {
+    username: string;
+  } 
 </script>
 
 <script lang="ts">
+  //--------------------------------------------------------------------------------/
+
+  export let chatMessages: Array<chatMessagesType> = [];
+  let newText = "";
+
+  //--------------------------------------------------------------------------------/
+
   const sendMessage = () => {
     if (newText !== "") {
       const newMessage = {
@@ -26,8 +37,7 @@
     // TODO: save to database
   };
 
-  export let chatMessages: Array<chatMessagesType> = [];
+  //--------------------------------------------------------------------------------/
-  let newText = "";
 
   const dispatch = createEventDispatcher();
   let showProfileMenu = false;
@@ -41,6 +51,34 @@
     selectedUser = "";
   }
   onMount(closeProfileMenu);
+
+  //--------------------------------------------------------------------------------/
+
+  let showChatMembers = false;
+  function toggleChatMembers() {
+    showChatMembers = !showChatMembers;
+  }
+  let chatMembers: Array<User> = [
+    { username: "user1"},
+    { username: "user2"},
+    { username: "user3"},
+    { username: "user4"},
+    { username: "user5"},
+    { username: "user6"},
+    { username: "user7"},
+    { username: "user8"},
+    { username: "user9"},
+  ]
+  // let chatMembers: Array<Player> = [];
+  // async function getChatMembers() {
+  //   console.log("Getting chat members");
+  //   const res = await fetch(API_URL + "/chat/members", {
+  //     mode: "cors",
+  //   });
+  //   chatMembers = await res.json();
+  // }
+
+  //--------------------------------------------------------------------------------/
 </script>
 
 <div class="overlay">
@@ -66,36 +104,20 @@
         on:keydown|stopPropagation
       >
         <ul>
-          <!-- if admin 
-          <li><button on:click={() => dispatch('delete-user', selectedUser)}>Delete User</button></li>
-          <li><button on:click={() => dispatch('ban-user', selectedUser)}>Ban User</button></li>
-          <li><button on:click={() => dispatch('mute-user', selectedUser)}>Mute User</button></li>
-          <li><button on:click={() => dispatch('promote-user', selectedUser)}>Promote User</button></li>
-          -->
           <li>
-            <button on:click={() => dispatch("send-message", selectedUser)}
+            <button on:click={() => dispatch("send-message", selectedUser)}>Send Message</button>
-              >Send Message</button
-            >
           </li>
           <li>
-            <button on:click={() => dispatch("view-profile", selectedUser)}
+            <button on:click={() => dispatch("view-profile", selectedUser)}>View Profile</button>
-              >View Profile</button
-            >
           </li>
           <li>
-            <button on:click={() => dispatch("add-friend", selectedUser)}
+            <button on:click={() => dispatch("add-friend", selectedUser)}>Add Friend</button>
-              >Add Friend</button
-            >
           </li>
           <li>
-            <button on:click={() => dispatch("invite-to-game", selectedUser)}
+            <button on:click={() => dispatch("invite-to-game", selectedUser)}>Invite to Game</button>
-              >Invite to Game</button
-            >
           </li>
           <li>
-            <button on:click={() => dispatch("block-user", selectedUser)}
+            <button on:click={() => dispatch("block-user", selectedUser)}>Block User</button>
-              >Block User</button
-            >
           </li>
           <li><button on:click={closeProfileMenu}>Close</button></li>
         </ul>
@@ -107,6 +129,26 @@
         <img src="img/send.png" alt="send" />
       </button>
     </form>
+    <button on:click|stopPropagation={toggleChatMembers} on:keydown|stopPropagation>Chat Members</button>
+    {#if showChatMembers}
+      <div class="chatMembers" on:click|stopPropagation on:keydown|stopPropagation>
+        <div>
+          <ul>
+            {#each chatMembers as member}
+              <li>
+                <p>
+                  {member.username}
+                  <button>ban</button>
+                  <button>kick</button>
+                  <button>mute</button>
+                  <button>admin</button>                  
+                </p>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      </div>
+    {/if}
   </div>
 </div>
 
@@ -118,7 +160,6 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9998;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -136,4 +177,24 @@
     height: 200px;
     overflow-y: scroll;
   }
+
+  .chatMembers {
+    position: absolute;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 1rem;
+    max-height: 100px;
+    overflow-y: scroll;
+  }
+
+  .chatMembers ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .chatMembers button {
+    width: 3.5rem;
+  }
 </style>