Collaborative Story Writing Tool

The story is just beginning... Add the first contribution below!

'; return; } contributions.forEach(contrib => { const p = document.createElement('p'); p.className = 'mb-4 border-b border-gray-200 pb-2'; // Basic sanitization: replace < and > to prevent HTML injection const sanitizedText = (contrib.text || '') .replace(//g, ">"); // Display user ID (shortened) and text const shortUserId = contrib.userId ? contrib.userId.substring(0, 8) : 'anon'; const userSpan = `[${shortUserId}]`; p.innerHTML = userSpan + sanitizedText.replace(/\n/g, '
'); // Replace newlines with
storyDisplay.appendChild(p); }); // Scroll to bottom storyDisplay.scrollTop = storyDisplay.scrollHeight; } function updateUserIdDisplay() { if (userIdDisplay) { userIdDisplay.textContent = userId.substring(0, 12); // Display shortened ID } } // --- Actions --- async function submitContribution() { if (!contributionInput || !storyDocRef) return; const text = contributionInput.value.trim(); if (!text) { showError("Please write something before submitting."); return; } if (text.length > MAX_CONTRIBUTION_LENGTH) { showError(`Contribution is too long (max ${MAX_CONTRIBUTION_LENGTH} characters).`); return; } const newContribution = { text: text, userId: userId, timestamp: serverTimestamp() // Use Firestore server time }; submitButton.disabled = true; // Disable button during submission showError(null); // Clear previous errors try { console.log("Adding contribution:", newContribution); await updateDoc(storyDocRef, { contributions: arrayUnion(newContribution) }); console.log("Contribution added successfully."); contributionInput.value = ''; // Clear input on success updateCharCount(); // Reset char count display } catch (error) { console.error("Error adding contribution:", error); showError(`Failed to add contribution: ${error.message}`); } finally { submitButton.disabled = false; // Re-enable button } } function updateCharCount() { if (!contributionInput || !charCountDisplay) return; const currentLength = contributionInput.value.length; charCountDisplay.textContent = `${currentLength}/${MAX_CONTRIBUTION_LENGTH}`; if (currentLength > MAX_CONTRIBUTION_LENGTH) { charCountDisplay.classList.add('text-red-600'); charCountDisplay.classList.remove('text-gray-500'); } else { charCountDisplay.classList.remove('text-red-600'); charCountDisplay.classList.add('text-gray-500'); } } // --- UI State Functions --- function setLoading(isLoading) { if (loadingDiv) { loadingDiv.style.display = isLoading ? 'block' : 'none'; } } function showError(message) { if (errorDiv) { errorDiv.textContent = message || ''; errorDiv.style.display = message ? 'block' : 'none'; } } // --- Event Listeners --- if (submitButton) { submitButton.addEventListener('click', submitContribution); } if (contributionInput) { contributionInput.addEventListener('input', updateCharCount); } // --- Initial Load --- setLoading(true); updateUserIdDisplay(); // Show initial anonymous ID initializeFirebase(); // Start Firebase init and auth updateCharCount(); // Initialize char count display