eu notei que quando eu carrego a página e faço o primeiro jogo são adicionados 2 usuários de uma vez só na tabela, e também não consigo remover o usuário que deixamos fixo no html, mas consigo remover os novos.
placar.js
// função que insere o jogador na tabela com sues pontos conquistados
function inserePlacar(){
var corpoTabela = $(".placar").find("tbody");
var usuario = "André Vieira";
var numPalavras = $("#contador-palavras").text();
var linha = novaLinha(usuario,numPalavras);
linha.find(".botao-remover").click(removeLinha);
corpoTabela.prepend(linha);
}
// cria linhas e colunas passando os jogadores através do javascript direto no html
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);
console.log(linha);
return linha;
}
//função para remover linha
function removeLinha(event){
event.preventDefault();//segura o evento de subir a páginas ao clicar no botão
$(this).parent().parent().remove();//selecionando o pai do pai para remover
}main.js
//seleciona o tempo inicia que está definido no html e passa seu valor para está variável
var tempoInicial = $("#tempo-digitacao").text();
//selecionando o textarea e passando seu valor para variável
var campo = $(".campo-digitacao");
// inicializa todas as functions
$(function(){
atualizaTamanhoFrase();
inicializaContadores();
inicializaCronometro();
inicializaMarcadores();
$("#botao-reiniciar").click(reiniciaJogo);
});
function atualizaTamanhoFrase(){
// pega classe frase do html e o seu conteúdo
var frase = $(".frase").text();
// quebra a frase onde tem espaços em branco colocando em um array
var numPalavras = frase.split(" ").length;
//pega id html e passa seu conteúdo para a variável
var tamanhoFrase = $("#tamanho-frase");
// coloca o valor de numPlavaras em tamanhoFrase
tamanhoFrase.text(numPalavras);
}
function inicializaContadores(){
//criando uma funcção que detecta os caractéres e a quantidade de plavras no textarea
campo.on("input",function(){
var conteudo = campo.val();
//expressao regular para corrigir a falha nos spaces e a quantidade de palvaras
var qtdPalavras = conteudo.split(/\S+/ ).length-1;
$("#contador-palavras").text(qtdPalavras);
var qtdCaracteres = conteudo.length;//passa o tamanho da variável para qtdCaracteres
$("#contador-caracteres").text(qtdCaracteres);
});
}
function inicializaCronometro(){
//pega o valor de texto no html e passa para variável
var tempoRestante = $("#tempo-digitacao").text();
//função que foca no textarea e decrementa o tempo
campo.one("focus",function(){
// criando um ID para setInterval
var cronometroID = setInterval(function(){
tempoRestante --;
// o tempoRestante e passado para o html e vai decremetnando
$("#tempo-digitacao").text(tempoRestante);
//condicional para desabilidar o textarea no html
if (tempoRestante < 1) {
clearInterval(cronometroID);
finalizaJogo();
}
},1000);//milisegundos
});
}
function finalizaJogo(){
campo.attr("disabled",true); // atribuie o html como disabled
//classe do css para mudar a cor quando desativar o textarea
campo.addClass("campo-desativado");
inserePlacar();
}
// essa função e responsável por comparar o texto e o digitado se está
// certo ou não retornando a borda verde ou vermelha
function inicializaMarcadores(){
var frase = $(".frase").text();
campo.on("input", function(){
var digitado = campo.val();
if (frase.startsWith(digitado)) {
campo.addClass("borda-verde");
campo.removeClass("borda-vermelha");
}else{
campo.addClass("borda-vermelha");
campo.removeClass("borda-verde");
}
});
}
//function que permite clicar no botão reiniciar e o tempo voltar ao seu estádo original
//, limpar o campo de digitação e zerar os contadores de palvaravras e caracteres
function reiniciaJogo(){
//como o campo estava desabilitado agora eu habilito novamente
campo.attr("disabled",false);
//deixa o campo textarea seu valor em branco
campo.val("");
//os contadores seram =0 ao usar o botão reiniciar
$("#contador-palavras").text("0");
$("#contador-caracteres").text("0");
$("#tempo-digitacao").text(tempoInicial);
// aqui eu chamo a function resposável por fazer o tempo decrementar
//, quando houver seleção no campo textarea.
inicializaCronometro();
//remove o css do textearea deixando o background padrão
campo.removeClass("campo-desativado");
campo.removeClass("borda-vermelha");
campo.removeClass("borda-verde");
}principal.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/libs/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/libs/google-fonts.css">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>Game Typer</title>
</head>
<body>
<div class="container">
<h1 class="center">Game Typer</h1>
<p class="frase center">esta frase tem cinco palavras</p>
<ul class="informacoes center">
<li>
<i class="small material-icons icons">description</i>
<span id="tamanho-frase">0</span> palavras
</li>
<li>
<i class="small material-icons icons">query_builder</i>
<span id="tempo-digitacao">2</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="small material-icons">restore</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>
<section class="placar">
<h3 class="center">Placar</h3>
<table class="centered bordered">
<thead>
<tr>
<th>Nome</th>
<th>No. de palavras</th>
<th>Remover</th>
</tr>
</thead>
<tbody>
<tr>
<td>André</td>
<td>99</td>
<td>
<a href="#" class="botao-remover">
<i class="small material-icons">delete</i>
</a>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="materialize.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/placar.js"></script>
</body>
</html>
