From 14c0caa61b9d0cc3d3746d259fbc25c913525c97 Mon Sep 17 00:00:00 2001
From: WalidMoovin <walidsdt.2@gmail.com>
Date: Wed, 15 Feb 2023 22:34:58 +0100
Subject: [PATCH] adding friends, some cleaning

---
 src/App.svelte                     |  4 ++--
 src/components/Friends.svelte      | 27 +++++++++++++++++++++++++++
 src/components/MatchHistory.svelte | 12 ++++++++----
 src/components/Profile.svelte      |  4 ++--
 src/components/Spectate.svelte     |  2 ++
 5 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 780e161..8418216 100644
--- a/src/App.svelte
+++ b/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"},
 	]
diff --git a/src/components/Friends.svelte b/src/components/Friends.svelte
index e09a816..e9f1f85 100644
--- a/src/components/Friends.svelte
+++ b/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>
diff --git a/src/components/MatchHistory.svelte b/src/components/MatchHistory.svelte
index 06a1d0b..1c23d3e 100644
--- a/src/components/MatchHistory.svelte
+++ b/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}
diff --git a/src/components/Profile.svelte b/src/components/Profile.svelte
index 892ca9a..6df0b59 100644
--- a/src/components/Profile.svelte
+++ b/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 {
diff --git a/src/components/Spectate.svelte b/src/components/Spectate.svelte
index 072c25c..09a49af 100644
--- a/src/components/Spectate.svelte
+++ b/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>
\ No newline at end of file