260 lines
9.7 KiB
HTML
260 lines
9.7 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="guild-list" class="list-group">
|
|
<!-- Guild list will be populated dynamically -->
|
|
</ul>
|
|
<button id="toggle-setup-btn">Create/Join Guild</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-guild-btn">Create Guild</button>
|
|
<div id="or">- or -</div>
|
|
<div id="join-guild-container">
|
|
<label for="join-guild-topic">Guild Topic:</label>
|
|
<input type="text" id="join-guild-topic" placeholder="guild topic">
|
|
<button id="join-guild">Join Guild</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>
|
|
<span id="chat-guild-topic" style="display: none;"></span>
|
|
<span id="chat-guild-name" style="display: none;"></span>
|
|
</div>
|
|
</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>
|
|
<button type="button" id="talk-btn">Talk</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>
|
|
|
|
<!-- Create Guild Modal -->
|
|
<div id="create-guild-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<span class="close-btn" id="close-create-guild-modal">×</span>
|
|
<h2>Create Guild</h2>
|
|
<form id="create-guild-form">
|
|
<label for="guild-name">Guild Name:</label>
|
|
<input type="text" id="guild-name" required>
|
|
<button type="submit">Create</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manage Guild Modal -->
|
|
<div id="manage-guild-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<span class="close-btn" id="close-manage-guild-modal">×</span>
|
|
<h2>Manage Guild</h2>
|
|
<div id="guild-info">
|
|
<!-- Guild info will be populated dynamically -->
|
|
</div>
|
|
<button id="copy-guild-id" class="mini-button">Copy Guild ID</button>
|
|
<form id="add-room-form">
|
|
<label for="room-name">Room Name:</label>
|
|
<input type="text" id="room-name" required>
|
|
<button type="submit">Add Room</button>
|
|
</form>
|
|
<ul id="room-list">
|
|
<!-- Room list will be populated dynamically -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { processGuild } from './app.js';
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const messageInput = document.getElementById('message');
|
|
const copyTopicLink = document.getElementById('copy-topic-link');
|
|
const chatRoomTopic = document.getElementById('chat-room-topic');
|
|
const copyGuildIdButton = document.getElementById('copy-guild-id');
|
|
|
|
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(() => {
|
|
console.log('Topic copied to clipboard:', topic);
|
|
}).catch(err => {
|
|
console.error('Failed to copy topic:', err);
|
|
});
|
|
} else {
|
|
console.error('Element #chat-room-topic not found');
|
|
}
|
|
});
|
|
}
|
|
|
|
if (copyGuildIdButton) {
|
|
copyGuildIdButton.addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
const guildTopic = document.getElementById('manage-guild-modal').dataset.guildTopic;
|
|
navigator.clipboard.writeText(guildTopic).then(() => {
|
|
console.log('Guild ID copied to clipboard:', guildTopic);
|
|
}).catch(err => {
|
|
console.error('Failed to copy guild ID:', err);
|
|
});
|
|
});
|
|
}
|
|
|
|
const guildList = document.querySelector('#guild-list');
|
|
if (guildList) {
|
|
guildList.addEventListener('click', function(event) {
|
|
const roomItem = event.target.closest('.room-item');
|
|
if (roomItem) {
|
|
const guildTopic = roomItem.dataset.guildTopic;
|
|
const roomTopic = roomItem.dataset.topic;
|
|
switchRoom(guildTopic, roomTopic);
|
|
}
|
|
});
|
|
}
|
|
|
|
const createGuildBtn = document.getElementById('create-guild-btn');
|
|
const createGuildModal = document.getElementById('create-guild-modal');
|
|
const closeCreateGuildModal = document.getElementById('close-create-guild-modal');
|
|
const createGuildForm = document.getElementById('create-guild-form');
|
|
|
|
createGuildBtn.addEventListener('click', () => {
|
|
createGuildModal.classList.remove('hidden');
|
|
});
|
|
|
|
closeCreateGuildModal.addEventListener('click', () => {
|
|
createGuildModal.classList.add('hidden');
|
|
});
|
|
|
|
createGuildForm.addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
const guildName = document.getElementById('guild-name').value.trim();
|
|
if (guildName) {
|
|
createGuild(guildName);
|
|
createGuildModal.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
const joinGuildBtn = document.getElementById('join-guild');
|
|
joinGuildBtn.addEventListener('click', async (event) => {
|
|
const guildTopic = document.getElementById('join-guild-topic').value.trim();
|
|
if (guildTopic) {
|
|
await processGuild(guildTopic);
|
|
}
|
|
});
|
|
|
|
const manageGuildModal = document.getElementById('manage-guild-modal');
|
|
const closeManageGuildModal = document.getElementById('close-manage-guild-modal');
|
|
const addRoomForm = document.getElementById('add-room-form');
|
|
const roomNameInput = document.getElementById('room-name');
|
|
|
|
closeManageGuildModal.addEventListener('click', () => {
|
|
manageGuildModal.classList.add('hidden');
|
|
});
|
|
|
|
addRoomForm.addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
const roomName = roomNameInput.value.trim();
|
|
const guildTopic = manageGuildModal.dataset.guildTopic;
|
|
if (roomName && guildTopic) {
|
|
addRoomToGuild(guildTopic, roomName);
|
|
roomNameInput.value = '';
|
|
}
|
|
});
|
|
});
|
|
|
|
function createGuild(guildName) {
|
|
const event = new CustomEvent('createGuild', { detail: { guildName } });
|
|
document.dispatchEvent(event);
|
|
}
|
|
|
|
function addRoomToGuild(guildTopic, roomName) {
|
|
const event = new CustomEvent('addRoomToGuild', { detail: { guildTopic, roomName } });
|
|
document.dispatchEvent(event);
|
|
}
|
|
|
|
function manageGuild(guildTopic) {
|
|
const event = new CustomEvent('manageGuild', { detail: { guildTopic } });
|
|
document.dispatchEvent(event);
|
|
}
|
|
|
|
function switchRoom(guildTopic, roomTopic) {
|
|
const event = new CustomEvent('switchRoom', { detail: { guildTopic, roomTopic } });
|
|
document.dispatchEvent(event);
|
|
}
|
|
|
|
function openManageGuildModal(guildTopic) {
|
|
const manageGuildModal = document.getElementById('manage-guild-modal');
|
|
const guildInfo = document.getElementById('guild-info');
|
|
const roomList = document.getElementById('room-list');
|
|
|
|
manageGuildModal.dataset.guildTopic = guildTopic;
|
|
guildInfo.innerHTML = `<h3>${config.guilds[guildTopic].alias}</h3>`;
|
|
roomList.innerHTML = '';
|
|
|
|
config.guilds[guildTopic].rooms.forEach(room => {
|
|
const roomItem = document.createElement('li');
|
|
roomItem.textContent = room.alias;
|
|
roomItem.dataset.guildTopic = guildTopic;
|
|
roomItem.dataset.topic = room.topic;
|
|
|
|
roomItem.addEventListener('dblclick', () => enterEditMode(roomItem, guildTopic));
|
|
roomItem.addEventListener('click', () => switchRoom(guildTopic, room.topic));
|
|
|
|
roomList.appendChild(roomItem);
|
|
});
|
|
|
|
manageGuildModal.classList.remove('hidden');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|