Huge update.

resource/static/js/room.js

@@ -0,0 +1,147 @@
+const socket = io();
+
+let originalTitle = document.title;
+let notificationActive = false;
+let notificationInterval = null;
+
+// The 'room' variable is now directly available from the template,
+// so you don't need to get it from the URL.
+
+function getUsername(roomCode) {
+    const allUsernames = JSON.parse(localStorage.getItem('usernames') || '{}');
+    let storedUsername = allUsernames[roomCode];
+
+    // If a username exists and is not just whitespace, return it
+    if (storedUsername && storedUsername.trim()) {
+        return storedUsername;
+    }
+
+    // If no stored username, or it's empty, prompt the user
+    let newUsername = prompt("Please enter your name:");
+    
+    // If the user cancels the prompt or enters only whitespace
+    if (newUsername === null || !newUsername.trim()) {
+        return null; // Indicates user didn't provide a valid name
+    }
+
+    newUsername = newUsername.trim();
+
+    // Store for future use
+    allUsernames[roomCode] = newUsername;
+    localStorage.setItem('usernames', JSON.stringify(allUsernames));
+    
+    return newUsername;
+}
+
+// Use the 'room' variable provided by the template directly
+const name = getUsername(room); // 'room' is now defined by your template script
+if (!name) {
+    // If the user cancels or provides no name, redirect them
+    window.location.href = '/';
+} else {
+    socket.emit('join', { room, sender: name });
+    loadMessages();
+}
+
+
+socket.on('message', (data) => {
+    const chatBox = document.getElementById('chat-box');
+    const msgElem = document.createElement('p');
+
+    msgElem.textContent = `${data.sender}: ${data.text}`;
+    if (data.sender === 'System') {
+        msgElem.style.fontStyle = 'italic';
+        msgElem.style.color = 'gray';
+    }
+
+    chatBox.appendChild(msgElem);
+    chatBox.scrollTop = chatBox.scrollHeight;
+    
+    showNotification("Echo | New Message", `${data.sender}: ${data.text}`);
+});
+
+function showNotification(title, body) {
+    const notificationSetting = localStorage.getItem('notification-setting') || 'off';
+    
+    if (notificationSetting === 'off') {
+        return;
+    }
+    
+    if (notificationSetting === 'system') {
+        if (document.hasFocus()) return;
+        
+        if (Notification.permission === 'granted') {
+            new Notification(title, { body });
+        } else if (Notification.permission !== 'denied') {
+            Notification.requestPermission().then(permission => {
+                if (permission === 'granted') {
+                    new Notification(title, { body });
+                }
+            });
+        }
+    } else if (notificationSetting === 'tab') {
+        if (!document.hasFocus() && !notificationActive) {
+            originalTitle = document.title;
+            notificationInterval = setInterval(() => {
+                document.title = document.title === originalTitle 
+                    ? "Echo | New Message!" 
+                    : originalTitle;
+            }, 1000);
+            notificationActive = true;
+
+            if (!window.hasNotificationListener) {
+                const returnToNormal = () => {
+                    clearInterval(notificationInterval);
+                    document.title = originalTitle;
+                    notificationActive = false;
+                };
+                window.addEventListener('focus', returnToNormal);
+                window.hasNotificationListener = true;
+            }
+        }
+    }
+}
+
+document.getElementById('send-button').onclick = () => {
+    const text = document.getElementById('chat-input').value;
+    const allUsernames = JSON.parse(localStorage.getItem('usernames') || '{}');
+    const sender = allUsernames[room] || 'Anonymous';
+
+    if (text.trim()) {
+        socket.emit('message', {
+            room,
+            text,
+            sender
+        });
+        document.getElementById('chat-input').value = '';
+    }
+};
+
+document.getElementById('chat-input').addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+        document.getElementById('send-button').click();
+    }
+});
+
+function loadMessages() {
+    fetch(`/api/room/${room}/messages`)
+      .then(res => res.json())
+      .then(data => {
+        const chatBox = document.getElementById('chat-box');
+        chatBox.innerHTML = '';
+        if (Array.isArray(data)) {
+          data.forEach(msg => {
+            const msgElem = document.createElement('p');
+            msgElem.textContent = `${msg.sender}: ${msg.text}`;
+            chatBox.appendChild(msgElem);
+          });
+          chatBox.scrollTop = chatBox.scrollHeight;
+        }
+    });
+}
+
+window.addEventListener('pageshow', (event) => {
+    if (event.persisted) {
+        loadMessages();
+    }
+});