app.js

@@ -14,6 +14,8 @@ const drive = new Hyperdrive(store);
 await drive.ready();
 
 let swarm;
+let userName = 'Anonymous';
+let userAvatar = '';
 let registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || {};
 let peerCount = 0;
 let currentRoom = null;
@@ -24,7 +26,7 @@ let servePort;
 
 // Object to store all the information we want to save
 let config = {
-  userName: 'Anonymous',
+  username: '',
   userAvatar: '',
   rooms: []
 };
@@ -88,7 +90,7 @@ async function initialize() {
           const filePath = `/files/${file.name}`;
           await drive.put(filePath, buffer);
           const fileUrl = `http://localhost:${servePort}${filePath}`;
-          sendFileMessage(config.userName, fileUrl, file.type, config.userAvatar);
+          sendFileMessage(userName, fileUrl, file.type, userAvatar);
         };
         reader.readAsArrayBuffer(file);
       }
@@ -119,11 +121,11 @@ async function initialize() {
     console.log('Peer connected, current peer count:', peerCount);
 
     // Send the current user's icon to the new peer
-    const iconBuffer = await drive.get(`/icons/${config.userName}.png`);
+    const iconBuffer = await drive.get(`/icons/${userName}.png`);
     if (iconBuffer) {
       const iconMessage = JSON.stringify({
         type: 'icon',
-        username: config.userName,
+        username: userName,
         avatar: iconBuffer.toString('base64'),
       });
       connection.write(iconMessage);
@@ -165,8 +167,8 @@ function registerUser(e) {
     reader.onload = async (event) => {
       const buffer = new Uint8Array(event.target.result);
       await drive.put(`/icons/${regUsername}.png`, buffer);
-      config.userAvatar = `http://localhost:${servePort}/icons/${regUsername}.png`; // Set the correct URL
-      registeredUsers[regUsername] = config.userAvatar;
+      config.userAvatar = userAvatar = `http://localhost:${servePort}/icons/${regUsername}.png`; // Set the correct URL
+      registeredUsers[regUsername] = userAvatar;
       localStorage.setItem('registeredUsers', JSON.stringify(registeredUsers));
       continueRegistration(regUsername);
     };
@@ -185,7 +187,7 @@ async function continueRegistration(regUsername) {
     return;
   }
 
-  config.username = regUsername;
+  config.username = userName = regUsername;
   setupDiv.classList.remove('hidden');
   document.querySelector('#register').classList.add('hidden');
   loadingDiv.classList.add('hidden');
@@ -270,13 +272,13 @@ function sendMessage(e) {
   const message = document.querySelector('#message').value;
   document.querySelector('#message').value = '';
 
-  onMessageAdded(config.userName, message, config.userAvatar);
+  onMessageAdded(userName, message, userAvatar);
 
   const messageObj = JSON.stringify({
     type: 'message',
-    name: config.userName,
+    name: userName,
     message,
-    avatar: config.userAvatar,
+    avatar: userAvatar,
     timestamp: Date.now(),
   });
 

style.css

@@ -111,8 +111,8 @@ main {
 
 #message-form {
     display: flex;
-    align-items: center;
     margin-top: 1rem;
+    margin-right: 1rem;
     width: 100%;
 }
 
@@ -242,11 +242,6 @@ textarea::placeholder {
     color: #a0a0a0;
 }
 
-#attach-file, #message-form input[type="submit"] {
-    padding: 0.5rem 1rem; /* Add padding to buttons */
-    margin-left: 0.5rem; /* Add margin between buttons */
-}
-
 /* Main container styles */
 main {
     display: flex;
@@ -359,8 +354,8 @@ main {
 
 #message-form {
     display: flex;
-    align-items: center;
     margin-top: 1rem;
+    margin-right: 1rem;
     width: 100%;
 }