Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Placar não é mostrado ao iniciar pagina

Segue abaixo o código do placar.

$("#botao-placar").click(mostraPlacar);
$("#botao-sync").click(sincronizaPlacar);

function inserePlacar(){
      var corpoTabela = $(".placar").find("tbody");
      var usuario = "kadu";
      var numPalavras = $("#contador-palavras").text();

      var linha = novaLinha(usuario,numPalavras);
      linha.find(".botao-remover").click(removeLinha);

      corpoTabela.prepend(linha);
      $(".placar").slideDown(500);
      scrollPlacar();
}


function scrollPlacar() {
  var posicaoPlacar = $(".placar").offset().top;
  console.log(posicaoPlacar);
  $(".body").animate(
    {
    scrollTop: posicaoPlacar+"px"
  },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();
    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,
       palavras: 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.palavras);
       linha.find(".botao-remover").click(removeLinha);
       $("tbody").append(linha);
    });
  });
}
7 respostas
var tempoInicial = $("#tempo-digitacao").text();
var campo = $(".campo-digitacao");

$(function(){
  atualizaTamanhoFrase();
  inicializaContadores();
  incializaCronometro();
  incializaMarcadores();
  $("#botao-reiniciar").click(reiniciaJogo);
  atualizaPlacar();
});

function atualizaTempoInicial(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 incializaCronometro() {
   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.toggleClass("campo-desativado");
   inserePlacar();
 }

function incializaMarcadores(){
  campo.on("input", function(){
    var frase = $(".frase").text();
    var digitado = campo.val();
    var comparavel = frase.substr(0,digitado.length);
    if (digitado == comparavel){
       campo.addClass("borda-verde");
       campo.removeClass("borda-vermelha");
    }else{
      campo.addClass("borda-vermelha");
      campo.removeClass("borda-verde");
    }
  });
}

function reiniciaJogo(){
    campo.attr("disabled",false);
    campo.val("");
    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");
    $("#tempo-digitacao").text(tempoInicial);
    incializaCronometro();
    campo.toggleClass("campo-desativado");
    campo.removeClass("borda-vermelha");
    campo.removeClass("borda-verde");
}

e tbm o código da pagina inicial

Fala ai Henrique, tudo bem? Consegue compartilhar o projeto completo? Assim eu consigo subir ele por aqui e simular o problema.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Claro posso sim ta aqui o link do google drive: https://drive.google.com/file/d/1HBJeYSLU8eBtMjZoAtAbFyF-4DbcE7oV/view?usp=sharing

solução

Fala ai Henrique, caso você queira mostrar o placar assim que carregar o app, você pode chamar a função mostraPlacar() dentro da função de load do projeto:

$(function(){
  atualizaTamanhoFrase();
  inicializaContadores();
  incializaCronometro();
  incializaMarcadores();
  $("#botao-reiniciar").click(reiniciaJogo);
  atualizaPlacar();
  mostraPlacar()
});

Repare que a última função é a mostraPlacar (que eu adicionei).

Espero ter ajudado.

Ajudou sim, muito obrigado

Magina, sempre que precisar não deixe de criar suas dúvida.

Abraços e bons estudos.

Magina, sempre que precisar não deixe de criar suas dúvida.

Abraços e bons estudos.