Seguem os codigos
main.js
var tempoInicial = $("#tempo-digitacao").text();
var campo = $(".campo-digitacao");
$(function(){
atualizaTamanhoFrase();
inicializaContadores();
inicializaCronometro();
inicializaMarcadores();
$("#botao-reiniciar").click(reiniciaJogo);
atualizaPlacar();
});
function atualizaTempo(tempo){
tempoInicial = tempo;
$("#tempo-digitacao").text(tempo);
}
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 qtdPalavras = conteudo.split(/\S+/).length -1;
$("#contador-palavras").text(qtdPalavras);
var qtdCaracteres = conteudo.length
$("#contador-caracteres").text(qtdCaracteres)
});
}
function inicializaMarcadores(){
campo.on("input", function(){
var frase = $(".frase").text();
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 inicializaCronometro(){
campo.one("focus", function(){
var tempoRestante = $("#tempo-digitacao").text();
var cronometroID = setInterval(function(){
tempoRestante--;
$("#tempo-digitacao").text(tempoRestante);
if (tempoRestante < 1){
clearInterval(cronometroID);
finalizaJogo();
}
},1000);
});
}
function finalizaJogo(){
campo.attr("disabled", true);
campo.addClass("campo-desativado");
inserePlacar();
}
function reiniciaJogo(){
campo.attr("disabled", false);
campo.val("");
$("#contador-palavras").text("0");
$("#contador-caracteres").text("0");
$("#tempo-digitacao").text(tempoInicial);
inicializaCronometro();
campo.removeClass("campo-desativado");
campo.removeClass("campo-correto");
campo.removeClass("campo-errado");
console.log("vezes cliquei no botão reiniciar")
}
placar.js
$("#botao-placar").click(mostraPlacar);
$("#botao-sync").click(sincronizaPlacar);
function inserePlacar(){
var corpoTabela = $(".placar").find("tbody");
var usuario = "Juliano";
var numPalavras = $("#contador-palavras").text();
var linha = novaLinha(usuario, numPalavras);
linha.find(".botao-remover").click(removeLinha);
corpoTabela.append(linha);
$(".placar").slideDown(500);
console.log("repete a cada clique no botao reiniciaJogo!!!");
scrollPlacar();
}
function scrollPlacar(){
var posicaoPlacar = $(".placar").offset().top;
$("html, body").animate(
{
scrollTop: posicaoPlacar
},1000);
}
function novaLinha(usuario, palavras){
var linha = $("<tr>");
var colunaUsuario = $("<td>").text(usuario);
var colunaPalavras = $("<td>").text(palavras);
var colunaRemover = $("<td>");
var link = $("<a>").addClass("botao-remover").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;
}
function removeLinha(){
event.preventDefault();
var linha = $(this).parent().parent();
linha.fadeOut(1000);
setTimeout(function(){
linha.remove();
}, 1000);
}
function mostraPlacar(){
$(".placar").stop().slideToggle(600);
}
function sincronizaPlacar(){
var placar = [];
var linhas = $("tbody>tr");
linhas.each(function(){
var usuario = $(this).find("td:nth-child(1)").text();
var palavras = $(this).find("td:nth-child(2)").text();
var score = {
usuario: usuario,
pontos: palavras
};
placar.push(score);
});
var dados = {
placar: placar
};
$.post("http://localhost:3000/placar",dados,function(){
console.log("salvou o placar no servidor");
});
}
function atualizaPlacar(){
$.get("http://localhost:3000/placar", function(data){
$(data).each(function(){
var linha = novaLinha(this.usuario, this.pontos);
linha.find(".botao-remover").click(removeLinha);
$("tbody").append(linha);
});
});
}