67 lines
2.2 KiB
HTML
67 lines
2.2 KiB
HTML
{% 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 %}
|