{{ block title }}Chat{{ endblock }}
{{ block content }}

<p>Bevor Sie Ihre nächsten Entscheidungen treffen, haben Sie nun 5 Minuten lang Zeit, die verschiedenen
    Auszahlungen und Strategien zu besprechen. Nach 5 Runden haben Sie eine zweite Gelegenheit, um sich
    im Chat zu besprechen.</p>


<div id="chat_messages">
</div>

<div>
    <input type="text" id="chat_input">
    <button type="button" onclick="sendMsg()">Send</button>
</div>
<script>

    let chat_input = document.getElementById('chat_input');

    chat_input.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            sendMsg();
        }
    });

    function sendMsg() {
        let text = chat_input.value.trim();
        if (text) {
            liveSend({'text': text});
        }
        chat_input.value = '';
    }

    let chat_messages = document.getElementById('chat_messages');

    function liveRecv(messages) {
        for (let msg of messages) {
            let msgSpan = document.createElement('span');
            msgSpan.textContent = msg.text;
            let sender = msg.sender === js_vars.my_id ? 'Me' : `Player ${msg.sender}`;
            let row = `<div><b>${sender}</b>: ${msgSpan.innerHTML}</div>`;
            chat_messages.insertAdjacentHTML('beforeend', row);
        }
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    });

</script>


{{ next_button }}

{% endblock %}