diff --git a/backend/socket.js b/backend/socket.js index 66a8620..71cdcc0 100644 --- a/backend/socket.js +++ b/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 }); } } diff --git a/frontend/js/chat.js b/frontend/js/chat.js index d7aca3c..eae0fd6 100644 --- a/frontend/js/chat.js +++ b/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); diff --git a/frontend/stylesheet/chat.css b/frontend/stylesheet/chat.css index d16b376..e4c612a 100644 --- a/frontend/stylesheet/chat.css +++ b/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; +}