add left right

src/components/cube-piece.tsx

@@ -25,8 +25,8 @@ export const CubePiece = ({ roughness, initialPosition }: CubePieceProps) => {
   const visibleFaces = {
     front: z > 0,
     back: z < 0,
-    right: x > 0,
     left: x < 0,
+    right: x > 0,
     top: y > 0,
     bottom: y < 0,
   };
@@ -57,14 +57,14 @@ export const CubePiece = ({ roughness, initialPosition }: CubePieceProps) => {
             stickerPosition = [0, 0, -0.48];
             stickerRotation = [0, Math.PI, 0];
             break;
-          case "right":
-            stickerPosition = [0.48, 0, 0];
-            stickerRotation = [0, Math.PI / 2, 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];

src/components/rotation-panel.tsx

@@ -14,11 +14,13 @@ export const RotationPanel = ({ direction, face }: RotationPanelProps) => {
   const position: Record<string, [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],
     right: clockwise ? [1.01, 0, -0.5] : [1.01, 0, 0.5],
   };
   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],
   };
   return (

src/components/rubiks-cube.tsx

@@ -28,6 +28,8 @@ export const RubiksCube = ({ roughness }: RubiksCubeProps) => {
       <RotationPanel direction="counter-clockwise" face="front" />
       <RotationPanel direction="clockwise" face="back" />
       <RotationPanel direction="counter-clockwise" face="back" />
+      <RotationPanel direction="clockwise" face="left" />
+      <RotationPanel direction="counter-clockwise" face="left" />
       <RotationPanel direction="clockwise" face="right" />
       <RotationPanel direction="counter-clockwise" face="right" />
     </group>