{{ block title}}

{{ endblock}}

{{ block content }}

{{if player.id_in_group == 1}}

    <h3> Du bist Spieler 1. </h3><br>
    <b> Dein aktuelles Guthaben beträgt: </b>  <span id="p1_payout">100</span><br>
    Du kannst entscheiden ob du im Spiel bleibst oder austrittst. Du startest mit einer Anfangsausstattung von 100 Geldeinheiten. <br>
    Pro Sekunde die du im Spiel verbleibst verlierst du eine Geldeinheit. Trittst du aus dem Spiel aus, behältst du deine verbleibenden
    Geldeinheiten und das Spiel endet. Tritt dein Gegner vor dir aus dem Spiel aus, erhältst du deine verbleibenden
    Geldeinheiten sowie 80 zusätzliche Geldeinheiten als Belohnung und das Spiel endet. <br>

<button type="button" id = "button_p1_exit" onclick="sendAction(value)" name= "exit_button" value="p1_exit" >
    Aussteigen
</button> <br>

<br>

<button type="button" id = "button_p1_commitment" onclick="sendAction(value)" name = "p1_com" value="p1_com">
    Selbstbindung aktivieren
</button>

    <b id= "p2_commited" hidden = True> Dein Gegner hat die Selbstbindung aktiviert!</b>

{{endif}}

{{if player.id_in_group == 2}}

    <h3> Du bist Spieler 2. </h3><br>
    <b> Dein aktuelles Guthaben beträgt: </b>   <span id="p2_payout">100</span><br>
    Du kannst entscheiden ob du im Spiel bleibst oder austrittst. Du startest mit einer Anfangsausstattung von 100 Geldeinheiten. <br>
    Pro Sekunde die du im Spiel verbleibst verlierst du eine Geldeinheit. Trittst du aus dem Spiel aus, behältst du deine verbleibenden
    Geldeinheiten und das Spiel endet. Tritt dein Gegner vor dir aus dem Spiel aus, erhältst du deine verbleibenden
    Geldeinheiten sowie 80 zusätzliche Geldeinheiten als Belohnung und das Spiel endet. <br>

<button type="button" id = "button_p2_exit" onclick="sendAction(value)" name ="p2" value="p2_exit">
    Aussteigen
</button> <br>

<br>

<button type="button" id = "button_p2_commitment" onclick = "sendAction(value)" value = "p2_com">
    Selbstbindung aktivieren
</button>

<b id= "p1_commited" hidden = True> Dein Gegner hat die Selbstbindung aktiviert!</b>


{{endif}}




<script>

    function periodicRefresh() {
        setInterval(function(){
            liveSend("UPDATE");
            }, 1000);
    }



    function liveRecv(data) {
        console.log("liveRecv", data)

        if (data === 'p1_exit') {
            document.getElementById("form").submit();
        }
        if (data === "p2_exit") {
            document.getElementById("form").submit();
        }

        if (data === "timeout") {
            document.getElementById("form").submit();
        }

        if (data === "p1_com") {
            if (js_vars.my_id == 1) {
                document.getElementById("button_p1_exit").disabled = true;
                document.getElementById("button_p1_commitment").disabled = true;
            }
            if (js_vars.my_id == 2) {
                document.getElementById("button_p2_commitment").disabled = true;
                document.getElementById("p1_commited").hidden = false;
            }
        }

        if (data === "p2_com") {
            if (js_vars.my_id == 1) {
                document.getElementById("button_p1_commitment").disabled = true;
                document.getElementById("p2_commited").hidden = false;
            }
            if (js_vars.my_id == 2) {
                document.getElementById("button_p2_exit").disabled = true;
                document.getElementById("button_p2_commitment").disabled = true;
            }
        }

        if (data === "com_ended") {
            if (js_vars.my_id ==1) {
                document.getElementById("button_p1_exit").disabled = false;
                document.getElementById("button_p1_commitment").disabled = false;
                document.getElementById("p2_commited").hidden = true;
            }
            if (js_vars.my_id == 2) {
                document.getElementById("button_p2_exit").disabled = false;
                document.getElementById("button_p2_commitment").disabled = false;
                document.getElementById("p1_commited").hidden = true;
            }

        }

        if (js_vars.my_id == 1) {
            document.getElementById("p1_payout").innerText = Math.round(parseInt(data.p1_payout))
        }
        if (js_vars.my_id == 2) {
            document.getElementById("p2_payout").innerText = Math.round(parseInt(data.p2_payout))
        }

    }

    function sendAction(value) {
        liveSend(value);
    }

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

     });



</script>

{{endblock}}