Spaces:
Sleeping
Sleeping
File size: 4,304 Bytes
4c67d79 af71f44 4c67d79 fce499e 4a3842e fce499e 4c67d79 7d70895 4c67d79 4a3842e 4c67d79 fce499e 4c67d79 fce499e 4c67d79 fce499e 4c67d79 fce499e 4c67d79 fce499e 4c67d79 8d694b6 4c67d79 fce499e 4c67d79 8d694b6 4c67d79 fce499e 4c67d79 4a3842e 4c67d79 4a3842e 4c67d79 |
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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
'use client';
import { Button } from '@heroui/button';
import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@heroui/modal';
import { useDisclosure } from '@heroui/use-disclosure';
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Index2Color } from './consts';
import { rotationController } from './rotation-controller';
export type StateModalRef = {
open: (state: Array<Array<number>>) => void;
};
export const StateModal = forwardRef<StateModalRef, unknown>((_, ref) => {
const [state, setState] = useState<Array<Array<number>>>([]);
const { isOpen, onOpen, onOpenChange } = useDisclosure();
useImperativeHandle(ref, () => ({
open: (state: Array<Array<number>>) => {
setState(state);
onOpen();
},
}));
const copy = () => {
navigator.clipboard.writeText(JSON.stringify(state));
};
const solve = async () => {
try {
const response = await fetch('/api/solve', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ state }),
});
if (!response.ok) {
throw new Error('Server error', { cause: response });
}
const { steps } = await response.json();
rotationController.addRotationStepCode(...steps);
} catch (err) {
alert('An error occurred. Check the console for details.');
console.error(err);
}
};
return (
<Modal isOpen={isOpen} onOpenChange={onOpenChange} placement="center">
<ModalContent>
{(onClose) => (
<>
<ModalHeader>State</ModalHeader>
<ModalBody>
<div className="flex flex-col gap-2">
<div className="flex gap-2 items-center">
<div className="text-sm w-24 font-mont">Front</div>
<div className="font-mono">{JSON.stringify(state[0])}</div>
<div className="font-mono">[{state[0].map((index) => Index2Color[index]).join(', ')}]</div>
</div>
<div className="flex gap-2 items-center">
<div className="text-sm w-24 font-mont">Back</div>
<div className="font-mono">{JSON.stringify(state[1])}</div>
<div className="font-mono">[{state[1].map((index) => Index2Color[index]).join(', ')}]</div>
</div>
<div className="flex gap-2 items-center">
<div className="text-sm w-24 font-mont">Right</div>
<div className="font-mono">{JSON.stringify(state[2])}</div>
<div className="font-mono">[{state[2].map((index) => Index2Color[index]).join(', ')}]</div>
</div>
<div className="flex gap-2 items-center">
<div className="text-sm w-24 font-mont">Left</div>
<div className="font-mono">{JSON.stringify(state[3])}</div>
<div className="font-mono">[{state[3].map((index) => Index2Color[index]).join(', ')}]</div>
</div>
<div className="flex gap-2 items-center">
<div className="text-sm w-24 font-mont">Up</div>
<div className="font-mono">{JSON.stringify(state[4])}</div>
<div className="font-mono">[{state[4].map((index) => Index2Color[index]).join(', ')}]</div>
</div>
<div className="flex gap-2 items-center">
<div className="text-sm w-24 font-mont">Down</div>
<div className="font-mono">{JSON.stringify(state[5])}</div>
<div className="font-mono">[{state[5].map((index) => Index2Color[index]).join(', ')}]</div>
</div>
</div>
</ModalBody>
<ModalFooter>
<Button color="danger" variant="light" size="sm" onPress={onClose}>
Close
</Button>
<Button color="primary" variant="light" size="sm" onPress={copy}>
Copy
</Button>
<Button color="success" size="sm" onPress={solve}>
Solve
</Button>
</ModalFooter>
</>
)}
</ModalContent>
</Modal>
);
});
StateModal.displayName = 'StateModal';
|