LinkUp-P2P-Chat/index.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">&times;</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">&times;</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>
    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>
first commit 2024-06-03 19:23:14 -04:00			`<!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>`
Update 2024-06-04 00:26:32 -04:00			`<script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>`
Adding syntax highlights 2024-06-10 16:32:52 -04:00			`<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>`
first commit 2024-06-03 19:23:14 -04:00			`</head>`
			`<body>`
			`<header>`
make window controls look better, move app name to the right side 2024-06-09 01:55:39 -04:00			`<pear-ctrl></pear-ctrl>`
Move Peer Count to Title Bar \| Make the count global to all rooms 2024-06-11 01:12:01 -04:00			`<div id="linkup-text">LinkUp \| Peers: <span id="peers-count">0</span></div>`
first commit 2024-06-03 19:23:14 -04:00			`</header>`
			`<main>`
Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings 2024-06-08 01:21:25 -04:00			`<div id="sidebar">`
Add the beginnings of guilds 2024-06-20 00:46:24 -04:00			`<ul id="guild-list" class="list-group">`
			`<!-- Guild list will be populated dynamically -->`
Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings 2024-06-08 01:21:25 -04:00			`</ul>`
Add the beginnings of guilds 2024-06-20 00:46:24 -04:00			`<button id="toggle-setup-btn">Create/Join Guild</button>`
first commit 2024-06-03 19:23:14 -04:00			`</div>`
Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings 2024-06-08 01:21:25 -04:00			`<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>`
first commit 2024-06-03 19:23:14 -04:00			`</div>`
Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings 2024-06-08 01:21:25 -04:00			`<div id="setup" class="hidden">`
			`<div id="user-info">`
			`<!-- User info will be populated dynamically -->`
			`</div>`
Add the beginnings of guilds 2024-06-20 00:46:24 -04:00			`<button id="create-guild-btn">Create Guild</button>`
Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings 2024-06-08 01:21:25 -04:00			`<div id="or">- or -</div>`
Add the beginnings of guilds 2024-06-20 00:46:24 -04:00			`<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>`
Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings 2024-06-08 01:21:25 -04:00			`</div>`
fix 2024-06-03 23:16:22 -04:00			`</div>`
Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings 2024-06-08 01:21:25 -04:00			`<div id="chat" class="hidden">`
			`<div id="header">`
			`<div id="details">`
Add room names to room view header, add a copy topic button and remove the display of the topics 2024-06-11 02:52:53 -04:00			`<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>`
Add the beginnings of guilds 2024-06-20 00:46:24 -04:00			`<span id="chat-guild-topic" style="display: none;"></span>`
			`<span id="chat-guild-name" style="display: none;"></span>`
Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings 2024-06-08 01:21:25 -04:00			`</div>`
first commit 2024-06-03 19:23:14 -04:00			`</div>`
			`</div>`
Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings 2024-06-08 01:21:25 -04:00			`<div id="messages-container">`
			`<div id="messages"></div>`
first commit 2024-06-03 19:23:14 -04:00			`</div>`
Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings 2024-06-08 01:21:25 -04:00			`<form id="message-form">`
			`<textarea id="message" rows="4"></textarea>`
Adding file and image upload and sharing 2024-06-09 02:22:46 -04:00			`<input type="file" id="file-input" style="display:none;">`
			`<button type="button" id="attach-file">Attach File</button>`
Add the beginnings of guilds 2024-06-20 00:46:24 -04:00			`<button type="button" id="talk-btn">Talk</button>`
Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings 2024-06-08 01:21:25 -04:00			`<input type="submit" value="Send" />`
			`</form>`
			`<button id="remove-room-btn">Leave Room</button>`
first commit 2024-06-03 19:23:14 -04:00			`</div>`
Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings 2024-06-08 01:21:25 -04:00			`<div id="loading" class="hidden">Loading ...</div>`
first commit 2024-06-03 19:23:14 -04:00			`</div>`
			`</main>`
Add the beginnings of guilds 2024-06-20 00:46:24 -04:00
			`<!-- 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>`

Add multi line support 2024-06-04 00:03:14 -04:00			`<script>`
			`document.addEventListener('DOMContentLoaded', function() {`
			`const messageInput = document.getElementById('message');`
Add room names to room view header, add a copy topic button and remove the display of the topics 2024-06-11 02:52:53 -04:00			`const copyTopicLink = document.getElementById('copy-topic-link');`
			`const chatRoomTopic = document.getElementById('chat-room-topic');`
Add the beginnings of guilds 2024-06-20 00:46:24 -04:00			`const copyGuildIdButton = document.getElementById('copy-guild-id');`
Add room names to room view header, add a copy topic button and remove the display of the topics 2024-06-11 02:52:53 -04:00
			`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) {`
Adding a sidebar that contains a room list that can switch chat views, a toggle button to access create/join settings 2024-06-08 01:21:25 -04:00			`event.preventDefault();`
Add room names to room view header, add a copy topic button and remove the display of the topics 2024-06-11 02:52:53 -04:00			`if (chatRoomTopic) {`
			`const topic = chatRoomTopic.innerText;`
			`navigator.clipboard.writeText(topic).then(() => {`
Better style for the side bar + removing alert on copy 2024-06-13 05:24:44 -04:00			`console.log('Topic copied to clipboard:', topic);`
Add room names to room view header, add a copy topic button and remove the display of the topics 2024-06-11 02:52:53 -04:00			`}).catch(err => {`
			`console.error('Failed to copy topic:', err);`
			`});`
			`} else {`
			`console.error('Element #chat-room-topic not found');`
			`}`
			`});`
			`}`

Add the beginnings of guilds 2024-06-20 00:46:24 -04:00			`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);`
			`});`
			`});`
			`}`
Add room names to room view header, add a copy topic button and remove the display of the topics 2024-06-11 02:52:53 -04:00
Add the beginnings of guilds 2024-06-20 00:46:24 -04:00			`const guildList = document.querySelector('#guild-list');`
			`if (guildList) {`
			`guildList.addEventListener('click', function(event) {`
			`const roomItem = event.target.closest('.room-item');`
Add room names to room view header, add a copy topic button and remove the display of the topics 2024-06-11 02:52:53 -04:00			`if (roomItem) {`
Add the beginnings of guilds 2024-06-20 00:46:24 -04:00			`const guildTopic = roomItem.dataset.guildTopic;`
			`const roomTopic = roomItem.dataset.topic;`
			`switchRoom(guildTopic, roomTopic);`
Add room names to room view header, add a copy topic button and remove the display of the topics 2024-06-11 02:52:53 -04:00			`}`
			`});`
			`}`
Add the beginnings of guilds 2024-06-20 00:46:24 -04:00
			`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 = '';`
			`}`
			`});`
Add multi line support 2024-06-04 00:03:14 -04:00			`});`
Add the beginnings of guilds 2024-06-20 00:46:24 -04:00
			`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');`
			`}`
Add multi line support 2024-06-04 00:03:14 -04:00			`</script>`
first commit 2024-06-03 19:23:14 -04:00			`</body>`
Add the beginnings of guilds 2024-06-20 00:46:24 -04:00			`</html>`