unread message count + fix bug

client/script_friends.js

@@ -24,6 +24,10 @@ let recievedMessages = new Map();
 /** @type {Map<number, string>} */
 let usernames = new Map();
 
+// map of userId's to how many unread messages there are
+/** @type {Map<number, number>} */
+let unreads = new Map();
+
 // userId of the current user who is being talked to
 let currentUser = 0;
 
@@ -123,6 +127,13 @@ document.addEventListener('DOMContentLoaded', function() {
                     if (audio !== undefined) {
                         audio.play();
                     }
+                    const currentUnreads = unreads.get(data.userId);
+                    if (currentUnreads === undefined) {
+                        unreads.set(data.userId, 1);
+                    } else {
+                        unreads.set(data.userId, currentUnreads + 1);
+                    }
+                    updateOnlineUsers();
                 }
                 break;
             }
@@ -152,20 +163,26 @@ document.addEventListener('DOMContentLoaded', function() {
 
 });
 
-function updateOnlineUsers() {
+async function updateOnlineUsers() {
     const friendsList = document.getElementById("friends-list-links");
     friendsList.innerHTML = "";
 
     // Get everyone's username
     for (const user of connectedFriends) {
         if (usernames.get(user) === undefined) {
-            fetchUsername(user);
+            await fetchUsername(user);
         }
     }
 
     for (const user of connectedFriends) {
         const newElement = document.createElement("p");
-        newElement.textContent = usernames.get(user);
+        const userUnreads = unreads.get(user);
+        if (userUnreads !== undefined) {
+            newElement.textContent = "[" + userUnreads + "] "; 
+        } else {
+            newElement.textContent = "";
+        }
+        newElement.textContent += usernames.get(user);
         newElement.onclick = function() {
             openUser(user);
         }
@@ -206,6 +223,9 @@ function openUser(user) {
     for (const message of messages) {
         renderMessage(message);
     }
+
+    unreads.delete(user);
+    updateOnlineUsers();
 }
 
 function sendMessage() {