randomize per section

satelllte · Nov 20, 2023 · df9825e · df9825e
1 parent 830a91a
commit df9825e
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 2 deletions.
diff --git 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 (
     <section>
       <div className='flex items-center justify-between'>
         <SectionTitle>Settings</SectionTitle>
-        <Button onClick={randomize}>Randomize</Button>
+        <Button onClick={randomize}>Randomize all</Button>
       </div>
       <div className='flex flex-col gap-4'>
         <Group title='Basics'>
@@ -154,6 +163,7 @@ export function SettingsSection() {
           enabled={rectEnabled}
           setEnabled={setRectEnabled}
         >
+          <RandomizeButton onClick={randomizeRect} />
           <SlidersGroup>
             <SliderForConstant
               dual
@@ -183,6 +193,7 @@ export function SettingsSection() {
           enabled={gridEnabled}
           setEnabled={setGridEnabled}
         >
+          <RandomizeButton onClick={randomizeGrid} />
           <SlidersGroup>
             <SliderForConstant
               dual
@@ -225,6 +236,7 @@ export function SettingsSection() {
           enabled={colsEnabled}
           setEnabled={setColsEnabled}
         >
+          <RandomizeButton onClick={randomizeCols} />
           <SlidersGroup>
             <SliderForConstant
               dual
@@ -267,6 +279,7 @@ export function SettingsSection() {
           enabled={rowsEnabled}
           setEnabled={setRowsEnabled}
         >
+          <RandomizeButton onClick={randomizeRows} />
           <SlidersGroup>
             <SliderForConstant
               dual
@@ -309,6 +322,7 @@ export function SettingsSection() {
           enabled={linesEnabled}
           setEnabled={setLinesEnabled}
         >
+          <RandomizeButton onClick={randomizeLines} />
           <SlidersGroup>
             <SliderForConstant
               dual
@@ -339,6 +353,7 @@ export function SettingsSection() {
           enabled={spritesEnabled}
           setEnabled={setSpritesEnabled}
         >
+          <RandomizeButton onClick={randomizeSprites} />
           <CheckboxesGroup title='Packs' extra='Powered by JSplacement'>
             <Checkboxes<SpritesPack>
               items={[
@@ -360,6 +375,7 @@ export function SettingsSection() {
           </CheckboxesGroup>
         </Group>
         <Group title='Other'>
+          <RandomizeButton onClick={randomizeCompositionModes} />
           <CheckboxesGroup title='Composition modes'>
             <Checkboxes<CompositionMode>
               items={[
@@ -389,3 +405,13 @@ export function SettingsSection() {
     </section>
   );
 }
+
+function RandomizeButton({onClick}: {readonly onClick: () => void}) {
+  return (
+    <div>
+      <Button size='sm' onClick={onClick}>
+        Randomize
+      </Button>
+    </div>
+  );
+}
diff --git 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<Values & Setters & ComputedValues & Actions>(
@@ -325,6 +332,58 @@ export const useStore = create<Values & Setters & ComputedValues & Actions>(
         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
@@ -9,17 +9,19 @@ type NativeButtonPropsToExtend = Omit<
 type ButtonProps = NativeButtonPropsToExtend & {
   readonly disabled?: boolean;
   readonly fullWidth?: boolean;
+  readonly size?: 'md' | 'sm';
 };
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({disabled, fullWidth, ...rest}, ref) => (
+  ({disabled, fullWidth, size, ...rest}, ref) => (
     <button
       ref={ref}
       type='button'
       disabled={disabled}
       className={clsx(
         disabled && 'opacity-80',
         fullWidth && 'w-full',
+        size === 'sm' && 'text-xs',
         'inline-flex cursor-default select-none items-center justify-center border border-white px-2 py-1 text-sm text-white outline-none hover:bg-white/20 focus-visible:shadow-none focus-visible:ring-2 focus-visible:ring-sky focus-visible:ring-offset-1 focus-visible:ring-offset-sky active:bg-white/30',
       )}
       {...rest}
@@ -32,4 +34,5 @@ Button.displayName = 'Button';
 Button.defaultProps = {
   disabled: false,
   fullWidth: false,
+  size: 'md',
 };