245 lines
7.5 KiB
JavaScript
245 lines
7.5 KiB
JavaScript
const GUESTBOOK_API = 'https://guestbook.bug-dev-mail.workers.dev';
|
|
|
|
const EMOTES = {
|
|
':happy:': 'images/emotes/joy.gif',
|
|
':love:': 'images/emotes/love.gif',
|
|
':laugh:': 'images/emotes/laugh.gif',
|
|
':shock:': 'images/emotes/astonished.gif',
|
|
':hello:': 'images/emotes/wave.gif',
|
|
':kiss:': 'images/emotes/kiss.gif',
|
|
':clap:': 'images/emotes/applause.gif',
|
|
':dance:': 'images/emotes/caramelldansen.gif',
|
|
':yippee:': 'images/emotes/yippee.gif',
|
|
};
|
|
|
|
function replaceLinks(text) {
|
|
function cleanUrl(url) {
|
|
return url.replace(/&/g, '&');
|
|
}
|
|
var result = text.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
|
|
function(_, label, url) {
|
|
return '<a href="' + cleanUrl(url) + '" target="_blank" rel="noopener noreferrer">' + label + '</a>';
|
|
});
|
|
result = result.replace(/(^|[^"'])(https?:\/\/[^\s<]+)/g,
|
|
function(_, pre, url) {
|
|
return pre + '<a href="' + cleanUrl(url) + '" target="_blank" rel="noopener noreferrer">' + url + '</a>';
|
|
});
|
|
return result;
|
|
}
|
|
|
|
function replaceEmotes(text) {
|
|
let result = replaceLinks(text);
|
|
for (const [code, src] of Object.entries(EMOTES)) {
|
|
const escaped = code.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
result = result.replace(new RegExp(escaped, 'g'),
|
|
`<img src="${src}" class="gb-emote" title="${code}" alt="${code}">`);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function timeAgo(dateStr) {
|
|
if (!dateStr.includes('T') && !dateStr.includes('-')) {
|
|
return dateStr;
|
|
}
|
|
const d = new Date(dateStr);
|
|
const now = new Date();
|
|
const diffMs = now - d;
|
|
const diffMin = Math.floor(diffMs / 60000);
|
|
const diffHr = Math.floor(diffMs / 3600000);
|
|
const diffDay = Math.floor(diffMs / 86400000);
|
|
|
|
if (diffMin < 1) return 'just now';
|
|
if (diffMin < 60) return diffMin + ' min ago';
|
|
if (diffHr < 24) return diffHr + ' hr ago';
|
|
if (diffDay === 1) return '1 day ago';
|
|
return diffDay + ' days ago';
|
|
}
|
|
|
|
function createMessageBubble(msg) {
|
|
const entry = document.createElement('div');
|
|
entry.style.setProperty('--col', '#90c9ff');
|
|
|
|
const nameDiv = document.createElement('div');
|
|
nameDiv.textContent = msg.name || 'Anonymous';
|
|
|
|
const dateDiv = document.createElement('div');
|
|
dateDiv.className = 'gb-date';
|
|
dateDiv.textContent = timeAgo(msg.date);
|
|
|
|
const msgDiv = document.createElement('div');
|
|
msgDiv.className = 'gb-msg-content';
|
|
msgDiv.innerHTML = replaceEmotes(msg.message);
|
|
|
|
entry.appendChild(nameDiv);
|
|
entry.appendChild(dateDiv);
|
|
entry.appendChild(msgDiv);
|
|
|
|
const actions = document.createElement('div');
|
|
actions.className = 'gb-actions';
|
|
|
|
const likeBtn = document.createElement('button');
|
|
likeBtn.className = 'gb-like-btn';
|
|
const likeCount = typeof msg.likes === 'number' ? msg.likes : (Array.isArray(msg.likes) ? msg.likes.length : 0);
|
|
likeBtn.innerHTML = `<span class="gb-like-icon">♥</span> ${likeCount}`;
|
|
likeBtn.onclick = () => likeMessage(msg.id, likeBtn);
|
|
|
|
actions.appendChild(likeBtn);
|
|
entry.appendChild(actions);
|
|
|
|
return entry;
|
|
}
|
|
|
|
async function loadMessages() {
|
|
const picto = document.querySelector('#pictochat-content .picto');
|
|
if (!picto) return;
|
|
picto.innerHTML = '';
|
|
|
|
try {
|
|
const res = await fetch(GUESTBOOK_API + '/messages');
|
|
const messages = await res.json();
|
|
messages.forEach(msg => {
|
|
picto.appendChild(createMessageBubble(msg));
|
|
});
|
|
} catch (e) {
|
|
const err = document.createElement('div');
|
|
err.style.setProperty('--col', '#90c9ff');
|
|
const nameDiv = document.createElement('div');
|
|
nameDiv.textContent = 'system';
|
|
const msgDiv = document.createElement('div');
|
|
msgDiv.textContent = 'No one has commented yet. Be the first!';
|
|
err.appendChild(nameDiv);
|
|
err.appendChild(document.createTextNode(''));
|
|
err.appendChild(document.createElement('br'));
|
|
err.appendChild(msgDiv);
|
|
picto.appendChild(err);
|
|
}
|
|
}
|
|
|
|
async function sendMessage() {
|
|
const nameInput = document.getElementById('gb-name');
|
|
const msgInput = document.getElementById('gb-message');
|
|
const sendBtn = document.getElementById('gb-send');
|
|
|
|
const message = msgInput.value.trim();
|
|
if (!message) return;
|
|
|
|
sendBtn.classList.add('gb-disabled');
|
|
try {
|
|
await fetch(GUESTBOOK_API + '/messages', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
name: nameInput.value.trim() || 'Anonymous',
|
|
message: message,
|
|
}),
|
|
});
|
|
msgInput.value = '';
|
|
await loadMessages();
|
|
setTimeout(replaceTextWithEmotes, 500);
|
|
} catch (e) {
|
|
|
|
}
|
|
sendBtn.classList.remove('gb-disabled');
|
|
}
|
|
|
|
async function likeMessage(id, btn) {
|
|
try {
|
|
const res = await fetch(GUESTBOOK_API + `/messages/${id}/like`, { method: 'POST' });
|
|
const data = await res.json();
|
|
btn.innerHTML = `<span class="gb-like-icon">♥</span> ${data.likes}`;
|
|
btn.classList.add('gb-liked');
|
|
} catch (e) {
|
|
|
|
}
|
|
}
|
|
|
|
function toggleEmoteSelector() {
|
|
const els = document.getElementsByClassName('gb-toggle-div');
|
|
for (let i = 0; i < els.length; i++) {
|
|
if (els[i].style.display === 'none' || els[i].style.display === '') {
|
|
els[i].style.display = 'block';
|
|
} else {
|
|
els[i].style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
function addText(text) {
|
|
const textarea = document.getElementById('gb-message');
|
|
textarea.value += text;
|
|
textarea.focus();
|
|
}
|
|
|
|
function replaceTextWithEmotes() {
|
|
const picto = document.querySelector('#pictochat-content .picto');
|
|
if (!picto) return;
|
|
|
|
function replaceTextNodes(element) {
|
|
element.childNodes.forEach(function (node) {
|
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
let replacedText = node.textContent;
|
|
let changed = false;
|
|
for (const [key, src] of Object.entries(EMOTES)) {
|
|
const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
const imgTag = "<img src='" + src + "' title='" + key + "' class='gb-emote' />";
|
|
const newText = replacedText.replace(new RegExp(escapedKey, 'g'), imgTag);
|
|
if (newText !== replacedText) {
|
|
replacedText = newText;
|
|
changed = true;
|
|
}
|
|
}
|
|
if (changed) {
|
|
const newElement = document.createElement('span');
|
|
newElement.innerHTML = replacedText;
|
|
node.parentNode.replaceChild(newElement, node);
|
|
}
|
|
} else {
|
|
replaceTextNodes(node);
|
|
}
|
|
});
|
|
}
|
|
|
|
replaceTextNodes(picto);
|
|
}
|
|
|
|
(function () {
|
|
const picto = document.querySelector('#pictochat-content .picto');
|
|
if (!picto) return;
|
|
|
|
const sendBtn = document.getElementById('gb-send');
|
|
if (sendBtn) sendBtn.addEventListener('click', sendMessage);
|
|
|
|
const msgInput = document.getElementById('gb-message');
|
|
if (msgInput) {
|
|
msgInput.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
sendMessage();
|
|
}
|
|
});
|
|
}
|
|
|
|
const emoteBtn = document.getElementById('gb-emote-toggle');
|
|
if (emoteBtn) emoteBtn.addEventListener('click', toggleEmoteSelector);
|
|
|
|
document.addEventListener('click', function (e) {
|
|
const selector = document.getElementById('gb-emote-selector');
|
|
const toggle = document.getElementById('gb-emote-toggle');
|
|
if (selector && selector.style.display === 'block' &&
|
|
!selector.contains(e.target) && e.target !== toggle) {
|
|
selector.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
const emoteItems = document.querySelectorAll('#gb-emote-selector .gb-emote-item');
|
|
emoteItems.forEach(function (img) {
|
|
img.addEventListener('click', function () {
|
|
addText(img.title + ' ');
|
|
});
|
|
});
|
|
|
|
loadMessages().then(function () {
|
|
replaceTextWithEmotes();
|
|
});
|
|
})();
|