relax-app/breathing.js at master · lukbar48/relax-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
const breathBtns = document.querySelectorAll('.mins')
const soundBtns = document.querySelectorAll('.background button')
const video = document.querySelector('.bg-video video')
const music = document.querySelector('.music')
const playBreath = document.querySelector('.play-breath')
const pauseBreath = document.querySelector('.pause-breath')
const movingOutline = document.querySelector('.moving-outline circle')
const trackOutline = document.querySelector('.track-outline-breath circle')
const breathContainer = document.querySelector('.breath-cycle-container')
const pointer = document.querySelector('.pointer-container')
const text = document.querySelector('.text')
const textBottom = document.querySelector('.text-bottom')

let cycleTime = 7000;
let number = 0;
let timeouts = [];

function resetChoice() {
  playBreath.classList.remove('hide')
  video.pause()
  music.pause()
  text.textContent = ''
  for (let i = 0; i < timeouts.length; i++) {
    clearTimeout(timeouts[i]);
  }
  if (typeof interval !== 'undefined') {
    clearInterval(interval)
  }
  breathContainer.classList = 'breath-cycle-container';
  pointer.classList = 'pointer-container';
}

soundBtns.forEach(button => {
  button.addEventListener('click', function () {
    resetChoice();
    video.src = this.dataset.video
    music.src = this.dataset.sound
  })
})

breathBtns.forEach(btn => {
  btn.addEventListener('click', function () {
    for (i = 0; i < breathBtns.length; i++) {
      breathBtns[i].classList.remove('active-breath')
    }
    resetChoice()
    btn.classList.add('active-breath')
    if (this.dataset.breath === 'calming') {
      cycleTime = 7000;
    } else if (this.dataset.breath === 'wim') {
      cycleTime = 1800;
    } else if (this.dataset.breath === 'box') {
      cycleTime = 10000;
    }
  })
})

function startCycle() {
  if (cycleTime == 7000) {
    breathContainer.classList.add('breath-cycle-expand-calming')
    pointer.classList.add('pointer-rotate-calming')
    text.textContent = 'Breathe in!'
    timeouts.push(setTimeout(() => {
      text.textContent = 'Hold!'
    }, 2500))
    timeouts.push(setTimeout(() => {
      text.textContent = 'Breathe out!'
    }, 4000))

  } else if (cycleTime == 1800) {
    breathContainer.classList.add('breath-cycle-expand-wim')
    pointer.classList.add('pointer-rotate-wim')
    number++;
    if (number === 30) {
      textBottom.textContent = 'Hold breath for as long as you can and repeat the cycle';
      number = 0
      return resetChoice()
    }
    text.textContent = `Breathe in!`
    timeouts.push(setTimeout(() => {
      text.textContent = 'Breathe out!'
    }, 900))
  } else if (cycleTime == 10000) {
    breathContainer.classList.add('breath-cycle-expand-box')
    pointer.classList.add('pointer-rotate-box')
    text.textContent = 'Breathe in!'
    timeouts.push(setTimeout(() => {
      text.textContent = 'Hold!'
    }, 2500))
    timeouts.push(setTimeout(() => {
      text.textContent = 'Breathe out!'
    }, 5000))
    timeouts.push(setTimeout(() => {
      text.textContent = 'Hold!'
    }, 7500))
  }
}

playBreath.addEventListener('click', function () {
  video.play()
  music.play()
  for (let i = 0; i < timeouts.length; i++) {
    clearTimeout(timeouts[i]);
  }
  if (typeof interval !== 'undefined') {
    clearInterval(interval)
  }
  playBreath.classList.add('hide')
  breathContainer.classList.add('breath-cycle-expand')
  pointer.classList.add('pointer-rotate')
  textBottom.textContent = ''
  startCycle()
  interval = setInterval(startCycle, cycleTime)
})