|
@ -6,12 +6,14 @@ |
|
|
} |
|
|
} |
|
|
import { createEventDispatcher, onDestroy, onMount } from "svelte"; |
|
|
import { createEventDispatcher, onDestroy, onMount } from "svelte"; |
|
|
import { store, API_URL } from "../Auth"; |
|
|
import { store, API_URL } from "../Auth"; |
|
|
import { io } from "../socket"; |
|
|
import { io } from "../socket" |
|
|
import type { ChannelsType } from "./Channels.svelte"; |
|
|
import type { ChannelsType } from "./Channels.svelte"; |
|
|
import type User from "./Profile.svelte"; |
|
|
import type User from "./Profile.svelte"; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
//--------------------------------------------------------------------------------/ |
|
|
<script lang="ts"> |
|
|
<script lang="ts"> |
|
|
|
|
|
|
|
|
let blockedUsers: Array<User> = []; |
|
|
let blockedUsers: Array<User> = []; |
|
|
let chatMembers: Array<User> = []; |
|
|
let chatMembers: Array<User> = []; |
|
|
let chatMessages: Array<chatMessagesType> = []; |
|
|
let chatMessages: Array<chatMessagesType> = []; |
|
@ -24,12 +26,6 @@ |
|
|
}); |
|
|
}); |
|
|
if (res.ok) blockedUsers = await res.json(); |
|
|
if (res.ok) blockedUsers = await res.json(); |
|
|
|
|
|
|
|
|
res = await fetch(API_URL + "/channels/" + channel.id + "/members", { |
|
|
|
|
|
credentials: "include", |
|
|
|
|
|
mode: "cors", |
|
|
|
|
|
}); |
|
|
|
|
|
if (res.ok) chatMembers = await res.json(); |
|
|
|
|
|
|
|
|
|
|
|
io.on("messages", (msgs: Array<chatMessagesType>) => { |
|
|
io.on("messages", (msgs: Array<chatMessagesType>) => { |
|
|
chatMessages = msgs; |
|
|
chatMessages = msgs; |
|
|
}); |
|
|
}); |
|
@ -242,9 +238,11 @@ |
|
|
> |
|
|
> |
|
|
{ message.author } |
|
|
{ message.author } |
|
|
</span>: {message.text} |
|
|
</span>: {message.text} |
|
|
{/if} |
|
|
{ |
|
|
|
|
|
/if} |
|
|
</p> |
|
|
</p> |
|
|
{/each} |
|
|
{ |
|
|
|
|
|
/each} |
|
|
</div> |
|
|
</div> |
|
|
{ #if showProfileMenu } |
|
|
{ #if showProfileMenu } |
|
|
<div |
|
|
<div |
|
@ -254,40 +252,40 @@ |
|
|
> |
|
|
> |
|
|
<ul> |
|
|
<ul> |
|
|
<li> |
|
|
<li> |
|
|
<button on:click={() => dispatch("send-message", selectedUser)}> |
|
|
<button on:click = {() => dispatch("send-message", selectedUser) |
|
|
Send Message |
|
|
} |
|
|
</button> |
|
|
> Send Message </button |
|
|
|
|
|
> |
|
|
</li> |
|
|
</li> |
|
|
<li> |
|
|
<li> |
|
|
<button on:click={() => dispatch("view-profile", selectedUser)}> |
|
|
<button on:click = {() => dispatch("view-profile", selectedUser) |
|
|
View Profile |
|
|
} |
|
|
</button> |
|
|
> View Profile </button |
|
|
|
|
|
> |
|
|
</li> |
|
|
</li> |
|
|
<li> |
|
|
<li> |
|
|
<button on:click={() => dispatch("add-friend", selectedUser)}> |
|
|
<button on:click = {() => dispatch("add-friend", selectedUser)} |
|
|
Add Friend |
|
|
> Add Friend </button |
|
|
</button> |
|
|
> |
|
|
</li> |
|
|
</li> |
|
|
<li> |
|
|
<li> |
|
|
<button on:click={() => dispatch("invite-to-game", selectedUser)}> |
|
|
<button on:click = {() => dispatch("invite-to-game", selectedUser)} |
|
|
Invite to Game |
|
|
> Invite to Game </button |
|
|
</button> |
|
|
> |
|
|
</li> |
|
|
</li> |
|
|
<li> |
|
|
<li> |
|
|
{#if !blockedUsers.filter((user) => (user.username = selectedUser)).length} |
|
|
{ #if !blockedUsers.filter((user) => user.username = selectedUser).length } |
|
|
<button on:click={() => blockUser(selectedUser)}> |
|
|
<button on:click = {() => blockUser(selectedUser)}> Block User </button> |
|
|
Block User |
|
|
|
|
|
</button> |
|
|
|
|
|
{:else } |
|
|
{:else } |
|
|
<button on:click={() => unblockUser(selectedUser)}> |
|
|
<button on:click = {() => unblockUser(selectedUser)}> Unblock User </button> |
|
|
Unblock User |
|
|
{ |
|
|
</button> |
|
|
/if} |
|
|
{/if} |
|
|
|
|
|
</li> |
|
|
</li> |
|
|
<li> <button on:click = { closeProfileMenu } > Close </button></li > |
|
|
<li> <button on:click = { closeProfileMenu } > Close </button></li > |
|
|
</ul> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
{/if} |
|
|
{ |
|
|
|
|
|
/if} |
|
|
<form on:submit|preventDefault={ sendMessage }> |
|
|
<form on:submit|preventDefault={ sendMessage }> |
|
|
<input type="text" placeholder = "Type a message..." bind:value={ newText } /> |
|
|
<input type="text" placeholder = "Type a message..." bind:value={ newText } /> |
|
|
<button> |
|
|
<button> |
|
@ -296,10 +294,8 @@ |
|
|
</form> |
|
|
</form> |
|
|
<button |
|
|
<button |
|
|
on:click|stopPropagation={ toggleChatMembers } |
|
|
on:click|stopPropagation={ toggleChatMembers } |
|
|
on:keydown|stopPropagation |
|
|
on:keydown|stopPropagation > Chat Members </button |
|
|
> |
|
|
> |
|
|
Chat Members |
|
|
|
|
|
</button> |
|
|
|
|
|
{ #if showChatMembers } |
|
|
{ #if showChatMembers } |
|
|
<div |
|
|
<div |
|
|
class="chatMembers" |
|
|
class="chatMembers" |
|
@ -312,31 +308,33 @@ |
|
|
<li> |
|
|
<li> |
|
|
<p> |
|
|
<p> |
|
|
{ member.username } |
|
|
{ member.username } |
|
|
<button on:click={() => banUser(member.username)}> |
|
|
<button on:click = {() => banUser(member.username) |
|
|
ban |
|
|
}> ban </button> |
|
|
</button> |
|
|
<button on:click = {() => kickUser(member.username) |
|
|
<button on:click={() => kickUser(member.username)}> |
|
|
} |
|
|
kick |
|
|
> kick </button |
|
|
</button> |
|
|
> |
|
|
<button on:click={() => muteUser(member.username)}> |
|
|
<button on:click = {() => muteUser(member.username)} |
|
|
mute |
|
|
> mute </button |
|
|
</button> |
|
|
> |
|
|
<button on:click={() => adminUser(member.username)}> |
|
|
<button on:click = {() => adminUser(member.username)} |
|
|
promote |
|
|
> promote </button |
|
|
</button> |
|
|
> |
|
|
<button on:click={() => removeAdminUser(member.username)}> |
|
|
<button on:click = {() => removeAdminUser(member.username)} |
|
|
demote |
|
|
> demote </button |
|
|
</button> |
|
|
> |
|
|
</p> |
|
|
</p> |
|
|
<p> |
|
|
<p> |
|
|
----------------------------------------------------------------------------------- |
|
|
----------------------------------------------------------------------------------- |
|
|
</p> |
|
|
</p> |
|
|
</li> |
|
|
</li> |
|
|
{/each} |
|
|
{ |
|
|
|
|
|
/each} |
|
|
</ul> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
{/if} |
|
|
{ |
|
|
|
|
|
/if} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|