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

front/volume/src/App.svelte

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

front/volume/src/components/Channels.svelte

@@ -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 value={option} selected={channelMode === option}>{option}</option>
-                          {option}
-                  </option>
           {/each}
         </select>
         {#if channelMode!= ''}
@@ -236,10 +231,11 @@
     appearance: none;
     cursor: pointer;
   }
+
   span { 
     color: rgb(0, 0, 0); 
-      font-size: 150%; /* Taille de la police en pourcentage */ 
+    font-size: 150%;
-      position: relative; /* Positionnement relatif */ 
+    position: relative;
     padding: 10px;
     top: 2px;
   }

front/volume/src/components/Chat.svelte

@@ -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,6 +218,7 @@ import type User  from "./Profile.svelte";
   //--------------------------------------------------------------------------------/
 </script>
 
+
 <div class="overlay" >
   <div class="chat" on:click|stopPropagation on:keydown|stopPropagation>
     <div class="messages" >
@@ -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,89 +245,57 @@ import type User  from "./Profile.svelte";
     >
     <ul>
       <li>
-			<button on:click = {() => dispatch("send-message", selectedUser)
+        <button on:click = {() => dispatch("send-message", selectedUser)}> Send Message </button>
-	}
-              > Send Message </button
-		>
       </li>
       <li>
-		<button on:click = {() => dispatch("view-profile", selectedUser)
+        <button on:click = {() => dispatch("view-profile", selectedUser)}> View Profile </button>
-}
-              > View Profile </button
-	>
       </li>
       <li>
-	<button on:click = {() => dispatch("add-friend", selectedUser)}
+        <button on:click = {() => dispatch("add-friend", selectedUser)}> Add Friend </button>
-              > Add Friend </button
-	>
       </li>
       <li>
-	<button on:click = {() => dispatch("invite-to-game", selectedUser)}
+        <button on:click = {() => dispatch("invite-to-game", selectedUser)}> Invite to Game </button>
-              > 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}
       </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
+          <button on:click|stopPropagation={ toggleChatMembers } on:keydown|stopPropagation > Chat Members </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)
+              <button on:click = {() => banUser(member.username)}> ban </button>
-	}> ban </button>
+              <button on:click = {() => kickUser(member.username)}> kick </button>
-		<button on:click = {() => kickUser(member.username)
+              <button on:click = {() => muteUser(member.username)}> mute </button>
-}
+              <button on:click = {() => adminUser(member.username)}> promote </button>
-                    > kick </button
+              <button on:click = {() => removeAdminUser(member.username)}> demote </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}
-	/each}
       </ul>
-		</div>
+    {/if}
-		</div>
-	{
-		/if}
   </div>
 </div>
 
@@ -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>

front/volume/src/components/NavBar.svelte

@@ -1,9 +1,6 @@
 <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 = [
     { text: "Home" },
     { text: "Channels" },
@@ -12,6 +9,7 @@
     { text: "Leaderboard" },
     { text: "Profile" },
   ];
+
   export let clickProfile = () => {};
   export let clickHistory = () => {};
   export let clickFriends = () => {};