Got rid of userName and userAvatar in exchange of config.userName and config.userAvatar

app.js

@@ -14,8 +14,6 @@ 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;
@@ -26,7 +24,7 @@ let servePort;
 
 // Object to store all the information we want to save
 let config = {
-  username: '',
+  userName: 'Anonymous',
   userAvatar: '',
   rooms: []
 };
@@ -90,7 +88,7 @@ async function initialize() {
           const filePath = `/files/${file.name}`;
           await drive.put(filePath, buffer);
           const fileUrl = `http://localhost:${servePort}${filePath}`;
-          sendFileMessage(userName, fileUrl, file.type, userAvatar);
+          sendFileMessage(config.userName, fileUrl, file.type, config.userAvatar);
         };
         reader.readAsArrayBuffer(file);
       }
@@ -121,11 +119,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/${userName}.png`);
+    const iconBuffer = await drive.get(`/icons/${config.userName}.png`);
     if (iconBuffer) {
       const iconMessage = JSON.stringify({
         type: 'icon',
-        username: userName,
+        username: config.userName,
         avatar: iconBuffer.toString('base64'),
       });
       connection.write(iconMessage);
@@ -167,8 +165,8 @@ function registerUser(e) {
     reader.onload = async (event) => {
       const buffer = new Uint8Array(event.target.result);
       await drive.put(`/icons/${regUsername}.png`, buffer);
-      config.userAvatar = userAvatar = `http://localhost:${servePort}/icons/${regUsername}.png`; // Set the correct URL
-      registeredUsers[regUsername] = userAvatar;
+      config.userAvatar = `http://localhost:${servePort}/icons/${regUsername}.png`; // Set the correct URL
+      registeredUsers[regUsername] = config.userAvatar;
       localStorage.setItem('registeredUsers', JSON.stringify(registeredUsers));
       continueRegistration(regUsername);
     };
@@ -187,7 +185,7 @@ async function continueRegistration(regUsername) {
     return;
   }
 
-  config.username = userName = regUsername;
+  config.username = regUsername;
   setupDiv.classList.remove('hidden');
   document.querySelector('#register').classList.add('hidden');
   loadingDiv.classList.add('hidden');
@@ -272,13 +270,13 @@ function sendMessage(e) {
   const message = document.querySelector('#message').value;
   document.querySelector('#message').value = '';
 
-  onMessageAdded(userName, message, userAvatar);
+  onMessageAdded(config.userName, message, config.userAvatar);
 
   const messageObj = JSON.stringify({
     type: 'message',
-    name: userName,
+    name: config.userName,
     message,
-    avatar: userAvatar,
+    avatar: config.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,6 +242,11 @@ 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;
@@ -354,8 +359,8 @@ main {
 
 #message-form {
     display: flex;
+    align-items: center;
     margin-top: 1rem;
-    margin-right: 1rem;
     width: 100%;
 }