Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Tabela criando duplicado

Quando acaba o tempo aparece 2x o jogador na tabela e não sei como resolver isso

function Cronometro() {
  //evento de focus => quando o input é selecionado independente da maneira, ganhando um foco
  campo.on("focus", function () {
    var frase = $("#frase").text();
    var tempo = $("#tempo").text();

    //setInterval => tudo que estiver dentro da função ele executará no tempo que decidiu
    //1000 = 1s
    var cronometro = setInterval(function () {
      tempo--;

      var digitado = campo.val();
      var comparavel = frase.substr(0, digitado.length);

      $("#tempo").text(tempo);

      if (tempo <= 0) {
        //attr muda o atributo de algo, atributos que não possuem valor possuem parâmetro true ou false
        campo.attr("disabled", true);
        clearInterval(cronometro);
        campo.addClass("campo-desativado");
        inserePlacar();
      }
    }, 1000)

  })
}


$("#botaoPlacar").click(mostraPlacar);
function mostraPlacar() {

  var placar = $(".placar").stop().slideToggle(1000);

}


function inserePlacar() {
  //.find - desce a nodeChild da html procurando pelo que voce especificou no parametro
  var corpoTabela = $("#pontos").find("tbody");

  var usuario = $("#nome").val();

  var numPalavrasJogador = $("#contador-palavras").text();

  var linha = "<tr>" +
    "<td>" + usuario + "</td>" +
    "<td>" + numPalavrasJogador + "</td>" +
    "<td>" + "<a class='removerJogador'>" + "<i class='small material-icons'>" + "backspace" + "</i>" + "</a>" + "</td>" +
    "</tr>"
  ;


  corpoTabela.append(linha);


  jQuery(function (excluir) {
    $("#pontos").on("click", ".removerJogador", function (e) {
      $(this).closest('tr').fadeOut(600);

      setTimeout(function () {
        $(this).closest('tr').remove();
      }, 600)
    });
  });
}
3 respostas

Boa noite, Henrique! Como vai?

Vc poderia mandar o seu código todo para eu dar uma olhada e te ajudar?

Grande abraço e bons estudos!

Vou mandar em 2 partes pra poder caber(parte1)

$(document).ready(function () {
  contaCaracterPalavra();
  Cronometro();
  botao.click(reiniciaJogo);
  reiniciaJogo();
  mudaMarcadores();
  atualizaFrase()
  atualizaPlacar();
});


function atualizaFrase() {
  // função para capturar no jQuery - JQuery("") ou $("")
  //.text() - é igual ao textContent do JS, pegar o conteúdo
  var frase = $("#frase").text();


  //split - quebra a frases do jeito em que você especifica, nesse caso é em espaços
  var numeroPalavras = frase.split(" ").length;

  // com um parâmetro no text,substitui, sem parâmetro ela só capta
  $("#tamanhoDaFrase").text(numeroPalavras);
}


//como comparar as linhas digitadas no texto com os numeros a serem mudados
//primeiro pegar meu campo
var campo = $(".campo-digitacao");
function contaCaracterPalavra() {
  //adicionar uma função ao campo
  campo.on("input", function () {
    //obter o valor(conteudo que o usuário digitou) atual do campo
    var conteudo = campo.val();


    //a quantidade de palavras será o comprimento do conteúdo dividido em espaços
    // /\S+/ - expressão que não faz contar cada espaço como uma outra palavra
    var qtdPalabras = conteudo.split(/\S+/).length - 1;
    //substituir o conteúdo de texto da li com id contador palavras pela quantidade de palavras
    $("#contador-palavras").text(qtdPalabras);


    //contar quantos palavras possuem
    var qtdCaracteres = conteudo.length;
    //substituir a variavel caracteres pelo valor real
    $("#contador-caracter").text(qtdCaracteres);
  })
}


var tempoInicial = $("#tempo").text();
function Cronometro() {
  //evento de focus => quando o input é selecionado independente da maneira, ganhando um foco
  campo.on("focus", function () {
    var frase = $("#frase").text();
    var tempo = $("#tempo").text();

    //setInterval => tudo que estiver dentro da função ele executará no tempo que decidiu
    //1000 = 1s
    var cronometro = setInterval(function () {
      tempo--;

      var digitado = campo.val();
      var comparavel = frase.substr(0, digitado.length);

      $("#tempo").text(tempo);

      if (tempo <= 0) {
        //attr muda o atributo de algo, atributos que não possuem valor possuem parâmetro true ou false
        campo.attr("disabled", true);
        clearInterval(cronometro);
        campo.addClass("campo-desativado");
        inserePlacar();
      }
    }, 1000)

  })
}


