1
resposta

Meu placar duplica quando é inserido a primeira vez

Já reescrevi o código duas vezes. Tudo está muito a contento. O único problema que não consigo achar é o motivo pela qual na primeira vez que insiro o placar ele duplica. Depois fica normal. Tudo funciona, mas ele duplica segue o main.js. pra facilitar ou dificultar..rsrsr o código js está todo junto.

`

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


$(function(){
    atualizaTamanhoDeFrase();
    atualizaMarcadores();
    inicializaCronometro();
    $("#botao-reinicia").click(reiniciaJogo);
    inicializaMarcadores();
})

function atualizaTamanhoDeFrase(){
    var frase = $(".frase").text();
    var numPalavras = frase.split(" ").length -1;
    $(".tamanho-frase").text(numPalavras);
}

function atualizaMarcadores(){
    campo.on("input",function(){
        var conteudo = campo.val();
       var numPalavras = conteudo.split(" ").length -1;
       $(".contador-palavras").text(numPalavras);
       var numCaracteres = conteudo.length;
       $(".contador-caracteres").text(numCaracteres)
    });
}

function inicializaCronometro(){
    var tempoInicial = $(".tempo-digitacao").text();
    campo.one("focus", function(){
        var tempoFinal = setInterval(function(){
            tempoInicial--;
            $(".tempo-digitacao").text(tempoInicial);
            if(tempoInicial<1){
                clearInterval(tempoFinal);
                finalizarJogo();
            }
        },1000)
    })
}

function finalizarJogo(){
    campo.attr("disabled", true);
    campo.addClass("cinza")
    campo.removeClass("borda-vermelha")
    campo.removeClass("borda-verde")
    inserePlacar();
}


function reiniciaJogo(){
    campo.attr("disabled", false);
    campo.removeClass("cinza");
    campo.val(" ")
    console.log("Deu certo")
    $(".contador-palavras").text(0);
    $(".contador-caracteres").text(0)
    $(".tempo-digitacao").text(tempoInicial);
    inicializaCronometro();
};


function inicializaMarcadores(){

    var frase = $(".frase");

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


        if(digitado==comparavel){
            campo.removeClass("borda-vermelha")
           campo.addClass("borda-verde")
        }else{
            campo.removeClass("borda-verde")
            campo.addClass("borda-vermelha")
        }
    })
}

function inserePlacar(){
    var corpoTabela = $(".placar").find("tbody");
    var usuario = "Marco Aurélio";
    var numPalavras = $(".contador-palavras").text();
    var linha = novaLinha(usuario, numPalavras);
    $(".remove-botao").click(removeLinha)
    corpoTabela.append(linha);
}

function removeLinha(event){
    event.preventDefault()
    $(this).parent().parent().remove();
}

function novaLinha(usuario, palavras){
    var linha = $("<tr>");

    var colunaUsuario = $("<td>").text(usuario)
    var colunaPalavras =$("<td>").text(palavras);
    var colunaRemover = $("<td>");

    var link = $("<a>").addClass("remove-botao").attr("href","#")
    var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");

    link.append(icone);
    colunaRemover.append(link)

    linha.append(colunaUsuario);
    linha.append(colunaPalavras);
    linha.append(colunaRemover);

    return linha;

}
1 resposta

Oi Valmyr tudo bem?

Poderia colocar o projeto (arquivos dentro de cada respectiva pasta) no github para podermos analisar melhor. Por gentileza.