Spaces:
Sleeping
Sleeping
File size: 2,646 Bytes
6fd9719 6bb08c4 6fd9719 6bb08c4 5c4a167 7994c21 5c4a167 6fd9719 6bb08c4 6fd9719 6bb08c4 6fd9719 6bb08c4 5c4a167 6fd9719 5c4a167 6fd9719 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
'use client';
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);
};
const reset = () => {
rubiksCubeRef?.current?.reset();
};
const solve = () => {
alert('Working on it!');
};
const train = () => {
alert('Working on it!');
};
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 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"
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 onPress={scramble}>Scramble</Button>
<Button onPress={reset}>Reset</Button>
<Button className="ms-auto" color="success" onPress={solve}>
Solve
</Button>
</div>
<div className="text-sm italic font-bold underline text-primary cursor-pointer" onClick={train}>
Train my own model!
</div>
</div>
</CardBody>
</Card>
</div>
);
};
|