{{ block title }}
    Page title
{{ endblock }}
{% extends "global/Page.html" %}
{% block content %}

<h3>Chat - Round {{ player.round_number }}</h3>
<div id="chatbox" style="border:1px solid #ccc; padding:1em; height:200px; overflow-y:scroll;">
</div>

<input type="text" id="chatinput" placeholder="Type a message" autofocus>
<button onclick="send()">Send</button>

<script>
const chatbox = document.getElementById('chatbox');

function addMessage(id_in_group, text) {
    const p = document.createElement('p');
    p.innerHTML = `<strong>${id_in_group}:</strong> ${text}`;
    chatbox.appendChild(p);
    chatbox.scrollTop = chatbox.scrollHeight;
}

function send() {
    const input = document.getElementById('chatinput');
    const text = input.value;
    if (text.trim()) {
        liveSend({text: text});
        input.value = '';
    }
}

liveRecv((data) => {
    addMessage(data.id_in_group, data.text);
});
</script>

{% endblock %}