From 4f249ad9cf0ef7d8b2e9a5296fb15e8b8cb7d319 Mon Sep 17 00:00:00 2001 From: Krrish Sehgal <133865424+krrish-sehgal@users.noreply.github.com> Date: Sun, 23 Feb 2025 01:33:13 +0530 Subject: [PATCH 1/2] frontend working --- BACON/bacon-etch.yaml | 8 +-- website/templates/join_room.html | 110 +++++++++++++++++++++++++++++++ 2 files changed, 114 insertions(+), 4 deletions(-) diff --git a/BACON/bacon-etch.yaml b/BACON/bacon-etch.yaml index fd15206b0..6be34103a 100644 --- a/BACON/bacon-etch.yaml +++ b/BACON/bacon-etch.yaml @@ -3,10 +3,10 @@ mode: separate-outputs etching: rune: BLT.BACON.TOKENS turbo: true - divisibility: 8 - premine: 1000000 - supply: 1000000 + divisibility: 0 + premine: 1000000000000 + supply: 1000000000000 symbol: 🥓 inscriptions: -- file: /blockchain/bacon.png \ No newline at end of file +- file: /blockchain/bacon-images/bacon-24kb.jpeg \ No newline at end of file diff --git a/website/templates/join_room.html b/website/templates/join_room.html index f4002ec98..6cc94a434 100644 --- a/website/templates/join_room.html +++ b/website/templates/join_room.html @@ -39,6 +39,24 @@

{{ room.name }}

{{ message.content }}
+ + + + + + {% endfor %} @@ -170,6 +188,35 @@

{{ room.name }}

newMessage.appendChild(header); newMessage.appendChild(contentElement); + // React button + const reactButton = document.createElement('button'); + reactButton.classList.add('react-button', 'absolute', 'top-4', 'right-0', 'mt-1', 'mr-1', 'text-gray-500', 'hover:text-gray-700', 'p-1', 'rounded-full', 'bg-gray-200'); + reactButton.innerHTML = "➕"; + reactButton.onclick = function() { + toggleEmojiList(data.message_id); + }; + newMessage.appendChild(reactButton); + + // Emoji list + const emojiList = document.createElement('div'); + emojiList.id = `emoji-list-${data.message_id}`; + emojiList.classList.add('emoji-list', 'hidden', 'absolute', 'top-8', 'right-0', 'mt-1', 'mr-1', 'bg-white', 'shadow-md', 'rounded-md', 'p-2', 'w-32', 'z-10'); + emojiList.innerHTML = ` + + + + + + + `; + newMessage.appendChild(emojiList); + + // Reactions display + const reactionsDiv = document.createElement('div'); + reactionsDiv.id = `reactions-${data.message_id}`; + reactionsDiv.classList.add('reactions', 'hidden', 'absolute', 'top-4', 'right-0', 'mt-1', 'mr-1', 'bg-white', 'shadow-md', 'rounded-md', 'p-2', 'w-32', 'z-10'); + newMessage.appendChild(reactionsDiv); + if (data.username === username) { const menuContainer = document.createElement('div'); menuContainer.classList.add('relative'); @@ -334,6 +381,52 @@

{{ room.name }}

} } + function toggleEmojiList(messageId) { + const emojiList = document.getElementById(`emoji-list-${messageId}`); + emojiList.classList.toggle('hidden'); + } + + function sendReaction(messageId, emoji) { + if (socket && socket.readyState === WebSocket.OPEN) { + const data = { + 'type': 'reaction', + 'messageId': messageId, + 'emoji': emoji, + 'username': username + }; + socket.send(JSON.stringify(data)); + updateReactionButton(messageId, emoji); + hideEmojiList(messageId); + } + } + + function hideEmojiList(messageId) { + const emojiList = document.getElementById(`emoji-list-${messageId}`); + emojiList.classList.add('hidden'); + } + + function updateReactionButton(messageId, emoji) { + const reactButton = document.querySelector(`#message-${messageId} .react-button`); + reactButton.innerHTML = emoji; + reactButton.onclick = function() { + showReactions(messageId); + }; + } + + function showReactions(messageId) { + fetch(`/api/reactions/${messageId}/`) + .then(response => response.json()) + .then(data => { + const reactionsDiv = document.getElementById(`reactions-${messageId}`); + reactionsDiv.innerHTML = ''; + data.reactions.forEach(reaction => { + const reactionElement = document.createElement('div'); + reactionElement.textContent = `${reaction.emoji} ${reaction.username}`; + reactionsDiv.appendChild(reactionElement); + }); + reactionsDiv.classList.toggle('hidden'); + }); + } // Function to remove a message from the UI function removeMessageFromUI(messageId) { @@ -354,6 +447,23 @@

{{ room.name }}

} }); + document.addEventListener("mouseover", function(event) { + if (event.target.closest(".group")) { + const reactButton = event.target.closest(".group").querySelector(".react-button"); + if (reactButton) { + reactButton.classList.remove("hidden"); + } + } + }); + + document.addEventListener("mouseout", function(event) { + if (event.target.closest(".group")) { + const reactButton = event.target.closest(".group").querySelector(".react-button"); + if (reactButton) { + reactButton.classList.add("hidden"); + } + } + }); sendButton.addEventListener('click', sendMessage); From b4917458df3c79ed37bb8ab01552a9c1f875e20b Mon Sep 17 00:00:00 2001 From: Krrish Sehgal <133865424+krrish-sehgal@users.noreply.github.com> Date: Sun, 23 Feb 2025 01:49:19 +0530 Subject: [PATCH 2/2] pre fix --- website/templates/join_room.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/website/templates/join_room.html b/website/templates/join_room.html index 6cc94a434..3da3ebed9 100644 --- a/website/templates/join_room.html +++ b/website/templates/join_room.html @@ -41,11 +41,10 @@

{{ room.name }}

{{ message.content }}
+ onclick="toggleEmojiList('{{ message.id }}')">➕ -