really fancy loggin + fonts on my own "cdn"

1 files changed, 31 insertions, 7 deletions

diff --git a/source/client/logger.ts b/source/client/logger.ts
index f4f4727..1f7139c 100644
--- a/source/client/logger.ts
+++ b/source/client/logger.ts
@@ -1,13 +1,16 @@
 /// <reference lib="dom" />
 
-export type LogTag = "webrtc" | "ws" | "media" | "*" | "misc"
-const log_tag_color: { [key in LogTag]: string } = {
-    "*": "#FF0000",
-    webrtc: "#FF00FF",
-    media: "#FFFF00",
-    ws: "#00FFFF",
-    misc: "#2222FF",
+const log_tag_color = {
+    "*": "#FF4444",
+    webrtc: "#FF44FF",
+    media: "#FFFF44",
+    ws: "#44FFFF",
+    rnnoise: "#2222FF",
+    usermodel: "#44FF44",
 }
+export type LogTag = keyof typeof log_tag_color
+
+let logger_container: HTMLDivElement
 
 // TODO maybe log time aswell
 // deno-lint-ignore no-explicit-any
@@ -17,4 +20,25 @@ export function log(tag: LogTag, message: string, ...data: any[]) {
         if (e instanceof MediaStreamTrack) data[i] = `(${e.kind}) ${e.id}`
     }
     console.log(`%c[${tag}] ${message}`, "color:" + log_tag_color[tag], ...data);
+
+    if (logger_container) {
+        const e = document.createElement("p")
+        e.classList.add("logger-line")
+        e.textContent = `[${tag}] ${message}`
+        e.style.color = log_tag_color[tag]
+        logger_container.append(e)
+        setTimeout(() => {
+            e.remove()
+        }, 6000)
+    }
 }
+
+globalThis.addEventListener("load", () => {
+    const d = document.createElement("div")
+    d.classList.add("logger-container")
+    document.body.append(d)
+    logger_container = d
+
+    // clear the console every hour so logs dont accumulate
+    setInterval(() => console.clear(), 1000 * 60 * 60)
+})