Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Função atualizaTamanhoFrase() não funciona

Ao clicar no botão de trocar a frase a requisição está sendo feita normalmente e a frase está sendo alterada, porém mesmo com a adição da chamada da função "atualizaTamanhoFrase()" ao final da função "trocaFraseAleatoria()", o número de palavras permanece o da frase incial e nenhum erro é exibido no console. Segue em anexo o código do main.js e o frase.js:

Main.js

$(document).ready(function(){
    atualizaTamanhoFrase();
    initContadores();
    initCronometro();
    $("#botao-reiniciar").click(reiniciaJogo);
    initMarcadores();
});

var frase = $(".frase").text();
var tamanhoFrase = $("#tamanho-frase");

function atualizaTamanhoFrase(){
    let numeroPalavras = frase.split(/\S+/).length - 1;
    tamanhoFrase.text(numeroPalavras);
}

var campo = $(".campo-digitacao");
var contadorPalavras = $("#contador-palavras");
var contadorCaracteres = $("#contador-caracteres");

function initContadores() {
    campo.on("input", function(){
        let conteudo = campo.val();
        let qtdPalavras = conteudo.split(/\S+/).length - 1;

        contadorPalavras.text(qtdPalavras);
        contadorCaracteres.text(conteudo.length);
    });
}

function initMarcadores(){
    let frase = $(".frase").text();

    campo.on("input", function(){
        let digitado = campo.val();
        let comparavel = frase.substr(0, digitado.length);

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

function initCronometro() {
    let tempoRestante = $("#tempo-digitacao").text();

    campo.one("focus", function(){
        $("#botao-reiniciar").attr("disabled",true);

        let id =  setInterval(function(){
            tempoRestante --;
            $("#tempo-digitacao").text(tempoRestante);
            if(tempoRestante < 1){
                clearInterval(id);
                finalizaJogo();
            }
        }, 1000);
    });
}

function finalizaJogo(){
    campo.attr("disabled", true);
    $("#botao-reiniciar").attr("disabled", false);
    campo.toggleClass("campo-desativado");
    inserePlacar();
}

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

function reiniciaJogo() {
    campo.attr("disabled", false);
    campo.val("");
    campo.toggleClass("campo-desativado");
    campo.removeClass("campo-correto");
    campo.removeClass("campo-incorreto");

    contadorPalavras.text("0");
    contadorCaracteres.text("0");

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

    initCronometro();
}

Frase.js

$("#botao-frase").click(fraseAleatoria);

function fraseAleatoria(){
    $.get("http://localhost:3000/frases", trocaFraseAleatoria);
}

function trocaFraseAleatoria(data){
    let frase = $(".frase");
    let numeroAleatorio = Math.floor(Math.random() * (data.length - 1));
    frase.text(data[numeroAleatorio].texto);

    atualizaTamanhoFrase();
}
1 resposta
solução!

Fala ai Pedro, tudo bem? O problema está na função atualizaTamanhoFrase:

function atualizaTamanhoFrase(){
    let numeroPalavras = frase.split(/\S+/).length - 1;
    tamanhoFrase.text(numeroPalavras);
}

Repare que ela tem uma dependência externa, no caso, o frase:

var frase = $(".frase").text();

Que irá possuir o valor da primeira frase que foi carregada.

O problema é quando você troca a frase e chama a função atualizaTamanhoFrase a referência de frase ainda será a mesma, sendo assim, será o mesmo valor.

Existem N maneiras para resolver o problema, a que eu recomendaria é você receber como parâmetro da função a frase para calcular o tamanho:

function atualizaTamanhoFrase(fraseParaContar){
    let numeroPalavras = fraseParaContar.split(/\S+/).length - 1;
    tamanhoFrase.text(numeroPalavras);
}

E quando chamá-la você passa a frase:

function trocaFraseAleatoria(data){
    let frase = $(".frase");
    let numeroAleatorio = Math.floor(Math.random() * (data.length - 1));
    let novaFrase = data[numeroAleatorio].texto
    frase.text(novaFrase);

    atualizaTamanhoFrase(novaFrase);
}

Espero ter ajudado.