Add multi line support
This commit is contained in:
Raven Scott
parent
59c1a2f776
commit
7ba32ea7c0
36
app.js
36
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
|
||||
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 }));
|
||||
});
|
||||
|
||||
|
||||
15
index.html
15
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>
|
||||
|
||||
144
style.css
144
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;
|
||||
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 */
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user