diff --git a/src/info/pages/hrt/index.js b/src/info/pages/hrt/index.js
index 8f236c9..a4bbc2b 100644
--- a/src/info/pages/hrt/index.js
+++ b/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, `,
- `${initialTimes["hours"]} hours, `,
- `${initialTimes["minutes"]} minutes, `,
- `and ${initialTimes["seconds"]} seconds`,
+ `${timesArray["days"]} days, `,
+ `${timesArray["hours"]} hours, `,
+ `${timesArray["minutes"]} minutes, `,
+ `and ${timesArray["seconds"]} seconds`,
];
- console.log(initialTimesArray);
return (
-
);
}
diff --git a/src/info/public/js/hrttimer.js b/src/info/public/js/hrttimer.js
deleted file mode 100644
index be88c59..0000000
--- a/src/info/public/js/hrttimer.js
+++ /dev/null
@@ -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,
- };
-}
diff --git a/src/info/tailwind.config.js b/src/info/tailwind.config.js
index e9bbd90..82ccf06 100644
--- a/src/info/tailwind.config.js
+++ b/src/info/tailwind.config.js
@@ -33,12 +33,12 @@ module.exports = {
},
keyframes: {
wiggle: {
- "0%, 100%": { transform: "rotate(-2deg)" },
- "50%": { transform: "rotate(2deg)" },
+ "0%, 100%": { transform: "rotate(-1deg)" },
+ "50%": { transform: "rotate(1deg)" },
},
},
animation: {
- wiggle: "wiggle 5s ease-in-out infinite",
+ wiggle: "wiggle 7s ease-in-out infinite",
},
},
},