docs: work on adding attributes to playground

michaelbrusegard · Sep 15, 2024 · 7672b41 · 7672b41
1 parent 839395c
commit 7672b41
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 40 deletions.
diff --git a/docs/app/(home)/play/page.tsx b/docs/app/(home)/play/page.tsx
@@ -2,6 +2,7 @@
 
 import WebGLFluidEnhanced from '../../../../dist/index.es.js';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
   Dialog,
   DialogContent,
@@ -12,7 +13,6 @@ import {
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -30,6 +30,36 @@ export default function HomePage() {
   const mainRef = useRef(null);
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
+    defaultValues: formSchema.parse({
+      simResolution: 128,
+      dyeResolution: 1024,
+      captureResolution: 512,
+      densityDissipation: 1,
+      velocityDissipation: 0.2,
+      pressure: 0.8,
+      pressureIterations: 20,
+      curl: 30,
+      splatRadius: 0.25,
+      splatForce: 6000,
+      shading: true,
+      colorful: true,
+      colorUpdateSpeed: 10,
+      colorPalette: [],
+      hover: true,
+      inverted: false,
+      backgroundColor: '#000000',
+      transparent: false,
+      brightness: 0.5,
+      bloom: true,
+      bloomIterations: 8,
+      bloomResolution: 256,
+      bloomIntensity: 0.8,
+      bloomThreshold: 0.6,
+      bloomSoftKnee: 0.7,
+      sunrays: true,
+      sunraysResolution: 196,
+      sunraysWeight: 1.0,
+    }),
   });
 
   useEffect(() => {
@@ -44,44 +74,63 @@ export default function HomePage() {
   }, []);
 
   return (
-    <main className='-mt-14 h-screen' ref={mainRef}>
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button
-            className='absolute left-2 top-16'
-            variant='outline'
-            size='icon'
-          >
-            <SettingsIcon />
-          </Button>
-        </DialogTrigger>
-        <DialogContent className='!size-[91.666667%] max-w-7xl'>
-          <DialogHeader>
-            <DialogTitle>Configuration</DialogTitle>
-          </DialogHeader>
-          <Form {...form}>
-            <form className='space-y-8'>
-              <FormField
-                control={form.control}
-                name='simResolution'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Username</FormLabel>
-                    <FormControl>
-                      <Input placeholder='shadcn' {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      This is your public display name.
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <Button type='submit'>Submit</Button>
-            </form>
-          </Form>
-        </DialogContent>
-      </Dialog>
+    <main
+      className='relative -mt-14 flex h-screen items-center justify-center'
+      ref={mainRef}
+    >
+      <div className='pointer-events-none absolute size-full max-w-7xl'>
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button
+              className='pointer-events-auto absolute left-2 top-16'
+              variant='outline'
+              size='icon'
+            >
+              <SettingsIcon />
+            </Button>
+          </DialogTrigger>
+          <DialogContent className='!size-[91.666667%] max-w-7xl'>
+            <DialogHeader>
+              <DialogTitle>Configuration</DialogTitle>
+            </DialogHeader>
+            <Form {...form}>
+              <form className='space-y-8'>
+                <div className='flex flex-wrap gap-8'>
+                  {Object.keys(formSchema.shape).map((key) => (
+                    <FormField
+                      key={key}
+                      control={form.control}
+                      name={key as keyof z.infer<typeof formSchema>}
+                      render={({ field }) => (
+                        <FormItem className='flex-grow'>
+                          <FormLabel>{key}</FormLabel>
+                          <FormControl>
+                            {typeof field.value === 'boolean' ? (
+                              <Checkbox
+                                checked={field.value}
+                                onCheckedChange={field.onChange}
+                                onBlur={field.onBlur}
+                              />
+                            ) : (
+                              <Input
+                                value={field.value}
+                                onChange={field.onChange}
+                                onBlur={field.onBlur}
+                              />
+                            )}
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  ))}
+                </div>
+                <Button type='submit'>Apply</Button>
+              </form>
+            </Form>
+          </DialogContent>
+        </Dialog>
+      </div>
     </main>
   );
 }
diff --git a/docs/bun.lockb b/docs/bun.lockb
diff --git a/docs/components/ui/checkbox.tsx b/docs/components/ui/checkbox.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import * as React from 'react';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <Check className='h-4 w-4' />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/docs/lib/config.ts b/docs/lib/config.ts
@@ -16,7 +16,7 @@ const formSchema = z.object({
   shading: z.boolean().default(true),
   colorful: z.boolean().default(true),
   colorUpdateSpeed: z.number().default(10),
-  colorPalette: z.array(z.any()).default([]),
+  colorPalette: z.array(z.string()).default([]),
   hover: z.boolean().default(true),
   inverted: z.boolean().default(false),
   backgroundColor: z.string().default('#000000'),

diff --git a/docs/package.json b/docs/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "fumadocs-core": "13.4.9",