Merge pull request #14910 from fitztrev/event-countdown-ts

Event countdown to typescript

app/views/event.scala

@@ -48,7 +48,7 @@ object event:
     views.html.base.layout(
       title = e.title,
       moreCss = cssTag("event"),
-      moreJs = iifeModule("javascripts/event-countdown.js")
+      moreJs = jsModule("event.countdown")
     ):
       main(cls := "page-small event box box-pad")(
         boxTop(

ui/site/package.json

@@ -21,7 +21,8 @@
         "src/tvEmbed.ts": "tvEmbed",
         "src/puzzleEmbed.ts": "puzzle.embed",
         "src/lpvEmbed.ts": "lpv.embed",
-        "src/devMode.ts": "devMode"
+        "src/devMode.ts": "devMode",
+        "src/eventCountdown.ts": "event.countdown"
       }
     },
     "copy": [

ui/site/src/eventCountdown.ts

@@ -0,0 +1,35 @@
+site.load.then(() => {
+  $('.event .countdown').each(function () {
+    if (!this.dataset.seconds) return;
+
+    const $el = $(this);
+    const seconds = parseInt(this.dataset.seconds) - 1;
+    const target = new Date().getTime() + seconds * 1000;
+
+    const second = 1000,
+      minute = second * 60,
+      hour = minute * 60,
+      day = hour * 24;
+
+    const redraw = function () {
+      const distance = target - new Date().getTime();
+
+      if (distance > 0) {
+        $el.find('.days').text(Math.floor(distance / day).toString()),
+          $el.find('.hours').text(Math.floor((distance % day) / hour).toString()),
+          $el.find('.minutes').text(Math.floor((distance % hour) / minute).toString()),
+          $el.find('.seconds').text(
+            Math.floor((distance % minute) / second)
+              .toString()
+              .padStart(2, '0'),
+          );
+      } else {
+        clearInterval(interval);
+        site.reload();
+      }
+    };
+    const interval = setInterval(redraw, second);
+
+    redraw();
+  });
+});