forked from seth/ipv4.army
linting
This commit is contained in:
parent
ad23ab1907
commit
a65ee6fe67
15 changed files with 564 additions and 466 deletions
|
|
@ -1,59 +1,61 @@
|
|||
.scanlines {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scanlines:before,
|
||||
.scanlines:after {
|
||||
display: inherit;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
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;
|
||||
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;
|
||||
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);
|
||||
}
|
||||
0% {
|
||||
transform: translate3d(0, 200000%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanlines {
|
||||
0% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
0% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
span.shj-syn-str:nth-child(2) {
|
||||
color: var(--status-color, rgba(150, 150, 150, 0.1));
|
||||
color: var(--status-color, rgba(150, 150, 150, 0.1));
|
||||
}
|
||||
|
||||
.shj-numbers {
|
||||
padding: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.shj-lang-json {
|
||||
padding: 0px;
|
||||
background-color: transparent;
|
||||
}
|
||||
padding: 0px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,27 @@
|
|||
import Lanyard from './components/Lanyard';
|
||||
import Hyperate from './components/Hyperate';
|
||||
import Hyperate from "./components/Hyperate";
|
||||
import Lanyard from "./components/Lanyard";
|
||||
|
||||
export default () => {
|
||||
return <div class="app">
|
||||
<p>seth> cat ./about.txt</p>
|
||||
<p>A Dedicated Backend Developer,<br />with a passion for high-fidelity audio,<br />gaming, and web development.</p>
|
||||
return (
|
||||
<div class="app">
|
||||
<p>seth> 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> curl /tmp/discord-ipc</p>
|
||||
<p><Lanyard /></p>
|
||||
<p>seth> curl /tmp/discord-ipc</p>
|
||||
<p>
|
||||
<Lanyard />
|
||||
</p>
|
||||
|
||||
<p>seth> cat /tmp/heartrate</p>
|
||||
<p><Hyperate /></p>
|
||||
</div>
|
||||
}
|
||||
<p>seth> cat /tmp/heartrate</p>
|
||||
<p>
|
||||
<Hyperate />
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,50 +1,50 @@
|
|||
const { protocol, host } = window.location;
|
||||
|
||||
class Socket extends EventTarget {
|
||||
private _socket: WebSocket;
|
||||
private _socket: WebSocket;
|
||||
|
||||
constructor(url: string) {
|
||||
super();
|
||||
constructor(url: string) {
|
||||
super();
|
||||
|
||||
this._socket = new WebSocket(url);
|
||||
this._socket.onmessage = (event) => {
|
||||
const { type, data } = JSON.parse(event.data);
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
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();
|
||||
};
|
||||
this._socket.onclose = () => {
|
||||
location.reload();
|
||||
};
|
||||
|
||||
setInterval(() => {
|
||||
this._socket.send("ping");
|
||||
}, 30 * 1000);
|
||||
}
|
||||
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 }));
|
||||
}
|
||||
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`);
|
||||
export default new Socket(`${protocol.replace("http", "ws")}//${host}/api/ws`);
|
||||
|
|
|
|||
|
|
@ -3,15 +3,17 @@ import { createRef } from "tsx-dom";
|
|||
import socket from "../../Socket";
|
||||
|
||||
export default () => {
|
||||
const paragraph = createRef<HTMLParagraphElement>();
|
||||
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>;
|
||||
}
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,59 +1,68 @@
|
|||
import { createRef } from "tsx-dom";
|
||||
import { highlightAll } from "@speed-highlight/core";
|
||||
import { createRef } from "tsx-dom";
|
||||
|
||||
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)",
|
||||
}
|
||||
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)",
|
||||
}
|
||||
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",
|
||||
}
|
||||
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)
|
||||
}
|
||||
return JSON.stringify(data, null, 2);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
const code = createRef<HTMLDivElement>();
|
||||
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();
|
||||
});
|
||||
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>
|
||||
}
|
||||
return (
|
||||
<div class="shj-lang-json" ref={code}>
|
||||
{"{}"}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,16 +5,20 @@
|
|||
html,
|
||||
head,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font: 2vh monospace;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import "tsx-dom";
|
||||
|
||||
import App from './App';
|
||||
import App from "./App";
|
||||
|
||||
document.body.appendChild(<App />);
|
||||
|
||||
// You're garbage, let me collect you.
|
||||
fetch("/api/gc")
|
||||
fetch("/api/gc");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue