{{ 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.session.config.show_round_number %}

    <h3> Estás en el 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>Estás en el período:</th>
        <td id="period">1</td>
    </tr>
    <tr>
        <th>Tu 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');
    let period = document.getElementById('period')
    let server_elapsed_time
    let load_time
    let period_timer
    let curr_period=1
    let timer_milisecs = 1000

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

    function sendGuess() {
        if (btn_guess.disabled) {
            return
        }
        valid = my_guess.checkValidity() && my_guess.value != '';
        if (valid) {
            liveSend({'type': 'guess', 'player': js_vars.my_id, 'guess': my_guess.value, 'period': curr_period})
            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_curr_guess.innerText = data['curr_guess'];
        btn_guess.disabled = data['blocked_guesses'];
    }

    function updatePeriod() {
        let elapsed_time = server_elapsed_time + timeStamp() - load_time
        let index = js_vars.accum_durations.findIndex(function(x) {return x > elapsed_time;});
        let period_changed = (curr_period < index + 1)
        curr_period = index + 1
        period.innerHTML = curr_period
        if (period_changed && my_curr_guess.innerText == "") {
            liveSend({'type': 'period1_ended', 'player': js_vars.my_id})
        }
        period_timer = setTimeout(updatePeriod, timer_milisecs)
    }

    function timeStamp() {
        return Math.floor(Date.now() / timer_milisecs)
    }

    window.addEventListener('DOMContentLoaded', (event) => {
        load_time = timeStamp()
        server_elapsed_time = js_vars.elapsed_time
        updatePeriod()
        liveSend({'type': 'loaded', 'player': js_vars.my_id})
        // liveSend({'type': 'request', 'player': js_vars.my_id, 'period': curr_period});
    });

</script>


{{ endblock }}