add controls

src/app/providers.tsx

@@ -2,6 +2,12 @@
 
 import { HeroUIProvider } from '@heroui/react';
 
+import { ControlProvider } from '@/contexts/control-context';
+
 export const Providers = ({ children }: { children: React.ReactNode }) => {
-  return <HeroUIProvider className="h-full w-full">{children}</HeroUIProvider>;
+  return (
+    <HeroUIProvider className="h-full w-full">
+      <ControlProvider>{children}</ControlProvider>
+    </HeroUIProvider>
+  );
 };

src/components/canvas.tsx

@@ -1,38 +1,21 @@
 'use client';
 
-import { PresetsType } from '@react-three/drei/helpers/environment-assets';
 import { Canvas as ThreeCanvas } from '@react-three/fiber';
-import { Leva, button, useControls } from 'leva';
-import { useRef, useState, useTransition } from 'react';
+import { useEffect, useRef } from 'react';
+
+import { useControlContext } from '@/contexts/control-context';
 
 import { Env } from '../components/env';
-import { Actions } from './consts';
 import { RubiksCube, RubiksCubeRef } from './rubiks-cube';
 
 export const Canvas = () => {
   const rubiksCubeRef = useRef<RubiksCubeRef>(null);
+  const { cubeRoughness, cubeSpeed, background, setRubiksCubeRef } = useControlContext();
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, startTransition] = useTransition();
-  const [background, setBackground] = useState<PresetsType>('sunset');
-
-  const { cubeRoughness, cubeSpeed } = useControls({
-    cubeRoughness: { value: 0.5, min: 0.2, max: 0.8 },
-    cubeSpeed: { value: 2, min: 1, max: 10 },
-    background: {
-      value: background,
-      options: ['sunset', 'dawn', 'forest'],
-      onChange: (value) => startTransition(() => setBackground(value)),
-    },
-    Scramble: button(() => {
-      const scrambleSteps = Array.from({ length: 20 }, () => Actions[Math.floor(Math.random() * Actions.length)]);
-      rubiksCubeRef.current?.rotate(scrambleSteps);
-    }),
-  });
+  useEffect(() => setRubiksCubeRef(rubiksCubeRef), [setRubiksCubeRef]);
 
   return (
     <>
-      <Leva />
       <ThreeCanvas shadows camera={{ position: [0, 0, 4.5], fov: 50 }}>
         <RubiksCube ref={rubiksCubeRef} cubeRoughness={cubeRoughness} cubeSpeed={cubeSpeed} />
         <Env background={background} />

src/components/ui-controls.tsx

@@ -2,7 +2,19 @@
 
 import { Button, ButtonGroup, Card, CardBody, Slider } from '@heroui/react';
 
+import { useControlContext } from '@/contexts/control-context';
+
+import { Actions } from './consts';
+
 export const UIControls = () => {
+  const { rubiksCubeRef, setBackground, cubeRoughness, setCubeRoughness, cubeSpeed, setCubeSpeed } =
+    useControlContext();
+
+  const scramble = () => {
+    const scrambleSteps = Array.from({ length: 20 }, () => Actions[Math.floor(Math.random() * Actions.length)]);
+    rubiksCubeRef?.current?.rotate(scrambleSteps);
+  };
+
   return (
     <div className="z-10 pointer-events-none">
       <Card className="max-w-sm bg-white/30 border border-white/80 backdrop-blur-xl pointer-events-auto">
@@ -12,17 +24,33 @@ export const UIControls = () => {
             <div className="flex items-center justify-between">
               <div className="text-sm">Background</div>
               <ButtonGroup size="sm">
-                <Button>Sunset</Button>
-                <Button>Dawn</Button>
-                <Button>Forest</Button>
+                <Button onPress={() => setBackground('sunset')}>Sunset</Button>
+                <Button onPress={() => setBackground('dawn')}>Dawn</Button>
+                <Button onPress={() => setBackground('forest')}>Forest</Button>
               </ButtonGroup>
             </div>
-            <Slider size="sm" label="Cube Roughness" defaultValue={0.5} minValue={0} maxValue={1} step={0.1} />
-            <Slider size="sm" label="Cube Speed" defaultValue={2} minValue={1} maxValue={10} step={1} />
+            <Slider
+              size="sm"
+              label="Cube Roughness"
+              value={cubeRoughness}
+              onChange={(value) => setCubeRoughness(value as number)}
+              minValue={0.2}
+              maxValue={1}
+              step={0.01}
+            />
+            <Slider
+              size="sm"
+              label="Cube Speed"
+              value={cubeSpeed}
+              onChange={(value) => setCubeSpeed(value as number)}
+              minValue={1}
+              maxValue={10}
+              step={1}
+            />
           </div>
           <div className="flex flex-col gap-2">
             <div className="flex gap-2">
-              <Button>Scramble</Button>
+              <Button onPress={scramble}>Scramble</Button>
               <Button>Reset</Button>
               <Button className="ms-auto" color="success">
                 Solve

src/components/ui.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { UIControls } from './ui-controls';
 import { UITitle } from './ui-title';
 

src/contexts/control-context.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { PresetsType } from '@react-three/drei/helpers/environment-assets';
+import { RefObject, createContext, useContext, useState } from 'react';
+
+import { RubiksCubeRef } from '@/components/rubiks-cube';
+
+type ControlContextType = {
+  cubeRoughness: number;
+  setCubeRoughness: (cubeRoughness: number) => void;
+  cubeSpeed: number;
+  setCubeSpeed: (cubeSpeed: number) => void;
+  background: PresetsType;
+  setBackground: (background: PresetsType) => void;
+  rubiksCubeRef?: RefObject<RubiksCubeRef | null>;
+  setRubiksCubeRef: (rubiksCubeRef: RefObject<RubiksCubeRef | null>) => void;
+};
+
+export const ControlContext = createContext<ControlContextType>({
+  cubeRoughness: 0.5,
+  setCubeRoughness: () => {},
+  cubeSpeed: 2,
+  setCubeSpeed: () => {},
+  background: 'sunset',
+  setBackground: () => {},
+  rubiksCubeRef: undefined,
+  setRubiksCubeRef: () => {},
+});
+
+export const useControlContext = () => {
+  return useContext(ControlContext);
+};
+
+export const ControlProvider = ({ children }: { children: React.ReactNode }) => {
+  const [cubeRoughness, setCubeRoughness] = useState(0.5);
+  const [cubeSpeed, setCubeSpeed] = useState(2);
+  const [background, setBackground] = useState<PresetsType>('sunset');
+  const [rubiksCubeRef, setRubiksCubeRef] = useState<RefObject<RubiksCubeRef | null> | undefined>(undefined);
+
+  return (
+    <ControlContext.Provider
+      value={{
+        cubeRoughness,
+        setCubeRoughness,
+        cubeSpeed,
+        setCubeSpeed,
+        background,
+        setBackground,
+        rubiksCubeRef,
+        setRubiksCubeRef,
+      }}
+    >
+      {children}
+    </ControlContext.Provider>
+  );
+};