snxraven/LinkUp-P2P-Chat
1
1
Fork 2
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings

Browse Source
This commit is contained in:
Raven Scott
2024-06-08 01:21:25 -04:00
parent 378aeb7469
commit 24ffe2a977
3 changed files with 204 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
index.html
View File

@ -18,64 +18,69 @@
</div>
</header>
<main>
<div id="register" class="hidden">
<form id="register-form">
<input required id="reg-username" type="text" placeholder="Username" />
<input type="file" id="avatar-file" accept="image/*" style="display: none;" />
<button type="button" id="select-avatar">Select Avatar</button>
<input type="submit" value="Register" />
</form>
<div id="sidebar">
<ul id="room-list">
<!-- Room list will be populated dynamically -->
</ul>
<button id="toggle-setup-btn">Create/Join Room</button>
</div>
<div id="setup" class="hidden">
<div id="user-info">
<!-- User info will be populated dynamically -->
<div id="content">
<div id="register" class="hidden">
<form id="register-form">
<input required id="reg-username" type="text" placeholder="Username" />
<input type="file" id="avatar-file" accept="image/*" style="display: none;" />
<button type="button" id="select-avatar">Select Avatar</button>
<input type="submit" value="Register" />
</form>
</div>
<button id="create-chat-room">Create</button>
<div id="or">
- or -
</div>
<div id="join-chat-room-container">
<label for="connection-topic">Topic:</label>
<input type="text" id="join-chat-room-topic" placeholder="connection topic">
<button id="join-chat-room">Join</button> <!-- Changed id -->
</div>
</div>
<div id="chat" class="hidden">
<div id="header">
<div id="details">
<div>
Topic: <span id="chat-room-topic"></span>
</div>
<div>
Peers: <span id="peers-count">0</span>
</div>
<div id="setup" class="hidden">
<div id="user-info">
<!-- User info will be populated dynamically -->
</div>
<div id="user-list">
<!-- User list will be populated here -->
<button id="create-chat-room">Create Room</button>
<div id="or">- or -</div>
<div id="join-chat-room-container">
<label for="connection-topic">Topic:</label>
<input type="text" id="join-chat-room-topic" placeholder="connection topic">
<button id="join-chat-room">Join Room</button>
</div>
</div>
<div id="messages-container">
<div id="messages"></div>
<div id="chat" class="hidden">
<div id="header">
<div id="details">
<div>
Topic: <span id="chat-room-topic"></span>
</div>
<div>
Peers: <span id="peers-count">0</span>
</div>
</div>
<div id="user-list">
<!-- User list will be populated here -->
</div>
</div>
<div id="messages-container">
<div id="messages"></div>
</div>
<form id="message-form">
<textarea id="message" rows="4"></textarea>
<input type="submit" value="Send" />
</form>
<button id="remove-room-btn">Leave Room</button>
</div>
<form id="message-form">
<textarea id="message" rows="4"></textarea>
<input type="submit" value="Send" />
</form>
<div id="loading" class="hidden">Loading ...</div>
</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
event.preventDefault();
document.getElementById('message-form').dispatchEvent(new Event('submit'));
}
});
});
</script>
</body>
</html>
</html>