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

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

Browse source
This commit is contained in:
Seth 2025-05-17 17:50:54 -04:00
parent 9a1564cdb5
commit 3c07869634
9 changed files with 148 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/front/App.tsx
View file

@ -2,9 +2,8 @@ import "mdui/components/layout";
import "mdui/components/layout-main"; import "mdui/components/layout-main";
import NavigationBar from "./components/NavigationBar"; import NavigationBar from "./components/NavigationBar";
import TopAppBar from "./components/TopAppBar";
import About from "./components/pages/About"; import About from "./components/pages/About";
import TopAppBar from "./components/TopAppBar";
export default () => { export default () => {
return ( return (

4
src/front/components/Hyperate/index.tsx
View file

@ -22,7 +22,9 @@ export default () => {
}); });
return ( return (
<div> <div>
<p class="heartbeat" ref={paragraph}>❤️ 0 BPM</p> <p class="heartbeat" ref={paragraph}>
❤️ 0 BPM
</p>
</div> </div>
); );
}; };

3
src/front/components/Lanyard/index.tsx
View file

@ -1,6 +1,6 @@
import { highlightElement } from "@speed-highlight/core"; import { highlightElement } from "@speed-highlight/core";
import { artist } from "../../utilities/artist";
import { createRef } from "tsx-dom"; import { createRef } from "tsx-dom";
import { artist } from "../../utilities/artist";
import socket from "../../utilities/socket"; import socket from "../../utilities/socket";
const colorMap = { const colorMap = {
@ -39,7 +39,6 @@ export default () => {
document.body.style.removeProperty("--lanyard-display"); document.body.style.removeProperty("--lanyard-display");
} }
if (container.current) { if (container.current) {
container.current.textContent = JSON.stringify( container.current.textContent = JSON.stringify(
{ {

18
src/front/components/NavigationBar/index.tsx
View file

@ -8,13 +8,13 @@ import "@mdui/icons/person--rounded";
import "@mdui/icons/more-vert--rounded"; import "@mdui/icons/more-vert--rounded";
export default () => { export default () => {
return ( return (
<mdui-navigation-bar value="about"> <mdui-navigation-bar value="about">
<mdui-navigation-bar-item value="about"> <mdui-navigation-bar-item value="about">
<mdui-icon-person--outlined slot="icon" /> <mdui-icon-person--outlined slot="icon" />
<mdui-icon-person--rounded slot="active-icon" /> <mdui-icon-person--rounded slot="active-icon" />
About About
</mdui-navigation-bar-item> </mdui-navigation-bar-item>
</mdui-navigation-bar> </mdui-navigation-bar>
); );
}; };

12
src/front/components/TopAppBar/index.tsx
View file

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

183
src/front/components/pages/About/index.tsx
View file

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

4
src/front/index.css
View file

@ -49,12 +49,12 @@ body {
background: #bdf5; background: #bdf5;
} }
[class*="shj-lang-"]>div { [class*="shj-lang-"] > div {
display: flex; display: flex;
overflow: auto; overflow: auto;
} }
[class*="shj-lang-"]>div :last-child { [class*="shj-lang-"] > div :last-child {
outline: none; outline: none;
flex: 1; flex: 1;
} }

21
src/front/utilities/artist/index.ts
View file

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

18
src/front/utilities/clicker/index.ts
View file

@ -5,18 +5,18 @@ effectTick.volume = 0.1;
const whitelistedTags = ["button", "icon", "item"]; const whitelistedTags = ["button", "icon", "item"];
document.onclick = (event: MouseEvent) => { 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.includes(tag)); const isWhitelisted = whitelistedTags.some((tag) => tagName.includes(tag));
console.log(tagName, isWhitelisted); console.log(tagName, isWhitelisted);
if (!isWhitelisted) return; if (!isWhitelisted) return;
("vibrate" in navigator && navigator.vibrate(1)); "vibrate" in navigator && navigator.vibrate(1);
effectTick.currentTime = 0; effectTick.currentTime = 0;
effectTick.play(); effectTick.play();
}; };