const html = document.querySelector('html');
const focoBt = document.querySelector('.app__card-button--foco');
const curtoBt = document.querySelector('.app__card-button--curto');
const longoBt = document.querySelector('.app__card-button--longo');
const stratBt = document.querySelector('#start-pause');
const banner = document.querySelector('.app__image');
const temporizador = document.querySelector('#timer');
const imagem = document.querySelector('.app__image');
const titulo = document.querySelector('.app__title');
const botoes = document.querySelectorAll('.app__card-button');
const startPauseBt = document.querySelector('#start-pause');
const musicaFocoInput = document.querySelector('#alternar-musica');//Selecionando o input da musica
const musica = new Audio('./sons/luna-rise-part-one.mp3'); //Pegando arquivo de audio, coloamos em new Audio e o caminho para o audio desejado.
const audioTemporizadorFinalizado = new Audio('./sons/beep.mp3');
const audioPlay = new Audio ('./sons/play.wav');
const audioPause = new Audio('./sons/pause.mp3');
let tempoDecorridoEmSegundos = 5
let intervaloId = null
const tempoFocoBt = 1500
const tempoCurtoBt = 300
const tempoLongoBt = 900
musica.loop = true //Fazendo com que a musica toque em loop e não só por 6 minutos.
//Forma mais pratica e menor:
musicaFocoInput.addEventListener('change',() => { //Usamos change pois é o que usa nos casos que checkbox
if (musica.paused) { //Se a musica estiver pausada o botão está em desligar sendo assim ao apertar o botão vai dar play.
musica.play()
}else{
musica.pause() //Caso não estaja pausada e sim tocando a musica, então ao clicar no botão vai pausar a musica.
}})
focoBt.addEventListener('click', () => {
alterarContexto('foco')
focoBt.classList.add('active')
});
curtoBt.addEventListener('click', () => {
alterarContexto('descanso-curto')
curtoBt.classList.add('active')
});
longoBt.addEventListener('click', () => {
alterarContexto('descanso-longo')
longoBt.classList.add('active')
});
function alterarContexto(contexto) {
botoes.forEach(function(contexto){
contexto.classList.remove('active')
})
html.setAttribute('data-contexto', contexto);
banner.setAttribute('src', `./imagens/${contexto}.png`);
switch (contexto) {
case 'foco':
titulo.innerHTML = `Otimize sua produtividade,<br>
<strong class="app__title-strong">mergulhe no que importa.</strong>`
break;
case 'descanso-curto':
titulo.innerHTML = `Que tal dar uma respirada?<br>
<strong class="app__title-strong">Faça uma pausa curta!</strong>`
break;
case 'descanso-longo':
titulo.innerHTML = `Hora de voltar à superfície.<br>
<strong class="app__title-strong">Faça uma pausa longa.</strong>`
default:
break;
}
}
const contagemRegressiva = () => {
if(tempoDecorridoEmSegundos <= 0 ) {
audioTemporizadorFinalizado.play()
alert ('Tempo finalizado!')
zerar()
return
}
tempoDecorridoEmSegundos -= 1 //Diminui 1 do tempo
console.log('Temporizador: ' + tempoDecorridoEmSegundos) // mostra o tempo que falta.
console.log('Id: ' + intervaloId)
}
startPauseBt.addEventListener ('click',(iniciarOuPausar))
function iniciarOuPausar () {
if(intervaloId){
audioPause.play()
zerar()
return
}
audioPlay.play()
intervaloId = setInterval(contagemRegressiva, 1000) // A cada 1 segundo chama a contagem regressiva.
}
function zerar(){
clearInterval(intervaloId)
intervaloId = null
}
