Browse Source

moved usersmenu buttons to profile and removed usersMenu

master
nicolas-arnaud 2 years ago
parent
commit
4f3b07d9e0
  1. 7
      front/src/App.svelte
  2. 62
      front/src/components/Channels.svelte
  3. 32
      front/src/components/Chat.svelte
  4. 28
      front/src/components/Friends.svelte
  5. 81
      front/src/components/Profile.svelte
  6. 174
      front/src/components/UsersMenu.svelte

7
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}

62
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">

32
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:keydown={() => openUserMenu(message.author.username)}
on:click={() => dispatch("view-profile", 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">

28
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:keydown={() => openUserMenu($store.username)}
on:click={() => dispatch("view-profile", $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:keydown={() => openUserMenu(friend.username)}
on:click={() => dispatch("view-profile", 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:keydown={() => openUserMenu(invit.username)}
on:click={() => dispatch("view-profile", invit.username)}
on:keydown={() => dispatch("view-profile", invit.username)}
style="cursor: pointer;"
>{invit.username} invited you to be friend.</span>
</li>

81
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

174
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>
Loading…
Cancel
Save