with a passion for high-fidelity audio,
gaming, and web development.", + ), + `${prompt} cat /tmp/discord-ipc`, + () => Lanyard(), + `${prompt} cat /tmp/heartrate`, + () => Hyperate(), + ]; + + const renderStatic = () => { + for (const line of staticLines) { + const content = typeof line === "function" ? line() : line; + container.appendChild(renderElement(content)); + } + }; + + renderStatic(); + + const lanyardInstance = Lanyard(); + const files: Record
with a passion for high-fidelity audio,
gaming, and web development.", + ), + "/tmp/discord-ipc": () => lanyardInstance, + "/tmp/heartrate": () => Hyperate(), + }; + + const history: string[] = []; + let historyIndex = -1; + + const inputBox = document.createElement("input"); + inputBox.className = "terminal-input"; + inputBox.autofocus = true; + + const inputLine = document.createElement("div"); + inputLine.className = "terminal-line"; + + const promptSpan = document.createElement("span"); + promptSpan.textContent = `${prompt} `; + + inputLine.appendChild(promptSpan); + inputLine.appendChild(inputBox); + container.appendChild(inputLine); + + const appendLine = (line: string | Node) => { + container.insertBefore(renderElement(line), inputLine); + }; + + inputBox.addEventListener("keydown", (e) => { + if (e.key === "Enter") { + const cmd = inputBox.value.trim(); + if (!cmd) return; + + history.push(cmd); + historyIndex = history.length; + + appendLine(`${prompt} ${cmd}`); + + let out: string | Node; + + if (cmd.startsWith("cat ")) { + const file = cmd.slice(4).trim(); + out = files[file]?.() ?? `cat: ${file}: No such file`; + } else if (cmd === "ls") { + out = Object.keys(files) + .filter((f) => f.startsWith("./")) + .map((f) => f.slice(2)) + .join("\n"); + } else if (cmd.startsWith("ls ")) { + const dir = cmd.slice(3).trim(); + if (dir === "/tmp") { + out = Object.keys(files) + .filter((f) => f.startsWith("/tmp/")) + .map((f) => f.slice("/tmp/".length)) + .join("\n"); + } else { + out = `ls: cannot access '${dir}': No such file or directory`; + } + } else if (cmd === "help") { + out = [ + "Available commands:", + " cat [file] View contents of a file", + " ls List files in current directory", + " ls /tmp List files in /tmp directory", + " help Show this message", + ].join("\n"); + } else { + out = `bash: ${cmd}: command not found`; + } + + appendLine(out); + inputBox.value = ""; + } else if (e.key === "ArrowUp") { + if (historyIndex > 0) { + historyIndex--; + inputBox.value = history[historyIndex] || ""; + } + e.preventDefault(); + } else if (e.key === "ArrowDown") { + if (historyIndex < history.length - 1) { + historyIndex++; + inputBox.value = history[historyIndex] || ""; + } else { + historyIndex = history.length; + inputBox.value = ""; + } + e.preventDefault(); + } + }); + + return container; }; diff --git a/src/front/utilities/socket/index.ts b/src/front/Socket.ts similarity index 75% rename from src/front/utilities/socket/index.ts rename to src/front/Socket.ts index 9e213bd..334effc 100644 --- a/src/front/utilities/socket/index.ts +++ b/src/front/Socket.ts @@ -8,9 +8,6 @@ class Socket extends EventTarget { this._socket = new WebSocket(url); this._socket.onmessage = (event) => { - if (event.data === "ping") return; - if (event.data === "pong") return; - const { type, data } = JSON.parse(event.data); switch (type) { @@ -22,12 +19,8 @@ class Socket extends EventTarget { this.emitHyperate(data.hr); break; } - case "color": { - this.emitColor(data); - break; - } case "echo": { - //console.log("Echo: ", data); + console.log("Echo: ", data); break; } default: { @@ -37,20 +30,24 @@ class Socket extends EventTarget { } }; + this._socket.onclose = () => { + location.reload(); + }; + setInterval(() => { this._socket.send("ping"); - }, 10 * 1000); + }, 30 * 1000); } emitLanyard(lanyard: LanyardData) { this.dispatchEvent(new CustomEvent("lanyard", { detail: lanyard })); + window.dispatchEvent( + new CustomEvent("lanyard-update", { detail: lanyard }), + ); } emitHyperate(heartRate: number) { this.dispatchEvent(new CustomEvent("hyperate", { detail: heartRate })); } - emitColor(styleSheet: string) { - this.dispatchEvent(new CustomEvent("color", { detail: styleSheet })); - } } export default new Socket(`${protocol.replace("http", "ws")}//${host}/api/ws`); diff --git a/src/front/components/Hyperate/index.module.css b/src/front/components/Hyperate/index.module.css deleted file mode 100644 index 6a934da..0000000 --- a/src/front/components/Hyperate/index.module.css +++ /dev/null @@ -1,27 +0,0 @@ -.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); - } -} diff --git a/src/front/components/Hyperate/index.tsx b/src/front/components/Hyperate/index.tsx index a97c4a2..e5c1074 100644 --- a/src/front/components/Hyperate/index.tsx +++ b/src/front/components/Hyperate/index.tsx @@ -1,32 +1,19 @@ import { createRef } from "tsx-dom"; -import socket from "../../utilities/socket"; - -import style from "./index.module.css"; +import socket from "../../Socket"; export default () => { const paragraph = createRef
-
);
};
diff --git a/src/front/components/Lanyard/index.module.css b/src/front/components/Lanyard/index.module.css
deleted file mode 100644
index 85632c2..0000000
--- a/src/front/components/Lanyard/index.module.css
+++ /dev/null
@@ -1,110 +0,0 @@
-.card {
- width: 100%;
-}
-
-.activityCard {
- background-color: transparent;
- border-radius: 8px;
- padding: 16px;
- width: 100% !important;
- /* Set a max width */
-}
-
-.status {
- font-size: 14px;
- margin-bottom: 8px;
-}
-
-.content {
- display: flex;
- flex-wrap: wrap;
- /* Allow wrapping for smaller screens */
-}
-
-.bigImage {
- position: relative;
- width: 120px;
- /* Set fixed width for the big image */
- height: 120px;
- /* Set fixed height for the big image */
- flex-shrink: 0;
- /* Prevent shrinking */
-}
-
-.bigImage img {
- width: 100%;
- height: 100%;
- border-radius: 8px;
- object-fit: cover;
- /* Ensures the image covers the area without distortion */
-}
-
-.smallImage {
- position: absolute;
- bottom: -8px;
- right: -8px;
- width: 40px;
- /* Set fixed width for the small image */
- height: 40px;
- /* Set fixed height for the small image */
- overflow: hidden;
- border-radius: 50%;
-}
-
-.smallImage img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- /* Ensures the image covers the area without distortion */
-}
-
-.textInfo {
- margin-left: 16px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- flex-grow: 1;
- /* Allow text info to grow */
-}
-
-.appName {
- font-size: 16px;
- font-weight: bold;
-}
-
-.state,
-.details {
- font-size: 14px;
- color: #b9bbbe;
-}
-
-/* Media Queries for Responsiveness */
-@media (max-width: 480px) {
- .bigImage {
- width: 80px;
- /* Adjust size for smaller screens */
- height: 80px;
- }
-
- .smallImage {
- width: 30px;
- /* Adjust size for smaller screens */
- height: 30px;
- }
-
- .textInfo {
- margin-left: 8px;
- /* Reduce margin for smaller screens */
- }
-
- .appName {
- font-size: 14px;
- /* Adjust font size */
- }
-
- .state,
- .details {
- font-size: 12px;
- /* Adjust font size */
- }
-}
diff --git a/src/front/components/Lanyard/index.tsx b/src/front/components/Lanyard/index.tsx
index 9f2b1bd..a47021c 100644
--- a/src/front/components/Lanyard/index.tsx
+++ b/src/front/components/Lanyard/index.tsx
@@ -1,10 +1,20 @@
+import { highlightElement } from "@speed-highlight/core";
import { createRef } from "tsx-dom";
-import colors from "../../utilities/colors.module.css";
-import socket from "../../utilities/socket";
+import socket from "../../Socket";
-import "mdui/components/tooltip.js";
+const statusTypes = {
+ online: "rgb(0, 150, 0)",
+ idle: "rgb(150, 150, 0)",
+ dnd: "rgb(150, 0, 0)",
+ offline: "rgb(150, 150, 150)",
+};
-import style from "./index.module.css"; // entirely gpt generated :sob:
+const gradientTypes = {
+ 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: Record- ❤️ 0 BPM -
+0 BPM
- {/* @ts-expect-error; variant is not in the types for some reason? */}
-
- {" "}
-
-
-
- ).outerHTML;
- }
+ container.current.className = "shj-lang-json";
+ container.current.textContent = JSON.stringify(
+ {
+ status: lanyard.discord_status,
+ activities: lanyard.activities.map((act) => {
+ const type = activityTypes[act.type];
+ const parts = [type];
+ if (act.name !== type) parts.push(act.name);
+ if (act.details) parts.push(act.details);
+ if (act.state) parts.push(act.state);
+ return parts;
+ }),
+ },
+ null,
+ 2,
+ );
+ highlightElement(container.current);
}
});
- return ;
+ return (
+
-
-
- {activityTypes[activity.type]}
- {!largeImage && ` ${activity.name}`}
-
-
- {largeImage && (
-
-
-
- 
-
- {smallImage && (
-
- )}
-
-
- 
-
-
- )}
-
-
- {activity.name}
- {activity.state}
- {activity.details}
- -
+ {"{}"}
+
+ );
};
diff --git a/src/front/components/NavigationBar/index.tsx b/src/front/components/NavigationBar/index.tsx
deleted file mode 100644
index 43f16b4..0000000
--- a/src/front/components/NavigationBar/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import "mdui/components/navigation-bar";
-import "mdui/components/navigation-bar-item";
-import "mdui/components/button-icon";
-
-import "@mdui/icons/person--outlined";
-import "@mdui/icons/person--rounded";
-
-export default () => {
- return (
-
-
-
-
-
-
-
- -
-
-
-
- -
- );
-};
diff --git a/src/front/index.css b/src/front/index.css
index 1954a39..f52e3e0 100644
--- a/src/front/index.css
+++ b/src/front/index.css
@@ -1,56 +1,66 @@
-/*
-@import "../../node_modules/@fontsource/roboto/latin-400.css";
-@import "../../node_modules/@fontsource/roboto-mono/latin-400.css";
-*/
-@import "../../node_modules/mdui/mdui.css";
-
-:not(:defined) {
- visibility: hidden;
-}
+@import "../../node_modules/@speed-highlight/core/dist/themes/dark.css";
+@import "./App.css";
html,
-body {
- height: 100dvh;
-}
-
+head,
body {
margin: 0;
padding: 0;
- font-family: sans-serif;
-
- color: rgb(var(--mdui-color-on-background));
- background-color: rgb(var(--mdui-color-background));
+ font: 2vh monospace;
+ height: 100vh;
+ width: 100vw;
}
-.shj-lang-json {
- white-space: pre;
- color: #f8f8f2;
- background: var(--mdui-color-secondary-container);
- text-shadow: none;
- box-sizing: border-box;
- border-radius: 10px;
- max-width: min(100%, 100vw);
- margin: 10px 0;
- padding: 30px 20px;
- font: 18px / 24px monospace;
- box-shadow: 0 0 5px #0001;
+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;
+ height: 100vh;
+ width: 100vw;
+ overflow: hidden;
}
-.shj-inline {
- border-radius: 5px;
+p {
margin: 0;
- padding: 2px 5px;
+ padding: 0;
+ line-height: 1.4em;
+}
+
+.terminal {
+ white-space: pre-wrap;
+ font-family: monospace;
+ width: 100vw;
+ height: 100vh;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+
+ gap: 0.4em;
+}
+
+.terminal-input {
+ background: transparent;
+ border: none;
+ color: inherit;
+ font: inherit;
+ outline: none;
display: inline-block;
+ width: 100%;
}
-.shj-syn-str {
- color: #7d8;
+.terminal-line {
+ display: flex;
+ align-items: baseline;
+ flex-direction: row;
+ width: 100%;
}
-.shj-syn-var {
- color: #ff5261;
-}
-
-.shj-syn-str {
- color: #4dacfa;
+.terminal-line > span {
+ white-space: pre;
}
diff --git a/src/front/index.html b/src/front/index.html
index bb61afc..b3b4c13 100644
--- a/src/front/index.html
+++ b/src/front/index.html
@@ -3,22 +3,20 @@
-
+
-
+ content="A Dedicated Backend Developer, with a passion for high-fidelity audio, gaming, and web development.">
+
- Seth, the dedicated backend developer, with many{" "}
- passions.
-
-
-
- -
- -
-
-