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

Placar está imprimindo diversas vezes o resultado do jogo

Boa tarde. Ao concluir a aula fui testar a digitação das frases e percebi que que da segunda vez em diante, o placar está sendo impresso na página cerca de 4 a 5 vezes seguidas. apenas da primeira vez ele imprime apenas uma linha, ao clicar para jogar de novo, quando o tempo acaba, saem várias linhas com o mesmo resultado.

Onde pode estar o problema?

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

function mostraPlacar(){
    $(".placar").stop().slideToggle(600);                  
}

function inserePlacar(){                                    
    var corpoTabela = $(".placar").find("tbody");               
    var usuario = "Gilvan";
    var numPalavras = $("#conta-palavras").text();
    var numCaracteres = $("#conta-caracteres").text();

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

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

function scrollPlacar(){
    var posicaoPlacar = $(".placar").offset().top;         
    $("html, body").animate({                             
        scrollTop: posicaoPlacar+"px"
    },1000);
}

function insereLinha(usuario, palavras, caracteres){        
    var linha = $("<tr>");                                 
    var colunaUsuario = $("<td>").text(usuario);             
    var colunaPalavras = $("<td>").text(palavras);
    var colunaCaracteres = $("<td>").text(caracteres);
    var colunaRemover = $("<td>");
    var link = $("<a>").addClass("botao-remover").attr("href", "#");  
    var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");  //variavel q vai criar o icone de lixeira para o link de remoção

    link.append(icone);                                  
    colunaRemover.append(link);                           
    colunaRemover

    linha.append(colunaUsuario);
    linha.append(colunaPalavras);
    linha.append(colunaCaracteres);
    linha.append(colunaRemover);                          

    return linha;                                         
}

function removeLinha(event){
    event.preventDefault();                              
    var remover = $(this).parent().parent();            
    remover.fadeOut(1000);                                
    setTimeout(function(){                              
        remover.remove();
    },1000);                
}
5 respostas

Olá Gilvan, tudo bem?

Poderia me mandar o código do seu html e do arquivo main.js para eu poder simular o seu problema?

Abraços e bons estudos!

Segue HTML...

<!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">Digite este texto no tempo determinado</p>
        <div class="center">
            <img src="img/spinner.gif" alt="Spinner" id="spinner">
            <p id="erro">Ocorreu um erro, tente novamente.</p>
        </div>
        <ul class="informacoes center">
            <li>
                <i class="small material-icons icones">font_download</i>
                <span id="numero-caracteres">0</span> Caracteres
            </li>
            <li>
                <i class="small material-icons icones">description</i>
                <span id="tamanho-frase">0</span> Palavras
            </li>
            <li>
                <i class="small material-icons icones">query_builder</i>
                <span id="tempo-digitacao">15</span> Segundos
            </li>
        </ul>

        <textarea class="campo-digitado" rows="10" cols="40"></textarea>
        <a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
            <i class="material-icons">restore</i>
        </a>
         <a id="botao-placar" class="btn-floating btn-large waves-effect waves-light green">
            <i class="material-icons">assignment</i>
        </a>
        <a id="botao-frase" class="btn-floating btn-large waves-effect waves-light blue">
            <i class="material-icons">shuffle</i>
        </a>
        <a id="botao-frase-id" class="btn-floating btn-large waves-effect waves-light cyan">
            <i class="material-icons">repeat_one</i>
        </a>
        <input type="number" id="frase-id" min="0">
        <ul class="contadores center">
            <li><span id="conta-caracteres">0</span> caracteres</li>
            <li><span id="conta-palavras">0</span> palavras</li>
        </ul>

       <section class="placar">
           <h3 class="center">Placar</h3>
           <table class="centered bordered">
               <thead>
                   <tr>
                       <th>Nome</th>
                       <th>Palavras</th>
                       <th>Caracteres</th>
                       <th>Remover</th>
                   </tr>
               </thead>
               <tbody>
               </tbody>
           </table>
       </section>
     </div>
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
    <script src="js/placar.js"></script>
    <script src="js/frase.js"></script>
</body>
</html>

E o main.js

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

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

function atualizaTempoInicial(tempo){
    tempoInicial = tempo;
    $("#tempo-digitacao").text(tempo);
}

function atualizaTamanhoFrase(){
    var frase = $(".frase").text();                           
    var numPalavras = frase.split(" ").length;                
    $("#tamanho-frase").text(numPalavras);                   

    var conteudoSemEspaco = frase.replace(/\s+/g,'');
    var qtdCaracteres = conteudoSemEspaco.length;
    $("#numero-caracteres").text(qtdCaracteres);
}

function inicializaContadores(){
    campo.on("input", function(){                            
        var conteudo = campo.val();                           

        var qtdPalavras = conteudo.split(/\S+/).length - 1;    
        $("#conta-palavras").text(qtdPalavras);

        var conteudoSemEspaco = conteudo.replace(/\s+/g,'');   
        var qtdCaracteres = conteudoSemEspaco.length;
        $("#conta-caracteres").text(qtdCaracteres);
    });

}

function inicializaCronometro(){
    campo.one("focus", function(){                            
        var tempoRestante = $("#tempo-digitacao").text();
        $("#botao-reiniciar").attr("disabled", true);        
        var cronometroID = setInterval(function(){            
            tempoRestante--;                                 
            $("#tempo-digitacao").text(tempoRestante);
            if(tempoRestante < 1){
                $("#botao-reiniciar").attr("disabled", false);
                clearInterval(cronometroID);                 
                finalizaJogo();
            }
        },1000);  
    });
}

function finalizaJogo(){
    campo.attr("disabled", true);                
    campo.toggleClass("campo-desativado");
    inserePlacar();
}

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("frase-correta");                  
            campo.removeClass("frase-incorreta");
            } else {
                campo.addClass("frase-incorreta");
                campo.removeClass("frase-correta");
        }
    });
}

function reiniciaJogo(){
    $("#botao-reiniciar").click(function(){                  
    campo.attr("disabled", false);
    campo.val("");
    $("#conta-caracteres").text("0");
    $("#conta-palavras").text("0");
    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro();                                  
    campo.toggleClass("campo-desativado");
    campo.removeClass("frase-incorreta");
    campo.removeClass("frase-correta");
});
}

Obrigado pela atenção

solução!

Olá Gilvan, tudo bem com você?

Então o problema está acontecendo com a sua função de resetar jogo que está duplicando sempre a inserção de linhas, veja que logo no começo de nosso main já estamos associando a função de click no botão-reiniciar quando você colocou também na própria função ela acaba executando mais de uma vez a finalizar jogo, e no primeiro momento ainda temos que clicar duas vezes para executar a primeira e após isso começa sempre a duplicação.

Para corrigir isso é bem simples, basta tirar esse comportamento duplicado:

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

Abraços e Bons Estudos!

Para vermos que uma coisinha a mais pode dar muitas dores de cabeça.

Muito obrigado pela atenção, agora está perfeito.

Abraços!!!