Switch exercise timer implementation to use luxon instead of JS dates.

Author: stefmolin

slides/templates/regular/index.html.j2

@@ -166,7 +166,8 @@ require(
     },
     [
       "{{ reveal_url_prefix }}/dist/reveal.js",
-      "{{ reveal_url_prefix }}/plugin/notes/notes.js"
+      "{{ reveal_url_prefix }}/plugin/notes/notes.js",
+      "https://cdn.jsdelivr.net/npm/luxon@3.2.1/build/global/luxon.min.js"
     ],
 
     function(Reveal, RevealNotes){
@@ -222,23 +223,21 @@ require(
             }
         );
 
+        // for working with dates/times
+        const { DateTime, Duration } = luxon;
+
         // add exercise timer
         let updateExerciseTimerInterval;
         Reveal.addKeyBinding(
             { keyCode: 84, key: "T", description: "Start the exercise timer" },
             () => {
-                const input = prompt("How many minutes?");
-                if (input !== undefined && input !== "" && input !== null){
-                    if (!isNaN(input) && input >= 0.1) {
-                      const exerciseTime = input * 60 * 1000;
-                      const countDownTime = new Date(new Date().getTime() + exerciseTime).getTime();
-
-                      const getTimeText = (elapsedTime) => {
-                          const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));
-                          const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);
-                          const padInt = (x) => String(x).padStart(2, '0');
-                          return `⏱ ${padInt(minutes)}:${padInt(seconds)}`;
-                      }
+                let exerciseTime = prompt("Timer duration in minutes");
+                if (exerciseTime !== undefined && exerciseTime !== "" && exerciseTime !== null){
+                    if (!isNaN(exerciseTime) && exerciseTime >= 0.1) {
+                      exerciseTime = Duration.fromMillis(exerciseTime * 60 * 1000);
+                      const countDownTime = DateTime.now().plus(exerciseTime);
+
+                      const getTimeText = (elapsedTime) => `⏱ ${elapsedTime.toFormat('mm:ss')}`;
 
                       if ($('.exercise-timer').length === 0) { // add to DOM if not already there
                           $('.reveal').append(
@@ -253,20 +252,21 @@ require(
 
                       // write the starting time minus the 1 second delay before the update
                       const updateFrequency = 1000;
-                      $('.exercise-timer').text(getTimeText(exerciseTime - updateFrequency));
+                      $('.exercise-timer').text(getTimeText(exerciseTime.minus({ milliseconds: updateFrequency })));
 
                       // update the remaining time each second
                       const updateTimer = () => {
-                          const now = new Date().getTime();
-                          const elapsedTime = countDownTime - now;
-
-                          if (elapsedTime >= 1000) $('.exercise-timer').text(getTimeText(elapsedTime));
-                          else if (elapsedTime >= 0) {
-                              $('.exercise-timer').text(getTimeText(0));
-                              const audio = new Audio('../../media/time_is_up.m4a'); // TODO switch to URL of hosted version
+                          const now = DateTime.now();
+                          const elapsedTime = countDownTime.diff(now);
+                          const secondsRemaining = elapsedTime.as('seconds')
+
+                          if (secondsRemaining >= 1) $('.exercise-timer').text(getTimeText(elapsedTime));
+                          else if (secondsRemaining >= 0) {
+                              $('.exercise-timer').text(getTimeText(Duration.fromMillis(0)));
+                              const audio = new Audio('../../media/time_is_up.m4a'); // TODO: switch to URL of hosted version
                               audio.play();
                           }
-                          else if (elapsedTime >= -5 * 1000) $('.exercise-timer').text("TIME'S UP").css('color', 'red');
+                          else if (secondsRemaining >= -5) $('.exercise-timer').text("TIME'S UP").css('color', 'red');
                           else {
                               clearInterval(updateExerciseTimerInterval);
                               $('.exercise-timer').remove();