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

{{block content}}   <!-- otree snippets von Chris @ otree https://www.otreehub.com/projects/otree-snippets/ -->
<p> Hier können Sie mit Ihrem Partner schreiben. </p>
<p> Sie haben 5 Minuten Zeit, um sich auszutauschen. </p>

<br><br>

<div id="chat_messages">
</div>
<input type="hidden" id="playerId" value="{{ player.id_in_group }}">
<div>
    <input type="text" id="chat_input">
    <button type="button" onclick="sendMsg()">Send</button> <!--sendMsg();-->
</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) {
                                                                         <!--abfrage ob sender der Nachricht oder empfänger. Als sender bekommt man den "alten" text und als Empfänger den umgewandelten.-->
        for (let msg of messages) {
            if ( msg.sender === js_vars.my_id ) {
                let msgSpan = document.createElement('span');
                msgSpan.textContent = msg.alter_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);
            }
            else {
                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>

<br><br><br>
{{next_button}}

{{endblock}}