get faces

src/components/consts.tsx

@@ -1,12 +1,21 @@
-export type FacingDirection = 'front' | 'back' | 'left' | 'right' | 'top' | 'bottom';
+export type FacingDirection = 'front' | 'back' | 'right' | 'left' | 'top' | 'bottom';
 
 export type RotationDirection = 'clockwise' | 'counter-clockwise';
 
+export const CubeColors: Record<FacingDirection, string> = {
+  front: '#ff0000', // Red
+  back: '#ff00ff', // Purple
+  right: '#0000ff', // Blue
+  left: '#00ff00', // Green
+  top: '#ffff00', // Yellow
+  bottom: '#ffffff', // White
+};
+
 export const Rotations: Record<FacingDirection, [number, number, number]> = {
   front: [0, 0, 0],
   back: [0, Math.PI, 0],
-  left: [0, -Math.PI / 2, 0],
   right: [0, Math.PI / 2, 0],
+  left: [0, -Math.PI / 2, 0],
   top: [-Math.PI / 2, 0, 0],
   bottom: [Math.PI / 2, 0, 0],
 };
@@ -19,12 +28,12 @@ export type RotationStep = {
 export const Actions: Array<RotationStep> = [
   { faceDirection: 'front', direction: 'clockwise' },
   { faceDirection: 'front', direction: 'counter-clockwise' },
+  { faceDirection: 'back', direction: 'clockwise' },
+  { faceDirection: 'back', direction: 'counter-clockwise' },
   { faceDirection: 'right', direction: 'clockwise' },
   { faceDirection: 'right', direction: 'counter-clockwise' },
   { faceDirection: 'left', direction: 'clockwise' },
   { faceDirection: 'left', direction: 'counter-clockwise' },
-  { faceDirection: 'back', direction: 'clockwise' },
-  { faceDirection: 'back', direction: 'counter-clockwise' },
   { faceDirection: 'top', direction: 'clockwise' },
   { faceDirection: 'top', direction: 'counter-clockwise' },
   { faceDirection: 'bottom', direction: 'clockwise' },

src/components/cube-piece.tsx

@@ -4,19 +4,9 @@ import { RoundedBox } from '@react-three/drei';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { Mesh } from 'three';
 
-import { FacingDirection, Rotations } from './consts';
+import { CubeColors, FacingDirection, Rotations } from './consts';
 import { rotationController } from './rotation-controller';
 
-// Standard Rubik's cube colors
-const CUBE_COLORS = {
-  front: '#ff0000', // Red
-  back: '#ff00ff', // Purple
-  left: '#00ff00', // Green
-  right: '#0000ff', // Blue
-  top: '#ffff00', // Yellow
-  bottom: '#ffffff', // White
-};
-
 export type CubePieceRef = {
   resetPosition: () => void;
 };
@@ -54,8 +44,8 @@ export const CubePiece = forwardRef<CubePieceRef, CubePieceProps>(({ roughness,
   const positions: Record<FacingDirection, [number, number, number]> = {
     front: [0, 0, 0.48],
     back: [0, 0, -0.48],
-    left: [-0.48, 0, 0],
     right: [0.48, 0, 0],
+    left: [-0.48, 0, 0],
     top: [0, 0.48, 0],
     bottom: [0, -0.48, 0],
   };
@@ -68,9 +58,18 @@ export const CubePiece = forwardRef<CubePieceRef, CubePieceProps>(({ roughness,
 
       {Object.entries(visibleFaces).map(([face, isVisible]) => {
         if (!isVisible) return null;
-        const color = CUBE_COLORS[face as keyof typeof CUBE_COLORS];
+        const color = CubeColors[face as keyof typeof CubeColors];
         return (
-          <mesh key={face} position={positions[face as FacingDirection]} rotation={Rotations[face as FacingDirection]}>
+          <mesh
+            key={face}
+            position={positions[face as FacingDirection]}
+            rotation={Rotations[face as FacingDirection]}
+            userData={{
+              isFace: true,
+              faceDirection: face,
+              faceColor: color,
+            }}
+          >
             <planeGeometry args={[0.8, 0.8]} />
             <meshStandardMaterial color={color} metalness={1} roughness={roughness} />
           </mesh>

src/components/rotation-controller.ts

@@ -1,4 +1,4 @@
-import { Group, Mesh } from 'three';
+import { Group, Mesh, Vector3 } from 'three';
 
 import { FacingDirection, RotationStep } from './consts';
 
@@ -58,6 +58,38 @@ export class RotationController {
     return false;
   }
 
+  private getCubeFace(mesh: Mesh, faceDirection: FacingDirection) {
+    const faces = mesh.children.filter((child) => child.userData.isFace);
+    let axis: 'x' | 'y' | 'z' = 'x';
+    switch (faceDirection) {
+      case 'front':
+      case 'back':
+        axis = 'z';
+        break;
+      case 'right':
+      case 'left':
+        axis = 'x';
+        break;
+      case 'top':
+      case 'bottom':
+        axis = 'y';
+        break;
+    }
+    let maxFace: Mesh | null = null;
+    let maxValue = -Infinity;
+    for (const face of faces) {
+      const worldPosition = new Vector3();
+      face.getWorldPosition(worldPosition);
+      const axisValue = Math.abs(worldPosition[axis]);
+      if (axisValue > maxValue) {
+        maxValue = axisValue;
+        maxFace = face as Mesh;
+      }
+    }
+    if (!maxFace) return null;
+    return maxFace;
+  }
+
   static getInstance() {
     if (!RotationController.instance) {
       RotationController.instance = new RotationController();
@@ -102,6 +134,11 @@ export class RotationController {
     }
   }
 
+  getFaces(faceDirection: FacingDirection) {
+    const cubes = this.getCubes(faceDirection);
+    return cubes.map((cube) => this.getCubeFace(cube, faceDirection));
+  }
+
   setCubeSpeed(cubeSpeed: number) {
     this.cubeSpeed = cubeSpeed;
   }

src/components/ui-controls.tsx

@@ -6,6 +6,7 @@ import { useState } from 'react';
 import { useControlContext } from '@/contexts/control-context';
 
 import { Actions } from './consts';
+import { rotationController } from './rotation-controller';
 
 export const UIControls = () => {
   const [isControlsOpen, setIsControlsOpen] = useState(true);
@@ -30,7 +31,8 @@ export const UIControls = () => {
   };
 
   const showState = () => {
-    alert('Working on it!');
+    const faces = rotationController.getFaces('front');
+    console.log(faces);
   };
 
   const solve = () => {