Pois então, to entrando no ultimo capítulo do curso agora, nem ví video algum, porém estava testando algumas coisas diferentes e achei um bug em relação ao botão de reiniciar
Revisei meu código com o dado na aula para download e está o mesmo somente som nomes de variáreis diferentes.
Bug: No momento que eu foco no campo e o contador começa a reduzir o tempo, se eu spammar cliques no botao de reiniciar, o contador volta ao tempo inicial porém ele também mantem a contagem antiga e fica alternando, então quando a primeira contagem chega em , o campo trava mesmo mostrando que faltava sai la... 10 segundos.
Pensei em one click mas n faz sentido e tbm buga, e teria que dar refresh na page também...
Tem como meter um Clear interval no botão? pq daí ele n mantem a contagem anterior?
var campoDigitacao = $(".input-area");
var timeStart = $("#time-counter").text();
$(function() {
contadorPalavras();
contadorDigitacao();
contaTempo();
inicializaMarcadores();
$("#reset").click(reiniciaJogo);
});
/* ----- Contador palavras base ------- */
function contadorPalavras(){
var textoPrincipal = $("#main-text").text();
var numPalavras = textoPrincipal.split(" ").length;
var contador = $("#counter");
contador.text(numPalavras);
}
/* ---- Contador de digitação--- */
function contadorDigitacao(){
campoDigitacao.on("input", function(){ //aplica a funcao ao receber infop
var content = campoDigitacao.val(); //atribui o valor do campo às uma variavel
var numPal = content.split(/\w+/).length - 1;
$(".word-count").text(numPal);
var numChar = content.length;
$(".char-count").text(numChar);
palavrasSegundos();
});
}
/* ------- contador de tempo -----*/
function contaTempo(){
var timeLeft = $("#time-counter").text();
campoDigitacao.one("focus", function(){
var timeID = setInterval(function(){
timeLeft--;
$("#time-counter").text(timeLeft);
if (timeLeft == 0) {
campoDigitacao.attr("disabled", true);
clearInterval(timeID);
$("#reset").attr("disabled", false);
campoDigitacao.addClass("input-cinza");
//campoDigitacao.toggleClass("input-cinza");// interruptor on/off
}
}, 1000);
});
}
/* ------- Comparador de palavras -------*/
function inicializaMarcadores(){
var frase = $("#main-text").text();
console.log(frase);
campoDigitacao.on("input", function(){
var digitado = campoDigitacao.val();
if (frase.startsWith(digitado)) {
campoDigitacao.addClass("input-verde");
campoDigitacao.removeClass("input-vermelho");
}else {
campoDigitacao.addClass("input-vermelho")
campoDigitacao.removeClass("input-verde");
}
});
}
/* ---------- Botão reset ---------*/
function reiniciaJogo(){
campoDigitacao.attr("disabled",false);
campoDigitacao.val("");
$(".word-count").text("0");
$(".char-count").text("0");
$("#time-counter").text(timeStart);
contaTempo();
campoDigitacao.removeClass("input-cinza");
campoDigitacao.removeClass("input-verde");
campoDigitacao.removeClass("input-vermelho");
//campoDigitacao.toggleClass("input-cinza"); //interruptor de classes on/off
}
/* ------ velocidade de digitação ----*/
function palavrasSegundos(){
wordsPerSecond = $(".word-count").text()/timeStart;
charPerSecond = $(".char-count").text()/timeStart;
$(".wps").text(wordsPerSecond);
$(".cps").text(charPerSecond);
}