app.js

@@ -6,6 +6,7 @@ import Localdrive from 'localdrive';
 import fs from 'fs';
 import Hyperdrive from 'hyperdrive';
 import Corestore from 'corestore';
+import { EventEmitter } from 'events';
 
 const store = new Corestore('./storage');
 const drive = new Hyperdrive(store);
@@ -18,6 +19,7 @@ let userAvatar = '';
 let registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || {};
 let peerCount = 0;
 let currentRoom = null;
+const eventEmitter = new EventEmitter();
 
 async function initialize() {
   swarm = new Hyperswarm();
@@ -64,6 +66,17 @@ async function initialize() {
     registerDiv.classList.remove('hidden');
   }
 
+  eventEmitter.on('onMessage', async (messageObj) => {
+    if (messageObj.type === 'icon') {
+      const username = messageObj.username;
+      const avatarBuffer = Buffer.from(messageObj.avatar, 'base64');
+      await drive.put(`/icons/${username}.png`, avatarBuffer);
+      updateIcon(username, avatarBuffer);
+    } else {
+      onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar);
+    }
+  });
+
   swarm.on('connection', async (connection, info) => {
     peerCount++;
     updatePeerCount();
@@ -80,16 +93,9 @@ async function initialize() {
       connection.write(iconMessage);
     }
 
-    connection.on('data', async (data) => {
+    connection.on('data', (data) => {
       const messageObj = JSON.parse(data.toString());
-      if (messageObj.type === 'icon') {
-        const username = messageObj.username;
-        const avatarBuffer = Buffer.from(messageObj.avatar, 'base64');
-        await drive.put(`/icons/${username}.png`, avatarBuffer);
-        updateIcon(username, avatarBuffer);
-      } else {
-        onMessageAdded(messageObj.name, messageObj.message, messageObj.avatar);
-      }
+      eventEmitter.emit('onMessage', messageObj);
     });
 
     connection.on('close', () => {
@@ -120,9 +126,9 @@ function registerUser(e) {
   const avatarFile = document.querySelector('#avatar-file').files[0];
   if (avatarFile) {
     const reader = new FileReader();
-    reader.onload = (event) => {
+    reader.onload = async (event) => {
       const buffer = new Uint8Array(event.target.result);
-      drive.put(`/icons/${regUsername}.png`, buffer);
+      await drive.put(`/icons/${regUsername}.png`, buffer);
       userAvatar = `http://localhost:1337/icons/${regUsername}.png`; // Set the correct URL
       registeredUsers[regUsername] = userAvatar;
       localStorage.setItem('registeredUsers', JSON.stringify(registeredUsers));
@@ -237,9 +243,9 @@ function sendMessage(e) {
 }
 
 function updatePeerCount() {
-  const peerCountElement = document.querySelector('#peer-count');
+  const peerCountElement = document.querySelector('#peers-count');
   if (peerCountElement) {
-    peerCountElement.textContent = `Connected Peers: ${peerCount}`;
+    peerCountElement.textContent = peerCount; // Display the actual peer count
   }
 }
 
@@ -283,11 +289,11 @@ function truncateHash(hash) {
 }
 
 async function updateIcon(username, avatarBuffer) {
-  // Update the icon in the local HTML if necessary
-  // This can be adjusted as per your needs
   const userIcon = document.querySelector(`img[src*="${username}.png"]`);
   if (userIcon) {
-    userIcon.src = `http://localhost:1337/icons/${username}.png`; // Ensure the URL is correct
+    const avatarBlob = new Blob([avatarBuffer], { type: 'image/png' });
+    const avatarUrl = URL.createObjectURL(avatarBlob);
+    userIcon.src = avatarUrl;
   }
 }