Initial commit

resource/template/room.html

@@ -0,0 +1,66 @@
+{% extends 'room_base.html' %}
+{% block title %}Room {{ room_code }}{% endblock %}
+{% block content %}
+    <h1>Room {{ room_code }}</h1>
+    <div id="chat-box"></div>
+
+    <div class="chat-input-container">
+    <input type="text" id="chat-input" placeholder="Say something..." />
+    <button id="send-button">Send</button>
+    </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
+        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 = '';
+            }
+        };
+    </script>
+{% endblock %}