Settings: Randomize per section (v0.3.0) (#34)

satelllte · Nov 20, 2023 · 995ed63 · 995ed63
1 parent 3252e17
commit 995ed63
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "displacementx",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

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',
 };
diff --git a/src/components/ui/Switch/Switch.tsx b/src/components/ui/Switch/Switch.tsx
@@ -1,55 +1,18 @@
 import * as RadixSwitch from '@radix-ui/react-switch';
-import clsx from 'clsx';
-import {useId} from 'react';
 
 type SwitchProps = {
   readonly isOn: boolean;
   readonly setIsOn: (checked: boolean) => void;
-  readonly labels?: [string, string];
 };
 
-export function Switch({labels, isOn, setIsOn}: SwitchProps) {
-  const id = useId();
+export function Switch({isOn, setIsOn}: SwitchProps) {
   return (
-    <div className='flex items-center gap-2'>
-      {labels && (
-        <Label htmlFor={id} isActive={!isOn}>
-          {labels[0]}
-        </Label>
-      )}
-      <RadixSwitch.Root
-        id={id}
-        checked={isOn}
-        className='relative h-4 w-8 cursor-default bg-pink/50 shadow-[0_2px_10px] shadow-black outline-none focus:shadow-[0_0_0_2px] focus:shadow-sky data-[state=checked]:bg-pink'
-        onCheckedChange={setIsOn}
-      >
-        <RadixSwitch.Thumb className='block h-full w-4 bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-full' />
-      </RadixSwitch.Root>
-      {labels && (
-        <Label htmlFor={id} isActive={isOn}>
-          {labels[1]}
-        </Label>
-      )}
-    </div>
-  );
-}
-
-type LabelProps = {
-  readonly htmlFor: string;
-  readonly children: string;
-  readonly isActive: boolean;
-};
-
-function Label({htmlFor, children, isActive}: LabelProps) {
-  return (
-    <label
-      className={clsx(
-        'text-sm leading-none',
-        isActive ? 'text-white' : 'text-white/50',
-      )}
-      htmlFor={htmlFor}
+    <RadixSwitch.Root
+      checked={isOn}
+      className='relative h-4 w-8 cursor-default bg-pink/50 shadow-[0_2px_10px] shadow-black outline-none focus:shadow-[0_0_0_2px] focus:shadow-sky data-[state=checked]:bg-pink'
+      onCheckedChange={setIsOn}
     >
-      {children}
-    </label>
+      <RadixSwitch.Thumb className='block h-full w-4 bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-full' />
+    </RadixSwitch.Root>
   );
 }