Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Cronômetro reinicia e continua

Quando clico em reiniciar o jogo, acontece duas coisas em paralelo, o botão reinicia a contagem para 10, porém a contagem que estava sendo regredida continua, e o cronômetro fica alternando entre o cronômetro parado e o que estava regredindo.

var tempoInicial = $('#tempo-digitacao').text();
var campo = $('.campo-digitacao');

$(function() {
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaMarcadores();
    $('#botao-reiniciar').click(reiniciaJogo);
})

function atualizaTamanhoFrase() {
    var frase = $(".frase").text();
    var numPalavras = frase.split(" ").length;
    var tamanhoFrase = $("#tamanho-frase");
    tamanhoFrase.text(numPalavras);
}

function inicializaContadores() {
    campo.on('input', function() {
        var conteudo = campo.val()
        var conteudoSemEspaco = conteudo.replace(/\s+/g, '');
        var qtdPalavras = conteudo.split(/\S+/).length - 1;
        $('#contador-palavras').text(qtdPalavras);
        var qtdCaracteres = conteudoSemEspaco.length;
        $('#contador-caracteres').text(qtdCaracteres);
    });
}

function inicializaCronometro() {
    var tempoRestante = $('#tempo-digitacao').text();
    campo.one('focus', function() {
        $('#botao-reiniciar').attr('disabled', true);
        var cronometroID = setInterval(function() {
            tempoRestante--;
            $('#tempo-digitacao').text(tempoRestante);
            if (tempoRestante < 1) {
                finalizaJogo();
                clearInterval(cronometroID);
            }
        }, 1000)
    });
}

function finalizaJogo() {
    campo.attr('disabled', true);
    campo.toggleClass('campo-desativado');
    if (campo.hasClass('borda-verde')) {
        inserePlacar();
    } else {
        alert('Sua frase não está igual!')
        reiniciaJogo();
    }

}

function reiniciaJogo() {
    campo.attr('disabled', false);
    campo.val('');
    campo.removeClass('campo-desativado');
    $('#contador-palavras').text('0');
    $('#contador-caracteres').text('0');
    $('#tempo-digitacao').text(tempoInicial);
    inicializaCronometro();
    campo.removeClass('campo-desativado');
    campo.removeClass("borda-vermelha");
    campo.removeClass("borda-verde");
};

function inicializaMarcadores() {
    campo.on('input', function() {
        var frase = $('.frase').text();
        var digitado = campo.val();
        if (frase.startsWith(digitado)) {
            campo.addClass("borda-verde");
            campo.removeClass("borda-vermelha");
        } else {
            campo.addClass("borda-vermelha");
            campo.removeClass("borda-verde");
        }      
    });
}
1 resposta
solução!

Então, percebi na continuidade do curso que o botão deverá ser desabilitado para não haver possibilidade de clicar enquanto o cronômetro roda.

Da forma apresentada no código da aula, não deu certo, pois o botão não desabilitava, fiz dessa forma:

function inicializaCronometro() {
    var tempoRestante = $('#tempo-digitacao').text();
    campo.one('focus', function() {
        $('#botao-reiniciar').css("visibility", "hidden");
        var cronometroID = setInterval(function() {
            tempoRestante--;
            $('#tempo-digitacao').text(tempoRestante);
            if (tempoRestante < 1) {
                finalizaJogo();
                clearInterval(cronometroID);
                $("#botao-reiniciar").css("visibility", "visible");
            }
        }, 1000)
    });
}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software