seth/ipv4.army
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

auto-lint
All checks were successful
Code quality checks / biome (push) Successful in 8s
Details

Browse source
This commit is contained in:
wont-stream 2025-04-10 19:27:18 -04:00
parent 5e03f3ef36
commit 41c205c809
12 changed files with 263 additions and 246 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
biome.json
View file

@ -32,4 +32,4 @@
"semicolons": "always" "semicolons": "always"
} }
} }
} }

46
package.json
View file

@ -1,24 +1,24 @@
{ {
"name": "ipv4.army-vite", "name": "ipv4.army-vite",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "bunx --bun vite", "dev": "bunx --bun vite",
"build": "bunx --bun tsc -b && bunx --bun vite build", "build": "bunx --bun tsc -b && bunx --bun vite build",
"preview": "bunx --bun vite preview" "preview": "bunx --bun vite preview"
}, },
"dependencies": { "dependencies": {
"halfmoon": "^2.0.2", "halfmoon": "^2.0.2",
"lucide-preact": "^0.487.0", "lucide-preact": "^0.487.0",
"preact": "^10.26.2" "preact": "^10.26.2"
}, },
"devDependencies": { "devDependencies": {
"@biomejs/biome": "1.9.4", "@biomejs/biome": "1.9.4",
"@fullhuman/postcss-purgecss": "^7.0.2", "@fullhuman/postcss-purgecss": "^7.0.2",
"@preact/preset-vite": "^2.10.1", "@preact/preset-vite": "^2.10.1",
"lightningcss": "^1.29.3", "lightningcss": "^1.29.3",
"typescript": "~5.7.2", "typescript": "~5.7.2",
"vite": "^6.2.0" "vite": "^6.2.0"
} }
} }

20
src/components/app.tsx
View file

@ -1,13 +1,13 @@
import Navbar from './navbar'; import Container from "./container";
import Container from './container'; import Navbar from "./navbar";
import './app.css'; import "./app.css";
export default () => { export default () => {
return ( return (
<> <>
<Navbar /> <Navbar />
<Container /> <Container />
</> </>
) );
} };

77
src/components/container/index.tsx
View file

@ -1,42 +1,49 @@
import { useState } from 'preact/hooks'; import { useState } from "preact/hooks";
import Heart from '../heart'; import Heart from "../heart";
const statusMap = { const statusMap = {
online: "border-success-subtle", online: "border-success-subtle",
idle: "border-warning-subtle", idle: "border-warning-subtle",
dnd: "border-danger-subtle", dnd: "border-danger-subtle",
offline: "border-light-subtle", offline: "border-light-subtle",
} };
export default () => { export default () => {
const [status, setStatus] = useState<keyof typeof statusMap>('offline'); const [status, setStatus] = useState<keyof typeof statusMap>("offline");
fetch("https://lanyard.creations.works/v1/users/1273447359417942128") fetch("https://lanyard.creations.works/v1/users/1273447359417942128")
.then(req => req.json()) .then((req) => req.json())
.then((res) => { .then((res) => {
if (res.data.discord_status) { if (res.data.discord_status) {
setStatus(res.data.discord_status); setStatus(res.data.discord_status);
} else { } else {
setStatus('offline'); setStatus("offline");
} }
}) });
return ( return (
<> <>
<div class="container bg-body-tertiary shadow text-center position-absolute top-50 start-50 translate-middle mx-auto py-4"> <div class="container bg-body-tertiary shadow text-center position-absolute top-50 start-50 translate-middle mx-auto py-4">
<img src="favicon.svg" class={`img-thumbnail rounded-circle border border-4 ${statusMap[status]}`} alt="..." width="100px" height="100px" /> <img
<br /> src="favicon.svg"
<h1>Seth</h1> class={`img-thumbnail rounded-circle border border-4 ${statusMap[status]}`}
<h2 class="lead">Dedicated Backend Developer alt="..."
<br /> width="100px"
<br /> height="100px"
<small class="text-body-secondary"> />
With a passsion for high-fidelity audio, gaming, and web development <br />
</small> <h1>Seth</h1>
</h2> <h2 class="lead">
<Heart /> Dedicated Backend Developer
</div> <br />
</> <br />
) <small class="text-body-secondary">
} With a passsion for high-fidelity audio, gaming, and web development
</small>
</h2>
<Heart />
</div>
</>
);
};

3
src/components/heart/index.css
View file

