Skullex16/django-chatterverse

1document.addEventListener('DOMContentLoaded', () => {2    const socket = io();3    const messageForm = document.getElementById('message-form');4    const messageInput = document.getElementById('message-input');5    const messagesContainer = document.getElementById('messages');6    7    // Prompt for username8    let username = localStorage.getItem('username');9    if (!username) {10        username = prompt('Enter your username:');11        localStorage.setItem('username', username);12    }13    14    // Join chat15    socket.emit('join', username);16    17    // Handle message submission18    messageForm.addEventListener('submit', (e) => {19        e.preventDefault();20        const message = messageInput.value.trim();21        if (message) {22            socket.emit('chat message', {23                username,24                message,25                timestamp: new Date().toLocaleTimeString()26            });27            messageInput.value = '';28        }29        messageInput.focus();30    });31    32    // Receive messages33    socket.on('chat message', (data) => {34        const messageElement = document.createElement('custom-chat-bubble');35        messageElement.setAttribute('username', data.username);36        messageElement.setAttribute('message', data.message);37        messageElement.setAttribute('timestamp', data.timestamp);38        messageElement.setAttribute('is-current-user', data.username === username);39        messageElement.classList.add('message-animation');40        41        messagesContainer.appendChild(messageElement);42        messagesContainer.scrollTop = messagesContainer.scrollHeight;43    });44    45    // User joined notification46    socket.on('user joined', (username) => {47        const notification = document.createElement('div');48        notification.className = 'text-center text-gray-500 text-sm py-2';49        notification.textContent = `${username} joined the chat`;50        messagesContainer.appendChild(notification);51        messagesContainer.scrollTop = messagesContainer.scrollHeight;52    });53    54    // Focus input on load55    messageInput.focus();56});