get state

src/components/consts.tsx

@@ -11,6 +11,15 @@ export const CubeColors: Record<FacingDirection, string> = {
   bottom: '#ffffff', // White
 };
 
+export const CubeColorIndices: Record<FacingDirection, number> = {
+  front: 0,
+  back: 1,
+  right: 2,
+  left: 3,
+  top: 4,
+  bottom: 5,
+};
+
 export const Rotations: Record<FacingDirection, [number, number, number]> = {
   front: [0, 0, 0],
   back: [0, Math.PI, 0],

src/components/cube-piece.tsx

@@ -4,7 +4,7 @@ import { RoundedBox } from '@react-three/drei';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { Mesh } from 'three';
 
-import { CubeColors, FacingDirection, Rotations } from './consts';
+import { CubeColorIndices, CubeColors, FacingDirection, Rotations } from './consts';
 import { rotationController } from './rotation-controller';
 
 export type CubePieceRef = {
@@ -66,8 +66,8 @@ export const CubePiece = forwardRef<CubePieceRef, CubePieceProps>(({ roughness,
             rotation={Rotations[face as FacingDirection]}
             userData={{
               isFace: true,
-              faceDirection: face,
               faceColor: color,
+              faceColorIndex: CubeColorIndices[face as FacingDirection],
             }}
           >
             <planeGeometry args={[0.8, 0.8]} />

src/components/rotation-controller.ts

@@ -58,7 +58,7 @@ export class RotationController {
     return false;
   }
 
-  private getCubeFace(mesh: Mesh, faceDirection: FacingDirection) {
+  private getCubeFaceColorIndex(mesh: Mesh, faceDirection: FacingDirection) {
     const faces = mesh.children.filter((child) => child.userData.isFace);
     let axis: 'x' | 'y' | 'z' = 'x';
     switch (faceDirection) {
@@ -86,8 +86,8 @@ export class RotationController {
         maxFace = face as Mesh;
       }
     }
-    if (!maxFace) return null;
-    return maxFace;
+    if (!maxFace) return -1; // this should never happen
+    return maxFace.userData.faceColorIndex as number;
   }
 
   static getInstance() {
@@ -123,10 +123,10 @@ export class RotationController {
         return this.cubes.filter((m) => m.position.z > 0);
       case 'back':
         return this.cubes.filter((m) => m.position.z < 0);
-      case 'left':
-        return this.cubes.filter((m) => m.position.x < 0);
       case 'right':
         return this.cubes.filter((m) => m.position.x > 0);
+      case 'left':
+        return this.cubes.filter((m) => m.position.x < 0);
       case 'top':
         return this.cubes.filter((m) => m.position.y > 0);
       case 'bottom':
@@ -134,9 +134,13 @@ export class RotationController {
     }
   }
 
-  getFaces(faceDirection: FacingDirection) {
-    const cubes = this.getCubes(faceDirection);
-    return cubes.map((cube) => this.getCubeFace(cube, faceDirection));
+  getStatus() {
+    return ['front', 'back', 'right', 'left', 'top', 'bottom'].map((f) => {
+      const faceDirection = f as FacingDirection;
+      const cubes = this.getCubes(faceDirection);
+      const indices = cubes.map((cube) => this.getCubeFaceColorIndex(cube, faceDirection));
+      return indices;
+    });
   }
 
   setCubeSpeed(cubeSpeed: number) {

src/components/state-modal.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, useDisclosure } from '@heroui/react';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+
+export type StateModalRef = {
+  open: (status: 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));
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <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>
+              </div>
+            </ModalBody>
+            <ModalFooter>
+              <Button color="danger" variant="light" size="sm" onPress={onClose}>
+                Close
+              </Button>
+              <Button color="primary" size="sm" onPress={copy}>
+                Copy
+              </Button>
+            </ModalFooter>
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+});
+
+StateModal.displayName = 'StateModal';

src/components/ui-controls.tsx

@@ -1,14 +1,16 @@
 'use client';
 
 import { Button, ButtonGroup, Card, CardBody, Checkbox, Slider } from '@heroui/react';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { useControlContext } from '@/contexts/control-context';
 
 import { Actions } from './consts';
 import { rotationController } from './rotation-controller';
+import { StateModal, StateModalRef } from './state-modal';
 
 export const UIControls = () => {
+  const stateModalRef = useRef<StateModalRef | null>(null);
   const [isControlsOpen, setIsControlsOpen] = useState(true);
   const {
     rubiksCubeRef,
@@ -31,8 +33,8 @@ export const UIControls = () => {
   };
 
   const showState = () => {
-    const faces = rotationController.getFaces('front');
-    console.log(faces);
+    const status = rotationController.getStatus();
+    stateModalRef.current?.open(status);
   };
 
   const solve = () => {
@@ -115,6 +117,8 @@ export const UIControls = () => {
           </div>
         </CardBody>
       </Card>
+
+      <StateModal ref={stateModalRef} />
     </div>
   );
 };