forked from seth/ipv4.army
Update Lanyard socket URL, enhance IP logging in postAnalytics, and refactor App component structure
This commit is contained in:
parent
281e34bbd9
commit
a8d8f7014a
7 changed files with 49 additions and 183 deletions
|
@ -1,145 +1,27 @@
|
|||
import Hyperate from "./components/Hyperate";
|
||||
import Lanyard from "./components/Lanyard";
|
||||
|
||||
let latestLanyard: LanyardData | null = null;
|
||||
|
||||
window.addEventListener("lanyard-update", (e) => {
|
||||
latestLanyard = (e as CustomEvent<LanyardData>).detail;
|
||||
});
|
||||
|
||||
export default () => {
|
||||
const container = document.createElement("div");
|
||||
container.className = "app terminal";
|
||||
return (
|
||||
<div class="app terminal">
|
||||
<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>
|
||||
|
||||
const renderElement = (content: string | Node) => {
|
||||
const p = document.createElement("p");
|
||||
if (typeof content === "string") {
|
||||
p.textContent = content;
|
||||
} else {
|
||||
p.appendChild(content);
|
||||
}
|
||||
return p;
|
||||
};
|
||||
<p>[seth@ipv4 ~]$ cat /tmp/discord-ipc</p>
|
||||
<p>
|
||||
<Lanyard />
|
||||
</p>
|
||||
|
||||
const prompt = "[seth@ipv4 ~]$";
|
||||
|
||||
const staticLines: (string | (() => Node))[] = [
|
||||
`${prompt} cat ./about.txt`,
|
||||
() =>
|
||||
document
|
||||
.createRange()
|
||||
.createContextualFragment(
|
||||
"A Dedicated Backend Developer,<br />with a passion for high-fidelity audio,<br />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<string, () => Node> = {
|
||||
"./about.txt": () =>
|
||||
document
|
||||
.createRange()
|
||||
.createContextualFragment(
|
||||
"A Dedicated Backend Developer,<br />with a passion for high-fidelity audio,<br />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;
|
||||
};
|
||||
<p>[seth@ipv4 ~]$ cat /tmp/heartrate</p>
|
||||
<p>
|
||||
<Hyperate />
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
|
@ -41,9 +41,6 @@ class Socket extends EventTarget {
|
|||
|
||||
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 }));
|
||||
|
|
|
@ -14,11 +14,9 @@ body {
|
|||
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%
|
||||
);
|
||||
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;
|
||||
|
@ -40,27 +38,5 @@ p {
|
|||
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%;
|
||||
}
|
||||
|
||||
.terminal-line {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.terminal-line > span {
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
|
@ -10,7 +10,7 @@
|
|||
<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" />
|
||||
<link rel="icon" href="/public/favicon.svg" />
|
||||
<meta name="color-scheme" content="dark" />
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue