|
|
@ -1,34 +1,30 @@ |
|
|
<script lang="ts" context="module"> |
|
|
<script lang="ts" context="module"> |
|
|
export interface chatMessagesType { |
|
|
export interface chatMessagesType { |
|
|
id: number; |
|
|
id: number; |
|
|
author: string; |
|
|
author: string; |
|
|
text: string; |
|
|
text: string; |
|
|
} |
|
|
} |
|
|
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 chatMembers: Array<User> = []; |
|
|
|
|
|
let chatMessages: Array<chatMessagesType> = []; |
|
|
|
|
|
export let channel: ChannelsType; |
|
|
|
|
|
let newText = ""; |
|
|
|
|
|
onMount(async () => { |
|
|
|
|
|
let res = await fetch(API_URL + "/users/" + $store.ftId + "/blocked", { |
|
|
|
|
|
credentials: "include", |
|
|
|
|
|
mode: "cors", |
|
|
|
|
|
}); |
|
|
|
|
|
if (res.ok) blockedUsers = await res.json(); |
|
|
|
|
|
|
|
|
|
|
|
res = await fetch(API_URL + "/channels/" + channel.id + "/members", { |
|
|
let blockedUsers: Array<User> = []; |
|
|
credentials: "include", |
|
|
let chatMembers: Array<User> = []; |
|
|
mode: "cors", |
|
|
let chatMessages: Array<chatMessagesType> = []; |
|
|
}); |
|
|
export let channel: ChannelsType; |
|
|
if (res.ok) chatMembers = await res.json(); |
|
|
let newText = ""; |
|
|
|
|
|
onMount(async () => { |
|
|
|
|
|
let res = await fetch(API_URL + "/users/" + $store.ftId + "/blocked", { |
|
|
|
|
|
credentials: "include", |
|
|
|
|
|
mode: "cors", |
|
|
|
|
|
}); |
|
|
|
|
|
if (res.ok) blockedUsers = await res.json(); |
|
|
|
|
|
|
|
|
io.on("messages", (msgs: Array<chatMessagesType>) => { |
|
|
io.on("messages", (msgs: Array<chatMessagesType>) => { |
|
|
chatMessages = msgs; |
|
|
chatMessages = msgs; |
|
|
@ -228,159 +224,161 @@ |
|
|
//--------------------------------------------------------------------------------/ |
|
|
//--------------------------------------------------------------------------------/ |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<div class="overlay"> |
|
|
<div class="overlay" > |
|
|
<div class="chat" on:click|stopPropagation on:keydown|stopPropagation> |
|
|
<div class="chat" on:click|stopPropagation on:keydown|stopPropagation> |
|
|
<div class="messages"> |
|
|
<div class="messages" > |
|
|
{#each chatMessages as message} |
|
|
{ #each chatMessages as message } |
|
|
<p class="message"> |
|
|
<p class="message" > |
|
|
{#if !blockedUsers.filter((user) => user.username == message.author).length} |
|
|
{ #if !blockedUsers.filter((user) => user.username == message.author).length } |
|
|
<span |
|
|
<span |
|
|
class="message-name" |
|
|
class="message-name" |
|
|
on:click={() => openProfile(message.author)} |
|
|
on:click = {() => openProfile(message.author)} |
|
|
on:keydown={() => openProfile(message.author)} |
|
|
on:keydown = {() => openProfile(message.author)} |
|
|
style="cursor: pointer;" |
|
|
style = "cursor: pointer;" |
|
|
> |
|
|
> |
|
|
{message.author} |
|
|
{ message.author } |
|
|
</span>: {message.text} |
|
|
</span>: {message.text} |
|
|
{/if} |
|
|
{ |
|
|
</p> |
|
|
/if} |
|
|
{/each} |
|
|
</p> |
|
|
</div> |
|
|
{ |
|
|
{#if showProfileMenu} |
|
|
/each} |
|
|
<div |
|
|
</div> |
|
|
|
|
|
{ #if showProfileMenu } |
|
|
|
|
|
<div |
|
|
class="profile-menu" |
|
|
class="profile-menu" |
|
|
on:click|stopPropagation |
|
|
on:click|stopPropagation |
|
|
on:keydown|stopPropagation |
|
|
on:keydown|stopPropagation |
|
|
> |
|
|
> |
|
|
<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> |
|
|
<button on:click={() => dispatch("view-profile", selectedUser)}> |
|
|
<li> |
|
|
View Profile |
|
|
<button on:click = {() => dispatch("view-profile", selectedUser) |
|
|
</button> |
|
|
} |
|
|
</li> |
|
|
> View Profile </button |
|
|
<li> |
|
|
> |
|
|
<button on:click={() => dispatch("add-friend", selectedUser)}> |
|
|
</li> |
|
|
Add Friend |
|
|
<li> |
|
|
</button> |
|
|
<button on:click = {() => dispatch("add-friend", selectedUser)} |
|
|
</li> |
|
|
> Add Friend </button |
|
|
<li> |
|
|
> |
|
|
<button on:click={() => dispatch("invite-to-game", selectedUser)}> |
|
|
</li> |
|
|
Invite to Game |
|
|
<li> |
|
|
</button> |
|
|
<button on:click = {() => dispatch("invite-to-game", selectedUser)} |
|
|
</li> |
|
|
> Invite to Game </button |
|
|
<li> |
|
|
> |
|
|
{#if !blockedUsers.filter((user) => (user.username = selectedUser)).length} |
|
|
</li> |
|
|
<button on:click={() => blockUser(selectedUser)}> |
|
|
<li> |
|
|
Block User |
|
|
{ #if !blockedUsers.filter((user) => user.username = selectedUser).length } |
|
|
</button> |
|
|
<button on:click = {() => blockUser(selectedUser)}> 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> |
|
|
<img src="img/send.png" alt="send" /> |
|
|
<img src="img/send.png" alt = "send" /> |
|
|
</button> |
|
|
</button> |
|
|
</form> |
|
|
</form> |
|
|
<button |
|
|
<button |
|
|
on:click|stopPropagation={toggleChatMembers} |
|
|
on:click|stopPropagation={ toggleChatMembers } |
|
|
on:keydown|stopPropagation |
|
|
on:keydown|stopPropagation > Chat Members </button |
|
|
> |
|
|
> |
|
|
Chat Members |
|
|
{ #if showChatMembers } |
|
|
</button> |
|
|
<div |
|
|
{#if showChatMembers} |
|
|
class="chatMembers" |
|
|
<div |
|
|
on:click|stopPropagation |
|
|
class="chatMembers" |
|
|
on:keydown|stopPropagation |
|
|
on:click|stopPropagation |
|
|
> |
|
|
on:keydown|stopPropagation |
|
|
<div> |
|
|
> |
|
|
<ul> |
|
|
<div> |
|
|
{ #each chatMembers as member } |
|
|
<ul> |
|
|
<li> |
|
|
{#each chatMembers as member} |
|
|
<p> |
|
|
<li> |
|
|
{ member.username } |
|
|
<p> |
|
|
<button on:click = {() => banUser(member.username) |
|
|
{member.username} |
|
|
}> ban </button> |
|
|
<button on:click={() => banUser(member.username)}> |
|
|
<button on:click = {() => kickUser(member.username) |
|
|
ban |
|
|
} |
|
|
</button> |
|
|
> kick </button |
|
|
<button on:click={() => kickUser(member.username)}> |
|
|
> |
|
|
kick |
|
|
<button on:click = {() => muteUser(member.username)} |
|
|
</button> |
|
|
> mute </button |
|
|
<button on:click={() => muteUser(member.username)}> |
|
|
> |
|
|
mute |
|
|
<button on:click = {() => adminUser(member.username)} |
|
|
</button> |
|
|
> promote </button |
|
|
<button on:click={() => adminUser(member.username)}> |
|
|
> |
|
|
promote |
|
|
<button on:click = {() => removeAdminUser(member.username)} |
|
|
</button> |
|
|
> demote </button |
|
|
<button on:click={() => removeAdminUser(member.username)}> |
|
|
> |
|
|
demote |
|
|
</p> |
|
|
</button> |
|
|
<p> |
|
|
</p> |
|
|
----------------------------------------------------------------------------------- |
|
|
<p> |
|
|
</p> |
|
|
----------------------------------------------------------------------------------- |
|
|
</li> |
|
|
</p> |
|
|
{ |
|
|
</li> |
|
|
/each} |
|
|
{/each} |
|
|
</ul> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
{ |
|
|
{/if} |
|
|
/if} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<style> |
|
|
<style> |
|
|
.overlay { |
|
|
.overlay { |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
top: 0; |
|
|
left: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.chat { |
|
|
.chat { |
|
|
background-color: #fff; |
|
|
background-color: #fff; |
|
|
border: 1px solid #ccc; |
|
|
border: 1px solid #ccc; |
|
|
border-radius: 5px; |
|
|
border-radius: 5px; |
|
|
padding: 1rem; |
|
|
padding: 1rem; |
|
|
width: 300px; |
|
|
width: 300px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.messages { |
|
|
.messages { |
|
|
height: 200px; |
|
|
height: 200px; |
|
|
overflow-y: scroll; |
|
|
overflow-y: scroll; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.chatMembers { |
|
|
.chatMembers { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
background-color: #fff; |
|
|
background-color: #fff; |
|
|
border: 1px solid #ccc; |
|
|
border: 1px solid #ccc; |
|
|
border-radius: 5px; |
|
|
border-radius: 5px; |
|
|
padding: 1rem; |
|
|
padding: 1rem; |
|
|
max-height: 100px; |
|
|
max-height: 100px; |
|
|
overflow-y: scroll; |
|
|
overflow-y: scroll; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.chatMembers ul { |
|
|
.chatMembers ul { |
|
|
list-style: none; |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
padding: 0; |
|
|
margin: 0; |
|
|
margin: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.chatMembers button { |
|
|
.chatMembers button { |
|
|
width: 6rem; |
|
|
width: 6rem; |
|
|
|
Pheuw1
2 years ago