diff --git a/lib/pages/debug-page.tsx b/lib/pages/debug-page.tsx index 5800edd..d182f08 100644 --- a/lib/pages/debug-page.tsx +++ b/lib/pages/debug-page.tsx @@ -60,17 +60,18 @@ const EYE_CREATURE = ( ); const RandomColorSampling: React.FC<{}> = () => { + const [paletteConfig, setPaletteConfig] = useState({}) const [paletteAlg, setPaletteAlg] = useState( DEFAULT_RANDOM_PALETTE_ALGORITHM ); const [seed, setSeed] = useState(Date.now()); const NUM_COLORS = 100; const rng = new Random(seed); - const palette = createRandomColorPalette(NUM_COLORS, rng, paletteAlg); + const palette = createRandomColorPalette(NUM_COLORS, rng, paletteAlg, paletteConfig); return ( <> - +
{range(NUM_COLORS).map((i) => ( diff --git a/lib/palette-algorithm-widget.tsx b/lib/palette-algorithm-widget.tsx index 523f8ae..53689fe 100644 --- a/lib/palette-algorithm-widget.tsx +++ b/lib/palette-algorithm-widget.tsx @@ -1,22 +1,55 @@ -import React from "react"; +import React, {useEffect, useState} from "react"; import { RandomPaletteAlgorithm, - RANDOM_PALETTE_ALGORITHMS, + RANDOM_PALETTE_ALGORITHMS, PaletteAlgorithmConfig, } from "./random-colors"; export type PaletteAlgorithmWidgetProps = { value: RandomPaletteAlgorithm; onChange: (value: RandomPaletteAlgorithm) => void; + onPaletteConfigChange: (value: PaletteAlgorithmConfig) => void; }; export const PaletteAlgorithmWidget: React.FC = ({ value, onChange, + onPaletteConfigChange = () => {} }) => { const id = "algorithm"; + const [paletteConfig, setPaletteConfig] = useState({ + hue: 120, + hueInterval: 15, + saturation: 50, + valueMin: 20, + valueMax: 80, + }); + useEffect(() => { + onPaletteConfigChange(paletteConfig); + }, [paletteConfig]) return (
+ {value === "threevals" && ( +
+ + setPaletteConfig({...paletteConfig, hue: Number(e.target.value) }) } /> + + setPaletteConfig({...paletteConfig, hueInterval: Number(e.target.value) }) } + /> + + setPaletteConfig({...paletteConfig, valueMin: Number(e.target.value) }) } + /> + + setPaletteConfig({...paletteConfig, valueMax: Number(e.target.value) }) } + /> + + setPaletteConfig({...paletteConfig, saturation: Number(e.target.value) }) } + />
)}