Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Bug de Campo

Quando o tempo acaba e eu reinicio, eu clico no campo mas ele bloqueia novamente como se o tempo já tivesse acabado. Se eu recarregar a pagina consigo jogar o jogo normal mas uma unica vez. Me ajuda ae.

var tempoInicial = $("#tempo-digita").text();
var campo = $(".campo-digitacao");// pegando o campo

$(document).ready(function(){ //  função do jQuery que aguarda 
    //a página ser carregada e depois executa seu conteúdo
    console.log("Pagina Carregada");

    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaMarcadores();
    $(".restart").click(reiniciaJogo); //A função .click() é
    // uma função de atalho para a função .on("click", 
});

function atualizaTamanhoFrase() {
    var frase = $(".frase").text(); // pegando o texto do elemento
        // .frase
    var numPalavras = frase.split(" ").length; // quebrando a frase onde houver
                //  espaços e
                // pegando sua "largura"
    var tamanhoFrase = $("#tamanho-frase"); // pegando o elemento #tamanho-frase
    tamanhoFrase.text(numPalavras); // Editando o conteudo do elemento

}

function inicializaContadores() {
    campo.on("input" , function(){// função quando for digitado algo
        var conteudo = campo.val();// val() serve para inputs
        $("#contador-caracteres").text(conteudo.length);

        var quantidadeP = conteudo.split(/\S+/).length - 1;//split()
                            // devolve um array portanto usamos .length
        $("#contador-palavras").text(quantidadeP);
    });
};

function inicializaCronometro() {
    var tempo = $("#tempo-digita").text();
    campo.focus(function() {
    $(".restart").attr("disabled" , true);
        var cronometroId = setInterval(function(){
            tempo --;
            $("#tempo-digita").text(tempo);

            if (tempo < 1) {
                campo.attr("disabled", true);//Como disabled nao tem valor
                                            // precisa atribuir o true
                $(".restart").attr("disabled" , false);
                campo.addClass("campo-desativado");
                clearInterval(cronometroId);
            }else if (tempo < 0 ){
                tempo = tempoInicial;
            }
        } , 1000);
    });
};

function inicializaMarcadores(){
    var frase = $(".frase").text();
    campo.on("input" , function(){
        var digitado = campo.val();
        var comparavel = frase.substr(0 , digitado.length);

        if (digitado == comparavel){
            console.log("Certo");
            campo.addClass("borda-verde");
            campo.removeClass("borda-vermelho");
        }else{
            console.log("Errado");
            campo.addClass("borda-vermelho");
            campo.removeClass("borda-verde");
        }
    });
}

function reiniciaJogo() {
    campo.removeClass("campo-desativado");
    campo.removeClass("borda-vermelho");
    campo.removeClass("borda-verde");
    $("#tempo-digita").text(tempoInicial);
    campo.val("");
    $("#contador-caracteres").text("0");
    $("#contador-palavras").text("0");
    campo.attr("disabled", false);
    console.log("Reiniciar");
    inicializaCronometro();
}
5 respostas

Fala ai Leonardo, tudo bem? Apenas olhando os códigos é um pouco complicado tentar ajudar ou achar o problema.

Vou te pedir um favor, compartilha o projeto completo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Eae Matheus tranquilo? Ai o link do Drive: https://drive.google.com/open?id=1hIjsl59znDu_3E1fwBOn0IItbnvSAhvq

solução!

Fala Leonardo, dei uma olhada no seu projeto, o problema está nesse if:

} else if (tempo <= 0 ){
    tempo = tempoInicial;
}

Quando ele cai no if anterior:

if (tempo < 1) {}

Ele vai desabilitar o campo, limpar o interval e tals.

Porém, o tempo ainda permanece 0, você não resetou o tempo.

Dai quando clica no botão reinicia, ele vai cair de novo no if (tempo < 1) e vai travar o campo novamente.

Para resolver o problema, remove o else if e após limpar o interval reseta a variavel, a função completa fica assim:

function inicializaCronometro() {
    var tempo = $("#tempo-digita").text();
    campo.focus(function() {
    $(".restart").attr("disabled" , true);
        var cronometroId = setInterval(function(){
            tempo --;
            $("#tempo-digita").text(tempo);

            if (tempo < 1) {
                campo.attr("disabled", true);//Como disabled nao tem valor
                                            // precisa atribuir o true
                $(".restart").attr("disabled" , false);
                campo.addClass("campo-desativado");
                clearInterval(cronometroId);
                tempo = tempoInicial;
            }
        } , 1000);
    });
};

Isso deve resolver o problema.

Espero ter ajudado.

Ae Matheus, eu tinha pensado nessa conclusão também, achei que não daria certo porque a variavel = tempo só havia sido declarada na função inicializaCronometro. Mesmo assim tentei e não consegui e fiz exatamente o mesmo kkkkkk Deve ter havido algum erro sei la. Mesmo assim Obg

Boa Leonardo, acontece kkkkkk

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.