refactor

src/components/consts.tsx

@@ -0,0 +1,16 @@
+export type FacingDirection =
+  | "front"
+  | "back"
+  | "left"
+  | "right"
+  | "top"
+  | "bottom";
+
+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],
+  top: [-Math.PI / 2, 0, 0],
+  bottom: [Math.PI / 2, 0, 0],
+};

src/components/cube-piece.tsx

@@ -2,6 +2,7 @@
 
 import { RoundedBox } from "@react-three/drei";
 import { useState } from "react";
+import { FacingDirection, Rotations } from "./consts";
 
 // Standard Rubik's cube colors
 const CUBE_COLORS = {
@@ -22,7 +23,7 @@ export const CubePiece = ({ roughness, initialPosition }: CubePieceProps) => {
   const [x, y, z] = initialPosition;
   const [position] = useState<[number, number, number]>([x, y, z]);
 
-  const visibleFaces = {
+  const visibleFaces: Record<FacingDirection, boolean> = {
     front: z > 0,
     back: z < 0,
     left: x < 0,
@@ -30,6 +31,14 @@ export const CubePiece = ({ roughness, initialPosition }: CubePieceProps) => {
     top: y > 0,
     bottom: y < 0,
   };
+  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],
+    top: [0, 0.48, 0],
+    bottom: [0, -0.48, 0],
+  };
 
   return (
     <mesh position={position}>
@@ -43,43 +52,12 @@ export const CubePiece = ({ roughness, initialPosition }: CubePieceProps) => {
 
       {Object.entries(visibleFaces).map(([face, isVisible]) => {
         if (!isVisible) return null;
-
         const color = CUBE_COLORS[face as keyof typeof CUBE_COLORS];
-        let stickerPosition: [number, number, number] = [0, 0, 0];
-        let stickerRotation: [number, number, number] = [0, 0, 0];
-
-        switch (face) {
-          case "front":
-            stickerPosition = [0, 0, 0.48];
-            stickerRotation = [0, 0, 0];
-            break;
-          case "back":
-            stickerPosition = [0, 0, -0.48];
-            stickerRotation = [0, Math.PI, 0];
-            break;
-          case "left":
-            stickerPosition = [-0.48, 0, 0];
-            stickerRotation = [0, -Math.PI / 2, 0];
-            break;
-          case "right":
-            stickerPosition = [0.48, 0, 0];
-            stickerRotation = [0, Math.PI / 2, 0];
-            break;
-          case "top":
-            stickerPosition = [0, 0.48, 0];
-            stickerRotation = [-Math.PI / 2, 0, 0];
-            break;
-          case "bottom":
-            stickerPosition = [0, -0.48, 0];
-            stickerRotation = [Math.PI / 2, 0, 0];
-            break;
-        }
-
         return (
           <mesh
             key={face}
-            position={stickerPosition}
-            rotation={stickerRotation}
+            position={positions[face as FacingDirection]}
+            rotation={Rotations[face as FacingDirection]}
           >
             <planeGeometry args={[0.8, 0.8]} />
             <meshStandardMaterial

src/components/rotation-panel.tsx

@@ -2,16 +2,21 @@
 
 import { useLoader } from "@react-three/fiber";
 import { TextureLoader } from "three";
+import { Rotations, FacingDirection } from "./consts";
 
 type RotationPanelProps = {
   direction: "clockwise" | "counter-clockwise";
-  face: "front" | "back" | "left" | "right" | "top" | "bottom";
+  facingDirection: FacingDirection;
 };
 
-export const RotationPanel = ({ direction, face }: RotationPanelProps) => {
+export const RotationPanel = ({
+  direction,
+  facingDirection,
+}: RotationPanelProps) => {
   const clockwise = direction === "clockwise";
   const texture = useLoader(TextureLoader, `/textures/${direction}.png`);
-  const position: Record<string, [number, number, number]> = {
+
+  const position: Record<FacingDirection, [number, number, number]> = {
     front: clockwise ? [0.5, 0, 1.01] : [-0.5, 0, 1.01],
     back: clockwise ? [-0.5, 0, -1.01] : [0.5, 0, -1.01],
     left: clockwise ? [-1.01, 0, 0.5] : [-1.01, 0, -0.5],
@@ -19,16 +24,12 @@ export const RotationPanel = ({ direction, face }: RotationPanelProps) => {
     top: clockwise ? [0.5, 1.01, 0] : [-0.5, 1.01, 0],
     bottom: clockwise ? [0.5, -1.01, 0] : [-0.5, -1.01, 0],
   };
-  const rotation: Record<string, [number, number, number]> = {
-    front: [0, 0, 0],
-    back: [0, Math.PI, 0],
-    left: [0, -Math.PI / 2, 0],
-    right: [0, Math.PI / 2, 0],
-    top: [-Math.PI / 2, 0, 0],
-    bottom: [Math.PI / 2, 0, 0],
-  };
+
   return (
-    <mesh position={position[face]} rotation={rotation[face]}>
+    <mesh
+      position={position[facingDirection]}
+      rotation={Rotations[facingDirection]}
+    >
       <planeGeometry args={[0.8, 1.6]} />
       <meshStandardMaterial
         color={"#aaaaaa"}

src/components/rubiks-cube.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from "react";
 import { CubePiece } from "./cube-piece";
 import { RotationPanel } from "./rotation-panel";
+import { FacingDirection } from "./consts";
 
 const CUBE_POSITIONS: Array<[number, number, number]> = [];
 for (let x = -0.5; x <= 0.5; x++) {
@@ -29,15 +30,11 @@ export const RubiksCube = ({ roughness }: RubiksCubeProps) => {
         <Fragment key={face}>
           <RotationPanel
             direction="clockwise"
-            face={
-              face as "front" | "back" | "left" | "right" | "top" | "bottom"
-            }
+            facingDirection={face as FacingDirection}
           />
           <RotationPanel
             direction="counter-clockwise"
-            face={
-              face as "front" | "back" | "left" | "right" | "top" | "bottom"
-            }
+            facingDirection={face as FacingDirection}
           />
         </Fragment>
       ))}