Add WebSocket integration for Lanyard and Hyperate, implement scanline effects, and update dependencies

src/App.css

@@ -0,0 +1,59 @@
+.scanlines {
+    overflow: hidden;
+}
+
+.scanlines:before,
+.scanlines:after {
+    display: block;
+    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% 4px;
+    animation: scanlines 1s steps(60) infinite;
+}
+
+/* ANIMATE UNIQUE SCANLINE */
+@keyframes scanline {
+    0% {
+        transform: translate3d(0, 200000%, 0);
+    }
+}
+
+@keyframes scanlines {
+    0% {
+        background-position: 0 50%;
+    }
+}
+
+div {
+    margin: 0;
+    padding: 0;
+}
+
+div.scanlines {
+    position: absolute;
+}
+
+.microlight>span:nth-child(6) {
+    color: var(--status-color);
+}

src/App.tsx

@@ -1,3 +1,15 @@
+import Lanyard from './components/Lanyard';
+import Hyperate from './components/Hyperate';
+
 export default () => {
-    return <div>Hello, World!</div>
+    return <div>
+        <p>seth&gt; cat ./about.txt</p>
+        <p>A Dedicated Backend Developer, with a passion for high-fidelity audio, 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/Socket.ts

@@ -0,0 +1,38 @@
+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;
+                }
+            }
+        };
+
+        setInterval(() => {
+            this._socket.send("ping");
+        }, 10000);
+    }
+
+    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/components/Hyperate/index.tsx

@@ -0,0 +1,19 @@
+import { createRef } from "tsx-dom";
+import microlight from "microlight";
+
+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`;
+        }
+        microlight.reset();
+    });
+    return <div>
+        <p class="microlight" ref={paragraph}>0 BPM</p>
+    </div>;
+}

src/components/Lanyard/index.tsx

@@ -0,0 +1,40 @@
+import { createRef } from "tsx-dom";
+import microlight from "microlight";
+
+import socket from "../../Socket";
+
+const statusTypes: { [key: string]: string } = {
+    online: "green",
+    idle: "yellow",
+    dnd: "red",
+    invisible: "inherent",
+    offline: "inherent",
+}
+
+const activityTypes: { [key: number]: string } = {
+    0: "Playing",
+    1: "Streaming",
+    2: "Listening to",
+    3: "Watching",
+    4: "Custom",
+    5: "Competing in",
+}
+
+export default () => {
+    const paragraph = createRef<HTMLParagraphElement>();
+
+    socket.addEventListener('lanyard', (event: Event) => {
+        const lanyard = (event as CustomEvent).detail;
+        if (paragraph.current) {
+            paragraph.current.style = `--status-color: ${statusTypes[lanyard.discord_status]};`;
+            paragraph.current.innerText = JSON.stringify({
+                status: lanyard.discord_status,
+                activities: lanyard.activities.map((act: { type: number, name: string }) => { return `${activityTypes[act.type]} ${act.name}` }),
+            }, null, 1);
+        }
+        microlight.reset();
+    });
+    return <div>
+        <p class="microlight" ref={paragraph}>{JSON.stringify({})}</p>
+    </div>;
+}

src/index.css

@@ -1,28 +1,18 @@
 @import "./App.css";
 
-:root {
-    --color-background-primary: #1a1d1f;
-    --color-background-secondary: #24282b;
-    --color-background-tertiary: #222527;
-
-    --color-text-primary: #DEDEDE;
-    --color-text-secondary: #ACACAC;
-    --color-link: #7289DA;
-    --color-link-hover: #4E5D94;
-    --color-link-active: #5B6EAE;
-}
-
 html,
 head,
 body {
     margin: 0;
     padding: 0;
     font-family: 'Circular Std', sans-serif;
+    height: 100vh;
+    width: 100vw;
 }
 
 body {
-    background-color: var(--color-background-primary);
-    color: var(--color-text-primary);
-    font-size: 16px;
-    line-height: 1.5;
+    color: #DEDEDE;
+    font: 2vh Inconsolata, monospace;
+    text-shadow: 0 0 5px #C8C8C8;
+    background: radial-gradient(at bottom right, rgba(0, 150, 0, 0.1) 0%, rgba(0, 0, 0, 1) 100%);
 }

src/index.html

@@ -16,7 +16,7 @@
     <style id="font"></style>
 </head>
 
-<body>
+<body class="scanlines">
     <script src="index.tsx"></script>
 </body>
 

src/index.tsx

@@ -2,7 +2,9 @@ import "tsx-dom";
 
 import App from './App';
 
-document.getElementById("font")!.innerText = `@font-face {
+const font = document.getElementById("font")
+if (font) {
+    font.innerText = `@font-face {
     font-family: 'Circular Std';
     src: url('/public/font/Black.woff2') format('woff2');
     font-weight: black;
@@ -65,7 +67,7 @@ document.getElementById("font")!.innerText = `@font-face {
     font-style: italic;
     font-display: swap
 }`
-
+}
 document.body.appendChild(<App />);
 
 // You're garbage, let me collect you.