var botao = $("#reiniciar");
//atalho para chamada de evento
botao.click(reiniciaJogo);
function reiniciaJogo() {
  var campoUser = $("#nome");
  campo.attr("disabled", false);
  campo.removeClass("campo-desativado");
  campo.removeClass("fraseCerta");
  campo.removeClass("fraseErrada");
  campo.val("");
  campoUser.val("");
  Cronometro();
  $("#contador-caracter").text("0");
  $("#contador-palavras").text("0");
  $("#tempo").text(tempoInicial);
}



function mudaMarcadores() {
  campo.on("input", function () {
    var digitado = campo.val();
    var frase = $("#frase").text();
    //substr - pedaço de uma string 
    //você decide até onde quer pegar nos parâmetros
    var comparavel = frase.substr(0, digitado.length);

    if (digitado == comparavel) {
      campo.removeClass("fraseErrada");
      campo.addClass("fraseCerta");
    } else {
      campo.removeClass("fraseCerta");
      campo.addClass("fraseErrada");
    }
  })
}
solução!

parte 2

function inserePlacar() {
  //.find - desce a nodeChild da html procurando pelo que voce especificou no parametro
  var corpoTabela = $("#pontos").find("tbody");

  var usuario = $("#nome").val();

  var numPalavrasJogador = $("#contador-palavras").text();

  var linha = "<tr>" +
    "<td>" + usuario + "</td>" +
    "<td>" + numPalavrasJogador + "</td>" +
    "<td>" + "<a class='removerJogador'>" + "<i class='small material-icons'>" + "backspace" + "</i>" + "</a>" + "</td>" +
    "</tr>"
    ;


  corpoTabela.append(linha);


  jQuery(function (excluir) {
    $("#pontos").on("click", ".removerJogador", function (e) {
      $(this).closest('tr').fadeOut(600);

      setTimeout(function () {
        $(this).closest('tr').remove();
      }, 600)
    });
  });
}


$("#botaoPlacar").click(mostraPlacar);
function mostraPlacar() {
  var placar = $(".placar").stop().slideToggle(1000);
}


$("#botaoFrase").click(fraseAleatoria);
function fraseAleatoria() {
  $("#spinner").show();

  $.get("http://localhost:3000/frases", trocaFrase).fail(function () {
    $("#erro").show();

    setTimeout(function () {
      $("#erro").toggle();
    }, 2000)
  })// vai acontecer mesmo se requisição falhar , quando ela carrega ele esconde
    .always(function () {
      $("#spinner").hide();
    })
}


function trocaFrase(data) {
  var frase = $("#frase");
  var numAleatorio = Math.floor(Math.random() * data.length);
  frase.text(data[numAleatorio].texto);

  atualizaFrase();
  atualizaTempo(data[numAleatorio].tempo);
}


function atualizaTempo(tempo) {
  $("#tempo").text(tempo);
  tempoInicial = tempo;
}


$("#botao-frase-id").click(buscaFrase);
function buscaFrase() {
  $("#spinner").show();

  var fraseId = $("#fraseId").val();
  console.log("id da minha frase " + fraseId);
  var dados = { id: fraseId };
  $.get("http://localhost:3000/frases", dados, mudaFrase).fail(function () {
    $("#erro").show().fadeOut(1000);

    setTimeout(function () {
      $("#erro").toggle();
    }, 2000)
  })// vai acontecer mesmo se requisição falhar , quando ela carrega ele esconde
    .always(function () {
      $("#spinner").hide();
    })
}


function mudaFrase(data) {
  var frase = $("#frase");
  frase.text(data.texto);
  atualizaFrase();
  atualizaTempo(data.tempo);
}


$("#botaoSinc").click(sincronizaPlacar);
function sincronizaPlacar() {
  var placar = [];
  var linhas = $("tbody>tr");
  linhas.each(function () {
    var Usuario = $(this).find("td:nth-child(1)").text();
    var numPalavra = $(this).find("td:nth-child(2)").text();
    var score = {
      usuario: Usuario,
      pontos: numPalavra,
    };
    //push transforma em array
    placar.push(score);
    console.log(placar);
    var dados = {
      placar: placar
    }
    $.post("http://localhost:3000/placar", dados, function () {
      console.log("salvou os dados no servidor");
    })
  })
}


function atualizaPlacar() {
  $.get("http://localhost:3000/placar", function (data) {
    $(data).each(function () {
      var corpoTabela = $("#pontos").find("tbody");
      var linha = "<tr>" +
        "<td>" + this.usuario + "</td>" +
        "<td>" + this.pontos + "</td>" +
        "<td>" + "<a class='removerJogador'>" + "<i class='small material-icons'>" + "backspace" + "</i>" + "</a>" + "</td>" +
        "</tr>"
        ;
      corpoTabela.append(linha);
      console.log(linha);
    })
    jQuery(function (excluir) {
      $("#pontos").on("click", ".removerJogador", function (e) {
        $(this).closest('tr').fadeOut(600);

        setTimeout(function () {
          $(this).closest('tr').remove();
        }, 600)
      });
    });
  })
}