Add multi line support

This commit is contained in:
Raven Scott 2024-06-04 00:03:14 -04:00
parent 59c1a2f776
commit 7ba32ea7c0
3 changed files with 142 additions and 53 deletions

36
app.js
View File

@ -18,9 +18,6 @@ let userAvatar = '';
let registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || {}; let registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || {};
let peerCount = 0; let peerCount = 0;
// Load user information from localStorage
let currentUser = JSON.parse(localStorage.getItem('currentUser')) || { username: 'Anonymous', avatar: '' };
async function initialize() { async function initialize() {
swarm = new Hyperswarm(); swarm = new Hyperswarm();
@ -53,15 +50,18 @@ async function initialize() {
messageForm.addEventListener('submit', sendMessage); 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 setupDiv = document.querySelector('#setup');
const registerDiv = document.querySelector('#register'); if (setupDiv) {
if (userName !== 'Anonymous' && setupDiv) {
setupDiv.classList.remove('hidden'); setupDiv.classList.remove('hidden');
} else if (registerDiv) { }
} else {
const registerDiv = document.querySelector('#register');
if (registerDiv) {
registerDiv.classList.remove('hidden'); registerDiv.classList.remove('hidden');
} }
} }
@ -253,7 +253,15 @@ function onMessageAdded(from, message, avatar) {
$header.textContent = from; $header.textContent = from;
const $text = document.createElement('div'); 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($header);
$content.appendChild($text); $content.appendChild($text);
@ -272,9 +280,3 @@ async function updateIcon(username, avatarBuffer) {
} }
initialize(); initialize();
// Save the current user's information before closing the application
window.addEventListener('beforeunload', () => {
localStorage.setItem('currentUser', JSON.stringify({ username: userName, avatar: userAvatar }));
});

View File

@ -55,11 +55,24 @@
</div> </div>
<div id="messages"></div> <div id="messages"></div>
<form id="message-form"> <form id="message-form">
<input id="message" type="text" /> <textarea id="message" rows="4"></textarea>
<input type="submit" value="Send" /> <input type="submit" value="Send" />
</form> </form>
</div> </div>
<div id="loading" class="hidden">Loading ...</div> <div id="loading" class="hidden">Loading ...</div>
</main> </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> </body>
</html> </html>

144
style.css
View File

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