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

A validação do campo (verde para certo e vermelho para errado) parou de funcionar após adicionar a função fadeOut

Quando inicio o jogo pela primeira vez, a validação funciona, ficando verde quando esta certo e vermelho quando esta errado. Porém, depois de reiniciar o jogo, todos os input's que faço no campo dão como errado, ou seja, exibem a borda vermelha, mesmo se tudo estiver correto. Ficaria muito agredecido pela ajuda.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
    <link rel="stylesheet" href="css/libs/materialize.min.css" >
    <link rel="stylesheet" href="css/libs/google-fonts.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <div class="container">

        <h1 class="center" >Alura Typer</h1>
        <p class="frase center">teste de palavras</p>

        <ul class="informacoes center">
            <li>
                <i class="small material-icons icones">description</i>
                <span id="tamanho-frase">1</span> palavras
            </li>
            <li>
                <i class="small material-icons icones">query_builder</i>
                <span id="tempo-digitacao">3</span> segundos
            </li>
        </ul>

        <textarea class="campo-digitacao" rows="8" cols="40" ></textarea>

        <div class="botoes">
            <a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red" >
                <i class="material-icons">restore</i>
            </a>

            <a class="btn-floating btn-large waves-effect waves-light red"  >
                <i class="material-icons">add</i>
            </a>

            <a id="botao-placar" class="btn-floating btn-large waves-effect waves-light green" >
                <i class="material-icons">assignment</i>
            </a>

        </div>       
        <ul class="center" >
            <li><span id="contador-caracteres" >0</span> caracteres</li>
            <li><span id="contador-palavras" >0</span> palavras</li>
        </ul>        
var tempoInicial = $("#tempo-digitacao").text();
$(document).ready(function(){
    console.log("Pagina carregada!")
    var campo = $(".campo-digitacao");
    var botao_reiniciar = $("#botao-reiniciar");
    frase();
    iniciaContadores(campo);
    iniciaCronometro(campo);
    reinicia(botao_reiniciar,campo);
    valida(campo);
})
function frase(){
    var frase = $(".frase").text(); 
    var numPalavras = frase.split(" ").length; 
    $("#tamanho-frase").text(numPalavras);
}
function iniciaContadores(campo){
    campo.on("input", function(){   
        var texto = campo.val();
        var qtdPalavras = texto.split(/\S+/).length - 1;
        $("#contador-palavras").text(qtdPalavras);
        var qtdCaracteres = texto.length;
        $("#contador-caracteres").text(qtdCaracteres);
    });
}
function iniciaCronometro(campo){
    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 === 0){
                clearInterval(cronometroID);
                finalizaJogo(campo);
            }
        }, 1000)
    });
}
function finalizaJogo(campo){
    campo.attr("disabled", true);
    campo.addClass("campo-desabilitado");
    $("#botao-reiniciar").attr("disabled", false);
    insereNoPlacar();
}
function valida(campo){
    var frase = $(".frase").text();
    campo.on("input", function(){
        var digitado = campo.val();
        var comparavel = frase.substr(0,digitado.length);
        if (digitado === comparavel){
            campo.addClass("campo-correto");
            campo.removeClass("campo-errado");
        } else{
            campo.addClass("campo-errado");
            campo.removeClass("campo-correto");
        }
    });
}

function reinicia(botao,campo){
    botao.on("click", function(){
        campo.attr("disabled", false);
        campo.val(" ");
        $("#contador-palavras").text("0");
        $("#contador-caracteres").text("0");
        $("#tempo-digitacao").text(tempoInicial);
        campo.removeClass("campo-desabilitado"); 
        campo.removeClass("campo-correto");
        campo.removeClass("campo-errado");
        iniciaCronometro(campo);
    })
}
.campo-digitacao{
    font-size: 20px;
    height: 130px;
    border: 3px solid black;
}

.frase{
    font-size: 20px;

}

.campo-desabilitado{
    background-color: lightgray;
}

.campo-habilitado{
    background-color: white;
}

.icones{
    vertical-align: middle;
}

.campo-correto{
    border: 3px solid green;
}

.campo-errado{
    border: 3px solid red;
}

.placar{
    display: none;
}

body{
    overflow: scroll;/*Ja deixa o lugar do scroll separado*/
}
2 respostas

Quando dou "console.log(comparavel)", na variável "comparavel", de primeira, tudo acontece como o esperado. Porém, quando reinicio o jogo pelo botao, aparentemente a variavel "comparável" começa de um jeito estranho. Ao digitar a primeira letra, a letra "t", no console aparece "es". Na primeira vez em que o jogo é executado isso não acontece, apenas na segunda vez quando o jogo é reiniciado pelo botao. Quando reiniciado, ao digitar e dar console.log na variavel comparavel, percebe-se que a variavel sempre pega uma letra a frente.

solução!

Ja achei o erro. Ao reiniciar o jogo, fiz o seguinte:

campo.val(" ");

Só que esqueci que ele atribui um espaço em branco para o campo. Resolvi o problema tirando esse espaço em branco.

campo.val("")