www/{index.html,countdown.js} - add a ten-minute phase

www/index.html - adjust countdown styles
mainly, add a blink for seconds and countdown
2022-12-31 13:16:19 +00:00 · 2022-12-31 13:16:04 +00:00 · 2022-12-31 13:06:57 +00:00 · 2022-12-31 13:06:22 +00:00 · 2022-12-31 10:32:34 +00:00 · 2022-12-31 10:32:19 +00:00
4 changed files with 31 additions and 11 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
+/node_modules/
--- a/package.json
+++ b/package.json
@@ -4,8 +4,12 @@
  "description": "Count down each New Year's arrival around the world",
  "main": "index.js",
  "scripts": {
+    "server": "http-server ./www",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "http-server": "^14.1.1"
+  }
 }
--- a/www/countdown.js
+++ b/www/countdown.js
@@ -1,8 +1,8 @@
 // This is deliberately browser-compatible JS, so we avoid fat arrows etc.

 var locale = "EN-GB";
-var now = new Date();
-var nextNewYearUTC = new Date(Date.UTC(now.getFullYear()+1, 0, 1));
+var now = getTimeNow();
+var nextNewYearUTC = new Date(Date.UTC(getTimeNow().getFullYear()+1, 0, 1));
 var secsRemaining = 0;
 var nextZone;
 var counter = document.getElementById("counter");
@@ -12,6 +12,15 @@ var untilDate = document.getElementById("until-date");

 var countDownSound = new Audio('get-ready.ogg');

+// This function returns the current time - or we can adjust it to a
+// fake time, if we're testing!
+function getTimeNow() {
+  var now = new Date();
+  var offset = 0; // hours
+  
+  return new Date(now.valueOf() + offset*3600000);
+}
+
 // Convert the next new year time to 'date, hours:mins:secs' in the target timezone
 function zoneTime(zone, refTime) {
  return refTime.toLocaleString('EN-US', {
@@ -226,7 +235,8 @@ function pad(num) {

 function counterClass(millisecsRemaining) {
  if (millisecsRemaining > 3600000) return "hours";
-  if (millisecsRemaining > 60000) return "minutes";
+  if (millisecsRemaining > 600000) return "minutes";
+  if (millisecsRemaining > 60000) return "ten-minutes";
  if (millisecsRemaining > 10000) return "seconds";
  return "countdown";
 }
@@ -257,7 +267,6 @@ function handleTick(now) {
  }

  var millisecsRemaining = zoneIndex[nextZone].nydDate.getTime() - now.getTime();
-  var excl = millisecsRemaining < 1000*5? "!" : "";

  console.debug("seconds",now.getSeconds());
  if (millisecsRemaining < 2*60*1000) {
@@ -291,7 +300,7 @@ function handleTick(now) {
 }

 function ticker() {
-  var now = new Date();
+  var now = getTimeNow();
  handleTick(now);

  var millis = now.getMilliseconds()
--- a/www/index.html
+++ b/www/index.html
@@ -1,7 +1,7 @@
 <html>
  <head>
-    <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/7.8.0/d3.min.js"></script>
-    <link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.0/d3.min.js"></script>
+    <link href="https://fonts.googleapis.com/css?family=Chango" rel="stylesheet" type="text/css">
    <style>
      body {
        font-family: Chango;
@@ -14,10 +14,16 @@
      div#location {
        font-size: 50pt;
      }
-      div.hours { color: blue; }
+      div.hours { color: black; }
      div.minutes { color: green; }
-      div.seconds { color: orange; }
-      div.countdown { color: red; }
+      div.ten-minutes { color: orange; }
+      div.seconds { color: orange; animation: blinker 1s linear infinite; }
+      div.countdown { color: red; animation: blinker 1s linear infinite; }
+      @keyframes blinker {
+        50% {
+          opacity: 0;
+        }
+      }
    </style>
  </head>
  <body>
Author	SHA1	Message	Date
Nick Stokoe	6fa785668c	www/{index.html,countdown.js} - add a ten-minute phase	2022-12-31 13:16:19 +00:00
Nick Stokoe	68fbefab9e	www/index.html - adjust countdown styles mainly, add a blink for seconds and countdown	2022-12-31 13:16:04 +00:00
Nick Stokoe	586471e83b	,gitignore - /node_modules/	2022-12-31 13:06:57 +00:00
Nick Stokoe	14c176326b	www/countdown.js - remove unused cruft	2022-12-31 13:06:22 +00:00
Nick Stokoe	13ea5765f0	www/index.html - use https URLs for remote assets	2022-12-31 10:32:34 +00:00
Nick Stokoe	e0e7b55d99	www/countdown.js - allow mocking the current time	2022-12-31 10:32:19 +00:00
Nick Stokoe	3a7f9e20e5	package.json - add server runscript	2022-12-31 10:15:35 +00:00