Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
na hora de salvar o placar com o post eu consigo salvar mais tem algo de errado com o meu codigo alem dos meus placares ele esta salvando um objeto em branco exemplo: fiz uma jogada de 2 pontos era para aparecer apenas
[{"usuario":"Guilherme","pontos":"2","_id":"VpIhPwhK6U6ZGobe"}mas esta aparecendo assim
[{"usuario":"Guilherme","pontos":"2","_id":"VpIhPwhK6U6ZGobe"},{"usuario":"","pontos":"","_id":"zgZ0Co5gCVVmQaeV"}]
Aqui esta o codigo
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");
})
}alguem me ajuda pfv
Oi Fabio, tudo bem? Cola o HTML pra mim ver uma coisa por favor?
claro Wanderson Obrigado pela atencão
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Alura Typer</title>
<link rel="stylesheet" href="css/libs/materialize.min.css">
<link rel="stylesheet" href="css/libs/google-fonts.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="container">
<h1 class="center">Alura Typer</h1>
<p class="frase center">Esta frase tem oito lindas e belas palavras
<div class="center">
<img src="img/spinner.gif" alt="Spinner" id="spinner">
<p id="erro">Ocorreu um erro, por favor tente novamente</p>
</div>
<ul class="informacoes center">
<li>
<i class="small material-icons icones">description</i>
<span id="tamanho-frase">30</span> palavras
</li>
<li>
<i class="small material-icons icones">query_builder</i>
<span id="tempo-digitacao">1</span> segundos
</li>
</ul>
<textarea class="campo-digitacao" rows="8" cols="40"></textarea>
<div class="botoes">
<a class="btn-floating btn-large waves-effect waves-light red" id="botao-reiniciar"><i class="material-icons">restore</i>
</a>
<a class="btn-floating btn-large waves-effect waves-light green" id="botao-placar"><i class="material-icons">assignment</i>
</a>
<a class="btn-floating btn-large waves-effect waves-light blue" id="botao-frase"><i class="material-icons">shuffle</i>
</a>
<a class="btn-floating btn-large waves-effect waves-light cyan" id="botao-frase-id"><i class="material-icons">repeat_one</i>
</a>
<input type="number" id="frase-id" min="0">
<a class="btn-floating btn-large waves-effect waves-light yellow" id="botao-sync"><i class="material-icons">swap_vert</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>
</tr>
</tbody>
</table>
</section>
</div>
<script src="js/jquery.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/main.js"></script>
<script src="js/placar.js"></script>
<script src="js/frase.js"></script>
</body>
</html>E o restante do código javascript também? Quero ver como ele insere os jogadores na tabela por exemplo...
$("#botao-placar").click(mostraPlacar);
$("#botao-sync").click(sincronizaPlacar);
function inserePlacar(){
var corpotabela = $(".placar").find("tbody");
var usuario ="Guilherme";
var numPalavras = $("#contador-palavras").text();
var linha = novaLinha(usuario, numPalavras);
linha.find(".botao-remover").click(removeLinha);
corpotabela.prepend(linha);
$(".placar").slideDown(800);
scrollPlacar();
}
function scrollPlacar(){
var posicaoPlacar = $(".placar").offset().top;
$("body").animate(
{
scrollTop: posicaoPlacar+"px"
},1200);
}
function novaLinha(usuario,numPalavras){
var linha = $("<tr>");
var colunaUsuario = $("<td>").text(usuario);
var colunaPalavras = $("<td>").text(numPalavras);
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(600);
setTimeout(function(){
linha.remove();
},600);
}
function mostraPlacar (){
$(".placar").stop().slideToggle(800);
}
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");
})
}Fabio, testa pra mim se, recomendo o tr dentro do do tbody o jogo continua funcionando e se o problema é resolvido, por favor?
<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> <-------
</tr>
</tbody>voce fala esse tr aqui? removi, o jogo funciona mas o erro persiste :(
Estranho, não consigo encontrar o problema assim no olho, me disponibiliza seu projeto no github ou em algum lugar por favor?
voce pode me passar seu email? Envio todo o projeto para voce dar uma olhada
wanderson.sabino@alura.com.br
Fabio, desculpa a demora, mas testei aqui e tenho uma hipótese, acontece que talvez esse usuário em branco já esteja em seu banco.
Outra coisa que achei estranho é que o post está dentro de um loop e nesse loop você tem um push no array de platar e está sempre enviando esse objeto novamente, a dica é que você faça o loop e depois dele faça um post só com todos os dados.
O que estava assim:
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
};
console.log(dados);
$.post("http://localhost:3000/placar", dados, function(){
console.log("SALVOU");
});
});
}fica assim:
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 problema que pode ter acontecido é que, quando você tinha uma tr em branco no HTML, na hora de fazer o sinc, ele foi pego e enviado para o servidor.
Minha recomendação é: apaga o data.db na pasta servidor, reinicia o jogo com essa alteração e tenta novamente.