Update static/embed.js

static/embed.js

@@ -1,68 +1,74 @@
-/*  embed.js – guaranteed 7-segment look  */
+/*  embed.js – live U.S.-debt counter  */
 (() => {
-  const API = "https://ntdservices-debt-clock.hf.space/api/debt";
-  const CLS = "ntd-debt-clock";
+  const API         = "https://ntdservices-debt-clock.hf.space/api/debt";
+  const CLS         = "ntd-debt-clock";
+  const REFRESH_MS  = 5 * 60 * 1000;        // poll backend every 5 min
 
-  /* ── 1. inject a real DSEG7-Classic-Bold font once ─────────────── */
+  /* 1 ▸ inject DSEG-7 font once per page */
   if (!document.getElementById("dseg-face")) {
     const style = document.createElement("style");
-    style.id = "dseg-face";
+    style.id    = "dseg-face";
     style.textContent = `
       @font-face {
         font-family: "DSEG7";
-        src:
-          url("https://cdn.jsdelivr.net/npm/@fontsource/dseg7-classic/files/dseg7-classic-latin-700-normal.woff2") format("woff2");
+        src: url("https://cdn.jsdelivr.net/npm/@fontsource/dseg7-classic/files/dseg7-classic-latin-700-normal.woff2")
+             format("woff2");
         font-weight: 700;
         font-style: normal;
         font-display: swap;
-      }
-    `;
+      }`;
     document.head.appendChild(style);
   }
 
-  /* ── 2. mount logic ─────────────────────────────────────────────── */
+  /* 2 ▸ mount one clock per matching element */
   function mount(el) {
     Object.assign(el.style, {
       font: "700 4rem 'DSEG7', monospace",
       color: "#ffb400",
-      textShadow: "0 0 8px rgba(255, 180, 0, .9)",
+      textShadow: "0 0 8px rgba(255,180,0,.9)",
       background: "transparent",
       padding: "10px 18px",
       borderRadius: "6px",
       whiteSpace: "nowrap",
       letterSpacing: ".06em",
-      position: "absolute",
-      top: "40%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
       userSelect: "none",
+      position: "relative",
     });
 
-    /* fetch current debt + per-second rate */
-    fetch(API)
-      .then(r => r.json())
-      .then(d => {
-        let debt = d.startingDebt;
-        const rate = d.ratePerSecond;
-        let last = performance.now();
-
-        /* update 4×/sec so it “ticks” but doesn’t blur */
-        setInterval(() => {
-          const now = performance.now();
-          const dt  = (now - last) / 1000;
-          last = now;
-          debt += rate * dt;
+    let baseDebt   = 0;    // dollars at baseTime
+    let ratePerSec = 0;    // dollars / second
+    let baseTime   = Date.now();   // ms clock when we set baseDebt
 
-          el.textContent =
-            Math.round(debt).toLocaleString("en-US").replace(/,/g, " ");
-          
-        }, 250);
-      })
-      .catch(err => {
+    /* ── fetch latest figures ───────────────────────── */
+    async function pull() {
+      try {
+        const d = await fetch(API).then(r => r.json());
+        baseDebt   = d.startingDebt;
+        ratePerSec = d.ratePerSecond;
+        baseTime   = Date.now();        // reset integration point
+      } catch (err) {
         console.error("Debt fetch failed:", err);
-        el.textContent = "N/A";
-      });
+      }
+    }
+
+    /* initial fetch + periodic refresh */
+    pull();                       // immediately
+    setInterval(pull, REFRESH_MS);
+
+    /* ── draw loop (runs each animation frame) ─────── */
+    function tick() {
+      const now   = Date.now();
+      const delta = (now - baseTime) / 1000;     // seconds elapsed
+      const debt  = baseDebt + ratePerSec * delta;
+
+      el.textContent =
+        "$" + Math.round(debt).toLocaleString("en-US");
+
+      requestAnimationFrame(tick);
+    }
+    requestAnimationFrame(tick);
   }
 
+  /* auto-mount every <div class="ntd-debt-clock"> */
   document.querySelectorAll("." + CLS).forEach(mount);
 })();