-
- Options
-
-
-
- About
-
Colorful v1.3.1
-+ {Session.providerLoaded ? ( + Session.configLoaded ? ( + <> +
+
-
-
-
-
-
-
-
+
+
+ Options
+
+
+
+
+ About
+
+
Colorful v2.0.0
++ + Matt McAdams + {" "} + ·{" "} + + Open Source + {" "} + ·{" "} + + Donate + +
+
- ) {
- let value = Number(e.target.value);
- Session.updateBrightness(props.type, value);
- }
-
- return (
- ) {
- let value = Number(e.target.value);
- Session.updateCount(props.type, value);
- }
-
- return (
- ) => void;
}) => {
- const Session = useSessionContext();
-
- let value = '';
- if (props.type === 'light') {
- if (props.property === 'hue') {
- value = Session.lightRotationEasing;
- } else if (props.property === 'saturation') {
- value = Session.lightSaturationEasing;
- } else {
- value = Session.lightnessEasing;
- }
- } else {
- if (props.property === 'hue') {
- value = Session.darkRotationEasing;
- } else if (props.property === 'saturation') {
- value = Session.darkSaturationEasing;
- } else {
- value = Session.darknessEasing;
- }
- }
-
- function handleChange(e: ChangeEvent) {
- let value = e.target.value as easingOptionsType;
- Session.updateEasing(props.type, props.property, value);
- }
const easingKeys = [];
for (let option in easingOptions) {
- easingKeys.push(
-
- );
+ easingKeys.push();
}
return (
+
-
-
-
- Luminance · How bright is it?
-
- ({
- x: allColors.indexOf(s),
- y: Color(s).luminosity(),
- hex: s,
- }))}
- />
-
-
-
- Chroma · How colorful is it?
-
- ({
- x: allColors.indexOf(s),
- y: Color(s).lch().object().c,
- hex: s,
- }))}
+
-
+
+ ) : (
+ <>
+
+
-
+
+ Session.updateConfig(
+ "dark",
+ "count",
+ Number(e.target.value)
+ )
+ }
/>
-
-
-
- Hue · What color is it?
-
- ({
- x: allColors.indexOf(s),
- y: Color(s).hsl().object().h,
- hex: s,
- }))}
+
+
+
+ Session.updateConfig(
+ "dark",
+ "brightness",
+ Number(e.target.value)
+ )
+ }
+ />
+
+ Session.updateConfigEasing(
+ "dark",
+ "brightness",
+ e.target.value as easingOptions
+ )
+ }
+ />
+
+
+
+ Session.updateConfig(
+ "dark",
+ "angle",
+ Number(e.target.value)
+ )
+ }
+ />
+
+ Session.updateConfigEasing(
+ "dark",
+ "angle",
+ e.target.value as easingOptions
+ )
+ }
+ />
+
+
+
+ Session.updateConfig(
+ "dark",
+ "saturation",
+ Number(e.target.value)
+ )
+ }
+ />
+
+ Session.updateConfigEasing(
+ "dark",
+ "saturation",
+ e.target.value as easingOptions
+ )
+ }
+ />
+
+
+
+ Session.updateConfig(
+ "light",
+ "count",
+ Number(e.target.value)
+ )
+ }
/>
-
-
-
-
+
+
+ Session.updateConfig(
+ "light",
+ "brightness",
+ Number(e.target.value)
+ )
+ }
+ />
+
+ Session.updateConfigEasing(
+ "light",
+ "brightness",
+ e.target.value as easingOptions
+ )
+ }
+ />
+
+
+
+ Session.updateConfig(
+ "light",
+ "angle",
+ Number(e.target.value)
+ )
+ }
+ />
+
+ Session.updateConfigEasing(
+ "light",
+ "angle",
+ e.target.value as easingOptions
+ )
+ }
+ />
+
+
+
+ Session.updateConfig(
+ "light",
+ "saturation",
+ Number(e.target.value)
+ )
+ }
+ />
+
+ Session.updateConfigEasing(
+ "light",
+ "saturation",
+ e.target.value as easingOptions
+ )
+ }
+ />
+
+
+
+
+ Luminance · How bright is it?
+
+ ({
+ x: allColors.indexOf(s),
+ y: Color(s).luminosity(),
+ hex: s,
+ }))}
+ />
+
+
+
+ Chroma · How colorful is it?
+
+ ({
+ x: allColors.indexOf(s),
+ y: Color(s).lch().object().c,
+ hex: s,
+ }))}
+ />
+
+
+
+ Hue · What color is it?
+
+ ({
+ x: allColors.indexOf(s),
+ y: Color(s).hsl().object().h,
+ hex: s,
+ }))}
+ />
+
+
+
+
Loading Configuration
+ + ) ) : ( - <> -Loading Configuration
- +The context provider has failed to load
)} ); diff --git a/src/components/ColorRow.tsx b/src/components/ColorRow.tsx index c2fee62..e51ea29 100644 --- a/src/components/ColorRow.tsx +++ b/src/components/ColorRow.tsx @@ -1,14 +1,45 @@ import React from "react"; import Swatch from "./Swatch"; +import config from "../types/configObj"; +import { getColorsList } from "../functions/getColors"; +import * as hex from "../functions/hex"; + +export const ColorRow = (props: { config: config }) => { + const mainColor = hex.isValid(hex.fromNumber(props.config.keyColor)) ? props.config.keyColor : "#000000"; + + const darkColors = getColorsList( + props.config.dark.count, + "black", + props.config.dark.angle, + props.config.dark.angleEase, + props.config.dark.saturation, + props.config.dark.saturationEase, + props.config.dark.brightness, + props.config.dark.brightnessEase, + mainColor, + "#FFFFFF" + ).reverse(); + + const lightColors = getColorsList( + props.config.light.count, + "white", + props.config.light.angle, + props.config.light.angleEase, + props.config.light.saturation, + props.config.light.saturationEase, + props.config.light.brightness, + props.config.light.brightnessEase, + mainColor, + "#FFFFFF" + ); -export const ColorRow = (props: { darkColors: string[], mainColor: string, lightColors: string[] }) => { return (
- {props.darkColors.map((color: string, index: number) => (
+ {darkColors.map((color: string, index: number) => (
diff --git a/src/components/LibraryRow.tsx b/src/components/LibraryRow.tsx
new file mode 100644
index 0000000..e7bfd9b
--- /dev/null
+++ b/src/components/LibraryRow.tsx
@@ -0,0 +1,47 @@
+"use client";
+import ColorRow from "./ColorRow";
+import config from "../types/configObj";
+import { useSessionContext } from "../data/session";
+import { useRouter } from "next/navigation";
+import LibraryConfigInput from "./inputs/LibraryConfiguration";
+
+const LibraryRow = (props: { config: config, exists: boolean }) => {
+ const Session = useSessionContext();
+ const router = useRouter();
+
+ function handleEdit() {
+ Session.loadConfig(JSON.stringify(props.config));
+ router.push("/");
+ }
+
+ return (
+
+
+ );
+};
+
+export default LibraryRow;
diff --git a/src/components/generics/input.tsx b/src/components/generics/input.tsx
deleted file mode 100644
index b01b51c..0000000
--- a/src/components/generics/input.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client";
-
-const NumberInput = (props: {name: string, label: string, value: number, changeHandler: () => void}) => {
-
- return (
-
+ {props.exists ? (
+
+ ) : (
+
+ )}
+
+
+
-
-
-
- );
-};
-
-export default NumberInput;
diff --git a/src/components/inputs/BrightnessInput.tsx b/src/components/inputs/BrightnessInput.tsx
deleted file mode 100644
index b1dca6a..0000000
--- a/src/components/inputs/BrightnessInput.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-"use client";
-
-import { ChangeEvent } from "react";
-import { useSessionContext } from "../../data/session";
-import EasingInput from "./EasingInput";
-
-const DarknessInput = (props: {type: 'light' | 'dark'}) => {
- const Session = useSessionContext();
-
- function handleChange(e: ChangeEvent
-
-
- );
-};
-
-export default DarknessInput;
diff --git a/src/components/inputs/Configuration.tsx b/src/components/inputs/Configuration.tsx
index b0fcf38..02832f8 100644
--- a/src/components/inputs/Configuration.tsx
+++ b/src/components/inputs/Configuration.tsx
@@ -15,7 +15,7 @@ const ConfigInput = () => {
}
function applyConfig() {
- Session.loadConfiguration(configString);
+ Session.loadConfig(configString);
}
function loadConfig() {
diff --git a/src/components/inputs/CountInput.tsx b/src/components/inputs/CountInput.tsx
deleted file mode 100644
index d034b4c..0000000
--- a/src/components/inputs/CountInput.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-
-import { ChangeEvent } from "react";
-import { useSessionContext } from "../../data/session";
-
-const DarkCountInput = (props: {type: 'light' | 'dark'}) => {
- const Session = useSessionContext();
-
- function handleChange(e: ChangeEvent
-
-
- %
-
-
-
-
-
-
-
- );
-};
-
-export default DarkCountInput;
diff --git a/src/components/inputs/EasingInput.tsx b/src/components/inputs/EasingInput.tsx
index 4f0e6cf..821f9f4 100644
--- a/src/components/inputs/EasingInput.tsx
+++ b/src/components/inputs/EasingInput.tsx
@@ -1,64 +1,38 @@
"use client";
import { ChangeEvent } from "react";
-import { useSessionContext } from "../../data/session";
-import { easingOptions, easingOptionsType } from "../../functions/ease";
+import { easingOptions } from "../../types/easing";
const EasingInput = (props: {
- type: "light" | "dark",
- property: 'hue' | 'saturation' | 'brightness',
+ name: string;
+ label: string;
+ value: easingOptions;
+ changeHandler: (e: ChangeEvent