4
respostas

Cliques no botão reiniciaJogo estão multiplicando os resultados no placar

Ao final da aula 2 buscando frases via ajax - arrumando tempo e texto, notei que a quantidade de cliques no botão reiniciaJogo antes de focar na textarea estão multiplicando os resultados no placar (no placar ele insere o nº de cliques no botão + 1 resultados)

Quando clico no botão reiniciaJogo conta como uma partida jogada que não é inserida no placar, pois a função inicializaCronometro não é chamada e, portanto, o tempo não diminui que, consequentemente, não chama a função finalizaJogo, responsável por inserir os resultados(finalizaJogo chama a função insereJogo).

Mas quando começo uma frase na textarea ativo o cronometro (através do focus) que, ao final, insere os resultados no placar multiplicado pelo numero de cliques no botao reiniciaJogo.

Alguém teve o mesmo e conseguiu solucionar??

4 respostas

Oi, Juliano, tudo bem?

Aparece alguma mensagem de erro no console quando você está testando? Eu preciso ver os arquivos para testar e tentar te ajudar de uma forma mais objetiva. Se puder me trazer essa informações :}

Seguem os codigos main.js

var tempoInicial = $("#tempo-digitacao").text();
var campo = $(".campo-digitacao");

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

function atualizaTempo(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 inicializaMarcadores(){  
    campo.on("input", function(){
        var frase = $(".frase").text();
        var digitado = campo.val();
        var comparavel = frase.substr(0, digitado.length);

        if(digitado == comparavel){
            campo.addClass("campo-correto");
            campo.removeClass("campo-errado");
        }else{
            campo.addClass("campo-errado");
            campo.removeClass("campo-correto");
        }
    });
}

function inicializaCronometro(){

    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.addClass("campo-desativado");
    inserePlacar();
}


function reiniciaJogo(){
    campo.attr("disabled", false);
    campo.val("");
    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");
    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro();
    campo.removeClass("campo-desativado");
    campo.removeClass("campo-correto");
    campo.removeClass("campo-errado");
    console.log("vezes cliquei no botão reiniciar")
}

placar.js

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

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

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

    corpoTabela.append(linha);
    $(".placar").slideDown(500);
    console.log("repete a cada clique no botao reiniciaJogo!!!");

    scrollPlacar();

}

function scrollPlacar(){
    var posicaoPlacar = $(".placar").offset().top;
    $("html, body").animate(
    {
        scrollTop: posicaoPlacar
    },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(1000);
    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,
            pontos: 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.pontos);
            linha.find(".botao-remover").click(removeLinha);

            $("tbody").append(linha);
        });        

    });

}

eu coloquei um console.log na função reiniciaJogo, para mostrar a quantidade de vezes q o botão foi clicado, e na função insere placar pra mostrar quantos scores foram inseridos no placar.

no console aparece assim: 5main.js:85 vezes cliquei no botão reiniciar 6placar.js:14 repete a cada clique no botao reiniciaJogo!!!

cliquei 5 vezes no botão reniciaJogo e no placar ele insere 6 scores repetidos.

não apresenta nenhum erro no console alem disso.

A versão final do projeto jquery também apresenta o mesmo erro.

Oi, Juliano, tudo bem?

Revisei o código e isso acontece quando se dá vários cliques rápidos, não é isso? Precisariamos de método que prevenisse esse tipo de atitude do usário e não aceitasse mais de um usuário.