timer/timer.js at master · davidpicariello/timer · 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
let countDownTime = 30;
let rounds = 4;
let breakLength = 5;
const allRight = new Audio('AllRightGoodForNow.mp3');
const letsGo = new Audio('LetsGo.mp3');
const youreDone = new Audio('You-reDone.mp3');

let totalTimeLeft = 0;
let lastSecond = true;
let timerStarted = false;

function countDown() {
  if (timerStarted) {
    return;
  }

  const roundsInput = document.getElementById("roundsInput");
  const roundLengthInput = document.getElementById("roundLengthInput");
  const breakLengthInput = document.getElementById("breakLengthInput");
  const inputs = [roundsInput, roundLengthInput, breakLengthInput];
  if (inputs.some(input => !input.reportValidity())) {
    return;
  }

  rounds = roundsInput.valueAsNumber;
  countDownTime = roundLengthInput.valueAsNumber;
  breakLength = breakLengthInput.valueAsNumber;
  totalTimeLeft = (countDownTime + 1) * rounds + breakLength * rounds;
  timerStarted = true;
  lastSecond = true;
  inputs.forEach(input => input.disabled = true);

  document.getElementById("timer").textContent = countDownTime;
  setSettingsVisible(false);
  document.getElementById("settingsButton").style.display = "none";
  document.getElementById("startButton").style.display = "none";
  document.getElementById("resetButton").style.display = "inline-block";

  // Generate timeouts from end to start
  for (let round = rounds; round >= 1; round--) {
    generateRoundTimer(round);
    generateRoundBreak(round);
  }
}

function toggleSettings() {
  const settingsButton = document.getElementById("settingsButton");
  setSettingsVisible(!settingsButton.classList.contains("active"));
}

function setSettingsVisible(visible) {
  const settingsButton = document.getElementById("settingsButton");
  document.getElementById("timerSettings").style.display = visible ? "grid" : "none";
  document.getElementById("timer").style.display = visible ? "none" : "";
  settingsButton.classList.toggle("active", visible);
  settingsButton.setAttribute("aria-pressed", visible);
}

function updateTimerDescription() {
  const inputs = [
    document.getElementById("roundsInput"),
    document.getElementById("roundLengthInput"),
    document.getElementById("breakLengthInput")
  ];
  if (inputs.some(input => !input.validity.valid)) {
    return;
  }

  const [roundCount, roundLength, restLength] = inputs.map(input => input.valueAsNumber);
  const roundWord = roundCount === 1 ? "round" : "rounds";
  const durationWord = roundLength === 1 ? "second" : "seconds";
  const restDescription = restLength === 0 ? "no break" : "a " + restLength + " second break";
  document.getElementById("timerDescription").textContent =
    roundCount + " " + roundWord + " of " + roundLength + " " + durationWord + " with " + restDescription;
}

function generateRoundTimer(round) {
  for (let timer = 0; timer <= countDownTime; timer++) {
    if (lastSecond) {
      // special case: very last count down, done
      window.setTimeout(setTimerDisplay, totalTimeLeft * 1000, "&#x2714;", "<div class=\"centered-message\">Round number: " + round + "</div>");
      lastSecond = false;
    } else {
      window.setTimeout(setTimerDisplay, totalTimeLeft * 1000, timer, "<div class=\"centered-message\">Round number: " + round + "</div>");
    }
    totalTimeLeft--;
  }
}

function generateRoundBreak(round) {
  for (let b = breakLength; b >= 1; b--) {
    let leftInBreak = breakLength - b + 1;
    let breakLabel = b === totalTimeLeft ? "Get ready" : "Left in break";
    scheduleBreakTimer(round, breakLabel, leftInBreak);
    totalTimeLeft--;
  }
}

function scheduleBreakTimer(round, breakLabel, leftInBreak) {
  let message = "<div class=\"centered-message\">Round number: " + round + "</div>" +
    "<div class=\"centered-message\">" + breakLabel + ": " + leftInBreak + "</div>";
  window.setTimeout(setTimerDisplay, totalTimeLeft * 1000, "&#x23F3;", message);
}

function setTimerDisplay(timerText, message) {
  document.getElementById("timer").innerHTML = timerText;
  document.getElementById("message").innerHTML = message;
  document.getElementById("resetButton").style.display = "inline-block";
  document.getElementById("startButton").style.display = "none";

  if (timerText === 0) {
    allRight.play();
  } else if (timerText === countDownTime) {
    letsGo.play();
  } else if (timerText === "&#x2714;") {
    youreDone.play();
    timerStarted = false;
    lastSecond = true;
    ["roundsInput", "roundLengthInput", "breakLengthInput"].forEach(id => {
      document.getElementById(id).disabled = false;
    });
    setSettingsVisible(false);
    document.getElementById("settingsButton").style.display = "inline-block";
    document.getElementById("resetButton").style.display = "none";
    document.getElementById("startButton").style.display = "inline-block";
  }
}

function resetTimer() {
  location.reload();
}