diff --git a/bun.lock b/bun.lock index a25f51d..f91bbd7 100644 --- a/bun.lock +++ b/bun.lock @@ -6,6 +6,7 @@ "dependencies": { "@fontsource/roboto": "^5.2.5", "@fontsource/roboto-mono": "^5.2.5", + "@material/material-color-utilities": "^0.3.0", "@mdui/icons": "^1.0.3", "@speed-highlight/core": "latest", "mdui": "^2.1.4", diff --git a/package.json b/package.json index b0096d9..b892b92 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "dependencies": { "@fontsource/roboto": "^5.2.5", "@fontsource/roboto-mono": "^5.2.5", + "@material/material-color-utilities": "^0.3.0", "@mdui/icons": "^1.0.3", "@speed-highlight/core": "latest", "mdui": "^2.1.4", diff --git a/src/back/index.ts b/src/back/index.ts index 39cdaf7..4688f86 100644 --- a/src/back/index.ts +++ b/src/back/index.ts @@ -1,5 +1,5 @@ -import Hyperate from "./Sockets/Hyperate"; -import Lanyard from "./Sockets/Lanyard"; +import Hyperate from "./utilities/sockets/Hyperate"; +import Lanyard from "./utilities/sockets/Lanyard"; const development = process.env.NODE_ENV === "development"; diff --git a/src/back/Sockets/Hyperate.ts b/src/back/utilities/sockets/Hyperate.ts similarity index 100% rename from src/back/Sockets/Hyperate.ts rename to src/back/utilities/sockets/Hyperate.ts diff --git a/src/back/Sockets/Lanyard.ts b/src/back/utilities/sockets/Lanyard.ts similarity index 100% rename from src/back/Sockets/Lanyard.ts rename to src/back/utilities/sockets/Lanyard.ts diff --git a/src/back/utilities/themer/index.ts b/src/back/utilities/themer/index.ts new file mode 100644 index 0000000..940e152 --- /dev/null +++ b/src/back/utilities/themer/index.ts @@ -0,0 +1,111 @@ +import { + argbFromHex, + argbFromRgb, + argbFromRgba, + blueFromArgb, + CorePalette, + greenFromArgb, + redFromArgb, + Scheme, +} from "@material/material-color-utilities"; +import { toKebabCase } from "@mdui/jq/shared/helper.js"; + +const rgbFromArgb = (source: number): string => { + const red = redFromArgb(source); + const green = greenFromArgb(source); + const blue = blueFromArgb(source); + + return [red, green, blue].join(","); +}; + +const getFromSource = (source: number): string => { + const scheme = Scheme.dark(source).toJSON(); + + const palette = CorePalette.of(source); + + Object.assign(scheme, { + "surface-dim": palette.n1.tone(6), + "surface-bright": palette.n1.tone(24), + "surface-container-lowest": palette.n1.tone(4), + "surface-container-low": palette.n1.tone(10), + "surface-container": palette.n1.tone(12), + "surface-container-high": palette.n1.tone(17), + "surface-container-highest": palette.n1.tone(22), + "surface-tint-color": scheme.primary, + }); + + // 扩充自定义颜色 + + // 根据配色方案生成 css 变量 + const colorVar = (callback: (token: string, rgb: string) => string) => { + return Object.entries(scheme) + .map(([key, value]) => callback(toKebabCase(key), rgbFromArgb(value))) + .join(""); + }; + + // CSS 文本 + const cssText = `${colorVar((token, rgb) => `--mdui-color-${token}:${rgb};`)}`; + + return cssText; +}; + +export const getTheme = (color: string) => { + let source = argbFromHex("#FFF"); + + if (color.startsWith("#")) { + source = argbFromHex(color); + } else { + const [r, g, b, a] = color.split(","); + + const red = r || ""; + const redExists = + red.length > 0 && + red.length < 4 && + !Number.isNaN(Number.parseInt(red)) && + Number.parseInt(red) >= 0 && + Number.parseInt(red) <= 255; + + const green = g || ""; + const greenExists = + green.length > 0 && + green.length < 4 && + !Number.isNaN(Number.parseInt(green)) && + Number.parseInt(green) >= 0 && + Number.parseInt(green) <= 255; + + const blue = b || ""; + const blueExists = + blue.length > 0 && + blue.length < 4 && + !Number.isNaN(Number.parseInt(blue)) && + Number.parseInt(blue) >= 0 && + Number.parseInt(blue) <= 255; + + const alpha = a || ""; + const alphaExists = + alpha.length > 0 && + alpha.length < 4 && + !Number.isNaN(Number.parseFloat(alpha)) && + Number.parseFloat(alpha) >= 0 && + Number.parseFloat(alpha) <= 1; + + if (redExists && greenExists && blueExists) { + if (alphaExists) { + source = argbFromRgba({ + r: Number.parseInt(red), + g: Number.parseInt(green), + b: Number.parseInt(blue), + a: Number.parseFloat(alpha), + }); + } else { + source = argbFromRgb( + Number.parseInt(red), + Number.parseInt(green), + Number.parseInt(blue), + ); + } + } + } + + return getFromSource(source); +}; diff --git a/src/front/colors.css b/src/front/colors.css new file mode 100644 index 0000000..cf51876 --- /dev/null +++ b/src/front/colors.css @@ -0,0 +1,239 @@ +.online { + --mdui-color-primary: 2, 230, 0; + --mdui-color-on-primary: 1, 58, 0; + --mdui-color-primary-container: 1, 83, 0; + --mdui-color-on-primary-container: 119, 255, 97; + --mdui-color-secondary: 187, 203, 178; + --mdui-color-on-secondary: 38, 52, 34; + --mdui-color-secondary-container: 60, 75, 55; + --mdui-color-on-secondary-container: 215, 232, 205; + --mdui-color-tertiary: 160, 207, 210; + --mdui-color-on-tertiary: 0, 55, 57; + --mdui-color-tertiary-container: 30, 77, 80; + --mdui-color-on-tertiary-container: 188, 235, 238; + --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: 26, 28, 24; + --mdui-color-on-background: 226, 227, 220; + --mdui-color-surface: 26, 28, 24; + --mdui-color-on-surface: 226, 227, 220; + --mdui-color-surface-variant: 67, 72, 63; + --mdui-color-on-surface-variant: 195, 200, 188; + --mdui-color-outline: 141, 147, 135; + --mdui-color-outline-variant: 67, 72, 63; + --mdui-color-shadow: 0, 0, 0; + --mdui-color-scrim: 0, 0, 0; + --mdui-color-inverse-surface: 226, 227, 220; + --mdui-color-inverse-on-surface: 47, 49, 45; + --mdui-color-inverse-primary: 2, 110, 0; + --mdui-color-surface-dim: 18, 20, 16; + --mdui-color-surface-bright: 56, 58, 53; + --mdui-color-surface-container-lowest: 13, 15, 11; + --mdui-color-surface-container-low: 26, 28, 24; + --mdui-color-surface-container: 30, 32, 28; + --mdui-color-surface-container-high: 40, 43, 39; + --mdui-color-surface-container-highest: 51, 53, 49; + --mdui-color-surface-tint-color: 2, 230, 0; +} + +.idle { + --mdui-color-primary: 205, 205, 0; + --mdui-color-on-primary: 50, 50, 0; + --mdui-color-primary-container: 73, 73, 0; + --mdui-color-on-primary-container: 234, 234, 0; + --mdui-color-secondary: 202, 200, 165; + --mdui-color-on-secondary: 50, 50, 24; + --mdui-color-secondary-container: 73, 72, 45; + --mdui-color-on-secondary-container: 231, 228, 191; + --mdui-color-tertiary: 164, 208, 189; + --mdui-color-on-tertiary: 11, 55, 42; + --mdui-color-tertiary-container: 37, 78, 64; + --mdui-color-on-tertiary-container: 191, 236, 216; + --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: 28, 28, 23; + --mdui-color-on-background: 230, 226, 217; + --mdui-color-surface: 28, 28, 23; + --mdui-color-on-surface: 230, 226, 217; + --mdui-color-surface-variant: 72, 71, 58; + --mdui-color-on-surface-variant: 202, 199, 182; + --mdui-color-outline: 147, 145, 130; + --mdui-color-outline-variant: 72, 71, 58; + --mdui-color-shadow: 0, 0, 0; + --mdui-color-scrim: 0, 0, 0; + --mdui-color-inverse-surface: 230, 226, 217; + --mdui-color-inverse-on-surface: 49, 49, 43; + --mdui-color-inverse-primary: 98, 98, 0; + --mdui-color-surface-dim: 20, 20, 15; + --mdui-color-surface-bright: 58, 57, 51; + --mdui-color-surface-container-lowest: 15, 14, 10; + --mdui-color-surface-container-low: 28, 28, 23; + --mdui-color-surface-container: 32, 32, 26; + --mdui-color-surface-container-high: 43, 42, 37; + --mdui-color-surface-container-highest: 54, 53, 47; + --mdui-color-surface-tint-color: 205, 205, 0; +} + +.dnd { + --mdui-color-primary: 255, 180, 168; + --mdui-color-on-primary: 105, 1, 0; + --mdui-color-primary-container: 147, 1, 0; + --mdui-color-on-primary-container: 255, 218, 212; + --mdui-color-secondary: 231, 189, 182; + --mdui-color-on-secondary: 68, 41, 37; + --mdui-color-secondary-container: 93, 63, 59; + --mdui-color-on-secondary-container: 255, 218, 212; + --mdui-color-tertiary: 222, 196, 140; + --mdui-color-on-tertiary: 62, 46, 4; + --mdui-color-tertiary-container: 86, 68, 25; + --mdui-color-on-tertiary-container: 251, 223, 166; + --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, 26, 25; + --mdui-color-on-background: 237, 224, 221; + --mdui-color-surface: 32, 26, 25; + --mdui-color-on-surface: 237, 224, 221; + --mdui-color-surface-variant: 83, 67, 65; + --mdui-color-on-surface-variant: 216, 194, 190; + --mdui-color-outline: 160, 140, 137; + --mdui-color-outline-variant: 83, 67, 65; + --mdui-color-shadow: 0, 0, 0; + --mdui-color-scrim: 0, 0, 0; + --mdui-color-inverse-surface: 237, 224, 221; + --mdui-color-inverse-on-surface: 54, 47, 46; + --mdui-color-inverse-primary: 192, 1, 0; + --mdui-color-surface-dim: 24, 18, 17; + --mdui-color-surface-bright: 63, 55, 54; + --mdui-color-surface-container-lowest: 18, 13, 12; + --mdui-color-surface-container-low: 32, 26, 25; + --mdui-color-surface-container: 37, 30, 29; + --mdui-color-surface-container-high: 47, 40, 39; + --mdui-color-surface-container-highest: 59, 51, 50; + --mdui-color-surface-tint-color: 255, 180, 168; +} + +.offline { + --mdui-color-primary: 79, 216, 235; + --mdui-color-on-primary: 0, 54, 61; + --mdui-color-primary-container: 0, 79, 88; + --mdui-color-on-primary-container: 151, 240, 255; + --mdui-color-secondary: 177, 203, 208; + --mdui-color-on-secondary: 28, 52, 56; + --mdui-color-secondary-container: 51, 75, 79; + --mdui-color-on-secondary-container: 205, 231, 236; + --mdui-color-tertiary: 186, 198, 234; + --mdui-color-on-tertiary: 36, 48, 77; + --mdui-color-tertiary-container: 59, 70, 100; + --mdui-color-on-tertiary-container: 218, 226, 255; + --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: 25, 28, 29; + --mdui-color-on-background: 225, 227, 227; + --mdui-color-surface: 25, 28, 29; + --mdui-color-on-surface: 225, 227, 227; + --mdui-color-surface-variant: 63, 72, 74; + --mdui-color-on-surface-variant: 191, 200, 202; + --mdui-color-outline: 137, 146, 148; + --mdui-color-outline-variant: 63, 72, 74; + --mdui-color-shadow: 0, 0, 0; + --mdui-color-scrim: 0, 0, 0; + --mdui-color-inverse-surface: 225, 227, 227; + --mdui-color-inverse-on-surface: 46, 49, 50; + --mdui-color-inverse-primary: 0, 104, 116; + --mdui-color-surface-dim: 16, 20, 21; + --mdui-color-surface-bright: 54, 58, 58; + --mdui-color-surface-container-lowest: 11, 15, 15; + --mdui-color-surface-container-low: 25, 28, 29; + --mdui-color-surface-container: 29, 32, 33; + --mdui-color-surface-container-high: 39, 43, 43; + --mdui-color-surface-container-highest: 50, 53, 54; + --mdui-color-surface-tint-color: 79, 216, 235; +} + +.streaming { + --mdui-color-primary: 255, 171, 243; + --mdui-color-on-primary: 91, 0, 91; + --mdui-color-primary-container: 129, 0, 129; + --mdui-color-on-primary-container: 255, 215, 245; + --mdui-color-secondary: 218, 191, 210; + --mdui-color-on-secondary: 61, 43, 58; + --mdui-color-secondary-container: 85, 65, 81; + --mdui-color-on-secondary-container: 247, 218, 239; + --mdui-color-tertiary: 245, 184, 167; + --mdui-color-on-tertiary: 76, 38, 27; + --mdui-color-tertiary-container: 102, 60, 47; + --mdui-color-on-tertiary-container: 255, 219, 209; + --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: 30, 26, 29; + --mdui-color-on-background: 233, 224, 228; + --mdui-color-surface: 30, 26, 29; + --mdui-color-on-surface: 233, 224, 228; + --mdui-color-surface-variant: 78, 68, 75; + --mdui-color-on-surface-variant: 209, 194, 203; + --mdui-color-outline: 154, 141, 149; + --mdui-color-outline-variant: 78, 68, 75; + --mdui-color-shadow: 0, 0, 0; + --mdui-color-scrim: 0, 0, 0; + --mdui-color-inverse-surface: 233, 224, 228; + --mdui-color-inverse-on-surface: 52, 47, 50; + --mdui-color-inverse-primary: 169, 0, 169; + --mdui-color-surface-dim: 22, 18, 21; + --mdui-color-surface-bright: 61, 56, 59; + --mdui-color-surface-container-lowest: 17, 13, 16; + --mdui-color-surface-container-low: 30, 26, 29; + --mdui-color-surface-container: 35, 30, 33; + --mdui-color-surface-container-high: 45, 41, 44; + --mdui-color-surface-container-highest: 56, 51, 54; + --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; +} \ No newline at end of file diff --git a/src/front/components/Lanyard/index.tsx b/src/front/components/Lanyard/index.tsx index 3c04d2c..16c2e10 100644 --- a/src/front/components/Lanyard/index.tsx +++ b/src/front/components/Lanyard/index.tsx @@ -1,15 +1,7 @@ import { highlightElement } from "@speed-highlight/core"; import { createRef } from "tsx-dom"; -import { artist } from "../../utilities/artist"; import socket from "../../utilities/socket"; -const colorMap = { - online: "#00ff00", - idle: "#ffff00", - dnd: "#ff0000", - offline: "", - streaming: "#ff00ff", -}; const activityTypes: Record = { 0: "Playing", @@ -28,9 +20,9 @@ export default () => { const streamingActivity = lanyard.activities.find((act) => act.type === 1); if (streamingActivity) { - artist(colorMap.streaming); + document.documentElement.className = "streaming"; } else { - artist(colorMap[lanyard.discord_status]); + document.documentElement.className = lanyard.discord_status; } if (lanyard.activities.length === 0) { diff --git a/src/front/components/pages/About/index.tsx b/src/front/components/pages/About/index.tsx index 67b28a4..dcf2d9b 100644 --- a/src/front/components/pages/About/index.tsx +++ b/src/front/components/pages/About/index.tsx @@ -4,24 +4,9 @@ import "mdui/components/avatar"; import "mdui/components/segmented-button-group"; import "mdui/components/segmented-button"; -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; - - artist(await getColorFromImage(Abyssinian), profilePicture); - - profilePicture.setAttribute("src", Abyssinian.src); - profilePicture.innerText = ""; -}; - export default () => { return (
{ }} > { style={{ width: "5rem", height: "inherit", - border: "2px solid rgb(var(--status-color))", + border: "2px solid rgb(var(--mdui-color-primary))", }} - id="profilePicture" - > - S - -

Seth

- {/* make important text bold */} + src="/public/Abyssinian/default.png" + class="pfp" + />

- A Dedicated Backend Developer, with many{" "} + Seth, the dedicated backend developer, with many{" "} passions.

- high-fidelity audio + hi-fi audio gaming development @@ -79,6 +61,7 @@ export default () => { /> { justifyContent: "center", alignItems: "center", flexDirection: "column", - - //textAlign: "center", }} > @@ -102,6 +83,7 @@ export default () => { /> { alignItems: "center", flexDirection: "column", - //textAlign: "center", + textAlign: "center", }} > diff --git a/src/front/index.css b/src/front/index.css index 35c5c35..4df04a8 100644 --- a/src/front/index.css +++ b/src/front/index.css @@ -2,6 +2,7 @@ @import "../../node_modules/@fontsource/roboto-mono/latin-400.css"; @import "../../node_modules/mdui/mdui.css"; +@import "./colors.css"; :not(:defined) { visibility: hidden; @@ -16,6 +17,9 @@ body { margin: 0; padding: 0; font-family: "Roboto", sans-serif; + + color: rgb(var(--mdui-color-on-background)); + background-color: rgb(var(--mdui-color-background)); } [class*="shj-lang-"] { @@ -205,4 +209,4 @@ body { 100% { transform: scale(1); } -} +} \ No newline at end of file diff --git a/src/front/index.html b/src/front/index.html index 369c425..da72127 100644 --- a/src/front/index.html +++ b/src/front/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/front/index.tsx b/src/front/index.tsx index 293dc5f..eaf9dd5 100644 --- a/src/front/index.tsx +++ b/src/front/index.tsx @@ -1,12 +1,9 @@ import "tsx-dom"; -import { artist } from "./utilities/artist"; import "./utilities/clicker"; import App from "./App"; -artist(); - document.body.appendChild(); // You're garbage, let me collect you. diff --git a/src/front/utilities/artist/index.ts b/src/front/utilities/artist/index.ts deleted file mode 100644 index 077c9a4..0000000 --- a/src/front/utilities/artist/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -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"); - } - - document.body.style.setProperty( - "--status-color", - getComputedStyle(document.documentElement).getPropertyValue( - "--mdui-color-primary", - ), - ); -}; diff --git a/src/front/utilities/socket/index.ts b/src/front/utilities/socket/index.ts index a467de1..b5f0c9a 100644 --- a/src/front/utilities/socket/index.ts +++ b/src/front/utilities/socket/index.ts @@ -22,6 +22,10 @@ class Socket extends EventTarget { this.emitHyperate(data.hr); break; } + case "color": { + this.emitColor(data); + break; + } case "echo": { //console.log("Echo: ", data); break; @@ -53,6 +57,9 @@ class Socket extends EventTarget { emitHyperate(heartRate: number) { this.dispatchEvent(new CustomEvent("hyperate", { detail: heartRate })); } + emitColor(styleSheet: string) { + this.dispatchEvent(new CustomEvent("color", { detail: styleSheet })); + } } export default new Socket(`${protocol.replace("http", "ws")}//${host}/api/ws`); diff --git a/src/index.ts b/src/index.ts index 79a0db9..7fa2998 100644 --- a/src/index.ts +++ b/src/index.ts @@ -84,9 +84,10 @@ const server = serve({ true, ); }, - message: (ws, msg) => { + message: (ws, msg: string) => { if (msg === "ping") ws.send("pong", true); if (msg === "pong") ws.send("ping", true); + return; }, }, diff --git a/test.ts b/test.ts new file mode 100644 index 0000000..d0121ca --- /dev/null +++ b/test.ts @@ -0,0 +1,15 @@ +import { getTheme } from "./src/back/utilities/themer"; + +//console.log(getTheme("#ffddc4")); + +const colorMap = { + online: "#00ff00", + idle: "#ffff00", + dnd: "#ff0000", + offline: "", + streaming: "#ff00ff", +}; + +Object.entries(colorMap).forEach(([key, value]) => { + console.log(key, getTheme(value), "\n\n"); +});