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;
}