From e71819b19b6da88b1b42ad5c0ee7c2934f8cae24 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Tue, 9 Sep 2025 11:22:16 +0100
Subject: [PATCH] SecondsAlive -> TimeAlive

now uses MS

also more dynamic
---
 src/components/SecondsAlive.astro | 38 -------------------------------
 src/components/TimeAlive.astro    | 30 ++++++++++++++++++++++++
 src/pages/about.astro             |  4 ++--
 3 files changed, 32 insertions(+), 40 deletions(-)
 delete mode 100644 src/components/SecondsAlive.astro
 create mode 100644 src/components/TimeAlive.astro

diff --git a/src/components/SecondsAlive.astro b/src/components/SecondsAlive.astro
deleted file mode 100644
index f599058d..00000000
--- a/src/components/SecondsAlive.astro
+++ /dev/null
@@ -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>
diff --git a/src/components/TimeAlive.astro b/src/components/TimeAlive.astro
new file mode 100644
index 00000000..a09d56d5
--- /dev/null
+++ b/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>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 487d507b..e368a409 100644
--- a/src/pages/about.astro
+++ b/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>