var tempoInicial = $("#tempo-digitacao").text();
//selecionado o campo textarea
var campo = $(".campo-digitacao");
//funcao q chamo outras funcoes depois que a pagina foi carregada
$(document).ready(function(){ // atalho $(function(){}
atualizaTamanhoFrase();
inicializaContadores();
inicializaCronometro();
inicializaMarcadores();
$("#botao-reiniciar").click(reiniciaJogo); // chamando a funcao reinica jogo quando clicar no botao
});
function atualizaTamanhoFrase(){
//selecionando com jQuery
var frase = jQuery(".frase").text(); // jQuery = $ atalho
var numPalavras = frase.split(" ").length; // separa as palavras por espaco dentro de um array e mostra qtd de palavras com .length
// console.log(numPalavras);
var tamanhoFrase = $("#tamanho-frase"); // pegando o conteudo do span atraves do id
tamanhoFrase.text(numPalavras); //troca o valor do span com o numero de palavras
}
function inicializaContadores(){
campo.on("input", function(){ //evento input é executado enquanto é digitado um valor no input
var conteudo = campo.val(); // pega o valor do input
var qtdPalavras = conteudo.split(/\S+/).length -1; //regexp para contar so um espaco -1
$("#contador-palavras").text(qtdPalavras);
var qtdCaracteres = conteudo.length; // contando caracteres da string q esta dentro do input
$("#contador-caracteres").text(qtdCaracteres);
});
}
function inicializaCronometro(){
//funcao game-over
var tempoRestante = $("#tempo-digitacao").text(); // pegando o conteudo do span
campo.one("focus", function(){ // seleciona o textarea por click ou por tab //funcao one só executa uma vez
var cronometroID = setInterval(function(){ // funcao retorna seu id
tempoRestante--;
$("#tempo-digitacao").text(tempoRestante); // alterando o conteudo do span a cada 1 segundo
if(tempoRestante < 1){
clearInterval(cronometroID); // quando tempo for menor q 1 o set interval para de funcionar
finalizaJogo();
}
},1000); // a cada 1 segundo o valor do spam é decrementado
});
}
function finalizaJogo(){
campo.attr("disabled",true);
// campo.css("background-color","lightgray"); // alterando o css do textarea
campo.addClass("campo-desativado"); // adicionado a classe do css com o fundo cinza
inserePlacar();
}
function inicializaMarcadores(){
var frase = $(".frase").text();
campo.on("input",function(){
var digitado = campo.val();
var comparavel = frase.substr(0,digitado.length); // pega o tanto q foi digitado
if(digitado == comparavel){
campo.addClass("borda-verde");
campo.removeClass("borda-vermelha");
}else{
campo.addClass("borda-vermelha");
campo.removeClass("borda-verde");
}
});
}
function inserePlacar(){
var corpoTabela = $(".placar").find("tbody"); // .find procura por um elemento filho de outro elemento
var usuario = "Lucas";
var numPalavras = $("#contador-palavras").text(); // selecionado o span com as palavras
// var botaoRemover = "<a href='#'><i class='small material-icons'>delete</i></a>"
var linha = novaLinha(usuario,numPalavras);
linha.find(".botao-remover").click(removeLinha);
// "<tr>"+
// "<td>" + usuario + "</td>"+
// "<td>" + numPalavras + "</td>"+
// "<td>" + botaoRemover + "</td>"+
// "</tr>";
corpoTabela.prepend(linha); // adicionando linha no comeco da tabela
}
function novaLinha(usuario,palavras){ // recebendo usuario da function insere placar // rec numPalavras
var linha = $("<tr>"); // criando um elemtento html
var colunaUsuario = $("<td>").text(usuario);
var colunaPalavras = $("<td>").text(palavras);
var colunaRemover = $("<td>");
var link = $("<a>").attr("href","#").addClass("botao-remover");
var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");
link.append(icone); // adicionado tag i dentro de <a>
colunaRemover.append(link); // colocando tag <a> dentro da <td>
//colocando as td dentro da tr
linha.append(colunaUsuario);
linha.append(colunaPalavras);
linha.append(colunaRemover);
return linha;
}
function removeLinha(event){
event.preventDefault();
$(this).parent().parent().remove(); // removendo o pai do pai do elemento <a>
}
function reiniciaJogo(){
campo.attr("disabled", false) //removendo o disable do text area com false
campo.val(""); // limpa conteudo do textarea
$("#contador-caracteres").text("0"); // zerando contadores
$("#contador-palavras").text("0");
$("#tempo-digitacao").text(tempoInicial);
inicializaCronometro();
campo.removeClass("campo-desativado");
campo.removeClass("borda-vermelha");
campo.removeClass("borda-verde");
}