var texto = `O voo das abelhas é um dos fenômenos mais fascinantes da natureza. Pequenas e incansáveis, elas percorrem grandes distâncias todos os dias para coletar néctar e pólen, essenciais para a produção de mel e para a polinização das plantas. Apesar do tamanho diminuto, as asas das abelhas batem aproximadamente duzentas vezes por segundo, permitindo que elas voem com agilidade e precisão mesmo em condições de vento.

O que torna esse voo ainda mais impressionante é a habilidade de orientação das abelhas. Elas usam o sol como ponto de referência e conseguem calcular a posição dele mesmo em dias nublados, graças à percepção da luz polarizada. Além disso, memorizam pontos de referência no caminho, como árvores, pedras e cores das flores, criando um verdadeiro mapa mental da região.

Quando uma abelha encontra uma boa fonte de néctar, ela retorna à colmeia e realiza a famosa “dança das abelhas”. Nessa dança, o movimento e a inclinação do corpo indicam a direção e a distância da comida em relação à colmeia. Esse sistema de comunicação é tão eficiente que toda a colônia pode se beneficiar da descoberta em poucos minutos.

Graças a essa combinação de força, orientação e cooperação, as abelhas desempenham um papel vital para a vida na Terra, garantindo a reprodução de milhares de espécies de plantas e contribuindo diretamente para a nossa alimentação. Sem elas, muitos ecossistemas simplesmente não sobreviveriam.`


$(`#digit_area`).remove()
$('body').append(`
	<div id="digit_area" onclick='$("#digit_area input")[0].focus()'>
    	<div class="actual_key">
        	<span>-</span>
        </div>
    	<div class="text">${texto}</div>
        <div class="text_view"><b></b>${texto}</div>
        <input type='text' onkeydown="digitou()">
        <audio id="sound_false" src="snd/false.mp3" preload="auto"></audio>
        <div class="percentual">
        	<span>100.00%</span>
        </div>
    </div>
`)

$("#digit_area input")[0].focus()

var index_digit_area = -1

function digitou(){
    ev = event
    if( ev.key == "Shift" || ev.key == "Dead" ){
        return
    }
    console.log(ev.key)
    index_digit_area++


    var parte1 = $(`#digit_area .text`).text().slice(0,index_digit_area)

    var parte2 = $(`#digit_area .text`).text().slice(index_digit_area, -1)

    var status = false

    if( parte2[0] == ev.key ){
        status = true
    }else{
        playSoundTwice()
        $(`#digit_area .percentual span`).text((100 - ($(`#digit_area .text_view b .false`).length / $(`#digit_area .text_view`).text().length * 100)).toFixed(2)+"%")
    }

    var parte1_html = $(`#digit_area .text_view b`).html() + `<g class="${status}">${parte2[0]}</g>`

    $(`#digit_area .actual_key`).text((parte2[1] == " ") ? "Espaço" : parte2[1])


    $(`#digit_area .text_view`).html(`<b>${parte1_html}</b><d class="last">${parte2[0]}</d><span>${parte2.slice(1,-1)}</span>`)

    $(`#digit_area input`).val("")

}


var playSoundTwice = function() {
    var audio1 = document.getElementById('sound_false');
    audio1.currentTime = 0;
    audio1.play();

    var audio2 = audio1.cloneNode(); // cria nova instância
    audio2.play();
    $(`#digit_area .actual_key`).addClass("false")
    setTimeout(function(){
        $(`#digit_area .actual_key`).removeClass("false")
    }, 500)
}