Thanks asonix for reminding me about useState

src/info/pages/hrt/index.js

@@ -1,5 +1,6 @@
 import BasicPage from "../../components/basic-page-template";
 import WCard from "../../components/werefox-card";
+import { useEffect, useState } from "react";
 
 function getTimes(interval) {
   let expected = Date.now() - new Date("December 11, 2020 00:00:00") + interval;
@@ -17,14 +18,21 @@ function getTimes(interval) {
 }
 
 export default function HRT() {
-  const initialTimes = getTimes(0);
+  const [timesArray, setTimesArray] = useState(getTimes());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimesArray(getTimes(0), 1000);
+    });
+    return () => clearInterval(interval);
+  }, [getTimes, setTimesArray]);
+
   const initialTimesArray = [
-    `${initialTimes["days"]} days, `,
+    `${timesArray["days"]} days, `,
-    `${initialTimes["hours"]} hours, `,
+    `${timesArray["hours"]} hours, `,
-    `${initialTimes["minutes"]} minutes, `,
+    `${timesArray["minutes"]} minutes, `,
-    `and ${initialTimes["seconds"]} seconds`,
+    `and ${timesArray["seconds"]} seconds`,
   ];
-  console.log(initialTimesArray);
 
   return (
     <BasicPage
@@ -44,7 +52,6 @@ export default function HRT() {
           </p>
         </p>
       </WCard>
-      <script src="/js/hrttimer.js"></script>
     </BasicPage>
   );
 }

src/info/public/js/hrttimer.js

@@ -1,43 +0,0 @@
-window.onload = function HRTTimer() {
-  let interval = 1000;
-  let times = getTimes(interval);
-  let expected = times["expected"];
-  setTimeout(step, interval);
-  function step() {
-    const dt = Date.now() - expected; // the drift (positive for overshooting)
-    if (dt > interval) {
-      // something really bad happened. Maybe the browser (tab) was inactive?
-      // possibly special handling to avoid futile "catch up" run
-    }
-    times["days"] = Math.round(expected / 1000 / 60 / 60 / 24);
-    times["hours"] = (new Date(expected).getHours() + 6) % 24;
-    times["minutes"] = new Date(expected).getMinutes();
-    times["seconds"] = new Date(expected).getSeconds();
-    if (document.getElementById("time_0") != null) {
-      document.getElementById("time_0").textContent = times["days"] + " days, ";
-      document.getElementById("time_1").textContent =
-        times["hours"] + " hours, ";
-      document.getElementById("time_2").textContent =
-        times["minutes"] + " minutes, ";
-      document.getElementById("time_3").textContent =
-        "and " + times["seconds"] + " seconds";
-    }
-    expected += interval;
-    setTimeout(step, Math.max(interval - dt, 1000)); // take into account drift
-  }
-};
-
-function getTimes(interval) {
-  let expected = Date.now() - new Date("December 11, 2020 00:00:00") + interval;
-  let days = Math.floor(expected / 1000 / 60 / 60 / 24);
-  let hours = new Date(expected).getHours();
-  let minutes = new Date(expected).getMinutes();
-  let seconds = new Date(expected).getSeconds();
-  return {
-    expected: expected,
-    days: days,
-    hours: hours,
-    minutes: minutes,
-    seconds: seconds,
-  };
-}

src/info/tailwind.config.js

@@ -33,12 +33,12 @@ module.exports = {
       },
       keyframes: {
         wiggle: {
-          "0%, 100%": { transform: "rotate(-2deg)" },
+          "0%, 100%": { transform: "rotate(-1deg)" },
-          "50%": { transform: "rotate(2deg)" },
+          "50%": { transform: "rotate(1deg)" },
         },
       },
       animation: {
-        wiggle: "wiggle 5s ease-in-out infinite",
+        wiggle: "wiggle 7s ease-in-out infinite",
       },
     },
   },