SecondsAlive -> TimeAlive

now uses MS

also more dynamic

src/components/SecondsAlive.astro

@@ -1,38 +0,0 @@
-<span id="seconds-alive"></span>
-
-<script>
-    const birthDate = new Date("2004-11-04");
-    const birthDateSecs = Math.floor(birthDate.getTime() / 1000);
-    const currentTimeSecs = Math.floor(new Date().getTime() / 1000);
-
-    let secsElapsed = 0;
-
-    function updateSecondsAlive() {
-        let years = Math.floor(
-            (currentTimeSecs - birthDateSecs + secsElapsed) /
-                (60 * 60 * 24 * 365)
-        );
-        let days = Math.floor(
-            (currentTimeSecs - birthDateSecs + secsElapsed) / (60 * 60 * 24)
-        );
-        let hours = Math.floor(
-            (currentTimeSecs - birthDateSecs + secsElapsed) / (60 * 60)
-        );
-        let minutes = Math.floor(
-            (currentTimeSecs - birthDateSecs + secsElapsed) / 60
-        );
-        let seconds = currentTimeSecs - birthDateSecs + secsElapsed;
-
-        const element = document.getElementById("seconds-alive");
-        if (element) {
-            element.innerText = `AGE: ${years}y or ${days}d or ${hours}h or ${minutes}m or ${seconds}s (${birthDate.toDateString()})`;
-        }
-    }
-
-    updateSecondsAlive();
-
-    setInterval(() => {
-        secsElapsed++;
-        updateSecondsAlive();
-    }, 1000);
-</script>

src/components/TimeAlive.astro

@@ -0,0 +1,30 @@
+<span id="time-alive"></span>
+
+<script>
+    const birthDate = new Date("2004-11-04");
+    const birthDateMS = Math.floor(birthDate.getTime());
+    const currentTimeMS = Math.floor(new Date().getTime());
+
+    let interval = 1; // ms
+    let msElapsed = 0;
+
+    function updateTimeAlive() {
+        let years = Math.floor(
+            (currentTimeMS - birthDateMS + msElapsed) /
+                (60 * 60 * 24 * 365 * 1000)
+        );
+        let milliseconds = currentTimeMS - birthDateMS + msElapsed;
+
+        const element = document.getElementById("time-alive");
+        if (element) {
+            element.innerText = `${years}y or ${milliseconds}ms (${birthDate.toDateString()})`;
+        }
+    }
+
+    updateTimeAlive();
+
+    setInterval(() => {
+        msElapsed += interval;
+        updateTimeAlive();
+    }, interval);
+</script>

src/pages/about.astro

@@ -1,9 +1,9 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import SecondsAlive from "../components/SecondsAlive.astro";
+import TimeAlive from "../components/TimeAlive.astro";
 ---
 
 <Layout currentPage="about">
     <h1 class="text-md">about page</h1>
-    <SecondsAlive client:react />
+    AGE: <TimeAlive client:react />
 </Layout>