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

Compare commits

base: seth:5d7220f5a8d9e7b576dce0cf3ddbcbf1157a4641
Branches Tags
seth:main
..
compare: seth:7106612555f73f5144015f5389e350c45f78c42b
Branches Tags
seth:main

No commits in common. "5d7220f5a8d9e7b576dce0cf3ddbcbf1157a4641" and "7106612555f73f5144015f5389e350c45f78c42b" have entirely different histories.
5d7220f5a8 ... 7106612555

8 changed files with 99 additions and 231 deletions
Show stats Expand all files Collapse all files

40
src/front/utilities/colors.module.css → src/front/colors.module.css
View file

@ -197,3 +197,43 @@
--mdui-color-surface-container-highest: 56, 51, 54; --mdui-color-surface-container-highest: 56, 51, 54;
--mdui-color-surface-tint-color: 255, 171, 243; --mdui-color-surface-tint-color: 255, 171, 243;
} }
.pfp {
--mdui-color-primary: 255, 183, 123;
--mdui-color-on-primary: 77, 39, 0;
--mdui-color-primary-container: 109, 58, 0;
--mdui-color-on-primary-container: 255, 220, 194;
--mdui-color-secondary: 227, 192, 166;
--mdui-color-on-secondary: 65, 44, 25;
--mdui-color-secondary-container: 90, 66, 46;
--mdui-color-on-secondary-container: 255, 220, 194;
--mdui-color-tertiary: 196, 203, 151;
--mdui-color-on-tertiary: 46, 51, 13;
--mdui-color-tertiary-container: 68, 74, 34;
--mdui-color-on-tertiary-container: 224, 231, 177;
--mdui-color-error: 255, 180, 171;
--mdui-color-on-error: 105, 0, 5;
--mdui-color-error-container: 147, 0, 10;
--mdui-color-on-error-container: 255, 180, 171;
--mdui-color-background: 32, 27, 23;
--mdui-color-on-background: 236, 224, 218;
--mdui-color-surface: 32, 27, 23;
--mdui-color-on-surface: 236, 224, 218;
--mdui-color-surface-variant: 81, 68, 59;
--mdui-color-on-surface-variant: 214, 195, 182;
--mdui-color-outline: 158, 142, 130;
--mdui-color-outline-variant: 81, 68, 59;
--mdui-color-shadow: 0, 0, 0;
--mdui-color-scrim: 0, 0, 0;
--mdui-color-inverse-surface: 236, 224, 218;
--mdui-color-inverse-on-surface: 53, 47, 43;
--mdui-color-inverse-primary: 143, 78, 0;
--mdui-color-surface-dim: 23, 18, 15;
--mdui-color-surface-bright: 62, 56, 51;
--mdui-color-surface-container-lowest: 18, 13, 10;
--mdui-color-surface-container-low: 32, 27, 23;
--mdui-color-surface-container: 36, 31, 27;
--mdui-color-surface-container-high: 47, 41, 37;
--mdui-color-surface-container-highest: 58, 52, 47;
--mdui-color-surface-tint-color: 255, 183, 123;
}

110
src/front/components/Lanyard/index.module.css
View file

@ -1,110 +0,0 @@
.card {
width: 100%;
}
.activityCard {
background-color: transparent;
border-radius: 8px;
padding: 16px;
width: 100% !important;
/* Set a max width */
}
.status {
font-size: 14px;
margin-bottom: 8px;
}
.content {
display: flex;
flex-wrap: wrap;
/* Allow wrapping for smaller screens */
}
.bigImage {
position: relative;
width: 120px;
/* Set fixed width for the big image */
height: 120px;
/* Set fixed height for the big image */
flex-shrink: 0;
/* Prevent shrinking */
}
.bigImage img {
width: 100%;
height: 100%;
border-radius: 8px;
object-fit: cover;
/* Ensures the image covers the area without distortion */
}
.smallImage {
position: absolute;
bottom: -8px;
right: -8px;
width: 40px;
/* Set fixed width for the small image */
height: 40px;
/* Set fixed height for the small image */
overflow: hidden;
border-radius: 50%;
}
.smallImage img {
width: 100%;
height: 100%;
object-fit: cover;
/* Ensures the image covers the area without distortion */
}
.textInfo {
margin-left: 16px;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
/* Allow text info to grow */
}
.appName {
font-size: 16px;
font-weight: bold;
}
.state,
.details {
font-size: 14px;
color: #b9bbbe;
}
/* Media Queries for Responsiveness */
@media (max-width: 480px) {
.bigImage {
width: 80px;
/* Adjust size for smaller screens */
height: 80px;
}
.smallImage {
width: 30px;
/* Adjust size for smaller screens */
height: 30px;
}
.textInfo {
margin-left: 8px;
/* Reduce margin for smaller screens */
}
.appName {
font-size: 14px;
/* Adjust font size */
}
.state,
.details {
font-size: 12px;
/* Adjust font size */
}
}

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

