Huge update.

resource/template/room.html

@@ -1,5 +1,5 @@
 {% extends 'room_base.html' %}
-{% block title %}Room {{ room_code }}{% endblock %}
+{% block title %}Echo | Room {{ room_code }}{% endblock %}
 {% block content %}
     <h1>Room {{ room_code }}</h1>
     <div class="chat-container">
@@ -11,63 +11,8 @@
     </div>
 
     <script>
-        const socket = io();
         const room = "{{ room_code }}";
-
-        const name = localStorage.getItem('username') || 'Anonymous';
-        socket.emit('join', { room, sender: name });
-
-        // Fetch message history
-        fetch(`/api/room/${room}/messages`)
-            .then(res => res.json())
-            .then(data => {
-                const chatBox = document.getElementById('chat-box');
-                if (data && Array.isArray(data)) {
-                    data.forEach(msg => {
-                        const msgElem = document.createElement('p');
-                        msgElem.textContent = `${msg.sender}: ${msg.text}`;
-                        chatBox.appendChild(msgElem);
-                    });
-                    chatBox.scrollTop = chatBox.scrollHeight;
-                }
-            });
-
-        // Message listener
-        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;
-        });
-
-        // Send message on button click
-        document.getElementById('send-button').onclick = () => {
-            const text = document.getElementById('chat-input').value;
-            const sender = localStorage.getItem('username') || 'Anonymous';
-
-            if (text.trim()) {
-                socket.emit('message', {
-                    room,
-                    text,
-                    sender
-                });
-                document.getElementById('chat-input').value = '';
-            }
-        };
-
-        // Send message on Enter key press
-        document.getElementById('chat-input').addEventListener('keydown', (event) => {
-            if (event.key === 'Enter') {
-                document.getElementById('send-button').click();
-            }
-        });
-
     </script>
+    
+    <script src="{{ url_for('static', filename='js/room.js') }}"></script>
 {% endblock %}