@ -3,7 +3,6 @@
} }
@keyframes pulse { @keyframes pulse {
0%, 0%,
100% { 100% {
transform: scale(1); transform: scale(1);
@ -16,4 +15,4 @@
.heart { .heart {
animation: pulse calc(60s / var(--bpm)) infinite ease; animation: pulse calc(60s / var(--bpm)) infinite ease;
} }

117
src/components/heart/index.tsx
View file

@ -1,68 +1,71 @@
import { useState } from 'preact/hooks'; import { useState } from "preact/hooks";
import './index.css';
import "./index.css";
export default () => { export default () => {
const [heartrate, setHeartrate] = useState(0); const [heartrate, setHeartrate] = useState(0);
const ws = new WebSocket("wss://app.hyperate.io/socket/websocket?token=wv39nM6iyrNJulvpmMQrimYPIXy2dVrYRjkuHpbRapKT2VSh65ngDGHdCdCtmEN9"); const ws = new WebSocket(
"wss://app.hyperate.io/socket/websocket?token=wv39nM6iyrNJulvpmMQrimYPIXy2dVrYRjkuHpbRapKT2VSh65ngDGHdCdCtmEN9",
);
let hrTimeout: ReturnType<typeof setTimeout>; let hrTimeout: ReturnType<typeof setTimeout>;
const setHrInterval = () => { const setHrInterval = () => {
hrTimeout = setTimeout(() => { hrTimeout = setTimeout(() => {
return setHeartrate(0); return setHeartrate(0);
}, 6000); }, 6000);
}; };
ws.onopen = () => { ws.onopen = () => {
ws.send( ws.send(
JSON.stringify({ JSON.stringify({
topic: "hr:0BCA", topic: "hr:0BCA",
event: "phx_join", event: "phx_join",
payload: {}, payload: {},
ref: 0, ref: 0,
}), }),
); );
setInterval(() => { setInterval(() => {
ws.send( ws.send(
JSON.stringify({ JSON.stringify({
topic: "phoenix", topic: "phoenix",
event: "heartbeat", event: "heartbeat",
payload: {}, payload: {},
ref: 0, ref: 0,
}), }),
); );
}, 10000); }, 10000);
return setHrInterval(); return setHrInterval();
}; };
ws.onmessage = ({ data }) => {
const { event, payload } = JSON.parse(data);
switch (event) {
case "hr_update": {
clearTimeout(hrTimeout);
setHrInterval();
setHeartrate(payload.hr);
break;
}
default: {
break;
}
}
};
ws.onmessage = ({ data }) => { return (
const { event, payload } = JSON.parse(data); <>
switch (event) { <div
case "hr_update": { style={heartrate === 0 ? "display:none" : `--bpm: ${heartrate};`}
clearTimeout(hrTimeout); class="heart"
setHrInterval(); >
setHeartrate(payload.hr); ♥️
break; <br />
} <span>{heartrate} BPM</span>
default: { </div>
break; </>
} );
} };
};
return (
<>
<div style={heartrate === 0 ? "display:none" : `--bpm: ${heartrate};`} class="heart">
♥️
<br />
<span>{heartrate} BPM</span>
</div>
</>
)
}

67
src/components/navbar/index.tsx
View file

@ -1,29 +1,46 @@
import { Minus, Minimize, X } from 'lucide-preact'; import { Minimize, Minus, X } from "lucide-preact";
const close = () => { const close = () => {
window.close(); window.close();
window.history.back(); window.history.back();
} };
export default () => { export default () => {
return ( return (
<> <>
<nav class="navbar shadow fixed-top" style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);"> <nav
<div class="container-fluid"> class="navbar shadow fixed-top"
<div class="navbar-brand"> style="background-color: var(--bs-content-bg); border-bottom: var(--bs-border-width) solid var(--bs-content-border-color);"
<img src="favicon.svg" alt="Logo" width="24" height="24" class="d-inline-block align-text-top" /> >
Seth <div class="container-fluid">
</div> <div class="navbar-brand">
<span class="navbar-text"> <img
IPv4 dot Army src="favicon.svg"
</span> alt="Logo"
<div class="d-flex hstack gap-2"> width="24"
<button type="button" class="btn btn-outline-success btn-sm"><Minus size={20} /></button> height="24"
<button type="button" class="btn btn-outline-warning btn-sm"><Minimize size={20} /></button> class="d-inline-block align-text-top"
<button type="button" class="btn btn-outline-danger btn-sm" onClick={close}><X size={20} /></button> />
</div> Seth
</div> </div>
</nav> <span class="navbar-text">IPv4 dot Army</span>
</> <div class="d-flex hstack gap-2">
) <button type="button" class="btn btn-outline-success btn-sm">
} <Minus size={20} />
</button>
<button type="button" class="btn btn-outline-warning btn-sm">
<Minimize size={20} />
</button>
<button
type="button"
class="btn btn-outline-danger btn-sm"
onClick={close}
>
<X size={20} />
</button>
</div>
</div>
</nav>
</>
);
};

13
src/main.tsx
View file

@ -1,6 +1,9 @@
import { render } from 'preact' import { render } from "preact";
import './index.css' import "./index.css";
import 'halfmoon/css/halfmoon.min.css'; import "halfmoon/css/halfmoon.min.css";
import App from './components/app.tsx' import App from "./components/app.tsx";
render(<App />, document.getElementById('app') as HTMLElement || document.body) render(
<App />,
(document.getElementById("app") as HTMLElement) || document.body,
);

62
tsconfig.app.json
View file

@ -1,37 +1,27 @@
{ {
"compilerOptions": { "compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020", "target": "ES2020",
"useDefineForClassFields": true, "useDefineForClassFields": true,
"module": "ESNext", "module": "ESNext",
"lib": [ "lib": ["ES2020", "DOM", "DOM.Iterable"],
"ES2020", "skipLibCheck": true,
"DOM", "paths": {
"DOM.Iterable" "react": ["./node_modules/preact/compat/"],
], "react-dom": ["./node_modules/preact/compat/"]
"skipLibCheck": true, },
"paths": { "moduleResolution": "bundler",
"react": [ "allowImportingTsExtensions": true,
"./node_modules/preact/compat/" "isolatedModules": true,
], "moduleDetection": "force",
"react-dom": [ "noEmit": true,
"./node_modules/preact/compat/" "jsx": "react-jsx",
] "jsxImportSource": "preact",
}, "strict": true,
"moduleResolution": "bundler", "noUnusedLocals": true,
"allowImportingTsExtensions": true, "noUnusedParameters": true,
"isolatedModules": true, "noFallthroughCasesInSwitch": true,
"moduleDetection": "force", "noUncheckedSideEffectImports": true
"noEmit": true, },
"jsx": "react-jsx", "include": ["src"]
"jsxImportSource": "preact", }
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": [
"src"
]
}

20
tsconfig.json
View file

@ -1,11 +1,11 @@
{ {
"files": [], "files": [],
"references": [ "references": [
{ {
"path": "./tsconfig.app.json" "path": "./tsconfig.app.json"
}, },
{ {
"path": "./tsconfig.node.json" "path": "./tsconfig.node.json"
} }
] ]
} }

42
tsconfig.node.json
View file

@ -1,24 +1,20 @@
{ {
"compilerOptions": { "compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022", "target": "ES2022",
"lib": [ "lib": ["ES2023"],
"ES2023" "module": "ESNext",
], "skipLibCheck": true,
"module": "ESNext", "moduleResolution": "bundler",
"skipLibCheck": true, "allowImportingTsExtensions": true,
"moduleResolution": "bundler", "isolatedModules": true,
"allowImportingTsExtensions": true, "moduleDetection": "force",
"isolatedModules": true, "noEmit": true,
"moduleDetection": "force", "strict": true,
"noEmit": true, "noUnusedLocals": true,
"strict": true, "noUnusedParameters": true,
"noUnusedLocals": true, "noFallthroughCasesInSwitch": true,
"noUnusedParameters": true, "noUncheckedSideEffectImports": true
"noFallthroughCasesInSwitch": true, },
"noUncheckedSideEffectImports": true "include": ["vite.config.ts"]
}, }
"include": [
"vite.config.ts"
]
}

40
vite.config.ts
View file

@ -1,26 +1,28 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
import { defineConfig } from 'vite' import preact from "@preact/preset-vite";
import preact from '@preact/preset-vite' import { defineConfig } from "vite";
import postCSSPurgeCSS from "@fullhuman/postcss-purgecss"; import postCSSPurgeCSS from "@fullhuman/postcss-purgecss";
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
css: { css: {
...(import.meta.env.NODE_ENV === "production") ? { ...(import.meta.env.NODE_ENV === "production"
transformer: "postcss", ? {
postcss: { transformer: "postcss",
plugins: [ postcss: {
postCSSPurgeCSS({ plugins: [
content: ["./index.html", "./src/**/*.{ts,tsx}"], postCSSPurgeCSS({
}) content: ["./index.html", "./src/**/*.{ts,tsx}"],
] }),
} ],
} : { transformer: "lightningcss" } },
}, }
build: { : { transformer: "lightningcss" }),
cssMinify: "lightningcss", },
}, build: {
plugins: [preact()], cssMinify: "lightningcss",
}) },
plugins: [preact()],
});