first commit! 🎉

port "ari is learning!" assets to live go backend.
some prep work for further developments for ari melody LIVE

learning/public/cards.js

@@ -0,0 +1,51 @@
+const timeEl = document.getElementById("time");
+const titleEl = document.getElementById("title");
+const coverEl = document.getElementById("cover");
+
+function render() {
+    const date = new Date();
+
+    const tick = (date.getMilliseconds() * 0.001 % 1.0 > 0.5) ? ":" : " ";
+
+    const hh = `${date.getUTCHours()}`.padStart(2, "0");
+    const mm = `${date.getUTCMinutes()}`.padStart(2, "0");
+    const ss = `${date.getUTCSeconds()}`.padStart(2, "0");
+    timeEl.innerText = `${hh}${tick}${mm}${tick}${ss}`;
+
+    requestAnimationFrame(render);
+}
+
+function ready() {
+    coverEl.classList.add("hidden");
+
+    requestAnimationFrame(render);
+}
+
+async function updateTitle() {
+    if (!titleEl) {
+        ready();
+        return;
+    }
+
+    const eventSource = new EventSource("/learning/sse");
+    eventSource.addEventListener("open", () => {
+        console.log("Connected.");
+
+        eventSource.addEventListener("title-update", event => {
+            console.log(`title updated: \"${titleEl.innerText}\" -> \"${event.data}\"`)
+            titleEl.innerText = event.data;
+            ready();
+        });
+
+        eventSource.addEventListener("error", () => {
+            eventSource.removeEventListener("error");
+            eventSource.close();
+            console.error("Connection lost, or an error has occurred.");
+            console.log("Attempting to reconnect...");
+            setTimeout(() => {
+                updateTitle();
+            }, 1000);
+        });
+    });
+}
+updateTitle();