CoastalCommitsArchival/github.com-Vendicated-Vencord
1
0
Fork 1
mirror of https://github.com/Vendicated/Vencord synced 2024-09-13 04:29:24 -04:00
Code Issues Projects Releases Packages Wiki Activity

DiscordColorways v6.3.0: Bug fixes and general stability improvements

Browse source
This commit is contained in:
DaBluLite 2024-08-24 03:41:16 +03:00
parent d4d0abd607
commit 46e9044900
21 changed files with 433 additions and 602 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/plugins/discordColorways/components/ColorPicker.tsx
View file

@ -39,7 +39,7 @@ export default function ({ modalProps }: { modalProps: ModalProps; }) {
<div style={{ gap: "8px", marginBottom: "8px", display: "flex" }}>
<input
type="text"
className="colorwaySelector-search"
className="colorwayTextBox"
placeholder="Search for a color:"
onChange={({ currentTarget: { value } }) => {
searchToolboxItems(value);

8
src/plugins/discordColorways/components/ColorwayID.tsx
View file

@ -1,11 +1,9 @@
import { DataStore, openModal, useState, useEffect, Toasts } from "..";
import { DataStore, openModal, useState, useEffect, Toasts, FluxDispatcher, FluxEvents } from "..";
import { generateCss } from "../css";
import { colorToHex, hexToString } from "../utils";
import CreatorModal from "./CreatorModal";
import { ColorwayCSS } from "../colorwaysAPI";
export let changeThemeIDCard: (theme: string) => void = () => { };
export default function ({ props }) {
const [theme, setTheme] = useState("discord");
@ -13,10 +11,10 @@ export default function ({ props }) {
async function load() {
setTheme(await DataStore.get("colorwaysPluginTheme") as string);
}
changeThemeIDCard = (theme) => setTheme(theme);
FluxDispatcher.subscribe("COLORWAYS_UPDATE_THEME" as FluxEvents, ({ theme }) => setTheme(theme));
load();
return () => {
changeThemeIDCard = () => { };
FluxDispatcher.unsubscribe("COLORWAYS_UPDATE_THEME" as FluxEvents, ({ theme }) => setTheme(theme));
};
}, []);
if (String(props.message.content).match(/colorway:[0-9a-f]{0,100}/)) {

10
src/plugins/discordColorways/components/ColorwaysButton.tsx
View file

@ -23,14 +23,12 @@ export default function () {
setIsThin(await DataStore.get("useThinMenuButton") as boolean);
setAutoPreset(await DataStore.get("activeAutoPreset") as string);
})();
});
FluxDispatcher.subscribe("COLORWAYS_UPDATE_BUTTON_HEIGHT" as FluxEvents, ({ isTall }) => {
setIsThin(isTall);
});
FluxDispatcher.subscribe("COLORWAYS_UPDATE_BUTTON_VISIBILITY" as FluxEvents, ({ isVisible }) => setVisibility(isVisible));
FluxDispatcher.subscribe("COLORWAYS_UPDATE_BUTTON_VISIBILITY" as FluxEvents, ({ isVisible }) => {
setVisibility(isVisible);
return () => {
FluxDispatcher.unsubscribe("COLORWAYS_UPDATE_BUTTON_VISIBILITY" as FluxEvents, ({ isVisible }) => setVisibility(isVisible));
};
});
return <Tooltip text={

3
src/plugins/discordColorways/components/CreatorModal.tsx
View file

@ -140,7 +140,7 @@ export default function ({
<span className="colorwaysModalSectionHeader">Name:</span>
<input
type="text"
className="colorwaySelector-search"
className="colorwayTextBox"
placeholder="Give your Colorway a name"
value={colorwayName}
onInput={e => setColorwayName(e.currentTarget.value)}
@ -261,7 +261,6 @@ export default function ({
}
const customColorway: Colorway = {
name: (colorwayName || "Colorway"),
"dc-import": customColorwayCSS,
accent: "#" + colors.accent,
primary: "#" + colors.primary,
secondary: "#" + colors.secondary,

59
src/plugins/discordColorways/components/InfoModal.tsx
View file

@ -31,7 +31,7 @@ function RenameColorwayModal({ modalProps, ogName, onFinish, colorwayList }: { m
<div className="colorwaysModalContent">
<input
type="text"
className="colorwaySelector-search"
className="colorwayTextBox"
value={newName}
onInput={({ currentTarget: { value } }) => {
setNewName(value);
@ -135,29 +135,24 @@ export default function ({
className="colorwaysPillButton"
style={{ width: "100%" }}
onClick={() => {
navigator.clipboard.writeText(colorway["dc-import"]);
Toasts.show({
message: "Copied CSS to Clipboard",
type: 1,
id: "copy-colorway-css-notify",
});
if (colorway["dc-import"]) {
navigator.clipboard.writeText(colorway["dc-import"]);
Toasts.show({
message: "Copied CSS to Clipboard",
type: 1,
id: "copy-colorway-css-notify",
});
} else {
Toasts.show({
message: "Colorway did not provide CSS",
type: 2,
id: "copy-colorway-css-failed-notify",
});
}
}}
>
Copy CSS
</button>
<button
className="colorwaysPillButton"
style={{ width: "100%" }}
onClick={async () => {
const newColorway = {
...colorway,
"dc-import": generateCss(colorToHex(colorway.primary) || "313338", colorToHex(colorway.secondary) || "2b2d31", colorToHex(colorway.tertiary) || "1e1f22", colorToHex(colorway.accent) || "5865f2", true, true, undefined, colorway.name)
};
openModal(props => <SaveColorwayModal modalProps={props} colorways={[newColorway]} onFinish={() => { }} />);
}}
>
Update CSS
</button>
{colorway.sourceType === "offline" && <button
className="colorwaysPillButton"
style={{ width: "100%" }}
@ -190,17 +185,19 @@ export default function ({
className="colorwaysPillButton"
style={{ width: "100%" }}
onClick={() => {
if (!colorway["dc-import"].includes("@name")) {
saveFile(new File([`/**
* @name ${colorway.name || "Colorway"}
* @version ${PluginProps.creatorVersion}
* @description Automatically generated Colorway.
* @author ${UserStore.getCurrentUser().username}
* @authorId ${UserStore.getCurrentUser().id}
*/
${colorway["dc-import"].replace((colorway["dc-import"].match(/\/\*.+\*\//) || [""])[0], "").replaceAll("url(//", "url(https://").replaceAll("url(\"//", "url(\"https://")}`], `${colorway.name.replaceAll(" ", "-").toLowerCase()}.theme.css`, { type: "text/plain" }));
} else {
saveFile(new File([colorway["dc-import"]], `${colorway.name.replaceAll(" ", "-").toLowerCase()}.theme.css`, { type: "text/plain" }));
if (colorway["dc-import"]) {
if (!colorway["dc-import"].includes("@name")) {
saveFile(new File([`/**
* @name ${colorway.name || "Colorway"}
* @version ${PluginProps.creatorVersion}
* @description Automatically generated Colorway.
* @author ${UserStore.getCurrentUser().username}
* @authorId ${UserStore.getCurrentUser().id}
*/
${colorway["dc-import"].replace((colorway["dc-import"].match(/\/\*.+\*\//) || [""])[0], "").replaceAll("url(//", "url(https://").replaceAll("url(\"//", "url(\"https://")}`], `${colorway.name.replaceAll(" ", "-").toLowerCase()}.theme.css`, { type: "text/plain" }));
} else {
saveFile(new File([colorway["dc-import"]], `${colorway.name.replaceAll(" ", "-").toLowerCase()}.theme.css`, { type: "text/plain" }));
}
}
}}
>

2
src/plugins/discordColorways/components/InputColorwayIdModal.tsx
View file

@ -23,7 +23,7 @@ export default function ({ modalProps, onColorwayId }: { modalProps: ModalProps,
<span className="colorwaysModalSectionHeader">Colorway ID:</span>
<input
type="text"
className="colorwaySelector-search"
className="colorwayTextBox"
placeholder="Enter Colorway ID"
onInput={({ currentTarget: { value } }) => setColorwayID(value)}
/>

19
src/plugins/discordColorways/components/MainModal.tsx
View file

@ -9,17 +9,13 @@
import SourceManager from "./SettingsTabs/SourceManager";
import Store from "./SettingsTabs/Store";
import Selector from "./Selector";
import { useState, useEffect, DataStore, useRef } from "../";
import { useState, useEffect, DataStore, useRef, FluxDispatcher, FluxEvents } from "../";
import SettingsPage from "./SettingsTabs/SettingsPage";
import { ModalProps } from "../types";
import { MouseEvent, MouseEventHandler } from "react";
import { restartWS, updateRemoteSources, wsOpen } from "../wsClient";
import { boundKey as bk } from "../wsClient";
export let changeTheme = (theme: string) => { };
export let updateWSMain: (status: boolean) => void = () => { };
export let updateBoundKeyMain: (boundKey: { [managerKey: string]: string; }) => void = () => { };
export default function ({
modalProps
}: {
@ -37,15 +33,16 @@ export default function ({
async function load() {
setTheme(await DataStore.get("colorwaysPluginTheme") as string);
}
updateWSMain = (status) => setWsConnected(status);
changeTheme = (theme: string) => setTheme(theme);
updateBoundKeyMain = (bound) => setBoundKey(bound);
FluxDispatcher.subscribe("COLORWAYS_UPDATE_WS_CONNECTED" as FluxEvents, ({ isConnected }) => setWsConnected(isConnected));
FluxDispatcher.subscribe("COLORWAYS_UPDATE_BOUND_KEY" as FluxEvents, ({ boundKey }) => setBoundKey(boundKey));
FluxDispatcher.subscribe("COLORWAYS_UPDATE_THEME" as FluxEvents, ({ theme }) => setTheme(theme));
load();
return () => {
updateWSMain = () => { };
changeTheme = () => { };
updateBoundKeyMain = () => { };
FluxDispatcher.unsubscribe("COLORWAYS_UPDATE_BOUND_KEY" as FluxEvents, ({ boundKey }) => setBoundKey(boundKey));
FluxDispatcher.unsubscribe("COLORWAYS_UPDATE_WS_CONNECTED" as FluxEvents, ({ isConnected }) => setWsConnected(isConnected));
FluxDispatcher.unsubscribe("COLORWAYS_UPDATE_THEME" as FluxEvents, ({ theme }) => setTheme(theme));
};
}, []);

2
src/plugins/discordColorways/components/SaveColorwayModal.tsx
View file

@ -106,7 +106,7 @@ export default function ({ modalProps, colorways, onFinish }: { modalProps: Moda
<div className="colorwaysModalContent">
<input
type="text"
className="colorwaySelector-search"
className="colorwayTextBox"
value={newColorwayName}
onInput={({ currentTarget: { value } }) => setNewColorwayName(value)}
placeholder="Enter valid colorway name" />

233
src/plugins/discordColorways/components/Selector.tsx
View file

@ -1,5 +1,5 @@
import { PlusIcon, PalleteIcon, CodeIcon, IDIcon, DeleteIcon } from "./Icons";
import { DataStore, ReactNode, Toasts } from "..";
import { DataStore, FluxDispatcher, FluxEvents, ReactNode, Toasts } from "..";
import { nullColorwayObj } from "../constants";
import { generateCss, getAutoPresets, gradientBase } from "../css";
import { ColorwayObject, Colorway, SortOptions, SourceObject, ModalProps } from "../types";
@ -15,10 +15,6 @@ import FiltersMenu from "./FiltersMenu";
import SourcesMenu from "./SourcesMenu";
import ReloadButton from "./ReloadButton";
export let updateWS: (status: boolean) => void = () => { };
export let updateManagerRole: (hasManager: boolean) => void = () => { };
export let updateActiveColorway: (active: ColorwayObject) => void = () => { };
export default function ({
settings = { selectorType: "normal" },
hasTheme = false
@ -44,19 +40,15 @@ export default function ({
setTheme(await DataStore.get("colorwaysPluginTheme") as string);
}
load();
updateWS = (status) => {
setWsConnected(status);
};
console.log(hasManagerRole);
updateManagerRole = (hasManager) => {
setManager(hasManager);
console.log(hasManager);
};
updateActiveColorway = setActiveColorwayObject;
FluxDispatcher.subscribe("COLORWAYS_UPDATE_WS_CONNECTED" as FluxEvents, ({ isConnected }) => setWsConnected(isConnected));
FluxDispatcher.subscribe("COLORWAYS_UPDATE_ACTIVE_COLORWAY" as FluxEvents, ({ active }) => setActiveColorwayObject(active));
FluxDispatcher.subscribe("COLORWAYS_UPDATE_WS_MANAGER_ROLE" as FluxEvents, ({ isManager }) => setManager(isManager));
return () => {
updateWS = () => { };
updateManagerRole = () => { };
updateActiveColorway = () => { };
FluxDispatcher.unsubscribe("COLORWAYS_UPDATE_WS_CONNECTED" as FluxEvents, ({ isConnected }) => setWsConnected(isConnected));
FluxDispatcher.unsubscribe("COLORWAYS_UPDATE_ACTIVE_COLORWAY" as FluxEvents, ({ active }) => setActiveColorwayObject(active));
FluxDispatcher.unsubscribe("COLORWAYS_UPDATE_WS_MANAGER_ROLE" as FluxEvents, ({ isManager }) => setManager(isManager));
};
}, [isManager]);
@ -133,7 +125,7 @@ export default function ({
return <>{(settings.selectorType !== "preview" && (!wsConnected || (wsConnected && isManager))) ? <Header>
<input
type="text"
className="colorwaySelector-search"
className="colorwayTextBox"
placeholder="Search for Colorways..."
value={searchValue}
autoFocus
@ -257,49 +249,65 @@ export default function ({
id="colorway-Auto"
aria-checked={activeColorwayObject.id === "Auto" && activeColorwayObject.source === null}
onClick={async () => {
if (isManager) {
Toasts.show({
message: "Cannot use Auto colorway while on manager mode",
type: 2,
id: "colorways-manager-role-auto-colorway-error"
});
} else {
const activeAutoPreset = await DataStore.get("activeAutoPreset");
if (activeColorwayObject.id === "Auto") {
const activeAutoPreset = await DataStore.get("activeAutoPreset");
if (activeColorwayObject.id === "Auto") {
if (isManager) {
sendColorway(nullColorwayObj);
} else {
DataStore.set("activeColorwayObject", nullColorwayObj);
setActiveColorwayObject(nullColorwayObj);
ColorwayCSS.remove();
} else {
if (!activeAutoPreset) {
openModal((props: ModalProps) => <AutoColorwaySelector autoColorwayId="" modalProps={props} onChange={autoPresetId => {
const demandedColorway = getAutoPresets(colorToHex(getComputedStyle(document.body).getPropertyValue("--os-accent-color")).slice(0, 6))[autoPresetId].preset();
ColorwayCSS.set(demandedColorway);
const newObj: ColorwayObject = {
id: "Auto",
css: demandedColorway,
sourceType: "online",
source: null,
colors: {
accent: colorToHex(getComputedStyle(document.body).getPropertyValue("--os-accent-color")).slice(0, 6)
}
};
DataStore.set("activeColorwayObject", newObj);
setActiveColorwayObject(newObj);
}} />);
} else {
const autoColorway = getAutoPresets(colorToHex(getComputedStyle(document.body).getPropertyValue("--os-accent-color")).slice(0, 6))[activeAutoPreset].preset();
}
} else {
if (!activeAutoPreset) {
openModal((props: ModalProps) => <AutoColorwaySelector autoColorwayId="" modalProps={props} onChange={autoPresetId => {
const { colors } = getAutoPresets(colorToHex(getComputedStyle(document.body).getPropertyValue("--os-accent-color")).slice(0, 6))[autoPresetId];
const newObj: ColorwayObject = {
id: "Auto",
css: autoColorway,
sourceType: "online",
source: null,
colors: {
accent: colorToHex(getComputedStyle(document.body).getPropertyValue("--os-accent-color")).slice(0, 6)
}
colors: colors
};
if (isManager) {
sendColorway(newObj);
} else {
ColorwayCSS.set(generateCss(
colors.primary,
colors.secondary,
colors.tertiary,
colors.accent,
true,
true,
undefined,
"Auto Colorway"
));
DataStore.set("activeColorwayObject", newObj);
setActiveColorwayObject(newObj);
}
}} />);
} else {
const { colors } = getAutoPresets(colorToHex(getComputedStyle(document.body).getPropertyValue("--os-accent-color")).slice(0, 6))[activeAutoPreset];
const newObj: ColorwayObject = {
id: "Auto",
sourceType: "online",
source: null,
colors: colors
};
if (isManager) {
sendColorway(newObj);
} else {
ColorwayCSS.set(generateCss(
colors.primary,
colors.secondary,
colors.tertiary,
colors.accent,
true,
true,
undefined,
"Auto Colorway"
));
DataStore.set("activeColorwayObject", newObj);
setActiveColorwayObject(newObj);
ColorwayCSS.set(autoColorway);
}
}
}
@ -314,19 +322,29 @@ export default function ({
const activeAutoPreset = await DataStore.get("activeAutoPreset");
openModal((props: ModalProps) => <AutoColorwaySelector autoColorwayId={activeAutoPreset} modalProps={props} onChange={autoPresetId => {
if (activeColorwayObject.id === "Auto") {
const demandedColorway = getAutoPresets(colorToHex(getComputedStyle(document.body).getPropertyValue("--os-accent-color")).slice(0, 6))[autoPresetId].preset();
const { colors } = getAutoPresets(colorToHex(getComputedStyle(document.body).getPropertyValue("--os-accent-color")).slice(0, 6))[activeAutoPreset];
const newObj: ColorwayObject = {
id: "Auto",
css: demandedColorway,
sourceType: "online",
source: null,
colors: {
accent: colorToHex(getComputedStyle(document.body).getPropertyValue("--os-accent-color")).slice(0, 6)
}
colors: colors
};
DataStore.set("activeColorwayObject", newObj);
setActiveColorwayObject(newObj);
ColorwayCSS.set(demandedColorway);
if (isManager) {
sendColorway(newObj);
} else {
ColorwayCSS.set(generateCss(
colors.primary,
colors.secondary,
colors.tertiary,
colors.accent,
true,
true,
undefined,
"Auto Colorway"
));
DataStore.set("activeColorwayObject", newObj);
setActiveColorwayObject(newObj);
}
}
}} />);
}}
@ -375,13 +393,21 @@ export default function ({
return a.name.localeCompare(b.name);
}
})
.map((color: Colorway) => color.colors ? color : { ...color, colors: ["accent", "primary", "secondary", "tertiary"] })
.map((color: Colorway) => {
const colors: { accent?: string, primary?: string, secondary?: string, tertiary?: string; } = {};
color.colors!.map((colorStr) => colors[colorStr] = colorToHex(color[colorStr]));
return { ...color, colorObj: colors };
})
.map((color: Colorway) => {
color.primary ??= "#313338";
color.secondary ??= "#2b2d31";
color.tertiary ??= "#1e1f22";
color.accent ??= "#ffffff";
color["dc-import"] = !color.isGradient ? generateCss(
colorToHex(color.primary),
colorToHex(color.secondary),
colorToHex(color.tertiary),
colorToHex(color.accent).slice(0, 6),
true,
false,
undefined,
color.name
) : gradientBase(colorToHex(color.accent), true) + `:root:root {--custom-theme-background: linear-gradient(${color.linearGradient})}`;
return (color.name.toLowerCase().includes(searchValue.toLowerCase()) ?
<div
className="discordColorway"
@ -389,17 +415,6 @@ export default function ({
aria-checked={activeColorwayObject.id === color.name && activeColorwayObject.source === color.source}
onClick={async () => {
if (settings.selectorType === "normal") {
const [
onDemandWays,
onDemandWaysTintedText,
onDemandWaysDiscordSaturation,
onDemandWaysOsAccentColor
] = await DataStore.getMany([
"onDemandWays",
"onDemandWaysTintedText",
"onDemandWaysDiscordSaturation",
"onDemandWaysOsAccentColor"
]);
if (activeColorwayObject.id === color.name && activeColorwayObject.source === color.source) {
if (isManager) {
sendColorway(nullColorwayObj);
@ -409,48 +424,23 @@ export default function ({
ColorwayCSS.remove();
}
} else {
if (isManager) {
const newObj: ColorwayObject = {
id: color.name,
sourceType: color.type,
source: color.source,
colors: color.colorObj
};
sendColorway(newObj);
} else {
if (onDemandWays) {
const demandedColorway = !color.isGradient ? generateCss(
colorToHex(color.primary),
colorToHex(color.secondary),
colorToHex(color.tertiary),
colorToHex(onDemandWaysOsAccentColor ? getComputedStyle(document.body).getPropertyValue("--os-accent-color") : color.accent).slice(0, 6),
onDemandWaysTintedText,
onDemandWaysDiscordSaturation,
undefined,
color.name
) : gradientBase(colorToHex(onDemandWaysOsAccentColor ? getComputedStyle(document.body).getPropertyValue("--os-accent-color") : color.accent), onDemandWaysDiscordSaturation) + `:root:root {--custom-theme-background: linear-gradient(${color.linearGradient})}`;
ColorwayCSS.set(demandedColorway);
const newObj: ColorwayObject = {
id: color.name,
css: demandedColorway,
sourceType: color.type,
source: color.source,
colors: { ...color.colorObj, accent: colorToHex(onDemandWaysOsAccentColor ? getComputedStyle(document.body).getPropertyValue("--os-accent-color") : color.accent).slice(0, 6) }
};
setActiveColorwayObject(newObj);
DataStore.set("activeColorwayObject", newObj);
} else {
ColorwayCSS.set(color["dc-import"]);
const newObj: ColorwayObject = {
id: color.name,
css: color["dc-import"],
sourceType: color.type,
source: color.source,
colors: color.colorObj
};
setActiveColorwayObject(newObj);
DataStore.set("activeColorwayObject", newObj);
const newObj: ColorwayObject = {
id: color.name,
sourceType: color.type,
source: color.source,
colors: {
accent: color.accent,
primary: color.primary,
secondary: color.secondary,
tertiary: color.tertiary
}
};
if (color.linearGradient) newObj.linearGradient = color.linearGradient;
if (isManager) sendColorway(newObj);
else {
ColorwayCSS.set(color["dc-import"] as string);
setActiveColorwayObject(newObj);
DataStore.set("activeColorwayObject", newObj);
}
}
}
@ -464,7 +454,12 @@ export default function ({
}}
>
<div className="discordColorwayPreviewColorContainer">
{!color.isGradient ? Object.values(color.colorObj as { accent?: string, primary?: string, secondary?: string, tertiary?: string; }).map((colorStr) => <div
{!color.isGradient ? Object.values({
accent: color.accent,
primary: color.primary,
secondary: color.secondary,
tertiary: color.tertiary
}).map((colorStr) => <div
className="discordColorwayPreviewColor"
style={{
backgroundColor: `#${colorToHex(colorStr)}`,
@ -502,7 +497,7 @@ export default function ({
className="colorwaysPillButton colorwaysPillButton-onSurface"
onClick={async e => {
e.stopPropagation();
navigator.clipboard.writeText(color["dc-import"]);
navigator.clipboard.writeText(color["dc-import"] as string);
Toasts.show({
message: "Copied Colorway CSS Successfully",
type: 1,

102
src/plugins/discordColorways/components/SettingsTabs/OnDemandPage.tsx
View file

@ -1,102 +0,0 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2023 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { DataStore, ReactNode, useCallback, useEffect, useState } from "../../";
import Setting from "../Setting";
import Switch from "../Switch";
export default function ({
hasTheme = false
}: {
hasTheme: boolean;
}) {
const [onDemand, setOnDemand] = useState<boolean>(false);
const [onDemandTinted, setOnDemandTinted] = useState<boolean>(false);
const [onDemandDiscordSat, setOnDemandDiscordSat] = useState<boolean>(false);
const [onDemandOsAccent, setOnDemandOsAccent] = useState<boolean>(false);
const [theme, setTheme] = useState("discord");
useEffect(() => {
async function load() {
setTheme(await DataStore.get("colorwaysPluginTheme") as string);
}
load();
}, []);
async function loadUI() {
const [
onDemandWays,
onDemandWaysTintedText,
onDemandWaysDiscordSaturation,
onDemandWaysOsAccentColor
] = await DataStore.getMany([
"onDemandWays",
"onDemandWaysTintedText",
"onDemandWaysDiscordSaturation",
"onDemandWaysOsAccentColor"
]);
setOnDemand(onDemandWays);
setOnDemandTinted(onDemandWaysTintedText);
setOnDemandDiscordSat(onDemandWaysDiscordSaturation);
if (getComputedStyle(document.body).getPropertyValue("--os-accent-color") !== "") {
setOnDemandOsAccent(onDemandWaysOsAccentColor);
}
}
const cached_loadUI = useCallback(loadUI, []);
useEffect(() => {
cached_loadUI();
}, []);
function Container({ children }: { children: ReactNode; }) {
if (hasTheme) return <div className="colorwaysModalTab" data-theme={theme}>{children}</div>;
else return <div className="colorwaysModalTab">{children}</div>;
}
return <Container>
<Setting divider>
<Switch
label="Enable Colorways On Demand"
id="onDemandWays"
value={onDemand}
onChange={(v: boolean) => {
setOnDemand(v);
DataStore.set("onDemandWays", v);
}} />
<span className="colorwaysNote">Always utilise the latest of what DiscordColorways has to offer. CSS is being directly generated on the device and gets applied in the place of the normal import/CSS given by the colorway.</span>
</Setting>
<Setting divider disabled={!onDemand}>
<Switch
label="Use tinted text"
id="onDemandWaysTintedText"
value={onDemandTinted}
onChange={(v: boolean) => {
setOnDemandTinted(v);
DataStore.set("onDemandWaysTintedText", v);
}} />
</Setting>
<Setting divider disabled={!onDemand}>
<Switch
label="Use Discord's saturation"
id="onDemandWaysDiscordSaturation"
value={onDemandDiscordSat}
onChange={(v: boolean) => {
setOnDemandDiscordSat(v);
DataStore.set("onDemandWaysDiscordSaturation", v);
}} />
</Setting>
<Setting disabled={!onDemand || !getComputedStyle(document.body).getPropertyValue("--os-accent-color")}>
<Switch
label="Use Operating System's Accent Color"
id="onDemandWaysOsAccentColor"
value={onDemandOsAccent}
onChange={(v: boolean) => {
setOnDemandOsAccent(v);
DataStore.set("onDemandWaysOsAccentColor", v);
}} />
</Setting>
</Container>;
}

30
src/plugins/discordColorways/components/SettingsTabs/SettingsPage.tsx
View file

@ -10,14 +10,7 @@ import { defaultColorwaySource, fallbackColorways, nullColorwayObj } from "../..
import { Colorway } from "../../types";
import Setting from "../Setting";
import Switch from "../Switch";
import { changeTheme as changeThemeMain } from "../MainModal";
import { connect, updateShouldAutoconnect } from "../../wsClient";
import { changeThemeIDCard } from "../ColorwayID";
function changeTheme(theme: string) {
changeThemeMain(theme);
changeThemeIDCard(theme);
}
import { connect, isWSOpen } from "../../wsClient";
export default function ({
hasTheme = false
@ -33,7 +26,7 @@ export default function ({
useEffect(() => {
async function load() {
setTheme(await DataStore.get("colorwaysPluginTheme") as string);
setShouldAutoconnect(await DataStore.get("colorwaysManagerDoAutoconnect") as "1" | "2");
setShouldAutoconnect((await DataStore.get("colorwaysManagerDoAutoconnect") as boolean) ? "1" : "2");
}
load();
}, []);
@ -100,10 +93,13 @@ export default function ({
<select
className="colorwaysPillButton"
style={{ border: "none" }}
onChange={e => {
setTheme(e.currentTarget.value);
DataStore.set("colorwaysPluginTheme", e.currentTarget.value);
changeTheme(e.currentTarget.value);
onChange={({ currentTarget: { value } }) => {
setTheme(value);
DataStore.set("colorwaysPluginTheme", value);
FluxDispatcher.dispatch({
type: "COLORWAYS_UPDATE_THEME" as FluxEvents,
theme: value
});
}}
value={theme}
>
@ -126,12 +122,12 @@ export default function ({
className="colorwaysPillButton"
style={{ border: "none" }}
onChange={({ currentTarget: { value } }) => {
setShouldAutoconnect(value as "1" | "2");
if (value == "1") {
DataStore.set("colorwaysManagerDoAutoconnect", true);
updateShouldAutoconnect(true);
if (!isWSOpen()) connect();
} else {
DataStore.set("colorwaysManagerDoAutoconnect", false);
updateShouldAutoconnect(false);
}
}}
value={shouldAutoconnect}
@ -178,10 +174,6 @@ export default function ({
url: defaultColorwaySource
}]],
["showColorwaysButton", false],
["onDemandWays", false],
["onDemandWaysTintedText", true],
["onDemandWaysDiscordSaturation", false],
["onDemandWaysOsAccentColor", false],
["activeColorwayObject", nullColorwayObj],
["colorwaysPluginTheme", "discord"],
["colorwaysBoundManagers", []],

6
src/plugins/discordColorways/components/SettingsTabs/SourceManager.tsx
View file

@ -32,7 +32,7 @@ export function StoreNameModal({ modalProps, originalName, onFinish, conflicting
<div className="colorwaysModalContent">
{conflicting ? <span className="colorwaysModalSectionHeader">A store with the same name already exists. Please give a different name to the imported store:</span> : <></>}
<span className="colorwaysModalSectionHeader">Name:</span>
<input type="text" className="colorwaySelector-search" value={newStoreName} onChange={({ currentTarget: { value } }) => setNewStoreName(value)} style={{ marginBottom: "16px" }} />
<input type="text" className="colorwayTextBox" value={newStoreName} onChange={({ currentTarget: { value } }) => setNewStoreName(value)} style={{ marginBottom: "16px" }} />
</div>
<div className="colorwaysModalFooter">
<button
@ -82,7 +82,7 @@ function AddOnlineStoreModal({ modalProps, onFinish }: { modalProps: ModalProps,
<span className="colorwaysModalSectionHeader">Name:</span>
<input
type="text"
className="colorwaySelector-search"
className="colorwayTextBox"
placeholder="Enter a valid Name..."
onInput={e => setColorwaySourceName(e.currentTarget.value)}
value={colorwaySourceName}
@ -92,7 +92,7 @@ function AddOnlineStoreModal({ modalProps, onFinish }: { modalProps: ModalProps,
<span className="colorwaysModalSectionHeader" style={{ marginTop: "8px" }}>URL:</span>
<input
type="text"
className="colorwaySelector-search"
className="colorwayTextBox"
placeholder="Enter a valid URL..."
onChange={({ currentTarget: { value } }) => {
setColorwaySourceURL(value);

2
src/plugins/discordColorways/components/SettingsTabs/Store.tsx
View file

@ -47,7 +47,7 @@ export default function ({
<div style={{ display: "flex", marginBottom: "8px" }}>
<input
type="text"
className="colorwaySelector-search"
className="colorwayTextBox"
placeholder="Search for sources..."
value={searchValue}
onChange={(e) => setSearchValue(e.currentTarget.value)}

2
src/plugins/discordColorways/components/UseRepainterThemeModal.tsx
View file

@ -25,7 +25,7 @@ export default function ({ modalProps, onFinish }: { modalProps: ModalProps, onF
setColorwaySourceURL(e.currentTarget.value);
}}
value={colorwaySourceURL}
className="colorwaySelector-search"
className="colorwayTextBox"
/>
</div>
<div className="colorwaysModalFooter">

182
src/plugins/discordColorways/css.ts
View file

@ -7,7 +7,7 @@
import { PluginProps, UserStore } from "./";
import { HexToHSL } from "./utils";
import { HexToHSL, colorToHex } from "./utils";
export const colorVariables: string[] = [
"brand-100",
@ -471,6 +471,10 @@ export function gradientBase(accentColor?: string, discordSaturation = false) {
}
export function generateCss(primaryColor: string, secondaryColor: string, tertiaryColor: string, accentColor: string, tintedText: boolean = true, discordSaturation: boolean = true, mutedTextBrightness?: number, name?: string) {
primaryColor = primaryColor.replace("#", "");
secondaryColor = secondaryColor.replace("#", "");
tertiaryColor = tertiaryColor.replace("#", "");
accentColor = accentColor.replace("#", "");
return `/**
* @name ${name}
* @version ${PluginProps.creatorVersion}
@ -674,146 +678,38 @@ export function generateCss(primaryColor: string, secondaryColor: string, tertia
}
export function getAutoPresets(accentColor?: string) {
function hueRotation() {
return `:root:root {
--brand-100-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[100]) * 10) / 10, 0)};
--brand-130-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[130]) * 10) / 10, 0)}%;
--brand-160-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[160]) * 10) / 10, 0)}%;
--brand-200-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[200]) * 10) / 10, 0)}%;
--brand-230-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[230]) * 10) / 10, 0)}%;
--brand-260-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[260]) * 10) / 10, 0)}%;
--brand-300-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[300]) * 10) / 10, 0)}%;
--brand-330-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[330]) * 10) / 10, 0)}%;
--brand-345-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[345]) * 10) / 10, 0)}%;
--brand-360-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[360]) * 10) / 10, 0)}%;
--brand-400-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[400]) * 10) / 10, 0)}%;
--brand-430-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[430]) * 10) / 10, 0)}%;
--brand-460-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[460]) * 10) / 10, 0)}%;
--brand-500-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${HexToHSL("#" + accentColor)[2]}%;
--brand-530-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[530]) * 10) / 10, 100)}%;
--brand-560-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[560]) * 10) / 10, 100)}%;
--brand-600-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[600]) * 10) / 10, 100)}%;
--brand-630-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[630]) * 10) / 10, 100)}%;
--brand-660-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[660]) * 10) / 10, 100)}%;
--brand-700-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[700]) * 10) / 10, 100)}%;
--brand-730-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[730]) * 10) / 10, 100)}%;
--brand-760-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[760]) * 10) / 10, 100)}%;
--brand-800-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[800]) * 10) / 10, 100)}%;
--brand-830-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[830]) * 10) / 10, 100)}%;
--brand-860-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[860]) * 10) / 10, 100)}%;
--brand-900-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[900]) * 10) / 10, 100)}%;
--primary-800-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*12%) 7%;
--primary-730-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*10%) 13%;
--primary-700-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*10%) 13%;
--primary-660-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 15%;
--primary-645-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 16%;
--primary-630-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 18%;
--primary-600-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 21%;
--primary-560-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 24%;
--primary-530-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 24%;
--primary-500-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*11%) 24%;
}`;
}
function accentSwap() {
return `:root:root {
--brand-100-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[100]) * 10) / 10, 0)};
--brand-130-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[130]) * 10) / 10, 0)}%;
--brand-160-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[160]) * 10) / 10, 0)}%;
--brand-200-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[200]) * 10) / 10, 0)}%;
--brand-230-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[230]) * 10) / 10, 0)}%;
--brand-260-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[260]) * 10) / 10, 0)}%;
--brand-300-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[300]) * 10) / 10, 0)}%;
--brand-330-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[330]) * 10) / 10, 0)}%;
--brand-345-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[345]) * 10) / 10, 0)}%;
--brand-360-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[360]) * 10) / 10, 0)}%;
--brand-400-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[400]) * 10) / 10, 0)}%;
--brand-430-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[430]) * 10) / 10, 0)}%;
--brand-460-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.max(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[460]) * 10) / 10, 0)}%;
--brand-500-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${HexToHSL("#" + accentColor)[2]}%;
--brand-530-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[530]) * 10) / 10, 100)}%;
--brand-560-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[560]) * 10) / 10, 100)}%;
--brand-600-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[600]) * 10) / 10, 100)}%;
--brand-630-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[630]) * 10) / 10, 100)}%;
--brand-660-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[660]) * 10) / 10, 100)}%;
--brand-700-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[700]) * 10) / 10, 100)}%;
--brand-730-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[730]) * 10) / 10, 100)}%;
--brand-760-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[760]) * 10) / 10, 100)}%;
--brand-800-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[800]) * 10) / 10, 100)}%;
--brand-830-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[830]) * 10) / 10, 100)}%;
--brand-860-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[860]) * 10) / 10, 100)}%;
--brand-900-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*${HexToHSL("#" + accentColor)[1]}%) ${Math.min(Math.round((HexToHSL("#" + accentColor)[2] + BrandLightDiffs[900]) * 10) / 10, 100)}%;
}`;
}
function materialYou() {
return `:root:root {
--brand-100-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*90.5%) 56.5;
--brand-130-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*102.2%) 55.2%;
--brand-160-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*98.8%) 53.2%;
--brand-200-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*97.3%) 51.2%;
--brand-230-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*101.6%) 49.3%;
--brand-260-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*100.7%) 46.9%;
--brand-300-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*100.6%) 44.2%;
--brand-330-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*99.4%) 39.9%;
--brand-345-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*99.5%) 37.1%;
--brand-360-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*100.6%) 35.8%;
--brand-400-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*100.6%) 30.1%;
--brand-430-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*100.1%) 28.1%;
--brand-460-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*99.9%) 25.8%;
--brand-500-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*100%) 23%;
--brand-530-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*75.2%) 17.1%;
--brand-560-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*50.1%) 10.7%;
--brand-600-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*41.2%) 2.4%;
--brand-630-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*41.2%) -3.5%;
--brand-660-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*42%) -8.4%;
--brand-700-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*41.8%) -15.8%;
--brand-730-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*41.4%) -17.4%;
--brand-760-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*41.6%) -19.5%;
--brand-800-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*42.7%) -22.3%;
--brand-830-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*42.6%) -26.8%;
--brand-860-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*41.6%) -32.1%;
--brand-900-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*47.5%) -38.6%;
--primary-800-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*10%) 10.8%;
--primary-730-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*8%) 14.4%;
--primary-700-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*16%) 18%;
--primary-660-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*14%) 12.4%;
--primary-645-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*14%) 14.9%;
--primary-630-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*12%) 16%;
--primary-600-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*12%) 12%;
--primary-560-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*12%) 15.6%;
--primary-530-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*12%) 19.2%;
--primary-500-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*12%) 22.8%;
--primary-460-hsl: ${HexToHSL("#" + accentColor)[0]} calc(var(--saturation-factor, 1)*12%) 50%;
--primary-430: hsl(${HexToHSL("#" + accentColor)[0]}, calc(var(--saturation-factor, 1)*12%), 90%);
--primary-400: hsl(${HexToHSL("#" + accentColor)[0]}, calc(var(--saturation-factor, 1)*12%), 90%);
--primary-360: hsl(${HexToHSL("#" + accentColor)[0]}, calc(var(--saturation-factor, 1)*12%), 90%);
}
.emptyPage_c6b11b,
.scrollerContainer_c6b11b,
.container_f1fd9c,
.header_f1fd9c {
background-color: unset !important;
}`;
}
return {
hueRotation: {
name: "Hue Rotation",
id: "hueRotation",
preset: hueRotation
colors: {
accent: accentColor,
primary: "#" + colorToHex(`hsl(${HexToHSL("#" + accentColor)[0]} 11% 21%)`),
secondary: "#" + colorToHex(`hsl(${HexToHSL("#" + accentColor)[0]} 11% 18%)`),
tertiary: "#" + colorToHex(`hsl(${HexToHSL("#" + accentColor)[0]} 10% 13%)`)
}
},
accentSwap: {
name: "Accent Swap",
id: "accentSwap",
preset: accentSwap
colors: {
accent: accentColor,
primary: "#313338",
secondary: "#2b2d31",
tertiary: "#1e1f22"
}
},
materialYou: {
name: "Material You",
id: "materialYou",
preset: materialYou
colors: {
accent: "#" + colorToHex(`hsl(${HexToHSL("#" + accentColor)[0]} 100% 23%)`),
primary: "#" + colorToHex(`hsl(${HexToHSL("#" + accentColor)[0]} 12% 12%)`),
secondary: "#" + colorToHex(`hsl(${HexToHSL("#" + accentColor)[0]} 12% 16%)`),
tertiary: "#" + colorToHex(`hsl(${HexToHSL("#" + accentColor)[0]} 16% 18%)`)
}
}
} as { [key: string]: { name: string, id: string, preset: () => string; }; };
} as { [key: string]: { name: string, id: string, colors: { [key: string]: string; }; }; };
}
export function getPreset(
@ -995,7 +891,15 @@ export function getPreset(
},
hueRotation: {
name: "Hue Rotation",
preset: getAutoPresets(accentColor).hueRotation.preset,
preset: () => generateCss(
getAutoPresets(accentColor).hueRotation.colors.primary,
getAutoPresets(accentColor).hueRotation.colors.secondary,
getAutoPresets(accentColor).hueRotation.colors.tertiary,
getAutoPresets(accentColor).hueRotation.colors.accent,
true,
true,
undefined
),
id: "hueRotation",
colors: ["accent"],
calculated: {
@ -1006,13 +910,29 @@ export function getPreset(
},
accentSwap: {
name: "Accent Swap",
preset: getAutoPresets(accentColor).accentSwap.preset,
preset: () => generateCss(
getAutoPresets(accentColor).accentSwap.colors.primary,
getAutoPresets(accentColor).accentSwap.colors.secondary,
getAutoPresets(accentColor).accentSwap.colors.tertiary,
getAutoPresets(accentColor).accentSwap.colors.accent,
true,
true,
undefined
),
id: "accentSwap",
colors: ["accent"]
},
materialYou: {
name: "Material You",
preset: getAutoPresets(accentColor).materialYou.preset,
preset: () => generateCss(
getAutoPresets(accentColor).materialYou.colors.primary,
getAutoPresets(accentColor).materialYou.colors.secondary,
getAutoPresets(accentColor).materialYou.colors.tertiary,
getAutoPresets(accentColor).materialYou.colors.accent,
true,
true,
undefined
),
id: "materialYou",
colors: ["accent"],
calculated: {

32
src/plugins/discordColorways/defaultsLoader.tsx
View file

@ -6,10 +6,6 @@ export default async function () {
customColorways,
colorwaySourceFiles,
showColorwaysButton,
onDemandWays,
onDemandWaysTintedText,
onDemandWaysDiscordSaturation,
onDemandWaysOsAccentColor,
activeColorwayObject,
colorwaysPluginTheme,
colorwaysBoundManagers,
@ -19,10 +15,6 @@ export default async function () {
"customColorways",
"colorwaySourceFiles",
"showColorwaysButton",
"onDemandWays",
"onDemandWaysTintedText",
"onDemandWaysDiscordSaturation",
"onDemandWaysOsAccentColor",
"activeColorwayObject",
"colorwaysPluginTheme",
"colorwaysBoundManagers",
@ -46,26 +38,6 @@ export default async function () {
value: showColorwaysButton,
default: false
},
{
name: "onDemandWays",
value: onDemandWays,
default: false
},
{
name: "onDemandWaysTintedText",
value: onDemandWaysTintedText,
default: true
},
{
name: "onDemandWaysDiscordSaturation",
value: onDemandWaysDiscordSaturation,
default: false
},
{
name: "onDemandWaysOsAccentColor",
value: onDemandWaysOsAccentColor,
default: false
},
{
name: "colorwaysBoundManagers",
value: colorwaysBoundManagers,
@ -87,8 +59,8 @@ export default async function () {
if (!value) DataStore.set(name, def);
});
if (customColorways) {
if (!customColorways[0].colorways) {
if (customColorways && Array.isArray(customColorways) && customColorways.length) {
if (typeof customColorways[0] !== "object" || !Object.keys(customColorways[0]).includes("colorways")) {
DataStore.set("customColorways", [{ name: "Custom", colorways: customColorways }]);
}
} else {

58
src/plugins/discordColorways/index.tsx
View file

@ -8,7 +8,6 @@
import ColorwaysButton from "./components/ColorwaysButton";
import CreatorModal from "./components/CreatorModal";
import Selector from "./components/Selector";
import OnDemandWaysPage from "./components/SettingsTabs/OnDemandPage";
import SettingsPage from "./components/SettingsTabs/SettingsPage";
import SourceManager from "./components/SettingsTabs/SourceManager";
import Store from "./components/SettingsTabs/Store";
@ -36,11 +35,13 @@ import {
SettingsRouter
} from "@webpack/common";
import ColorwayID from "./components/ColorwayID";
import { connect } from "./wsClient";
import { closeWS, connect } from "./wsClient";
import { ColorwayCSS } from "./colorwaysAPI";
import { FluxEvents as $FluxEvents } from "@webpack/types";
import PCSMigrationModal from "./components/PCSMigrationModal";
import defaultsLoader from "./defaultsLoader";
import { generateCss, gradientBase } from "./css";
import { colorToHex } from "./utils";
export const DataStore = $DataStore;
export type ReactNode = $ReactNode;
@ -68,12 +69,10 @@ export let ColorPicker: React.FunctionComponent<ColorPickerProps> = () => {
return <Spinner className="colorways-creator-module-warning" />;
};
defaultsLoader();
export const PluginProps = {
pluginVersion: "6.2.0",
pluginVersion: "6.3.0",
clientMod: "Vencord",
UIVersion: "2.0.0",
UIVersion: "2.1.0",
creatorVersion: "1.20"
};
@ -194,12 +193,6 @@ export default definePlugin({
element: () => <SourceManager hasTheme />,
className: "dc-colorway-sources-manager"
},
{
section: "ColorwaysOnDemand",
label: "On-Demand",
element: () => <OnDemandWaysPage hasTheme />,
className: "dc-colorway-ondemand"
},
{
section: "ColorwaysStore",
label: "Store",
@ -217,24 +210,51 @@ export default definePlugin({
async start() {
addServerListElement(ServerListRenderPosition.In, this.ColorwaysButton);
connect();
enableStyle(style);
enableStyle(discordTheme);
ColorwayCSS.set((await DataStore.get("activeColorwayObject") as ColorwayObject).css || "");
if ((await DataStore.get("colorwaySourceFiles") as { name: string, url: string; }[]).map(i => i.url).includes("https://raw.githubusercontent.com/DaBluLite/ProjectColorway/master/index.json") || (!(await DataStore.get("colorwaySourceFiles") as { name: string, url: string; }[]).map(i => i.url).includes("https://raw.githubusercontent.com/DaBluLite/ProjectColorway/master/index.json") && !(await DataStore.get("colorwaySourceFiles") as { name: string, url: string; }[]).map(i => i.url).includes("https://raw.githubusercontent.com/ProjectColorway/ProjectColorway/master/index.json"))) {
DataStore.set("colorwaySourceFiles", [{ name: "Project Colorway", url: defaultColorwaySource }, ...(await DataStore.get("colorwaySourceFiles") as { name: string, url: string; }[]).filter(i => i.name !== "Project Colorway")]);
openModal(props => <PCSMigrationModal modalProps={props} />);
}
defaultsLoader();
const [
activeColorwayObject,
colorwaysManagerAutoconnectPeriod,
colorwaysManagerDoAutoconnect,
colorwaySourceFiles
] = await DataStore.getMany([
"activeColorwayObject",
"colorwaysManagerAutoconnectPeriod",
"colorwaysManagerDoAutoconnect",
"colorwaySourceFiles"
]);
connect(colorwaysManagerDoAutoconnect as boolean, colorwaysManagerAutoconnectPeriod as number);
const active: ColorwayObject = activeColorwayObject;
active.colors.primary ??= "#313338";
active.colors.secondary ??= "#2b2d31";
active.colors.tertiary ??= "#1e1f22";
active.colors.accent ??= "#ffffff";
ColorwayCSS.set(!Object.keys(active).includes("linearGradient") ? generateCss(
colorToHex(active.colors.primary),
colorToHex(active.colors.secondary),
colorToHex(active.colors.tertiary),
colorToHex(active.colors.accent)
) : gradientBase(colorToHex(active.colors.accent), true) + `:root:root {--custom-theme-background: linear-gradient(${active.linearGradient})}`);
addAccessory("colorways-btn", props => <ColorwayID props={props} />);
if ((colorwaySourceFiles as { name: string, url: string; }[]).map(i => i.url).includes("https://raw.githubusercontent.com/DaBluLite/ProjectColorway/master/index.json") || (!(colorwaySourceFiles as { name: string, url: string; }[]).map(i => i.url).includes("https://raw.githubusercontent.com/DaBluLite/ProjectColorway/master/index.json") && !(colorwaySourceFiles as { name: string, url: string; }[]).map(i => i.url).includes("https://raw.githubusercontent.com/ProjectColorway/ProjectColorway/master/index.json"))) {
DataStore.set("colorwaySourceFiles", [{ name: "Project Colorway", url: defaultColorwaySource }, ...(colorwaySourceFiles as { name: string, url: string; }[]).filter(i => i.name !== "Project Colorway")]);
openModal(props => <PCSMigrationModal modalProps={props} />);
}
},
stop() {
removeServerListElement(ServerListRenderPosition.In, this.ColorwaysButton);
disableStyle(style);
disableStyle(discordTheme);
ColorwayCSS.remove();
closeWS();
removeAccessory("colorways-btn");
},
});

8
src/plugins/discordColorways/style.css
View file

@ -832,7 +832,7 @@
box-shadow: none !important;
}
.colorwaySelector-search {
.colorwayTextBox {
width: 100%;
border-radius: 6px;
background-color: #101010;
@ -844,11 +844,11 @@
box-sizing: border-box;
}
.colorwaySelector-search:hover {
.colorwayTextBox:hover {
background-color: #1a1a1a;
}
.colorwaySelector-search:focus {
.colorwayTextBox:focus {
background-color: #1a1a1a;
border-color: #a6a6a6;
}
@ -1334,7 +1334,7 @@
border-radius: 8px;
}
.colorwaySelector-searchPopout {
.colorwayTextBoxPopout {
display: none !important;
}

58
src/plugins/discordColorways/theme.discord.css
View file

@ -77,7 +77,7 @@
padding: 12px;
}
[data-theme="discord"] .colorwaySelector-search {
[data-theme="discord"] .colorwayTextBox {
border-radius: 3px;
color: var(--text-normal);
background-color: var(--input-background) !important;
@ -332,3 +332,59 @@
[data-theme="discord"] .colorwaysManagerConnectionValue > b {
color: var(--text-normal);
}
.visual-refresh .colorwaySelectorModal[data-theme="discord"] {
border-radius: 12px;
background-color: var(--bg-base-primary);
}
.visual-refresh .colorwaySelectorModal[data-theme="discord"] > .colorwaySelectorSidebar {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
background-color: var(--bg-base-tertiary);
margin-right: 0;
border: 1px solid var(--border-subtle);
}
.visual-refresh .colorwaySelectorModal[data-theme="discord"] .colorwaySelectorSidebar-tab {
border-radius: 8px;
width: 44px;
height: 44px;
border: 1px solid transparent;
transition:
background-color 0.1s ease-in-out,
border-color 0.1s ease-in-out;
}
.visual-refresh .colorwaySelectorModal[data-theme="discord"] .colorwaySelectorSidebar-tab.active {
background: var(--bg-overlay-1, var(--bg-surface-raised));
border-color: var(--border-faint);
}
.visual-refresh [data-theme="discord"] .colorwaysPillButton,
.visual-refresh [data-theme="discord"] .discordColorway {
background: var(--bg-mod-faint);
border-radius: 8px;
transition:
background-color 0.1s ease-in-out,
border-color 0.1s ease-in-out;
}
.visual-refresh [data-theme="discord"] .discordColorway {
border: 1px solid transparent;
}
.visual-refresh [data-theme="discord"] .colorwaysPillButton:hover,
.visual-refresh [data-theme="discord"] .discordColorway:hover {
background: var(--bg-mod-subtle);
}
.visual-refresh [data-theme="discord"] .discordColorway[aria-checked="true"] {
border-color: var(--border-faint);
background: var(--bg-mod-strong);
}
.visual-refresh [data-theme="discord"] .colorwayTextBox {
background: var(--bg-overlay-3, var(--bg-mod-strong)) !important;
border-radius: 8px;
}

10
src/plugins/discordColorways/types.ts
View file

@ -7,7 +7,7 @@
export interface Colorway {
[key: string]: any,
name: string,
"dc-import": string,
"dc-import"?: string,
accent: string,
primary: string,
secondary: string,
@ -21,8 +21,7 @@ export interface Colorway {
source?: string,
linearGradient?: string,
preset?: string,
creatorVersion: string,
colorObj?: { accent?: string, primary?: string, secondary?: string, tertiary?: string; };
creatorVersion: string;
}
export interface ColorPickerProps {
@ -38,12 +37,13 @@ export interface ColorwayObject {
css?: string | null,
sourceType: "online" | "offline" | "temporary" | null,
source: string | null | undefined,
colors?: {
colors: {
accent?: string | undefined,
primary?: string | undefined,
secondary?: string | undefined,
tertiary?: string | undefined;
} | undefined;
},
linearGradient?: string;
}
export interface SourceObject {

207
src/plugins/discordColorways/wsClient.tsx
View file

@ -1,9 +1,8 @@
import { DataStore, openModal } from ".";
import { DataStore, FluxDispatcher, FluxEvents, openModal } from ".";
import { ColorwayCSS } from "./colorwaysAPI";
import MainModal, { updateBoundKeyMain, updateWSMain } from "./components/MainModal";
import { updateActiveColorway, updateManagerRole, updateWS as updateWSSelector } from "./components/Selector";
import MainModal from "./components/MainModal";
import { nullColorwayObj } from "./constants";
import { generateCss } from "./css";
import { generateCss, gradientBase } from "./css";
import { ColorwayObject } from "./types";
import { colorToHex, getWsClientIdentity } from "./utils";
@ -11,46 +10,71 @@ export let wsOpen = false;
export let boundKey: { [managerKey: string]: string; } | null = null;
export let hasManagerRole: boolean = false;
export let sendColorway: (obj: ColorwayObject) => void = () => { };
export let requestManagerRole: () => void = () => { };
export let updateRemoteSources: () => void = () => { };
export let closeWS: () => void = () => { };
export let restartWS: () => void = () => connect();
export let updateShouldAutoconnect: (shouldAutoconnect: boolean) => void = () => connect();
let socket: WebSocket | undefined;
function updateWS(status: boolean) {
updateWSSelector(status);
updateWSMain(status);
export function sendColorway(obj: ColorwayObject) {
socket?.send(JSON.stringify({
type: "complication:manager-role:send-colorway",
active: obj,
boundKey
}));
};
export function requestManagerRole() {
socket?.send(JSON.stringify({
type: "complication:manager-role:request",
boundKey
}));
};
export function updateRemoteSources() {
DataStore.getMany([
"colorwaySourceFiles",
"customColorways"
]).then(([
colorwaySourceFiles,
customColorways
]) => {
socket?.send(JSON.stringify({
type: "complication:remote-sources:init",
boundKey,
online: colorwaySourceFiles,
offline: customColorways
}));
});
}
function updateBoundKey(bound: { [managerKey: string]: string; }) {
updateBoundKeyMain(bound);
export function closeWS() {
socket?.close(1);
}
export function connect() {
var ws: WebSocket | null = new WebSocket('ws://localhost:6124');
export function restartWS() {
socket?.close(1);
connect();
}
updateShouldAutoconnect = (shouldAutoconnect) => {
if (shouldAutoconnect && ws?.readyState == ws?.CLOSED) connect();
};
export function isWSOpen() {
return Boolean(socket && (socket.readyState == socket.OPEN));
}
export function connect(doAutoconnect = true, autoconnectTimeout = 3000) {
if (socket && socket.readyState == socket.OPEN) return;
const ws: WebSocket = socket = new WebSocket('ws://localhost:6124');
let hasErrored = false;
ws.onopen = function () {
wsOpen = true;
hasManagerRole = false;
updateWS(true);
FluxDispatcher.dispatch({
type: "COLORWAYS_UPDATE_WS_CONNECTED" as FluxEvents,
isConnected: true
});
};
restartWS = () => {
ws?.close();
connect();
};
closeWS = () => ws?.close();
ws.onmessage = function (e) {
ws.onmessage = function ({ data: datta }) {
const data: {
type: "change-colorway" | "remove-colorway" | "manager-connection-established" | "complication:remote-sources:received" | "complication:remote-sources:update-request" | "complication:manager-role:granted" | "complication:manager-role:revoked",
[key: string]: any;
} = JSON.parse(e.data);
} = JSON.parse(datta);
function typeSwitch(type) {
switch (type) {
@ -58,23 +82,36 @@ export function connect() {
if (data.active.id == null) {
DataStore.set("activeColorwayObject", nullColorwayObj);
ColorwayCSS.remove();
updateActiveColorway(nullColorwayObj);
FluxDispatcher.dispatch({
type: "COLORWAYS_UPDATE_ACTIVE_COLORWAY" as FluxEvents,
active: nullColorwayObj
});
} else {
const demandedColorway = generateCss(
colorToHex("#" + data.active.colors.primary || "#313338").replace("#", ""),
colorToHex("#" + data.active.colors.secondary || "#2b2d31").replace("#", ""),
colorToHex("#" + data.active.colors.tertiary || "#1e1f22").replace("#", ""),
colorToHex("#" + data.active.colors.accent || "#5865f2").replace("#", "")
);
data.active.colors.primary ??= "313338";
data.active.colors.secondary ??= "2b2d31";
data.active.colors.tertiary ??= "1e1f22";
data.active.colors.accent ??= "ffffff";
const demandedColorway = !Object.keys(data.active).includes("linearGradient") ? generateCss(
colorToHex("#" + data.active.colors.primary.replace("#", "")),
colorToHex("#" + data.active.colors.secondary.replace("#", "")),
colorToHex("#" + data.active.colors.tertiary.replace("#", "")),
colorToHex("#" + data.active.colors.accent.replace("#", ""))
) : gradientBase(colorToHex("#" + data.active.colors.accent.replace("#", "")), true) + `:root:root {--custom-theme-background: linear-gradient(${data.active.linearGradient})}`;
ColorwayCSS.set(demandedColorway);
DataStore.set("activeColorwayObject", { ...data.active, css: demandedColorway });
updateActiveColorway({ ...data.active, css: demandedColorway });
FluxDispatcher.dispatch({
type: "COLORWAYS_UPDATE_ACTIVE_COLORWAY" as FluxEvents,
active: { ...data.active, css: demandedColorway }
});
}
return;
case "remove-colorway":
DataStore.set("activeColorwayObject", nullColorwayObj);
ColorwayCSS.remove();
updateActiveColorway(nullColorwayObj);
FluxDispatcher.dispatch({
type: "COLORWAYS_UPDATE_ACTIVE_COLORWAY" as FluxEvents,
active: nullColorwayObj
});
return;
case "manager-connection-established":
DataStore.get("colorwaysBoundManagers").then((boundManagers: { [managerKey: string]: string; }[]) => {
@ -89,10 +126,13 @@ export function connect() {
DataStore.set("colorwaysBoundManagers", [...boundManagers, id]);
boundKey = id;
}
updateBoundKey(typeof boundKey == "string" ? JSON.parse(boundKey) : boundKey);
FluxDispatcher.dispatch({
type: "COLORWAYS_UPDATE_BOUND_KEY" as FluxEvents,
boundKey: boundKey
});
ws?.send(JSON.stringify({
type: "client-sync-established",
boundKey,
boundKey: boundKey,
complications: [
"remote-sources",
"manager-role",
@ -113,39 +153,22 @@ export function connect() {
offline: customColorways
}));
});
sendColorway = (obj) => ws?.send(JSON.stringify({
type: "complication:manager-role:send-colorway",
active: obj,
boundKey
}));
requestManagerRole = () => ws?.send(JSON.stringify({
type: "complication:manager-role:request",
boundKey
}));
updateRemoteSources = () => DataStore.getMany([
"colorwaySourceFiles",
"customColorways"
]).then(([
colorwaySourceFiles,
customColorways
]) => {
ws?.send(JSON.stringify({
type: "complication:remote-sources:init",
boundKey,
online: colorwaySourceFiles,
offline: customColorways
}));
});
}
});
return;
case "complication:manager-role:granted":
hasManagerRole = true;
updateManagerRole(true);
FluxDispatcher.dispatch({
type: "COLORWAYS_UPDATE_WS_MANAGER_ROLE" as FluxEvents,
isManager: true
});
return;
case "complication:manager-role:revoked":
hasManagerRole = false;
updateManagerRole(false);
FluxDispatcher.dispatch({
type: "COLORWAYS_UPDATE_WS_MANAGER_ROLE" as FluxEvents,
isManager: false
});
return;
case "complication:ui-summon:summon":
openModal((props: any) => <MainModal modalProps={props} />);
@ -160,7 +183,7 @@ export function connect() {
]) => {
ws?.send(JSON.stringify({
type: "complication:remote-sources:init",
boundKey,
boundKey: boundKey,
online: colorwaySourceFiles,
offline: customColorways
}));
@ -175,51 +198,17 @@ export function connect() {
ws.onclose = function (e) {
boundKey = null;
hasManagerRole = false;
sendColorway = () => { };
requestManagerRole = () => { };
updateRemoteSources = () => { };
restartWS = () => connect();
closeWS = () => { };
try {
(ws as WebSocket).close();
} catch (e) {
return;
}
ws = null;
wsOpen = false;
updateWS(false);
DataStore.getMany([
"colorwaysManagerAutoconnectPeriod",
"colorwaysManagerDoAutoconnect"
]).then(([
colorwaysManagerAutoconnectPeriod,
colorwaysManagerDoAutoconnect
]) => {
if (colorwaysManagerDoAutoconnect || true) setTimeout(() => connect(), colorwaysManagerAutoconnectPeriod || 3000);
FluxDispatcher.dispatch({
type: "COLORWAYS_UPDATE_WS_CONNECTED" as FluxEvents,
isConnected: false
});
if (doAutoconnect && (e.code !== 1 || hasErrored)) {
setTimeout(() => connect(doAutoconnect, autoconnectTimeout), autoconnectTimeout);
}
};
ws.onerror = function (e) {
e.preventDefault();
boundKey = null;
sendColorway = () => { };
requestManagerRole = () => { };
updateRemoteSources = () => { };
restartWS = () => connect();
closeWS = () => { };
hasManagerRole = false;
(ws as WebSocket).close();
ws = null;
wsOpen = false;
updateWS(false);
DataStore.getMany([
"colorwaysManagerAutoconnectPeriod",
"colorwaysManagerDoAutoconnect"
]).then(([
colorwaysManagerAutoconnectPeriod,
colorwaysManagerDoAutoconnect
]) => {
if (colorwaysManagerDoAutoconnect || true) setTimeout(() => connect(), colorwaysManagerAutoconnectPeriod || 3000);
});
};
ws.onerror = () => hasErrored = true;
}