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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      front/volume/src/App.svelte
  2. 86
      front/volume/src/components/Channels.svelte
  3. 209
      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)} on:keydown={() => setAppState(APPSTATE.CHANNELS)}
> >
<Chat <Chat
channel={selectedChannel}
on:view-profile={openIdProfile} on:view-profile={openIdProfile}
on:add-friend={addFriend} on:add-friend={addFriend}
on:invite-to-game={pong.inviteToGame} on:invite-to-game={pong.inviteToGame}

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

@ -1,5 +1,4 @@
<script lang="ts" context="module"> <script lang="ts" context="module">
export interface ChannelsType { export interface ChannelsType {
id: number; id: number;
name: string; name: string;
@ -10,8 +9,6 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import { API_URL, store } from "../Auth"; import { API_URL, store } from "../Auth";
import { io } from "../socket"; import { io } from "../socket";
import Select from 'svelte-select';
</script> </script>
<script lang="ts"> <script lang="ts">
@ -167,15 +164,13 @@
</li>{/each} </li>{/each}
{:else} {:else}
<p>No channels available</p> <p>No channels available</p>
{/if} {/if}
<div> <div>
<select bind:value={channelMode} > <select bind:value={channelMode} >
{#each channelOptions as option} {#each channelOptions as option}
<option value={option} selected={channelMode === option}> <option value={option} selected={channelMode === option}>{option}</option>
{option}
</option>
{/each} {/each}
</select> </select>
{#if channelMode!= ''} {#if channelMode!= ''}
<button class="button" on:click={createChannel}>Create Channel</button> <button class="button" on:click={createChannel}>Create Channel</button>
{/if} {/if}
@ -205,42 +200,43 @@
} }
select { select {
width: 100%; width: 100%;
height: 15%; height: 15%;
padding: 5px; padding: 5px;
border-radius: 4px; border-radius: 4px;
background: #eee; background: #eee;
border: none; border: none;
outline: grey; outline: grey;
display: inline-block; display: inline-block;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
} }
.button { .button {
color: white; color: white;
margin:0 auto; margin:0 auto;
margin: auto; margin: auto;
width: 45%; width: 45%;
height: 15%; height: 15%;
padding: 5px; padding: 5px;
border-radius: 4px; border-radius: 4px;
background: #6B8E23; background: #6B8E23;
border: none; border: none;
outline: grey; outline: grey;
display:block; display:block;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
} }
span {
color: rgb(0, 0, 0); span {
font-size: 150%; /* Taille de la police en pourcentage */ color: rgb(0, 0, 0);
position: relative; /* Positionnement relatif */ font-size: 150%;
padding: 10px; position: relative;
top: 2px; padding: 10px;
} top: 2px;
}
</style> </style>

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

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

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

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

Write Preview
Loading…
Cancel
Save