Spaces:
Sleeping
Sleeping
File size: 4,330 Bytes
4c67d79 af71f44 4c67d79 fce499e 4a3842e fce499e 4c67d79 7d70895 4c67d79 d61595a 4c67d79 4a3842e d61595a 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 110 |
'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, onClose, 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);
onClose();
} 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';
|