f

src/front/App.tsx

@@ -1,40 +1,19 @@
 import "mdui/components/layout";
 import "mdui/components/layout-main";
 
-import Hyperate from "./components/Hyperate";
-import Lanyard from "./components/Lanyard";
 import NavigationBar from "./components/NavigationBar";
 import TopAppBar from "./components/TopAppBar";
 
+import About from "./components/pages/About";
+
 export default () => {
 	return (
-		<div>
+		<mdui-layout full-height>
 			<TopAppBar />
-			<mdui-layout>
+			<mdui-layout-main>
-				<mdui-layout-main>
+				<About />
-					<div class="app terminal">
+			</mdui-layout-main>
-						<p>[seth@ipv4 ~]$ 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@ipv4 ~]$ cat /tmp/discord-ipc</p>
-						<p>
-							<Lanyard />
-						</p>
-
-						<p>[seth@ipv4 ~]$ cat /tmp/heartrate</p>
-						<p>
-							<Hyperate />
-						</p>
-					</div>
-				</mdui-layout-main>
-			</mdui-layout>
 			<NavigationBar />
-		</div>
+		</mdui-layout>
 	);
 };

src/front/components/Hyperate/index.tsx

@@ -7,13 +7,22 @@ export default () => {
 
 	socket.addEventListener("hyperate", (event: Event) => {
 		const heartRate = (event as CustomEvent).detail;
+
+		if (heartRate === 0) {
+			document.body.style.setProperty("--hyperate-display", "none");
+		} else {
+			document.body.style.removeProperty("--hyperate-display");
+		}
+
+		document.body.style.setProperty("--bpm", heartRate.toString());
+
 		if (paragraph.current) {
-			paragraph.current.innerText = `${heartRate} BPM`;
+			paragraph.current.innerText = `❤️ ${heartRate} BPM`;
 		}
 	});
 	return (
 		<div>
-			<p ref={paragraph}>0 BPM</p>
+			<p class="heartbeat" ref={paragraph}>❤️ 0 BPM</p>
 		</div>
 	);
 };

src/front/components/Lanyard/index.tsx

@@ -1,7 +1,16 @@
 import { highlightElement } from "@speed-highlight/core";
+import { artist } from "../../utilities/artist";
 import { createRef } from "tsx-dom";
 import socket from "../../utilities/socket";
 
