Reiniciar Contagem

Oi, André! Tudo bem?

Muito interessantes esses pontos que você trouxe! Para te ajudar na implementação destas funcionalidades, irei separar minha explicação em duas etapas. Vamos lá?

Reiniciar temporizador

Na função contagemRegressiva(), podemos adicionar uma lógica dentro da estrutura condicional que verifica se tempoDecorridoEmSegundos é menor ou igual a zero. Após tocar a música, apresentar o alert e executar a função zerar(), podemos:

• Resgatar o valor de data-contexto, que distingue cada um dos nossos botões;

• Usá-lo em uma estrutura de switch-case para analisar se estamos em "foco", "descanso curto" ou "descanso longo" e, desta maneira, atualizar o valor de tempoDecorridoEmSegundos.

Observe abaixo um código de exemplo:

const contagemRegressiva = () => {
    if(tempoDecorridoEmSegundos <= 0){
        audioTempoFinalizado.play()
        alert('Tempo finalizado!')
        zerar()
        let contexto = html.getAttribute('data-contexto');
        switch (contexto) {
            case 'foco':
                tempoDecorridoEmSegundos = 1500;
                break;
            case 'descanso-curto':
                tempoDecorridoEmSegundos = 300;
                break;
            case 'descanso-longo':
                tempoDecorridoEmSegundos = 900;
                break;
        }
        mostrarTempo()
        return
    }
    tempoDecorridoEmSegundos -= 1
    mostrarTempo()
}

Dentro de cada case, trabalhamos com uma seção diferente, de modo a atualizar corretamente os seus respectivos tempos.

Ao trocar de seção, "resetar" para o Início

Para realizar esse objetivo, basta adicionar a função zerar() toda vez que clicamos em um dos botões que nos leva a uma seção diferente ("foco", "descanso curto" e "descanso longo"), assim:

focoBt.addEventListener('click', () => {
    zerar()
    tempoDecorridoEmSegundos = 1500
    alterarContexto('foco')
    focoBt.classList.add('active')
})

curtoBt.addEventListener('click', () => {
    zerar()
    tempoDecorridoEmSegundos = 300
    alterarContexto('descanso-curto')
    curtoBt.classList.add('active')
})

longoBt.addEventListener('click', () => {
    zerar()
    tempoDecorridoEmSegundos = 900
    alterarContexto('descanso-longo')
    longoBt.classList.add('active')
})

Espero que essas dicas sejam proveitosas para você, André! Sinta-se confortável para explorar essas ideias e customizá-las!

Caso tenha ficado com alguma dúvida, estarei aqui para conversarmos!

Abraços.