let threads = JSON.parse(localStorage.getItem('threads') || '[]'); function saveThreads() { localStorage.setItem('threads', JSON.stringify(threads)); } function createThread() { const title = document.getElementById('thread-title').value; const content = document.getElementById('thread-content').value; const imageInput = document.getElementById('thread-image'); const reader = new FileReader(); reader.onload = () => { const thread = { id: Date.now(), title, posts: [{ content, image: reader.result || '', date: new Date().toLocaleString() }] }; threads.unshift(thread); saveThreads(); renderThreads(); }; if (imageInput.files.length > 0) { reader.readAsDataURL(imageInput.files[0]); } else { reader.onload(); // No image } document.getElementById('thread-title').value = ''; document.getElementById('thread-content').value = ''; document.getElementById('thread-image').value = ''; } function replyToThread(threadId, content, imageFile) { const thread = threads.find(t => t.id === threadId); const reader = new FileReader(); reader.onload = () => { thread.posts.push({ content, image: reader.result || '', date: new Date().toLocaleString() }); saveThreads(); renderThreads(); }; if (imageFile) { reader.readAsDataURL(imageFile); } else { reader.onload(); } } function renderThreads() { const container = document.getElementById('threads'); container.innerHTML = ''; threads.forEach(thread => { const threadDiv = document.createElement('div'); threadDiv.className = 'thread'; threadDiv.innerHTML = `

${thread.title}

`; thread.posts.forEach(post => { const postDiv = document.createElement('div'); postDiv.className = 'reply'; postDiv.innerHTML = `

${post.content}

${post.image ? `` : ''} ${post.date} `; threadDiv.appendChild(postDiv); }); const replyBox = document.createElement('div'); replyBox.className = 'emoji-wrap'; replyBox.innerHTML = `

`; const textarea = replyBox.querySelector('textarea'); textarea.id = `reply-${thread.id}`; replyBox.querySelector('button').onclick = () => { const text = textarea.value; const file = replyBox.querySelector('.reply-image').files[0]; replyToThread(thread.id, text, file); }; threadDiv.appendChild(replyBox); container.appendChild(threadDiv); }); attachEmojiPickers(); } function attachEmojiPickers() { const buttons = document.querySelectorAll('.emoji-button'); buttons.forEach(button => { const picker = new EmojiButton({ theme: 'auto' }); const targetId = button.getAttribute('data-target'); picker.on('emoji', emoji => { const textarea = document.getElementById(targetId); textarea.value += emoji; }); button.addEventListener('click', () => { picker.togglePicker(button); }); }); } renderThreads();