adding friends, some cleaning

src/App.svelte

@@ -14,10 +14,10 @@
 	  isHistoryOpen = true;
 	}
 	let matches = [
+		{winner : "Alice", loser : "Bob", points : "-5", rank : "22"},
 		{winner : "Alice", loser : "Bob", points : "10", rank : "24"},
 		{winner : "Alice", loser : "Bob", points : "10", rank : "24"},
-		{winner : "Alice", loser : "Bob", points : "10", rank : "24"},
-		{winner : "Alice", loser : "Bob", points : "10", rank : "24"},
+		{winner : "Alice", loser : "Bob", points : "7", rank : "23"},
 		{winner : "Alice", loser : "Bob", points : "10", rank : "24"},
 		{winner : "Alice", loser : "Bob", points : "10", rank : "24"},
 	]

src/components/Friends.svelte

@@ -1,11 +1,31 @@
 <script>
     export let friends = [];
+    async function addFriend(event) {
+        event.preventDefault();
+        const usernameInput = event.target.querySelector('input[type="text"]');
+        const username = usernameInput.value;
+        // const response = await fetch('', {
+        //     method: 'POST',
+        //     headers: {
+        //     'Content-Type': 'application/json'
+        //     },
+        //     body: JSON.stringify({ username })
+        // });
+        // if (response.ok) {
+        //     console.log('Friend added successfully');
+        // } else {
+        //     console.log('Failed to add friend');
+        // }
+        // usernameInput.value = '';
+        alert('Trying to add friend' + username);
+    }
 </script>
 
 <div class="overlay">
     <div class="friends" on:click|stopPropagation on:keydown|stopPropagation>
         <div>
             {#if friends.length > 0}
+                <h2>Monkey friends</h2>
                 {#each friends.slice(0, 10) as friends}
                     <li>
                         <span>{friends.username} is {friends.status}</span>
@@ -14,6 +34,13 @@
             {:else}
                 <p>No friends to display</p>
             {/if}
+            <div>
+                <h3>Add a friend</h3>
+                <form on:submit={addFriend}>
+                    <input type="text" />
+                    <button type="submit">Add</button>
+                </form>
+            </div>
         </div>
     </div>
 </div>

src/components/MatchHistory.svelte

@@ -6,12 +6,16 @@
     <div class="history" on:click|stopPropagation on:keydown|stopPropagation>
         <div>
             {#if matches.length > 0}
+                <h2>Last 10 monkey games</h2>
                 {#each matches.slice(0, 10) as match}
                     <li>
-                        <span>{match.winner} vs {match.loser}</span>
-                        <span>{match.winner} won 1-0</span>
-                        <span>points won : {match.points}</span>
-                        <span>rank #{match.rank}</span>
+                        <span>{match.winner} 1  -  0 {match.loser}</span>
+                        {#if match.points > 0}
+                            <span>+{match.points}</span>
+                        {:else}
+                            <span>{match.points}</span>
+                        {/if}
+                        <span>MP | rank #{match.rank}</span>
                     </li>
                 {/each}
             {:else}

src/components/Profile.svelte

@@ -8,7 +8,7 @@
     export let is2faEnabled = false;
     async function handleSubmit (event) {
         event.preventDefault();
-        // const res = await fetch('', {
+        // const response = await fetch('', {
         //     method: 'POST',
         //     headers: {
         //         'Content-Type': 'application/json'
@@ -17,7 +17,7 @@
         //         username
         //     })
         // });
-        // if (res.ok) {
+        // if (response.ok) {
         //     console.log('username updated');
         // }
         // else {

src/components/Spectate.svelte

@@ -7,6 +7,7 @@
     <div class="spectate" on:click|stopPropagation on:keydown|stopPropagation>
         <div>
             {#if spectate.length > 0}
+                <h2>Monkey spectating</h2>
                 {#each spectate.slice(0, 10) as spectate}
                     <li>
                         <span>{spectate.player1} VS {spectate.player2}</span>
@@ -41,4 +42,5 @@
         padding: 1rem;
         width: 300px;
     }
+
 </style>