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

O botão de mostrar o placar parou de funcionar depois do scrollPlacar

Olá a todos! Estava indo tudo bem até eu implementar o código do scrollPlacar:

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

Após colocá-lo no "placar.js", o placar deixou de aparecer sozinho quando terminasse o jogo e sei lá por que motivos também fez o botão verdinho de mostrar o placar parar de funcionar. E quando eu comento as últimas linhas da função tipo assim:

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

Fazendo isso o placar volta a funcionar como estava.

Aqui seguem os meus códigos:

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>
    <!-- Seja bem vindo ao curso de jQuery :) -->
    <div class="container">

        <h1 class="center">Alura Typer</h1>
        <p class="frase center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

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

        <div class="botoes">
            <button id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">restore</i></button>

            <button id="botao-placar" class="btn-floating btn-large waves-effect waves-light green"><i class="material-icons">assignment</i></button>

        </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">
            <h3 class="center">Placar</h3>
            <table class="centered bordered">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Número de palavras</th>
                        <th>Remover</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- SENDO ADICIONADO PELA INSEREPLACAR()-->
                    <tr>
                        <td>Douglas</td>
                        <td>10</td>
                        <td>
                            <a href="#" class="botao-remover">
                                <i class="small material-icons">delete</i>
                            </a>
                        </td>
                    </tr>
                </tbody>

            </table>
        </section>
    </div>

    <script src="js/jquery.js"></script> <!-- Jquery precisa ser importado antes do main.js para poder ser utilizado por ele-->
    <script src="js/main.js"></script>
    <script src="js/placar.js"></script>

</body>
</html>
3 respostas

Main.js


var tempoInicial = $("#tempo-digitacao").text();
var campo = $(".campo-digitacao"); //QUERYSELECTOR DO TEXTAREA

$(function(){ //IMPORTANTE PRA CARREGAR AS FUNÇÕES TODAS NO INÍCIO
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    $("#botao-reiniciar").click(reiniciaJogo);
    inicializaMarcadores();
})


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

function inicializaContadores(){
    campo.on('input', function(){
        var conteudo = campo.val(); //nao pode ser VALUE; PEGAR O CONTEÚDO DO TEXTAREA
        var qtdPalavras = conteudo.split(/\S+/).length - 1;
        var contadorPalavras = $("#contador-palavras");
        contadorPalavras.text(qtdPalavras);

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

function inicializaCronometro(){
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function(){                      //campo.ONE = faz a função apenas uma vez

        var cronometroID = setInterval(function(){
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);


            $("#botao-reiniciar").attr("disabled", true);  //deveria travar o botao, mas não tá travando


            if (tempoRestante < 1){
                clearInterval(cronometroID); //FEZ O CRONOMETRO PARAR

                finalizaJogo();
            }

        }, 1000);
    })
}

function finalizaJogo(){
    campo.attr("disabled", true); //adiciona o atrinuto DISABLED no textarea
    $("#botao-reiniciar").attr("disabled", false);
    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); //substr pegar o valor textual do campo todo e quebra

        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);
    inicializaCronometro();
    campo.toggleClass("campo-desativado");
    campo.removeClass("borda-verde");
    campo.removeClass("borda-vermelha");
}

PLACAR.js

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

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

    var linha = novaLinha(usuario, numPalavras);

    linha.find(".botao-remover").click(removeLinha);

    corpoTabela.prepend(linha);

    $(".placar").slideDown(500);

}

function scrollPlacar(){
    var posicaoPlacar = $(".placar").offset().top;
    console.log(posicaoPlacar);
    // $("html, body").animate({scrollTop: posicaoPlacar+"px"; //detalhe importante
    // }, 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); //tag i dentro da tag a igual ao html

    colunaRemover.append(link);

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

    return linha;
}

function removeLinha(event){
    event.preventDefault();

    var linha = $(this).parent().parent();
    linha.fadeOut(1000); //subindo na árvore do HTML, pai = td, pai do pai = <tr>

    setTimeout(function () { //remove depois do tempo do fadeout
        linha.remove();
    }, 1000);

}

$(".botao-remover").click(removeLinha); //esse daqui apaga o que já vier no HTML

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

ESTILOS.CSS

.campo-digitacao {
    font-size: 20px;
    height: 130px;
    border: 3px solid black;
}

.frase {
    font-size: 20px;
    text-align: justify;
}

.campo-desativado {
    background-color: lightgray;
}

.icones {
    vertical-align: middle;
}

.borda-verde{
    border: 3px solid green;
}

.borda-vermelha{
    border: 3px solid red;
}

.desabilitado {
    cursor: not-allowed;
}
.placar {
    display: none;
}
body {
    overflow: scroll;
}
solução!

Descobri, pessoal kkkk Aff, eu tinha colocando um ";" em:

posicaoPlacar+"px";