added spectate, some modifs on user profile

src/App.svelte

@@ -3,6 +3,7 @@
 	import Profile from './components/Profile.svelte';
 	import MatchHistory from './components/MatchHistory.svelte';
 	import Friends from './components/Friends.svelte';
+	import Spectate from './components/Spectate.svelte';
 	let isProfileOpen = false; 
 	function clickProfile() {
 	  isProfileOpen = true;
@@ -31,10 +32,27 @@
 		{username : "Eve", status : "online"},
 		{username : "Frank", status : "online"},
 	]
+	let isSpectateOpen = false;
+	function clickSpectate() {
+	  isSpectateOpen = true;
+	}
+	let spectate = [
+		{player1 : "Alice", player2 : "Bob", id : "1"},
+		{player1 : "Alice", player2 : "Bob", id : "4"},
+		{player1 : "Alice", player2 : "Bob", id : "6"},
+		{player1 : "Alice", player2 : "Bob", id : "8"},
+		{player1 : "Alice", player2 : "Bob", id : "2"},
+		{player1 : "Alice", player2 : "Bob", id : "3"},
+	]
 </script>
 
 <main>
-	<Navbar clickProfile={clickProfile} clickHistory={clickHistory} clickFriends={clickFriends} />
+	<Navbar clickProfile={clickProfile} clickHistory={clickHistory} clickFriends={clickFriends} clickSpectate={clickSpectate} />
+	{#if isSpectateOpen}
+	  <div on:click={() => isSpectateOpen = false} on:keydown={() => isSpectateOpen = false}>
+		<Spectate spectate={spectate} />
+	  </div>
+	{/if}
 	{#if isFriendOpen}
 	  <div on:click={() => isFriendOpen = false} on:keydown={() => isFriendOpen = false}>
 		<Friends friends={friends} />
@@ -47,7 +65,7 @@
 	{/if}
 	{#if isProfileOpen}
 	  <div on:click={() => isProfileOpen = false} on:keydown={() => isProfileOpen = false}>
-		<Profile username="Alice" wins={10} losses={5} is2faEnabled={false} />
+		<Profile username="Alice" wins={10} losses={5} elo={256} rank={23} is2faEnabled={false} />
 	  </div>
 	{/if}
 </main>

src/components/Friends.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div class="overlay">
-    <div class="history">
+    <div class="friends">
         <div>
             {#if friends.length > 0}
                 {#each friends.slice(0, 10) as friends}
@@ -32,7 +32,7 @@
         align-items: center;
     }
 
-    .history {
+    .friends {
         background-color: #fff;
         border: 1px solid #ccc;
         border-radius: 5px;

src/components/NavBar.svelte

@@ -11,12 +11,20 @@
   export let clickProfile = () => {};
   export let clickHistory = () => {};
   export let clickFriends = () => {};
+  export let clickSpectate = () => {};
 </script>
 
 <nav class="navigation-bar">
   <ul>
     {#each links as link}
-      {#if link.text === "Profile" || link.text === "History" || link.text === "Friends"}
+      {#if link.text === "Profile" || link.text === "History" || link.text === "Friends" || link.text === "Spectate"}
+        {#if link.text === "Spectate"}
+          <li>
+            <button on:click={clickSpectate}>
+              <p>Spectate</p>
+            </button>
+          </li>
+        {/if}
         {#if link.text === "Friends"}
           <li>
             <button on:click={clickFriends}>

src/components/Profile.svelte

@@ -2,6 +2,8 @@
     export let username = '';
     export let wins = 0;
     export let losses = 0;
+    export let elo = 0;
+    export let rank = -1;
     export let is2faEnabled = false;
     function toggle2fa() {
         is2faEnabled = !is2faEnabled;
@@ -13,13 +15,21 @@
         <div class="profile-header">
         <img class="profile-img" src="img/profileicon.png" alt="Profile Icon">
         <h3>{username}</h3>
+        <button>Upload avatar</button>
         </div>
         <div class="profile-body">
         <p>Wins: {wins}</p>
         <p>Losses: {losses}</p>
+        <p>Winrate: {wins / (wins + losses) * 100}%</p>
+        <p>Elo : {elo}</p>
+        <p>Rank: {rank}</p>
         <div class="two-factor-auth">
-            <input type="checkbox" id="2fa-toggle" bind:checked={is2faEnabled} on:change={toggle2fa}>
-            <label for="2fa-toggle">Enable 2fa</label>
+            <button on:click={toggle2fa}>
+            {#if is2faEnabled}
+                Disable 2FA
+            {:else}
+                Enable 2FA
+            {/if}
         </div>
         </div>
     </div>

src/components/Spectate.svelte

@@ -0,0 +1,44 @@
+<script>
+    export let spectate = [];
+    export let watch = () => {};
+</script>
+
+<div class="overlay">
+    <div class="spectate">
+        <div>
+            {#if spectate.length > 0}
+                {#each spectate.slice(0, 10) as spectate}
+                    <li>
+                        <span>{spectate.player1} VS {spectate.player2}</span>
+                        <button on:click={() => watch(spectate.id)}>Spectate</button>
+                    </li>
+                {/each}
+            {:else}
+                <p>No matches to spectate</p>
+            {/if}
+        </div>
+    </div>
+</div>
+  
+<style>
+    .overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 9998;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .spectate {
+        background-color: #fff;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        padding: 1rem;
+        width: 300px;
+    }
+</style>