refactor a lot

src/front/App.css

@@ -0,0 +1,59 @@
+.scanlines {
+    overflow: hidden;
+}
+
+.scanlines:before,
+.scanlines:after {
+    display: inherit;
+    pointer-events: none;
+    content: "";
+    position: absolute;
+}
+
+.scanlines:before {
+    width: 100%;
+    height: 2px;
+    z-index: 2147483649;
+    background: rgba(0, 0, 0, 0.3);
+    opacity: 0.75;
+    animation: scanline 6s linear infinite;
+}
+
+.scanlines:after {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2147483648;
+    background: linear-gradient(to bottom,
+            transparent 50%,
+            rgba(0, 0, 0, 0.3) 51%);
+    background-size: 100% 6px;
+    animation: scanlines 2s steps(30) infinite;
+}
+
+/* ANIMATE UNIQUE SCANLINE */
+@keyframes scanline {
+    0% {
+        transform: translate3d(0, 200000%, 0);
+    }
+}
+
+@keyframes scanlines {
+    0% {
+        background-position: 0 50%;
+    }
+}
+
+span.shj-syn-str:nth-child(2) {
+    color: var(--status-color, rgba(150, 150, 150, 0.1));
+}
+
+.shj-numbers {
+    padding: 0px;
+}
+
+.shj-lang-json {
+    padding: 0px;
+    background-color: transparent;
+}

src/front/App.tsx

@@ -0,0 +1,15 @@
+import Lanyard from './components/Lanyard';
+import Hyperate from './components/Hyperate';
+
+export default () => {
+    return <div class="app">
+        <p>seth&gt; cat ./about.txt</p>
+        <p>A Dedicated Backend Developer,<br />with a passion for high-fidelity audio,<br />gaming, and web development.</p>
+
+        <p>seth&gt; curl /tmp/discord-ipc</p>
+        <p><Lanyard /></p>
+
+        <p>seth&gt; cat /tmp/heartrate</p>
+        <p><Hyperate /></p>
+    </div>
+}

src/front/Socket.ts

@@ -0,0 +1,50 @@
+const { protocol, host } = window.location;
+
+class Socket extends EventTarget {
+    private _socket: WebSocket;
+
+    constructor(url: string) {
+        super();
+
+        this._socket = new WebSocket(url);
+        this._socket.onmessage = (event) => {
+            const { type, data } = JSON.parse(event.data);
+
+            switch (type) {
+                case "lanyard": {
+                    this.emitLanyard(data);
+                    break;
+                }
+                case "hyperate": {
+                    this.emitHyperate(data.hr);
+                    break;
+                }
+                case "echo": {
+                    console.log("Echo: ", data);
+                    break;
+                }
+                default: {
+                    console.error("Unknown message type: ", type, data);
+                    break;
+                }
+            }
+        };
+
+        this._socket.onclose = () => {
+            location.reload();
+        };
+
+        setInterval(() => {
+            this._socket.send("ping");
+        }, 30 * 1000);
+    }
+
+    emitLanyard(lanyard: object) {
+        this.dispatchEvent(new CustomEvent('lanyard', { detail: lanyard }));
+    }
+    emitHyperate(heartRate: number) {
+        this.dispatchEvent(new CustomEvent('hyperate', { detail: heartRate }));
+    }
+}
+
+export default new Socket(`${protocol.replace("http", "ws")}//${host}/api/ws`);

src/front/components/Hyperate/index.tsx

@@ -0,0 +1,17 @@
+import { createRef } from "tsx-dom";
+
+import socket from "../../Socket";
+
+export default () => {
+    const paragraph = createRef<HTMLParagraphElement>();
+
+    socket.addEventListener('hyperate', (event: Event) => {
+        const heartRate = (event as CustomEvent).detail;
+        if (paragraph.current) {
+            paragraph.current.innerText = `${heartRate} BPM`;
+        }
+    });
+    return <div>
+        <p ref={paragraph}>0 BPM</p>
+    </div>;
+}

src/front/components/Lanyard/index.tsx

@@ -0,0 +1,59 @@
+import { createRef } from "tsx-dom";
+import { highlightAll } from "@speed-highlight/core";
+
+import socket from "../../Socket";
+
+const statusTypes: { [key: string]: string } = {
+    online: "rgb(0, 150, 0)",
+    idle: "rgb(150, 150, 0)",
+    dnd: "rgb(150, 0, 0)",
+    offline: "rgb(150, 150, 150)",
+}
+
+const gradientTypes: { [key: string]: string } = {
+    online: "rgba(0, 150, 0, 0.1)",
+    idle: "rgba(150, 150, 0, 0.1)",
+    dnd: "rgba(150, 0, 0, 0.1)",
+    offline: "rgba(150, 150, 150, 0.1)",
+}
+const activityTypes: { [key: number]: string } = {
+    0: "Playing",
+    1: "Streaming",
+    2: "Listening to",
+    3: "Watching",
+    4: "Custom Status",
+    5: "Competing in",
+}
+
+const stringify = (data: { [key: string]: string }) => {
+    return JSON.stringify(data, null, 2)
+}
+
+export default () => {
+    const code = createRef<HTMLDivElement>();
+
+    socket.addEventListener('lanyard', (event: Event) => {
+        const lanyard = (event as CustomEvent).detail;
+        document.body.style = `--status-color: ${statusTypes[lanyard.discord_status]}; --gradient-color: ${gradientTypes[lanyard.discord_status]};`;
+        if (code.current) {
+            code.current.innerHTML = stringify({
+                status: lanyard.discord_status,
+                activities: lanyard.activities.map((act: {
+                    type: number, name: string, details: string, state: string
+                }) => {
+                    return [
+                        ... new Set([
+                            activityTypes[act.type],
+                            act.name,
+                            act.details,
+                            act.state
+                        ])
+                    ].filter(n => n)
+                }),
+            });
+        }
+        highlightAll();
+    });
+
+    return <div class="shj-lang-json" ref={code}>{"{}"}</div>
+}

src/front/index.css

@@ -0,0 +1,20 @@
+@import "../../node_modules/@speed-highlight/core/dist/themes/dark.css";
+
+@import "./App.css";
+
+html,
+head,
+body {
+    margin: 0;
+    padding: 0;
+    font: 2vh monospace;
+    height: 100vh;
+    width: 100vw;
+}
+
+body {
+    color: #DEDEDE;
+    text-shadow: 0 0 5px #C8C8C8;
+    background: radial-gradient(at bottom right, var(--gradient-color, rgba(150, 150, 150, 0.1)) 0%, rgba(0, 0, 0, 1) 100%);
+    display: flex;
+}

src/front/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#000000">
+    <meta name="description"
+        content="A Dedicated Backend Developer, with a passion for high-fidelity audio, gaming, and web development.">
+    <meta name="keywords" content="Seth, IPv4, Army, Seth@IPv4, web development, audio, gaming">
+    <meta name="author" content="Seth">
+    <title>Seth @ IPv4 dot Army</title>
+    <link rel="icon" href="/public/favicon.svg" /> 
+    <meta name="color-scheme" content="dark" />
+    <link rel="stylesheet" href="index.css" />
+</head>
+
+<body class="scanlines">
+    <script src="index.tsx"></script>
+</body>
+
+</html>

src/front/index.tsx

@@ -0,0 +1,8 @@
+import "tsx-dom";
+
+import App from './App';
+
+document.body.appendChild(<App />);
+
+// You're garbage, let me collect you.
+fetch("/api/gc")