diff --git a/src/components/pages/Generator/SettingsSection/SettingsSection.tsx b/src/components/pages/Generator/SettingsSection/SettingsSection.tsx index a18fc83..2769a71 100644 --- a/src/components/pages/Generator/SettingsSection/SettingsSection.tsx +++ b/src/components/pages/Generator/SettingsSection/SettingsSection.tsx @@ -124,12 +124,21 @@ export function SettingsSection() { ); const randomize = useStore((state) => state.randomize); + const randomizeRect = useStore((state) => state.randomizeRect); + const randomizeGrid = useStore((state) => state.randomizeGrid); + const randomizeCols = useStore((state) => state.randomizeCols); + const randomizeRows = useStore((state) => state.randomizeRows); + const randomizeLines = useStore((state) => state.randomizeLines); + const randomizeSprites = useStore((state) => state.randomizeSprites); + const randomizeCompositionModes = useStore( + (state) => state.randomizeCompositionModes, + ); return (
Settings - +
@@ -154,6 +163,7 @@ export function SettingsSection() { enabled={rectEnabled} setEnabled={setRectEnabled} > + + + + + + items={[ @@ -360,6 +375,7 @@ export function SettingsSection() { + items={[ @@ -389,3 +405,13 @@ export function SettingsSection() {
); } + +function RandomizeButton({onClick}: {readonly onClick: () => void}) { + return ( +
+ +
+ ); +} diff --git a/src/components/pages/Generator/store.ts b/src/components/pages/Generator/store.ts index 7932114..48a21ae 100644 --- a/src/components/pages/Generator/store.ts +++ b/src/components/pages/Generator/store.ts @@ -120,6 +120,13 @@ type ComputedValues = { type Actions = { randomize: () => void; + randomizeRect: () => void; + randomizeGrid: () => void; + randomizeCols: () => void; + randomizeRows: () => void; + randomizeLines: () => void; + randomizeSprites: () => void; + randomizeCompositionModes: () => void; }; export const useStore = create( @@ -325,6 +332,58 @@ export const useStore = create( compositionModes: randCompositionModes(), })); }, + randomizeRect() { + set(() => ({ + rectBrightness: randDualSetting(rectBrightness), + rectAlpha: randDualSetting(rectAlpha), + rectScale: randSetting(rectScale), + })); + }, + randomizeGrid() { + set(() => ({ + gridBrightness: randDualSetting(gridBrightness), + gridAlpha: randDualSetting(gridAlpha), + gridScale: randSetting(gridScale), + gridAmount: randDualSetting(gridAmount), + gridGap: randSetting(gridGap), + })); + }, + randomizeCols() { + set(() => ({ + colsBrightness: randDualSetting(colsBrightness), + colsAlpha: randDualSetting(colsAlpha), + colsScale: randSetting(colsScale), + colsAmount: randDualSetting(colsAmount), + colsGap: randSetting(colsGap), + })); + }, + randomizeRows() { + set(() => ({ + rowsBrightness: randDualSetting(rowsBrightness), + rowsAlpha: randDualSetting(rowsAlpha), + rowsScale: randSetting(rowsScale), + rowsAmount: randDualSetting(rowsAmount), + rowsGap: randSetting(rowsGap), + })); + }, + randomizeLines() { + set(() => ({ + linesBrightness: randDualSetting(linesBrightness), + linesAlpha: randDualSetting(linesAlpha), + linesWidth: randDualSetting(linesWidth), + })); + }, + randomizeSprites() { + set(() => ({ + spritesPacks: randSpritesPacks(), + spritesRotationEnabled: randomBoolean(), + })); + }, + randomizeCompositionModes() { + set(() => ({ + compositionModes: randCompositionModes(), + })); + }, }), ); diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx index d460d19..8151b77 100644 --- a/src/components/ui/Button/Button.tsx +++ b/src/components/ui/Button/Button.tsx @@ -9,10 +9,11 @@ type NativeButtonPropsToExtend = Omit< type ButtonProps = NativeButtonPropsToExtend & { readonly disabled?: boolean; readonly fullWidth?: boolean; + readonly size?: 'md' | 'sm'; }; export const Button = forwardRef( - ({disabled, fullWidth, ...rest}, ref) => ( + ({disabled, fullWidth, size, ...rest}, ref) => (