moved usersmenu buttons to profile and removed usersMenu

front/src/App.svelte

@@ -21,7 +21,7 @@
   import MatchHistory from "./components/MatchHistory.svelte";
   import Friends, { addFriend } from "./components/Friends.svelte";
   import Chat from "./components/Chat.svelte";
-  import Channels from "./components/Channels.svelte";
+  import Channels, {openDirectChat} from "./components/Channels.svelte";
   import Leaderboard from "./components/Leaderboard.svelte";
   import { popup } from "./components/Alert/content";
   import Pong from "./components/Pong/Pong.svelte";
@@ -43,8 +43,8 @@
 
   function setAppState(newState: APPSTATE | string) {
   if (newState === appState) return;
+    history.pushState({ appState: newState, prevState: appState }, "", newState);
     appState = newState;
-    history.pushState({ appState: appState, prevState: window.location.pathname }, "", appState);
   }
 
   onMount(() => {
@@ -189,7 +189,10 @@
           <Profile
             {gamePlaying}
             bind:username={profileUsername}
+            on:send-message={openDirectChat}
             on:view-history={() => setAppState(APPSTATE.HISTORY_ID)}
+            on:add-friend={addFriend}
+            on:invite-to-game={pong.inviteToGame}
           />
         </div>
       {/if}

front/src/components/Channels.svelte

@@ -1,9 +1,10 @@
 <script lang="ts" context="module">
   import { content, show_popup } from './Alert/content'
   import { onMount } from "svelte";
+  import { get } from "svelte/store"
   import { API_URL, store } from "../Auth";
   import type User from "./Profile.svelte";
-  import type { APPSTATE } from "../App.svelte";
+  import { APPSTATE } from "../App.svelte";
   import type { CreateChannelDto } from './dtos/create-channel.dto';
   import type { IdDto, PasswordDto } from './dtos/updateUser.dto';
 
@@ -71,6 +72,65 @@
     }
   }
 
+  export async function getDMs(username: string): Promise<Response | null> {
+	const res = await fetch(API_URL + "/channels/dms/" + username, {
+		credentials: "include",
+		mode: "cors",
+	})
+	if (res.ok)
+		return res;
+	else
+		return null;
+  }
+
+  export async function openDirectChat(event: CustomEvent<string>) {
+    const DMUsername = event.detail;
+    let DMChannel: Array<ChannelsType> = [];
+    const res = await getDMs(DMUsername)
+    if (res && res.ok) {
+      DMChannel = await res.json();
+      if (DMChannel.length != 0)
+        await formatChannelNames(DMChannel)
+        setAppState(APPSTATE.CHANNELS + "#" + DMChannel[0].name)
+	  } else {
+      console.log("Creating DMChannel: " + get(store).username + "&" + DMUsername)
+      const body: CreateChannelDto = {
+        name: "none",
+        owner: get(store).ftId,
+        password: "",
+        isPrivate: true,
+        isDM: true,
+        otherDMedUsername: DMUsername
+      }
+      fetch(API_URL + "/channels", {
+        credentials: "include",
+        method: "POST",
+        mode: "cors",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(body),
+      }).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 {
+              show_popup("Error: Couldn't create DM.", false)
+            }
+        } else {
+          show_popup("Error: Couldn't create DM.", false)
+        }
+      }).catch(() => {
+        show_popup("Error: Couldn't create DM.", false)
+      })
+    }
+  }
+
+
+
 </script>
 
 <script lang="ts">

front/src/components/Chat.svelte

@@ -10,7 +10,6 @@
   import type { ConnectionDto } from "./dtos/connection.dto";
   import type { CreateMessageDto } from "./dtos/create-message.dto";
   import type { kickUserDto } from "./dtos/kickUser.dto";
-  import UsersMenu from "./UsersMenu.svelte";
 
 </script>
 
@@ -138,27 +137,11 @@
   };
   //--------------------------------------------------------------------------------/
 
-
-  let showUserMenu = false;
-  let selectedUser: string | null = null;
-  function openUserMenu(username: string) {
-    showUserMenu = true;
-    selectedUser = username;
-  }
-  function closeUserMenu() {
-    showUserMenu = false;
-    selectedUser = "";
-  }
-  onMount(closeUserMenu);
-
-  //--------------------------------------------------------------------------------/
-
   let showChatMembers = false;
   function toggleChatMembers() {
     showChatMembers = !showChatMembers;
   }
 