@ -1,11 +1,8 @@
import { highlightElement } from "@speed-highlight/core";
import { createRef } from "tsx-dom"; import { createRef } from "tsx-dom";
import colors from "../../utilities/colors.module.css"; import colors from "../../colors.module.css";
import socket from "../../utilities/socket"; import socket from "../../utilities/socket";
import "mdui/components/tooltip.js";
import style from "./index.module.css"; // entirely gpt generated :sob:
const activityTypes: Record<number, string> = { const activityTypes: Record<number, string> = {
0: "Playing", 0: "Playing",
1: "Streaming", 1: "Streaming",
@ -15,22 +12,6 @@ const activityTypes: Record<number, string> = {
5: "Competing in", 5: "Competing in",
}; };
const getImageUrl = (activity: LanyardActivity, size: "large" | "small") => {
if (!activity.assets) return null;
const image = activity.assets[`${size}_image`];
if (!image) return null;
if (image.startsWith("mp:external")) {
return `https://wsrv.nl/?w=${size === "large" ? 120 : 40}&url=https://${image.split("/").slice(3).join("/")}`;
}
if (image.startsWith("mp:")) {
return `https://cdn.discordapp.com/app-assets/${activity.application_id}/${image.slice(3)}.webp`;
}
};
export default () => { export default () => {
const container = createRef<HTMLDivElement>(); const container = createRef<HTMLDivElement>();
@ -51,52 +32,33 @@ export default () => {
} }
if (container.current) { if (container.current) {
container.current.innerHTML = ""; container.current.textContent = JSON.stringify(
for (const activity of lanyard.activities) { {
if (activity.type === 4) { activities: [
continue; ...new Set(
} lanyard.activities.map((act) => {
const largeImage = getImageUrl(activity, "large"); const type = activityTypes[act.type];
const smallImage = getImageUrl(activity, "small"); const parts = [
`${type}${act.name === "Custom Status" ? "" : ` ${act.name}`}`,
container.current.innerHTML += ( ];
<div> if (act.details && act.details !== act.name)
{/* @ts-expect-error; variant is not in the types for some reason? */} parts.push(act.details);
<mdui-card variant="filled" class={style.card}> if (act.state && act.state !== act.name) parts.push(act.state);
{" "} return parts;
<div class={style.activityCard}> }),
<div class={style.status}>{activityTypes[activity.type]}</div> ),
<div class={style.content}> ],
{largeImage && ( },
<div class={style.bigImage}> null,
{/* @ts-expect-error; placement is not in the types for some reason? */} 2,
<mdui-tooltip content={activity.assets?.large_text} placement="top-right"> );
<img src={largeImage} alt="Large Activity" /> highlightElement(container.current);
</mdui-tooltip>
{smallImage && (
<div class={style.smallImage}>
{/* @ts-expect-error; placement is not in the types for some reason? */}
<mdui-tooltip content={activity.assets?.small_text} placement="top-right">
<img src={smallImage} alt="Small Activity" />
</mdui-tooltip>
</div>
)}
</div>
)}
<div class={style.textInfo}>
<div class={style.appName}>{activity.name}</div>
<div class={style.state}>{activity.state}</div>
<div class={style.details}>{activity.details}</div>
</div>
</div>
</div>
</mdui-card>
<br />
</div>
).outerHTML;
}
} }
}); });
return <div ref={container} />; return (
<code class="shj-lang-json" ref={container}>
{"{}"}
</code>
);
}; };

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

