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 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
if (currentUser.username) {
userName = currentUser.username;
userAvatar = currentUser.avatar || '';
const savedUser = localStorage.getItem('currentUser');
if (savedUser) {
const user = JSON.parse(savedUser);
userName = user.username;
userAvatar = user.avatar || '';
const setupDiv = document.querySelector('#setup');
const registerDiv = document.querySelector('#register');
if (userName !== 'Anonymous' && setupDiv) {
if (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 }));
});

View File

@ -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>

144
style.css
View File

@ -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;
color: #FFFFFF;
background-color: #1f1f1f;
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 {
border: 1px solid #B0D944;
button,
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 {
background-color: #444;
textarea {
height: auto; /* Allow the textarea to grow dynamically */
}
input::placeholder {
color: #A0A0A0;
textarea:focus {
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 {
margin-right: 0.5rem; /* Add margin to the right of the input field */
#join-chat-room-container input,
#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 */
background-color: #2E2E2E;
padding: 0.5rem; /* Adjusted padding */
border-radius: 10px; /* Increased border radius */
max-width: 70%;
background-color: #2e2e2e;
padding: 0.5rem;
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 */
}