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 NavigationBar from "./components/NavigationBar";
import TopAppBar from "./components/TopAppBar";
import About from "./components/pages/About";
import TopAppBar from "./components/TopAppBar";
export default () => {
return (

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

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

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

@ -1,6 +1,6 @@
import { highlightElement } from "@speed-highlight/core";
import { artist } from "../../utilities/artist";
import { createRef } from "tsx-dom";
import { artist } from "../../utilities/artist";
import socket from "../../utilities/socket";
const colorMap = {
@ -39,7 +39,6 @@ export default () => {
document.body.style.removeProperty("--lanyard-display");
}
if (container.current) {
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";
export default () => {
return (
<mdui-navigation-bar value="about">
<mdui-navigation-bar-item value="about">
<mdui-icon-person--outlined slot="icon" />
<mdui-icon-person--rounded slot="active-icon" />
About
</mdui-navigation-bar-item>
</mdui-navigation-bar>
);
return (
<mdui-navigation-bar value="about">
<mdui-navigation-bar-item value="about">
<mdui-icon-person--outlined slot="icon" />
<mdui-icon-person--rounded slot="active-icon" />
About
</mdui-navigation-bar-item>
</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";
export default () => {
return (
// @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-title>IPv4.ARMY</mdui-top-app-bar-title>
</mdui-top-app-bar>
);
return (
// @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-title>IPv4.ARMY</mdui-top-app-bar-title>
</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/avatar';
import "mdui/components/card";
import "mdui/components/avatar";
import 'mdui/components/segmented-button-group';
import 'mdui/components/segmented-button';
import "mdui/components/segmented-button-group";
import "mdui/components/segmented-button";
import { getColorFromImage } from 'mdui/functions/getColorFromImage';
import { artist } from '../../../utilities/artist';
import Lanyard from '../../Lanyard';
import Hyperate from '../../Hyperate';
import { getColorFromImage } from "mdui/functions/getColorFromImage";
import { artist } from "../../../utilities/artist";
import Hyperate from "../../Hyperate";
import Lanyard from "../../Lanyard";
const Abyssinian = new Image();
Abyssinian.src = "/public/Abyssinian/default.png";
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.innerText = "";
profilePicture.setAttribute("src", Abyssinian.src);
profilePicture.innerText = "";
};
export default () => {
return (
<div style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
height: "100%",
}}>
<mdui-card variant="filled" style={{
width: "90%",
padding: ".5rem",
// center the contents
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
height: "100%",
}}
>
<mdui-card
variant="filled"
style={{
width: "90%",
padding: ".5rem",
// center the contents
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
textAlign: "center",
}}>
<mdui-avatar style={{
width: "5rem",
height: "inherit",
border: "2px solid rgb(var(--status-color))",
}} id="profilePicture">S</mdui-avatar>
<h1>Seth</h1>
{/* make important text bold */}
<p>
A <strong>Dedicated</strong> Backend Developer, with many <strong>passions</strong>.
<br />
<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>
textAlign: "center",
}}
>
<mdui-avatar
style={{
width: "5rem",
height: "inherit",
border: "2px solid rgb(var(--status-color))",
}}
id="profilePicture"
>
S
</mdui-avatar>
<h1>Seth</h1>
{/* make important text bold */}
<p>
A <strong>Dedicated</strong> Backend Developer, with many{" "}
<strong>passions</strong>.
<br />
<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={{
display: "var(--lanyard-display)",
}} />
<br
style={{
display: "var(--lanyard-display)",
}}
/>
<mdui-card variant="filled" style={{
width: "90%",
padding: ".5rem",
// center the contents
display: "var(--lanyard-display, flex)",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
<mdui-card
variant="filled"
style={{
width: "90%",
padding: ".5rem",
// center the contents
display: "var(--lanyard-display, flex)",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
//textAlign: "center",
}}>
<Lanyard />
</mdui-card>
//textAlign: "center",
}}
>
<Lanyard />
</mdui-card>
<br style={{
display: "var(--hyperate-display)",
}} />
<br
style={{
display: "var(--hyperate-display)",
}}
/>
<mdui-card variant="filled" style={{
width: "90%",
padding: ".5rem",
// center the contents
display: "var(--hyperate-display, flex)",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
<mdui-card
variant="filled"
style={{
width: "90%",
padding: ".5rem",
// center the contents
display: "var(--hyperate-display, flex)",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
//textAlign: "center",
}}>
<Hyperate />
</mdui-card>
</div >
);
//textAlign: "center",
}}
>
<Hyperate />
</mdui-card>
</div>
);
};

6
src/front/index.css
View file

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

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

@ -1,13 +1,18 @@
import { setColorScheme } from "mdui/functions/setColorScheme";
export const artist = (color?: string, element?: HTMLElement) => {
if (color?.startsWith("#")) {
setColorScheme(color, {
target: element || document.documentElement,
});
} else {
setColorScheme("#FFF");
}
if (color?.startsWith("#")) {
setColorScheme(color, {
target: element || document.documentElement,
});
} else {
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"];
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 isWhitelisted = whitelistedTags.some((tag) => tagName.includes(tag));
const tagName = target.tagName.toLowerCase();
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));
effectTick.currentTime = 0;
effectTick.play();
"vibrate" in navigator && navigator.vibrate(1);
effectTick.currentTime = 0;
effectTick.play();
};