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