event countdown - with hack loading

public/javascripts/event-countdown.js

@@ -0,0 +1,35 @@
+function cooldown(node, dateTarget) {
+
+  var second = 1000,
+    minute = second * 60,
+    hour = minute * 60,
+    day = hour * 24;
+
+  var redraw = function() {
+
+    var now = new Date().getTime(), distance = dateTarget - now;
+
+    if (distance > 0) {
+      node.querySelector('.days').innerText = Math.floor(distance / (day)),
+      node.querySelector('.hours').innerText = Math.floor((distance % (day)) / (hour)),
+      node.querySelector('.minutes').innerText = Math.floor((distance % (hour)) / (minute)),
+      node.querySelector('.seconds').innerText = Math.floor((distance % (minute)) / second);
+    } else {
+      clearInterval(interval);
+      lichess.reload();
+    }
+
+  };
+  var interval = setInterval(redraw, second);
+
+  redraw();
+}
+
+$('#event p.when').each(function() {
+  var dateTarget = new Date($(this).find('time').attr('datetime'));
+  $(this).replaceWith($(
+    '<ul class="countdown"><li><span class="days"></span>days</li><li><span class="hours"></span>Hours</li><li><span class="minutes"></span>Minutes</li><li><span class="seconds"></span>Seconds</li></ul>'
+  ));
+  cooldown($('#event .countdown')[0], dateTarget);
+  lichess.loadCss('stylesheets/event-countdown.css');
+})

public/stylesheets/event-countdown.css

@@ -0,0 +1,15 @@
+.countdown {
+  text-align: center;
+}
+.countdown li {
+  display: inline-block;
+  font-size: 1.5em;
+  list-style-type: none;
+  padding: 1em;
+  text-transform: uppercase;
+}
+
+.countdown li span {
+  display: block;
+  font-size: 4.5rem;
+}

ui/site/src/main.js

@@ -928,6 +928,9 @@ lichess.topMenuIntent = function() {
 
     lichess.requestIdleCallback(function() {
       lichess.parseFen();
+      if (document.getElementById('event')) {
+        lichess.loadScript('javascripts/event-countdown.js');
+      }
       $('div.checkmateCaptcha').each(function() {
         var $captcha = $(this);
         var $board = $captcha.find('.mini_board');