2
respostas

Usuários triplicando

Ao inserir um novo usuário no placar, após o segundo jogo. Os usuários se triplicam em vez de colocar apenas um.

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


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

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 quantidadeDePalavras = conteudo.split(/\S+/).length -1;
        $("#contador-palavras").text(quantidadeDePalavras);

        var quantidadeDeCaracteres = conteudo.length
        $("#contador-caracteres").text(quantidadeDeCaracteres); 
    });
}

function inicializaCronometro() {
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function(){

        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 inicializaMarcadores() {
    var frase = $(".frase").text();
    campo.on("input", function() {
        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 inserePlacar(){
    var corpoTabela = $(".placar").find("tbody");
    var usuario = "Seu-nome";
    var numPalavras = $("#contador-palavras").text();

    var linha = "<tr>"+
                    "<td>"+ usuario + "</td>"+
                    "<td>"+ numPalavras + "</td>"+
                "</tr>";

    corpoTabela.prepend(linha);
}

function reiniciaJogo() {
    $("#botao-reiniciar").click(function(){
        campo.attr("disabled", false);
        campo.val("");
        $("#contador-palavras").text("0");
        $("#contador-caracteres").text("0");
        $("#tempo-digitacao").text(tempoInicial);
        campo.toggleClass("campo-desativado");
        campo.removeClass("campo-correto");
        campo.removeClass("campo-errado");

        inicializaCronometro();
    });
}
2 respostas

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/estilos.css">
    <link rel="stylesheet" href="css/libs/google-fonts.css">
</head>
<div class="container">
    <body>
        <h1 class="center">Alura Typer</h1>
        <p class="frase center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatibus voluptate consequuntur nemo eligendi reiciendis. Veritatis, minima inventore ullam quo nisi quod alias aliquid exercitationem eos a. Nostrum, tenetur vitae?</p>

        <ul class="informacoes center">
            <li>
            <i class="small material-icons icones">description</i>    
            <span id="tamanho-frase">19</span> palavras</li>
            <li>
            <i class="small material-icons icones">access_time</i>  
            <span id="tempo-digitacao">6</span> segundos</li>
        </ul>

        <textarea class="campo-digitacao" rows="8" cols="40"></textarea>

        <div img alt="Reiniciar Jogo">
        <a class="btn-floating btn-large waves-effect waves-light red" id="botao-reiniciar" >
            <i class="material-icons">restore</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 center">
            <h3>Placar</h3>
            <table class="centered bordered">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Nº de Palavras</th>    
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </section>
        <script src="js/jquery.js"></script>
        <script src="js/main.js"></script>
    </div>
    </body>
</html>
O post foi fechado por inatividade. Para continuar o assunto, recomendamos criar um novo tópico. Bons Estudos!