add controls ui

src/app/page.tsx

@@ -1,18 +1,10 @@
 import { Canvas } from '@/components/canvas';
+import { UI } from '@/components/ui';
 
 export default function Home() {
   return (
     <div className="w-full h-full">
-      <div className="absolute inset-0 z-10 pointer-events-none">
-        <div className="w-full h-full p-6">
-          <div className="text-6xl font-bold">Rubik&apos;s Cube Solver</div>
-          <div className="text-2xl text-gray-800">with Reinforcement Learning</div>
-          <div className="text-gray-700">
-            <a href="https://cross-entropy.ai">https://cross-entropy.ai</a>
-          </div>
-        </div>
-      </div>
-
+      <UI />
       <Canvas />
     </div>
   );

src/app/providers.tsx

@@ -3,5 +3,5 @@
 import { HeroUIProvider } from '@heroui/react';
 
 export const Providers = ({ children }: { children: React.ReactNode }) => {
-  return <HeroUIProvider className='h-full w-full'>{children}</HeroUIProvider>;
+  return <HeroUIProvider className="h-full w-full">{children}</HeroUIProvider>;
 };

src/components/ui-controls.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { Button, ButtonGroup, Card, CardBody, Slider } from '@heroui/react';
+
+export const UIControls = () => {
+  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">
+        <CardBody className="flex flex-col gap-6">
+          <div className="text-2xl font-bold">Controls</div>
+          <div className="flex flex-col gap-2">
+            <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>
+              </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} />
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="flex gap-2">
+              <Button>Scramble</Button>
+              <Button>Reset</Button>
+              <Button className="ms-auto" color="success">
+                Solve
+              </Button>
+            </div>
+            <div className="text-sm italic font-bold underline text-primary cursor-pointer">Train my own model!</div>
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};

src/components/ui-title.tsx

@@ -0,0 +1,11 @@
+export const UITitle = () => {
+  return (
+    <div className="z-10 pointer-events-none">
+      <div className="text-6xl font-bold">Rubik&apos;s Cube Solver</div>
+      <div className="text-2xl text-gray-800">with Reinforcement Learning</div>
+      <div className="text-gray-700">
+        <a href="https://cross-entropy.ai">https://cross-entropy.ai</a>
+      </div>
+    </div>
+  );
+};

src/components/ui.tsx

@@ -0,0 +1,13 @@
+import { UIControls } from './ui-controls';
+import { UITitle } from './ui-title';
+
+export const UI = () => {
+  return (
+    <div className="absolute inset-0">
+      <div className="w-full h-full p-6 flex flex-col justify-between">
+        <UITitle />
+        <UIControls />
+      </div>
+    </div>
+  );
+};