changed CSS added persistent recipient

backend/socket.js

@@ -78,10 +78,10 @@ function initializeSocket(server) {
                     const query = 'SELECT id, content, username, recipient FROM messages WHERE id > $1 ORDER BY id ASC';
                     const values = [socket.handshake.auth.serverOffset || 0];
                     const result = await db.query(query, values);
-
+                    //const newMessage = result.rows[0];
                     for (const row of result.rows) {
                         if (row.username === username || row.recipient === username) {
-                            io.to(username).to(recipient).emit('chat message', { username: newMessage.username, recipient: newMessage.recipient, content: newMessage.content });
+                            io.to(username).to(recipient).emit('chat message', { username: row.username, recipient: row.recipient, content: row.content });
 
                         }
                     }

frontend/js/chat.js

@@ -26,6 +26,14 @@ function logout() {
             console.error('Logout failed:', error);
         });
 }
+function initializeRecipient() {
+    const savedRecipient = localStorage.getItem('currentRecipient');
+    if (savedRecipient) {
+        currentRecipient = savedRecipient;
+        recipientInput.value = savedRecipient;
+        return currentRecipient;
+    }
+}
 
 async function getToken() {
     try {
@@ -57,6 +65,8 @@ async function initializeSocket() {
 
     socket.on('connect', () => {
         console.log('Connected to server');
+        const initialRecipient = initializeRecipient();
+        socket.emit('get messages', initialRecipient);
     });
 
     socket.on('chat message', (msg, serverOffset) => {
@@ -76,6 +86,7 @@ async function initializeSocket() {
         e.preventDefault();
         if (recipientInput.value) {
             currentRecipient = recipientInput.value;
+            localStorage.setItem('currentRecipient', currentRecipient);
             messages.innerHTML = '';
             console.log('Requesting messages for recipient:', currentRecipient);
             socket.emit('get messages', currentRecipient);

frontend/stylesheet/chat.css

@@ -1,7 +1,13 @@
+body, html, form, button, input {
+    font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
+}
+
+#input::placeholder, #recipient::placeholder {
+    font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
+}
 body {
     margin: 0;
     padding-bottom: 3rem;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     background-color: #f9f9f9;
     color: #333;
 }
@@ -46,7 +52,22 @@ body {
     border-color: #007bff;
 }
 
-#form > button, #recipientForm > button {
+button {
+    font-family: "Lucida Console" ;
+    background-color: #349237;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    margin: 0 10px; /* Add margin to separate buttons */
+}
+
+button:hover {
+    background-color: #45a049;
+}
+#form #recipientForm {
     background: #007bff;
     border: none;
     padding: 0.5rem 1rem;
@@ -58,7 +79,7 @@ body {
     transition: background-color 0.3s ease;
 }
 
-#form > button:hover, #recipientForm > button:hover {
+#form #recipientForm {
     background-color: #0056b3;
 }
 
@@ -70,4 +91,23 @@ body {
     background-color: #c82333;
 }
 
-#messages
+#messages {
+    list-style-type: none;
+    margin: 5rem 0 3rem 0;
+    padding: 0;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#messages > li {
+    padding: 0.75rem 1.5rem;
+    margin: 0.5rem 0;
+    border-radius: 20px;
+    background: #e9ecef;
+    max-width: 80%;
+}
+
+#messages > li:nth-child(odd) {
+    background: #d4edda;
+}