@ -1,41 +1,26 @@
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 "mdui/components/tooltip.js";
import type { Tooltip } from "mdui/components/tooltip.js"; import colors from "../../../colors.module.css";
import { createRef } from "tsx-dom";
import socket from "../../../utilities/socket";
import Hyperate from "../../Hyperate"; import Hyperate from "../../Hyperate";
import Lanyard from "../../Lanyard"; import Lanyard from "../../Lanyard";
import styles from "./index.module.css"; import styles from "./index.module.css";
export default () => { export default () => {
const tooltip = createRef<Tooltip>();
socket.addEventListener("lanyard", (event: Event) => {
const lanyard = (event as CustomEvent<LanyardData>).detail;
const customStatus = lanyard.activities.find((act) => act.type === 4);
if (tooltip.current) {
if (customStatus?.state) {
tooltip.current.setAttribute("content", customStatus.state);
} else {
tooltip.current.removeAttribute("content");
}
}
});
return ( return (
<div class={styles.container}> <div class={styles.container}>
<mdui-card class={`${styles.card} ${styles.center}`}> <mdui-card
<mdui-tooltip ref={tooltip}> // @ts-expect-error; variant is not in the types for some reason?
<mdui-avatar variant="filled"
src="/public/Abyssinian/default.png" class={`${styles.card} ${styles.center}`}
class={styles.avatar} >
/> <mdui-avatar
</mdui-tooltip> src="/public/Abyssinian/default.png"
class={`${styles.avatar} ${colors.pfp}`}
/>
<p> <p>
Seth, the <strong>dedicated</strong> backend developer, with many{" "} Seth, the <strong>dedicated</strong> backend developer, with many{" "}
<strong>passions</strong>. <strong>passions</strong>.
@ -49,6 +34,16 @@ export default () => {
</p> </p>
</mdui-card> </mdui-card>
<br class={styles.lanyard} />
<mdui-card
// @ts-expect-error; variant is not in the types for some reason?
variant="filled"
class={`${styles.card} ${styles.lanyard}`}
>
<Lanyard />
</mdui-card>
<br class={styles.hyperate} /> <br class={styles.hyperate} />
<mdui-card <mdui-card
@ -58,12 +53,6 @@ export default () => {
> >
<Hyperate /> <Hyperate />
</mdui-card> </mdui-card>
<br class={styles.lanyard} />
<div class={`${styles.card} ${styles.lanyard}`}>
<Lanyard />
</div>
</div> </div>
); );
}; };

2
src/front/index.tsx
View file

@ -4,7 +4,7 @@ import "./utilities/clicker";
import App from "./App"; import App from "./App";
import colors from "./utilities/colors.module.css"; import colors from "./colors.module.css";
document.documentElement.className = colors.offline || ""; document.documentElement.className = colors.offline || "";

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

@ -2,7 +2,7 @@ const effectTick = new Audio("https://no.ipv4.army/u/Effect_Tick.ogg");
effectTick.volume = 0.1; effectTick.volume = 0.1;
const whitelistedTags = ["button", "icon", "item", "tooltip", "avatar"]; 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;
@ -12,6 +12,8 @@ document.onclick = (event: MouseEvent) => {
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);
if (!isWhitelisted) return; if (!isWhitelisted) return;
"vibrate" in navigator && navigator.vibrate(1); "vibrate" in navigator && navigator.vibrate(1);

3
test.ts
View file

@ -0,0 +1,3 @@
import browserslist from "browserslist";
console.log(browserslist(["last 1 version and not dead"]));

24
types/lanyard.d.ts vendored
View file

@ -1,27 +1,9 @@
type LanyardActivity = { type LanyardActivity = {
id: string;
name: string;
type: number; type: number;
state?: string; name: string;
session_id: string;
details?: string; details?: string;
application_id: string; state?: string;
[key: string]: unknown;
timestamps?: {
start?: number;
end?: number;
};
assets?: {
large_image?: string;
large_text?: string;
small_image?: string;
small_text?: string;
};
created_at?: number;
buttons?: string[];
}; };
type LanyardData = { type LanyardData = {