-  //--------------------------------------------------------------------------------/
   //--------------------------------------------------------------------------------/
 
   const banUser = async (username: string) => {
@@ -335,8 +318,8 @@
           {#if !message.hidden}
             <span
               class="message-name"
-              on:click={() => openUserMenu(message.author.username)}
+              on:click={() => dispatch("view-profile", message.author.username)}
-              on:keydown={() => openUserMenu(message.author.username)}
+              on:keydown={() => dispatch("view-profile", message.author.username)}
               style="cursor: pointer;"
             >
               {message.author.username}
@@ -345,17 +328,6 @@
         </p>
       {/each}
     </div>
-    {#if showUserMenu}
-      <UsersMenu 
-        {setAppState}
-        bind:username={selectedUser}
-        on:updateHiddens={updateHiddens}
-        on:close={closeUserMenu}
-        on:view-profile={() => dispatch("view-profile", selectedUser)}
-        on:add-friend={() => dispatch("add-friend", selectedUser)}
-        on:invite-to-game={() => dispatch("invite-to-game", selectedUser)}
-      />
-   {/if}
     <form on:submit|preventDefault={sendMessage}>
       <input type="text" placeholder="Type a message..." bind:value={newText} />
       <button style="background:#dedede; margin:auto">

front/src/components/Friends.svelte

@@ -2,10 +2,10 @@
   import { onMount, onDestroy } from "svelte";
   import { API_URL, store } from "../Auth";
   import { show_popup } from "./Alert/content";
-  import UsersMenu from "./UsersMenu.svelte";
   import type { APPSTATE } from "../App.svelte";
   import { createEventDispatcher } from "svelte";
 
+
   export interface Friend {
     username: string;
     status: "online" | "offline" | "in a game";
@@ -34,11 +34,13 @@
 
 <script lang="ts">
 
+  const dispatch = createEventDispatcher();
+
   export let setAppState: (newState: APPSTATE | string) => void;
   let friends: Friend[] = [];
   let invits: Friend[] = [];
   let friendsInterval: ReturnType<typeof setInterval>;
-  const dispatch = createEventDispatcher();
+  let blockedUsers: Array<Friend> = [];
 
   onMount(() => {
     getFriends();
@@ -84,20 +86,10 @@
 <div class="overlay">
   <div class="friends" on:click|stopPropagation on:keydown|stopPropagation>
     <div>
-      {#if showUserMenu}
-        <UsersMenu 
-          {setAppState}
-          bind:username={selectedUser}
-          on:close={closeUserMenu}
-          on:view-profile={() => dispatch("view-profile", selectedUser)}
-          on:add-friend={addFriend}
-          on:invite-to-game={() => dispatch("invite-to-game", selectedUser)}
-        />
-      {/if}
       <li>
         <span class="message-name" 
-        on:click={() => openUserMenu($store.username)}
+          on:click={() => dispatch("view-profile", $store.username)}
-        on:keydown={() => openUserMenu($store.username)}
+          on:keydown={() => dispatch("view-profile", $store.username)}
         style="cursor: pointer;"
       >{$store.username} is {$store.status}</span> 
       </li>
@@ -107,8 +99,8 @@
           {#each friends as friend}
             <li>
               <span class="message-name" 
-              on:click={() => openUserMenu(friend.username)}
+              on:click={() => dispatch("view-profile", friend.username)}
-              on:keydown={() => openUserMenu(friend.username)}
+              on:keydown={() => dispatch("view-profile", friend.username)}
               style="cursor: pointer;"
             >{friend.username} is {friend.status}</span> 
             </li>
@@ -123,8 +115,8 @@
           {#each invits as invit}
             <li>
               <span class="message-name" 
-              on:click={() => openUserMenu(invit.username)}
+              on:click={() => dispatch("view-profile", invit.username)}
-              on:keydown={() => openUserMenu(invit.username)}
+              on:keydown={() => dispatch("view-profile", invit.username)}
               style="cursor: pointer;"
             >{invit.username} invited you to be friend.</span>
             </li>

front/src/components/Profile.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" context="module">
   export interface Player {
     username: string;
+    blocked: Array<Player>
     wins: number;
     looses: number;
     matchs: number;
@@ -18,6 +19,7 @@
   import Alert from "./Alert/Alert.svelte";
   import { popup } from "./Alert/content";
   import type { UserDto } from "./dtos/user.dto";
+  import { show_popup } from "./Alert/content";
 
   export let username: string = $store.username;
   export let email: string = $store.email;
@@ -26,8 +28,54 @@
 
   let edit: boolean = true;
   let user: Player = $store;
-
+  let blockedUsers: Array<Player> = [];
   let avatarForm: HTMLFormElement;
+  export const blockUser = async (username: string) => {
+    let response = await fetch(API_URL + "/users/" + username + "/byname", {
+      credentials: "include",
+      mode: "cors",
+    });
+    if (response.ok) {
+      const target = await response.json();
+      response = await fetch(API_URL + "/users/block/" + target.ftId, {
+        method: "GET",
+        credentials: "include",
+        mode: "cors"
+      });
+      dispatch("update-hiddens", username)
+    }
+    if (response.ok) await show_popup("User blocked", false);
+    else {
+      const error = await response.json();
+      await show_popup(error.message, false);
+    }
+    dispatch("close")
+  };
+
+  //--------------------------------------------------------------------------------/
+
+  export const unblockUser = async (username: string) => {
+    let response = await fetch(API_URL + "/users/" + username + "/byname", {
+      credentials: "include",
+      mode: "cors",
+    });
+    if (response.ok) {
+      const target = await response.json();
+      response = await fetch(API_URL + "/users/block/" + target.ftId, {
+        credentials: "include",
+        method: "DELETE",
+        mode: "cors"
+      });
+      dispatch("update-hiddens", username)
+    }
+    if (response.ok) await show_popup("User unblocked", false);
+    else {
+      const error = await response.json();
+      await show_popup(error.message, false);
+    }
+    dispatch("close")
+  };
+
 
   async function getUser() {
     if (username !== $store.username) {
@@ -36,6 +84,11 @@
         mode: "cors",
       });
       user = await res.json();
+      res = await fetch(API_URL + "/users/blocked/", {
+        credentials: "include",
+        mode: "cors",
+      });
+      if (res.ok) blockedUsers = await res.json();
     }
   }
 
@@ -52,7 +105,7 @@
     }
 
     const body: UserDto = {
-      username: newUsername,
+      username: username,
       ftId: $store.ftId,
       status: $store.status,
       authToken: $store.authToken,
@@ -102,7 +155,7 @@
   <div class="profile" on:click|stopPropagation on:keydown|stopPropagation>
     <h3>===| <mark>{username}'s Profile</mark> |===</h3>
     <div class="profile-header">
-      {#if !edit}
+      {#if edit}
         <img src={`${API_URL}/users/${user.ftId}/avatar`} alt="avatar" class="profile-img" />
       {:else}
         <form
@@ -129,6 +182,28 @@
       {/if}
     </div>
     <div class="profile-body">
+      {#if !edit}
+        <p>
+          <button on:click={() => dispatch("send-message")}>Send PM</button>
+          <button on:click={() => dispatch("invite-to-game", username)}>
+            Invite to Game
+          </button>
+        </p>
+        <p>
+          <button on:click={() => dispatch("add-friend", username)}>
+            Add Friend
+          </button>
+        {#if blockedUsers.some((usr) => usr.username === username)}
+          <button on:click={() => unblockUser(username)}>
+            Unblock User
+          </button>
+        {:else}
+          <button on:click={() => blockUser(username)}>
+            Block User
+          </button>
+        {/if}
+        </p>
+      {/if}
       <p>
         <button on:click={() => dispatch("view-history")}
           >View History</button

front/src/components/UsersMenu.svelte

@@ -1,174 +0,0 @@
-<script lang="ts" context="module">
-  import { API_URL, store } from "../Auth";
-  import { APPSTATE} from "../App.svelte";
-  import { createEventDispatcher } from "svelte";
-  import { formatChannelNames, type ChannelsType } from "./Channels.svelte";
-  import { show_popup } from "./Alert/content";
-  import type { CreateChannelDto } from "./dtos/create-channel.dto";
-</script>
-
-<script lang="ts">
-  export let username: string = "";
-  export let setAppState: (newState: APPSTATE | string) => void;
-
-  const dispatch = createEventDispatcher();
-
-  async function getDMs(username: string): Promise<Response | null> {
-	const res = await fetch(API_URL + "/channels/dms/" + username, {
-		credentials: "include",
-		mode: "cors",
-	})
-	if (res.ok)
-		return res;
-	else
-		return null;
-  }
-
-  async function openDirectChat() {
-    const DMUsername = username;
-    let DMChannel: Array<ChannelsType> = [];
-    const res = await getDMs(DMUsername)
-    if (res && res.ok) {
-      DMChannel = await res.json();
-      if (DMChannel.length != 0)
-        await formatChannelNames(DMChannel)
-        setAppState(APPSTATE.CHANNELS + "#" + DMChannel[0].name)
-	  } else {
-      console.log("Creating DMChannel: " + $store.username + "&" + DMUsername)
-      const body: CreateChannelDto = {
-        name: "none",
-        owner: $store.ftId,
-        password: "",
-        isPrivate: true,
-        isDM: true,
-        otherDMedUsername: DMUsername
-      }
-      fetch(API_URL + "/channels", {
-        credentials: "include",
-        method: "POST",
-        mode: "cors",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(body),
-      }).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 {
-              show_popup("Error: Couldn't create DM.", false)
-            }
-        } else {
-          show_popup("Error: Couldn't create DM.", false)
-        }
-      }).catch(() => {
-        show_popup("Error: Couldn't create DM.", false)
-      })
-    }
-  }
-
-  const blockUser = async (username: string) => {
-    let response = await fetch(API_URL + "/users/" + username + "/byname", {
-      credentials: "include",
-      mode: "cors",
-    });
-    if (response.ok) {
-      const target = await response.json();
-      response = await fetch(API_URL + "/users/block/" + target.ftId, {
-        method: "GET",
-        credentials: "include",
-        mode: "cors"
-      });
-      dispatch("updateHiddens", username)
-    }
-    if (response.ok) await show_popup("User blocked", false);
-    else {
-      const error = await response.json();
-      await show_popup(error.message, false);
-    }
-    dispatch("close")
-  };
-
-  //--------------------------------------------------------------------------------/
-
-  const unblockUser = async (username: string) => {
-    let response = await fetch(API_URL + "/users/" + username + "/byname", {
-      credentials: "include",
-      mode: "cors",
-    });
-    if (response.ok) {
-      const target = await response.json();
-      response = await fetch(API_URL + "/users/block/" + target.ftId, {
-        credentials: "include",
-        method: "DELETE",
-        mode: "cors"
-      });
-      dispatch("updateHiddens", username)
-    }
-    if (response.ok) await show_popup("User unblocked", false);
-    else {
-      const error = await response.json();
-      await show_popup(error.message, false);
-    }
-    dispatch("close")
-  };
-</script>
-
-<div
-  class="user-menu"
-  on:click|stopPropagation
-  on:keydown|stopPropagation
->
-  <ul>
-    <li>
-      <button on:click={openDirectChat}> Send Message </button>
-    </li>
-    <li>
-      <button on:click={() => dispatch("view-profile", username)}>
-        View Profile
-      </button>
-    </li>
-    <li>
-      <button on:click={() => dispatch("add-friend", username)}>
-        Add Friend
-      </button>
-    </li>
-    <li>
-      <button on:click={() => dispatch("invite-to-game", username)}>
-        Invite to Game
-      </button>
-    </li>
-    <li>
-      <button on:click={() => blockUser(username)}>
-        Block User
-      </button>
-    </li>
-    <li><button on:click={() => dispatch("close")}> Close </button></li>
-  </ul>
-</div>
-<style>
-  .user-menu {
-    position: absolute;
-    background-color: #ffffff;
-    border: 1px solid #dedede;
-    border-radius: 5px;
-    padding: 1rem;
-    max-height: 70%;
-    overflow-y: auto;
-    z-index: 1;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  li {
-    margin-bottom: 0.5rem;
-  }
-
-</style>