nicolas-arnaud
/
Transcendence
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Front reformat / error fixing / passing channel prop to chat component

master
WalidMoovin 2 years ago
parent
1fdbbd376b
commit
5e111fbc7a
4 changed files with 125 additions and 179 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      front/volume/src/App.svelte
  2. 14
      front/volume/src/components/Channels.svelte
  3. 97
      front/volume/src/components/Chat.svelte
  4. 8
      front/volume/src/components/NavBar.svelte

1
front/volume/src/App.svelte
View File

@ -136,6 +136,7 @@
on:keydown={() => setAppState(APPSTATE.CHANNELS)}
>
<Chat
channel={selectedChannel}
on:view-profile={openIdProfile}
on:add-friend={addFriend}
on:invite-to-game={pong.inviteToGame}

14
front/volume/src/components/Channels.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts" context="module">
export interface ChannelsType {
id: number;
name: string;
@ -10,8 +9,6 @@
import { onMount } from "svelte";
import { API_URL, store } from "../Auth";
import { io } from "../socket";
import Select from 'svelte-select';
</script>
<script lang="ts">
@ -171,9 +168,7 @@
<div>
<select bind:value={channelMode} >
{#each channelOptions as option}
<option value={option} selected={channelMode === option}>
{option}
</option>
<option value={option} selected={channelMode === option}>{option}</option>
{/each}
</select>
{#if channelMode!= ''}
@ -236,11 +231,12 @@
appearance: none;
cursor: pointer;
}
span {
color: rgb(0, 0, 0);
font-size: 150%; /* Taille de la police en pourcentage */
position: relative; /* Positionnement relatif */
font-size: 150%;
position: relative;
padding: 10px;
top: 2px;
}
}
</style>

97
front/volume/src/components/Chat.svelte
View File

@ -94,7 +94,6 @@ import type User from "./Profile.svelte";
method: "POST",
mode: "cors",
});
const data2 = await res2.json();
if (res2.ok) {
alert("User blocked");
} else {
@ -115,7 +114,6 @@ import type User from "./Profile.svelte";
method: "DELETE",
mode: "cors",
});
const data2 = await res2.json();
if (res2.ok) {
alert("User unblocked");
} else {
@ -137,7 +135,6 @@ import type User from "./Profile.svelte";
method: "POST",
mode: "cors",
});
const data2 = await res2.json();
if (res2.ok) {
io.emit("kickUser", channel.id, $store.ftId, data1.ftId);
alert("User banned");
@ -171,7 +168,6 @@ import type User from "./Profile.svelte";
method: "POST",
mode: "cors",
});
const data2 = await res2.json();
if (res2.ok) {
alert("User muted");
} else {
@ -192,7 +188,6 @@ import type User from "./Profile.svelte";
method: "POST",
mode: "cors",
});
const data2 = await res2.json();
if (res2.ok) {
alert("User admined");
} else {
@ -213,7 +208,6 @@ import type User from "./Profile.svelte";
method: "DELETE",
mode: "cors",
});
const data2 = await res2.json();
if (res2.ok) {
alert("User admin removed");
} else {
@ -224,7 +218,8 @@ import type User from "./Profile.svelte";
//--------------------------------------------------------------------------------/
</script>
<div class="overlay" >
<div class="overlay" >
<div class="chat" on:click|stopPropagation on:keydown|stopPropagation>
<div class="messages" >
{ #each chatMessages as message }
@ -238,11 +233,9 @@ import type User from "./Profile.svelte";
>
{ message.author }
</span>: {message.text}
{
/if}
{/if}
</p>
{
/each}
{/each}
</div>
{ #if showProfileMenu }
<div
@ -252,91 +245,59 @@ import type User from "./Profile.svelte";
>
<ul>
<li>
<button on:click = {() => dispatch("send-message", selectedUser)
}
> Send Message </button
>
<button on:click = {() => dispatch("send-message", selectedUser)}> Send Message </button>
</li>
<li>
<button on:click = {() => dispatch("view-profile", selectedUser)
}
> View Profile </button
>
<button on:click = {() => dispatch("view-profile", selectedUser)}> View Profile </button>
</li>
<li>
<button on:click = {() => dispatch("add-friend", selectedUser)}
> Add Friend </button
>
<button on:click = {() => dispatch("add-friend", selectedUser)}> Add Friend </button>
</li>
<li>
<button on:click = {() => dispatch("invite-to-game", selectedUser)}
> Invite to Game </button
>
<button on:click = {() => dispatch("invite-to-game", selectedUser)}> Invite to Game </button>
</li>
<li>
{ #if !blockedUsers.filter((user) => user.username = selectedUser).length }
<button on:click = {() => blockUser(selectedUser)}> Block User </button>
{:else }
<button on:click = {() => unblockUser(selectedUser)}> Unblock User </button>
{
/if}
{ #if !blockedUsers.filter((user) => user.username = selectedUser).length }
<button on:click = {() => blockUser(selectedUser)}> Block User </button>
{:else }
<button on:click = {() => unblockUser(selectedUser)}> Unblock User </button>
{/if}
</li>
<li> <button on:click = { closeProfileMenu } > Close </button></li >
</ul>
</div>
{
/if}
{/if}
<form on:submit|preventDefault={ sendMessage }>
<input type="text" placeholder = "Type a message..." bind:value={ newText } />
<button>
<img src="img/send.png" alt = "send" />
</button>
</form>
<button
on:click|stopPropagation={ toggleChatMembers }
on:keydown|stopPropagation > Chat Members </button
>
<button on:click|stopPropagation={ toggleChatMembers } on:keydown|stopPropagation > Chat Members </button>
{ #if showChatMembers }
<div
class="chatMembers"
on:click|stopPropagation
on:keydown|stopPropagation
>
<div>
</div>
<ul>
{ #each chatMembers as member }
<li>
<p>
{ member.username }
<button on:click = {() => banUser(member.username)
}> ban </button>
<button on:click = {() => kickUser(member.username)
}
> kick </button
>
<button on:click = {() => muteUser(member.username)}
> mute </button
>
<button on:click = {() => adminUser(member.username)}
> promote </button
>
<button on:click = {() => removeAdminUser(member.username)}
> demote </button
>
</p>
<p>
-----------------------------------------------------------------------------------
<button on:click = {() => banUser(member.username)}> ban </button>
<button on:click = {() => kickUser(member.username)}> kick </button>
<button on:click = {() => muteUser(member.username)}> mute </button>
<button on:click = {() => adminUser(member.username)}> promote </button>
<button on:click = {() => removeAdminUser(member.username)}> demote </button>
</p>
</li>
{
/each}
{/each}
</ul>
{/if}
</div>
</div>
{
/if}
</div>
</div>
</div>
<style>
.overlay {
@ -373,14 +334,4 @@ import type User from "./Profile.svelte";
max-height: 100px;
overflow-y: scroll;
}
.chatMembers ul {
list-style: none;
padding: 0;
margin: 0;
}
.chatMembers button {
width: 6rem;
}
</style>

8
front/volume/src/components/NavBar.svelte
View File

@ -1,9 +1,6 @@
<script lang="ts">
let api =
"http://" +
import.meta.env.VITE_HOST +
":" +
import.meta.env.VITE_BACK_PORT;
let api = "http://" + import.meta.env.VITE_HOST + ":" + import.meta.env.VITE_BACK_PORT;
export let links = [
{ text: "Home" },
{ text: "Channels" },
@ -12,6 +9,7 @@
{ text: "Leaderboard" },
{ text: "Profile" },
];
export let clickProfile = () => {};
export let clickHistory = () => {};
export let clickFriends = () => {};

Write Preview
Loading…
Cancel
Save