{{ block content }}
<style>
         .error{
            color: #D8000C;
            /*background-color: #FFBABA;*/
            font-size: 80%;
         }

         .otree-timer {
            display: none;
        }

        .card {
            background-color: {{ bg_color }} !important;
        }
</style>

    {% if player.round_number != 1 and player.subsession.inner_round == 1 %}
    <h3>ATENCIÓN: Ahora estás jugando un nuevo juego.</h3>
    {% endif %}

    {% if player.session.config.show_round_number %}

    <h3> Estás en el período {{ player.subsession.inner_round}} del juego {{player.subsession.game_label}}. </h3>

    {% else %}
    <h3> Estás en el juego {{player.subsession.game_label}}.</h3>

    {% endif %}

    {% include "GameDescription.html" %}
    
    <!-- <p> Eres el jugador {{ label }}</p> -->

    <table class="table">
    <tr>
        <th>Tus número actual de este período es:</th>
        <td id="my-curr-guess"></td>
    </tr>
    <tr>
        <th>Introduce tu número:</th>
        <td>
            <p><input type="number" id="my-guess" min={{ min_guess }} max={{ max_guess }} step={{ step }}>
                <span class="error" id="invalid-guess" style='display:None'>El número introducido es inválido</span></p>
            <button type="button" onclick="sendGuess()" id="btn-guess">Registrar número</button>
        </td>
    </tr>
    <!-- <tr style='visibility:collapse;'>
        <th>Tus números de este período son:</th>
        <td id="my-guesses">(none)</td>
    </tr> -->
</table>

    {{ formfields }}
    <!-- {{ next_button }} -->


<script>
    let my_guess = document.getElementById('my-guess');
    let my_curr_guess = document.getElementById('my-curr-guess');
    let btn_guess = document.getElementById('btn-guess');
    // let my_guesses = document.getElementById('my-guesses');
    let invalid_guess = document.getElementById('invalid-guess');
    
    my_guess.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            sendGuess();
        }
    });

    function sendGuess() {
        valid = my_guess.checkValidity();
        if (valid) {
            liveSend({'type': 'guess', 'player': js_vars.my_id,'guess': my_guess.value})
            btn_guess.disabled = true;
            invalid_guess.style.display = "none"
        }
        else {
            invalid_guess.style.display = "block"
        }
        my_guess.value = '';
    }

    function cu(amount) {
        return `${amount} points`;
    }

    function liveRecv(data) {

        // my_guesses.innerText = data['guesses'];
        my_curr_guess.innerText = data['curr_guess'];
        btn_guess.disabled = false;

        /*if ('finished' in data) {
            document.getElementById('form').submit();
        }*/
    }

    window.addEventListener('DOMContentLoaded', (event) => {
        liveSend({'type': 'request', 'player': js_vars.my_id});
    });

</script>


{{ endblock }}