Functionality on the HRT tracker is done.

This commit is contained in:
Alexis Werefox 2021-04-26 05:09:36 +00:00
parent f120dd2bd4
commit a22bb66b0a
2 changed files with 77 additions and 3 deletions

View File

@ -1,19 +1,50 @@
import BasicPage from "../../components/basic-page-template"; import BasicPage from "../../components/basic-page-template";
import WCard from "../../components/werefox-card"; import WCard from "../../components/werefox-card";
function getTimes(interval) {
let expected = Date.now() - new Date("December 11, 2020 00:00:00") + interval;
let days = Math.round(expected / 1000 / 60 / 60 / 24);
let hours = (new Date(expected).getHours() + 6) % 24;
let minutes = new Date(expected).getMinutes();
let seconds = new Date(expected).getSeconds();
return {
expected: expected,
days: days,
hours: hours,
minutes: minutes,
seconds: seconds,
};
}
export default function HRT() { export default function HRT() {
const initialTimes = getTimes(0);
const initialTimesArray = [
`${initialTimes["days"]} days, `,
`${initialTimes["hours"]} hours, `,
`${initialTimes["minutes"]} minutes, `,
`and ${initialTimes["seconds"]} seconds`,
];
console.log(initialTimesArray);
return ( return (
<BasicPage <BasicPage
page_title="Alexis Werefox HRT Tracker" page_title="Alexis Werefox HRT Tracker"
card_title="Track my HRT progress!" card_title="Track my HRT progress!"
> >
<WCard> <WCard>
<p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue"> <p className="p-6 text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
Oh no I haven't actually finished this page but I started on I'm so glad you're interested!!
<br /> <br />
December 11th, 2020 I have been on HRT for:
<br />
<p className="grid grid-cols-1 grid-rows-4">
{initialTimesArray.map((t, n) => (
<p id={`time_${n}`}>{t}</p>
))}
</p>
</p> </p>
</WCard> </WCard>
<script src="/js/hrttimer.js"></script>
</BasicPage> </BasicPage>
); );
} }

View File

@ -0,0 +1,43 @@
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,
};
}