Add multi line support

app.js

@@ -18,9 +18,6 @@ let userAvatar = '';
 let registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || {};
 let peerCount = 0;
 
-// Load user information from localStorage
-let currentUser = JSON.parse(localStorage.getItem('currentUser')) || { username: 'Anonymous', avatar: '' };
-
 async function initialize() {
   swarm = new Hyperswarm();
 
@@ -53,15 +50,18 @@ async function initialize() {
     messageForm.addEventListener('submit', sendMessage);
   }
 
-  // Set current user if available in localStorage
+  const savedUser = localStorage.getItem('currentUser');
-  if (currentUser.username) {
+  if (savedUser) {
-    userName = currentUser.username;
+    const user = JSON.parse(savedUser);
-    userAvatar = currentUser.avatar || '';
+    userName = user.username;
+    userAvatar = user.avatar || '';
     const setupDiv = document.querySelector('#setup');
-    const registerDiv = document.querySelector('#register');
+    if (setupDiv) {
-    if (userName !== 'Anonymous' && setupDiv) {
       setupDiv.classList.remove('hidden');
-    } else if (registerDiv) {
+    }
+  } else {
+    const registerDiv = document.querySelector('#register');
+    if (registerDiv) {
       registerDiv.classList.remove('hidden');
     }
   }
@@ -253,7 +253,15 @@ function onMessageAdded(from, message, avatar) {
   $header.textContent = from;
 
   const $text = document.createElement('div');
-  $text.textContent = message;
+  $text.classList.add('message-text');
+
+  // Split message by line breaks and create a new paragraph for each line
+  const lines = message.split('\n');
+  lines.forEach(line => {
+    const $line = document.createElement('p');
+    $line.textContent = line;
+    $text.appendChild($line);
+  });
 
   $content.appendChild($header);
   $content.appendChild($text);
@@ -272,9 +280,3 @@ async function updateIcon(username, avatarBuffer) {
 }
 
 initialize();
-
-// Save the current user's information before closing the application
-window.addEventListener('beforeunload', () => {
-  localStorage.setItem('currentUser', JSON.stringify({ username: userName, avatar: userAvatar }));
-});
-

index.html

@@ -55,11 +55,24 @@
       </div>
       <div id="messages"></div>
       <form id="message-form">
-        <input id="message" type="text" />
+        <textarea id="message" rows="4"></textarea>
         <input type="submit" value="Send" />
       </form>
     </div>
     <div id="loading" class="hidden">Loading ...</div>
   </main>
+
+  <script>
+    // JavaScript to handle form submission on Enter key press and Shift + Enter for new line
+    document.addEventListener('DOMContentLoaded', function() {
+      const messageInput = document.getElementById('message');
+      messageInput.addEventListener('keydown', function(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+          event.preventDefault(); // Prevent form submission
+          document.getElementById('message-form').dispatchEvent(new Event('submit')); // Trigger form submission event
+        }
+      });
+    });
+  </script>
 </body>
 </html>

style.css

@@ -1,7 +1,7 @@
 /* Base styles */
 body {
     background-color: #121212;
-    color: #E0E0E0;
+    color: #e0e0e0;
     font-family: 'Roboto', sans-serif;
     margin: 0;
     padding: 0;
@@ -18,8 +18,8 @@ header {
     justify-content: space-between;
     align-items: center;
     padding: 1rem;
-    background-color: #1F1F1F;
+    background-color: #1f1f1f;
-    color: #FFFFFF;
+    color: #fff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
     cursor: move;
     -webkit-app-region: drag;
@@ -32,9 +32,9 @@ header {
 }
 
 .window-controls button {
-    background-color: #2E2E2E;
+    background-color: #2e2e2e;
     border: none;
-    color: #FFFFFF;
+    color: #fff;
     font-size: 1.25rem;
     margin-left: 0.5rem;
     padding: 0.5rem;
@@ -44,28 +44,36 @@ header {
 }
 
 .window-controls button:hover {
-    background-color: #3E3E3E;
+    background-color: #3e3e3e;
 }
 
 /* Button and input styles */
-button, input {
+button,
-    border: 1px solid #B0D944;
+input,
+textarea {
+    border: 1px solid #b0d944;
     background-color: #333;
-    color: #B0D944;
+    color: #b0d944;
     padding: 0.75rem;
     font-family: 'Roboto Mono', monospace;
     font-size: 1rem;
     line-height: 1.5rem;
     border-radius: 4px;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+    resize: none; /* Prevent resizing */
+    overflow-y: hidden; /* Hide scrollbar */
 }
 
-button:hover, input:hover {
+textarea {
-    background-color: #444;
+    height: auto; /* Allow the textarea to grow dynamically */
 }
 
-input::placeholder {
+textarea:focus {
-    color: #A0A0A0;
+    outline: none; /* Remove focus outline */
+}
+
+textarea::placeholder {
+    color: #a0a0a0;
 }
 
 /* Main container styles */
@@ -83,20 +91,21 @@ main {
 }
 
 /* Form container styles */
-#register, #setup {
+#register,
+#setup {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 2rem;
-    background-color: #1F1F1F;
+    background-color: #1f1f1f;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
 #or {
     margin: 1.5rem 0;
-    color: #B0D944;
+    color: #b0d944;
 }
 
 #loading {
@@ -112,7 +121,7 @@ main {
     flex: 1;
     width: 100%;
     padding: 1rem;
-    background-color: #1E1E1E;
+    background-color: #1e1e1e;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     overflow: hidden;
@@ -125,36 +134,37 @@ main {
 #join-chat-room-container {
     display: flex;
     align-items: center;
-    margin-top: 1rem; /* Add margin between this container and the previous content */
+    margin-top: 1rem;
 }
 
 #join-chat-room-container label {
-    margin-right: 0.5rem; /* Add margin to the right of the label */
+    margin-right: 0.5rem;
 }
 
-#join-chat-room-container input {
+#join-chat-room-container input,
-    margin-right: 0.5rem; /* Add margin to the right of the input field */
+#join-chat-room-container textarea {
+    margin-right: 0.5rem;
 }
 
 #join-chat-room-container button {
-    margin-left: 0.5rem; /* Add margin to the left of the button */
+    margin-left: 0.5rem;
 }
 
 #details {
     display: flex;
     justify-content: space-between;
     padding: 1rem;
-    background-color: #2B2B2B;
+    background-color: #2b2b2b;
     border-radius: 4px;
 }
 
 #submit-button {
-    margin-left: 1rem; /* Added left margin */
+    margin-left: 1rem;
 }
 
 #messages {
     flex: 1;
-    min-height: 200px; /* Ensures minimum height to prevent squishing */
+    min-height: 200px;
     overflow-y: auto;
     padding: 1rem;
     background-color: #262626;
@@ -166,13 +176,13 @@ main {
 #message-form {
     display: flex;
     margin-top: 1rem;
-    margin-right: 1rem; /* Added right margin */
+    margin-right: 1rem;
 }
 
 #message {
     flex: 1;
     margin-right: 0.5rem;
-    padding-right: 0.5rem; /* Added right padding */
+    padding-right: 0.5rem;
 }
 
 #user-info {
@@ -195,7 +205,7 @@ main {
 /* Message styles */
 .message {
     display: flex;
-    align-items: center; /* Center vertically */
+    align-items: center;
     margin-bottom: 1rem;
 }
 
@@ -204,24 +214,88 @@ main {
     height: 40px;
     border-radius: 50%;
     margin-right: 0.75rem;
-    border: 2px solid #B0D944;
+    border: 2px solid #b0d944;
 }
 
 .message-content {
-    max-width: 70%; /* Adjusted width */
+    max-width: 70%;
-    background-color: #2E2E2E;
+    background-color: #2e2e2e;
-    padding: 0.5rem; /* Adjusted padding */
+    padding: 0.5rem;
-    border-radius: 10px; /* Increased border radius */
+    border-radius: 10px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .message-header {
     font-weight: bold;
-    color: #B0D944; /* Added color */
+    color: #b0d944;
 }
 
 .message-time {
-    color: #A0A0A0; /* Adjusted color */
+    color: #a0a0a0;
     font-size: 0.75rem;
     margin-left: 0.5rem;
 }
+
+/* Button and input styles */
+button,
+input,
+textarea {
+    border: 1px solid #b0d944;
+    background-color: #333;
+    color: #b0d944;
+    padding: 0.75rem;
+    font-family: 'Roboto Mono', monospace;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    border-radius: 4px;
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+    resize: none; /* Prevent resizing */
+    overflow-y: hidden; /* Hide scrollbar */
+}
+
+textarea {
+    height: auto; /* Allow the textarea to grow dynamically */
+}
+
+textarea:focus {
+    outline: none; /* Remove focus outline */
+}
+
+textarea::placeholder {
+    color: #a0a0a0;
+}
+
+/* Chat container styles */
+#chat {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    padding: 1rem;
+    background-color: #1e1e1e;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+}
+
+#message-form {
+    display: flex;
+    margin-top: 1rem;
+    margin-right: 1rem;
+}
+
+#message {
+    flex: 1;
+    margin-right: 0.5rem;
+    padding-right: 0.5rem;
+    height: 1.5rem; /* Initial single line height */
+    overflow-y: hidden; /* Hide scrollbar */
+}
+
+#message:focus {
+    height: auto; /* Allow the textarea to grow dynamically when focused */
+}
+
+#message:empty {
+    height: 1.5rem; /* Ensure single line height when empty */
+}