+const colorMap = {
+	online: "#00ff00",
+	idle: "#ffff00",
+	dnd: "#ff0000",
+	offline: "",
+	streaming: "#ff00ff",
+};
+
 const activityTypes: Record<number, string> = {
 	0: "Playing",
 	1: "Streaming",
@@ -17,10 +26,23 @@ export default () => {
 	socket.addEventListener("lanyard", (event: Event) => {
 		const lanyard = (event as CustomEvent<LanyardData>).detail;
 
+		const streamingActivity = lanyard.activities.find((act) => act.type === 1);
+		if (streamingActivity) {
+			artist(colorMap.streaming);
+		} else {
+			artist(colorMap[lanyard.discord_status]);
+		}
+
+		if (lanyard.activities.length === 0) {
+			document.body.style.setProperty("--lanyard-display", "none");
+		} else {
+			document.body.style.removeProperty("--lanyard-display");
+		}
+
+
 		if (container.current) {
 			container.current.textContent = JSON.stringify(
 				{
-					status: lanyard.discord_status,
 					activities: [
 						...new Set(
 							lanyard.activities.map((act) => {
@@ -44,8 +66,8 @@ export default () => {
 	});
 
 	return (
-		<div class="shj-lang-json" ref={container}>
+		<code class="shj-lang-json" ref={container}>
 			{"{}"}
-		</div>
+		</code>
 	);
 };

src/front/components/NavigationBar/index.tsx

@@ -9,20 +9,11 @@ import "@mdui/icons/more-vert--rounded";
 
 export default () => {
     return (
-        <mdui-navigation-bar value="item-1">
+        <mdui-navigation-bar value="about">
-            <mdui-navigation-bar-item value="item-1">
+            <mdui-navigation-bar-item value="about">
                 <mdui-icon-person--outlined slot="icon" />
                 <mdui-icon-person--rounded slot="active-icon" />
-                Item 1
+                About
-            </mdui-navigation-bar-item>
-            <mdui-navigation-bar-item value="item-2">
-                <mdui-icon-more-vert--rounded slot="icon" /> Item 2
-            </mdui-navigation-bar-item>
-            <mdui-navigation-bar-item value="item-3">
-                <mdui-icon-more-vert--rounded slot="icon" /> Item 3
-            </mdui-navigation-bar-item>
-            <mdui-navigation-bar-item value="item-4">
-                <mdui-icon-more-vert--rounded slot="icon" /> Item 4
             </mdui-navigation-bar-item>
         </mdui-navigation-bar>
     );

src/front/components/TopAppBar/index.tsx

@@ -4,8 +4,9 @@ import "mdui/components/button-icon";
 
 export default () => {
     return (
+        // @ts-ignore // variant is not in the types for some reason?
         <mdui-top-app-bar variant="center-aligned" scroll-behavior="elevate">
-            <mdui-top-app-bar-title>Seth @ IPv4.ARMY</mdui-top-app-bar-title>
+            <mdui-top-app-bar-title>IPv4.ARMY</mdui-top-app-bar-title>
         </mdui-top-app-bar>
     );
 };

src/front/components/pages/About/index.tsx

@@ -0,0 +1,99 @@
+import 'mdui/components/card';
+import 'mdui/components/avatar';
+
+import 'mdui/components/segmented-button-group';
+import 'mdui/components/segmented-button';
+
+import { getColorFromImage } from 'mdui/functions/getColorFromImage';
+import { artist } from '../../../utilities/artist';
+import Lanyard from '../../Lanyard';
+import Hyperate from '../../Hyperate';
+
+const Abyssinian = new Image();
+Abyssinian.src = "/public/Abyssinian/default.png";
+Abyssinian.onload = async () => {
+    const profilePicture = document.getElementById("profilePicture") as HTMLElement;
+
+    artist(await getColorFromImage(Abyssinian), profilePicture);
+
+    profilePicture.setAttribute("src", Abyssinian.src);
+    profilePicture.innerText = "";
+};
+
+export default () => {
+    return (
+        <div style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flexDirection: "column",
+            height: "100%",
+        }}>
+            <mdui-card variant="filled" style={{
+                width: "90%",
+                padding: ".5rem",
+                // center the contents
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                flexDirection: "column",
+
+                textAlign: "center",
+            }}>
+                <mdui-avatar style={{
+                    width: "5rem",
+                    height: "inherit",
+                    border: "2px solid rgb(var(--status-color))",
+                }} id="profilePicture">S</mdui-avatar>
+                <h1>Seth</h1>
+                {/* make important text bold */}
+                <p>
+                    A <strong>Dedicated</strong> Backend Developer, with many <strong>passions</strong>.
+                    <br />
+                    <br />
+                    <mdui-segmented-button-group full-width>
+                        <mdui-segmented-button>high-fidelity audio</mdui-segmented-button>
+                        <mdui-segmented-button>gaming</mdui-segmented-button>
+                        <mdui-segmented-button>development</mdui-segmented-button>
+                    </mdui-segmented-button-group>
+                </p>
+            </mdui-card>
+
+            <br style={{
+                display: "var(--lanyard-display)",
+            }} />
+
+            <mdui-card variant="filled" style={{
+                width: "90%",
+                padding: ".5rem",
+                // center the contents
+                display: "var(--lanyard-display, flex)",
+                justifyContent: "center",
+                alignItems: "center",
+                flexDirection: "column",
+
+                //textAlign: "center",
+            }}>
+                <Lanyard />
+            </mdui-card>
+
+            <br style={{
+                display: "var(--hyperate-display)",
+            }} />
+
+            <mdui-card variant="filled" style={{
+                width: "90%",
+                padding: ".5rem",
+                // center the contents
+                display: "var(--hyperate-display, flex)",
+                justifyContent: "center",
+                alignItems: "center",
+                flexDirection: "column",
+
+                //textAlign: "center",
+            }}>
+                <Hyperate />
+            </mdui-card>
+        </div >
+    );
+};

src/front/index.css

@@ -3,6 +3,15 @@
 
 @import "../../node_modules/mdui/mdui.css";
 
+:not(:defined) {
+	visibility: hidden;
+}
+
+html,
+body {
+	height: 100vh;
+}
+
 body {
 	margin: 0;
 	padding: 0;
@@ -40,12 +49,12 @@ body {
 	background: #bdf5;
 }
 
-[class*="shj-lang-"] > div {
+[class*="shj-lang-"]>div {
 	display: flex;
 	overflow: auto;
 }
 
-[class*="shj-lang-"] > div :last-child {
+[class*="shj-lang-"]>div :last-child {
 	outline: none;
 	flex: 1;
 }
@@ -165,3 +174,31 @@ body {
 .shj-syn-str {
 	color: #4dacfa;
 }
+
+.heartbeat {
+	display: inline-block;
+	animation: pulse calc(60s / var(--bpm)) infinite ease-in-out;
+	transform-origin: center;
+}
+
+@keyframes pulse {
+	0% {
+		transform: scale(1);
+	}
+
+	25% {
+		transform: scale(1.1);
+	}
+
+	50% {
+		transform: scale(1);
+	}
+
+	75% {
+		transform: scale(1.1);
+	}
+
+	100% {
+		transform: scale(1);
+	}
+}

src/front/index.tsx

@@ -1,9 +1,12 @@
 import "tsx-dom";
 
+import { artist } from "./utilities/artist";
 import "./utilities/clicker";
 
 import App from "./App";
 
+artist();
+
 document.body.appendChild(<App />);
 
 // You're garbage, let me collect you.

src/front/utilities/artist/index.ts

@@ -0,0 +1,13 @@
+import { setColorScheme } from "mdui/functions/setColorScheme";
+
+export const artist = (color?: string, element?: HTMLElement) => {
+    if (color?.startsWith("#")) {
+        setColorScheme(color, {
+            target: element || document.documentElement,
+        });
+    } else {
+        setColorScheme("#FFF");
+    }
+
+    document.body.style.setProperty("--status-color", getComputedStyle(document.documentElement).getPropertyValue("--mdui-color-primary"));
+};

src/front/utilities/clicker/index.ts

@@ -2,20 +2,21 @@ const effectTick = new Audio("https://no.ipv4.army/u/Effect_Tick.ogg");
 
 effectTick.volume = 0.1;
 
-const whitelistedTags = ["mdui-button", "mdui-icon"];
+const whitelistedTags = ["button", "icon", "item"];
 
 document.onclick = (event: MouseEvent) => {
-	const target = event.target as HTMLElement;
+    const target = event.target as HTMLElement;
 
-	if (!target) return;
+    if (!target) return;
 
-	const tagName = target.tagName.toLowerCase();
+    const tagName = target.tagName.toLowerCase();
-	const isWhitelisted = whitelistedTags.some((tag) => tagName.startsWith(tag));
+    const isWhitelisted = whitelistedTags.some((tag) => tagName.includes(tag));
 
-	console.log(tagName, isWhitelisted);
+    console.log(tagName, isWhitelisted);
 
-	if (!isWhitelisted) return;
+    if (!isWhitelisted) return;
 
-	effectTick.currentTime = 0;
+    ("vibrate" in navigator && navigator.vibrate(1));
-	effectTick.play();
+    effectTick.currentTime = 0;
+    effectTick.play();
 };