Toggle e one

Oi Everton,

1- Para responder esta primeira dúvida eu precisaria dar uma olhada no seu código para ver o que está acontecendo e dar um diagnostico melhor.

2- Aqui quando eu tento reiniciar o jogo enquanto o tempo está rolando, o timer fica meio louco, como se vários timers estivessem acontecendo ao mesmo tempo, em vez de ficarem muitos rápidos.

O caso de ficar muito rápido, pode ser por que o evento de focus está sendo atrelado diversas vezes, como você falou. Isto é mitigado utilizando a função one('focus',...) em vez da função on('focus',...). A função one coloca o evento apenas uma vez, e depois de escutar aquela única vez, o listener deixa de existir.

Agora uma outra coisa que pode ser feita é desabilitar o botão de reiniciar enquanto o jogador estiver com tempo rodando.

Isto pode ser feito com a função .off(). Então, assim que o tempo começar a rolar, ou seja depois do evento focus:

campo.one("focus", function() {
        //AQUI
    ...
    }

Você pode adicionar a linha :

$("#botao-reiniciar").off('click');

Que remove os event listeners de click do botão reiniciar, assim por mais que o usuário clique nele, nada irá acontecer.

Mas claro, não podemos esquecer de recolocar lá o evento de click quando o tempo chegar a zero, afinal queremos que o jogador consiga reiniciar o timer. Por isso, na nossa detecção de quando o tempo chega a zero:

if (tempoRestante < 1) {
     // AQUI 
    ...
}

Nos adicionamos o evento de click no botão reiniciar:

$("#botao-reiniciar").click(reiniciaJogo);

O código final, após estas modificações deve ficar assim:

function inicializaCronometro() {
    var tempoRestante = $("#tempo-digitacao").text();
    campo.on("focus", function() {
         $("#botao-reiniciar").off('click');
        var cronometroID = setInterval(function() {
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
            if (tempoRestante < 1) {
                $("#botao-reiniciar").click(reiniciaJogo);
                campo.attr("disabled", true);
                clearInterval(cronometroID);
                campo.toggleClass("campo-desativado");
            }
        }, 1000);
    });
}

Espero que tenha resolvido suas dúvidas

1 - Desligar e religar o evento click resolveu. 2 - O toggleClass não funcionou. Resolvi usando remove e addClass.

Oi Everton Luiz, se tu postar o código fica mais facil para te ajudarmos nessa questão do toggleClass. Abraço!

o toggleClass também não funcionou comigo dentro da função reiniciaJogo. O campo permanece cinza, mas editável. O acerto do bug anterior de desativar o botão tb deixou de funcionar... Seguem as funções no main, bem como a div do botão no html:

Estou usando o SublimeText3 para editar o código, e o Chrome Versão 65.0.3325.146 (Versão oficial) 64 bits para os testes

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

    </div>

_____________________

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

    campo.one("focus",function(){
            $("#botao-reiniciar").attr("disabled",true) 
            var cronometroID = setInterval(function(){
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);

            if(tempoRestante < 1){
                campo.attr("disabled",true);
                clearInterval(cronometroID);
                $("#botao-reiniciar").attr("disabled",false) 
                campo.toggleClass("campo-desativado");    
            } 
    },1000);
});

}

$("#botao-reiniciar").click(reiniciaJogo);

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");