LinkUp-P2P-Chat/index.html

144 lines
5.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LinkUp</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="module" src="./app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
</head>
<body>
<header>
<pear-ctrl></pear-ctrl>
<div id="linkup-text">LinkUp | Peers: <span id="peers-count">0</span></div>
</header>
<main>
<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="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>
<div id="setup" class="hidden">
<div id="user-info">
<!-- User info will be populated dynamically -->
</div>
<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="chat" class="hidden">
<div id="header">
<div id="details">
<div style="display: inline;">
<strong><span id="chat-room-name"></span></strong> | <a href="#" id="copy-topic-link" class="mini-button">Copy Topic</a>
<span id="chat-room-topic" style="display: none;"></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="file" id="file-input" style="display:none;">
<button type="button" id="attach-file">Attach File</button>
<input type="submit" value="Send" />
</form>
<button id="remove-room-btn">Leave Room</button>
</div>
<div id="loading" class="hidden">Loading ...</div>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function() {
const messageInput = document.getElementById('message');
const copyTopicLink = document.getElementById('copy-topic-link');
const chatRoomTopic = document.getElementById('chat-room-topic');
if (messageInput) {
messageInput.addEventListener('keydown', function(event) {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
document.getElementById('message-form').dispatchEvent(new Event('submit'));
}
});
}
if (copyTopicLink) {
copyTopicLink.addEventListener('click', function(event) {
event.preventDefault();
if (chatRoomTopic) {
const topic = chatRoomTopic.innerText;
navigator.clipboard.writeText(topic).then(() => {
alert('Topic copied to clipboard!');
}).catch(err => {
console.error('Failed to copy topic:', err);
});
} else {
console.error('Element #chat-room-topic not found');
}
});
}
const switchRoom = (topic) => {
console.log('Switching to room:', topic); // Debugging log
const chatRoomTopic = document.querySelector('#chat-room-topic');
const chatRoomName = document.querySelector('#chat-room-name');
if (chatRoomTopic) {
chatRoomTopic.innerText = topic; // Set full topic here
} else {
console.error('Element #chat-room-topic not found');
}
if (chatRoomName) {
// Update the room name in the header
const room = config.rooms.find(r => r.topic === topic);
const roomName = room ? room.alias : truncateHash(topic);
chatRoomName.innerText = roomName;
} else {
console.error('Element #chat-room-name not found');
}
clearMessages();
renderMessagesForRoom(topic);
// Show chat UI elements
document.querySelector('#chat').classList.remove('hidden');
document.querySelector('#setup').classList.add('hidden');
};
const roomList = document.querySelector('#room-list');
if (roomList) {
roomList.addEventListener('click', function(event) {
const roomItem = event.target.closest('li');
if (roomItem) {
switchRoom(roomItem.dataset.topic);
}
});
}
});
</script>
</body>
</html>