Fix cube coloring interaction

src/components/CubeColoring.tsx

@@ -26,17 +26,18 @@ const colorPalette = [
 const faceNames = ['Top', 'Bottom', 'Front', 'Back', 'Right', 'Left'];
 
 // Rotation definitions: each rotation maps face indices [0,1,2,3,4,5] to new positions
+// Also includes actual 3D rotation values for visualization
 const rotations = [
-  { name: 'Identity', permutation: [0, 1, 2, 3, 4, 5], description: 'No rotation' },
+  { name: 'Identity', permutation: [0, 1, 2, 3, 4, 5], description: 'No rotation', rotation: [0, 0, 0] },
-  { name: 'Y-90° (vertical)', permutation: [0, 1, 4, 5, 3, 2], description: 'Front→Right→Back→Left' },
+  { name: 'Y-90° (vertical)', permutation: [0, 1, 4, 5, 3, 2], description: 'Front→Right→Back→Left', rotation: [0, Math.PI / 2, 0] },
-  { name: 'Y-180°', permutation: [0, 1, 3, 2, 5, 4], description: 'Front↔Back, Right↔Left' },
+  { name: 'Y-180°', permutation: [0, 1, 3, 2, 5, 4], description: 'Front↔Back, Right↔Left', rotation: [0, Math.PI, 0] },
-  { name: 'Y-270°', permutation: [0, 1, 5, 4, 2, 3], description: 'Front→Left→Back→Right' },
+  { name: 'Y-270°', permutation: [0, 1, 5, 4, 2, 3], description: 'Front→Left→Back→Right', rotation: [0, -Math.PI / 2, 0] },
-  { name: 'X-90° (horizontal)', permutation: [2, 3, 1, 0, 4, 5], description: 'Top→Front→Bottom→Back' },
+  { name: 'X-90° (horizontal)', permutation: [2, 3, 1, 0, 4, 5], description: 'Top→Front→Bottom→Back', rotation: [Math.PI / 2, 0, 0] },
-  { name: 'X-180°', permutation: [1, 0, 3, 2, 4, 5], description: 'Top↔Bottom, Front↔Back' },
+  { name: 'X-180°', permutation: [1, 0, 3, 2, 4, 5], description: 'Top↔Bottom, Front↔Back', rotation: [Math.PI, 0, 0] },
-  { name: 'X-270°', permutation: [3, 2, 0, 1, 4, 5], description: 'Top→Back→Bottom→Front' },
+  { name: 'X-270°', permutation: [3, 2, 0, 1, 4, 5], description: 'Top→Back→Bottom→Front', rotation: [-Math.PI / 2, 0, 0] },
-  { name: 'Z-90° (front-back)', permutation: [4, 5, 2, 3, 1, 0], description: 'Top→Right→Bottom→Left' },
+  { name: 'Z-90° (front-back)', permutation: [4, 5, 2, 3, 1, 0], description: 'Top→Right→Bottom→Left', rotation: [0, 0, Math.PI / 2] },
-  { name: 'Z-180°', permutation: [1, 0, 2, 3, 5, 4], description: 'Top↔Bottom, Right↔Left' },
+  { name: 'Z-180°', permutation: [1, 0, 2, 3, 5, 4], description: 'Top↔Bottom, Right↔Left', rotation: [0, 0, Math.PI] },
-  { name: 'Z-270°', permutation: [5, 4, 2, 3, 0, 1], description: 'Top→Left→Bottom→Right' },
+  { name: 'Z-270°', permutation: [5, 4, 2, 3, 0, 1], description: 'Top→Left→Bottom→Right', rotation: [0, 0, -Math.PI / 2] },
 ];
 
 interface PaintableCubeProps {
@@ -47,12 +48,6 @@ interface PaintableCubeProps {
 function PaintableCube({ colors, onFaceClick }: PaintableCubeProps) {
   const meshRef = useRef<THREE.Mesh>(null);
 
-  useFrame(() => {
-    if (meshRef.current) {
-      meshRef.current.rotation.y += 0.005;
-    }
-  });
-
   return (
     <mesh ref={meshRef}>
       <boxGeometry args={[2, 2, 2]} />
@@ -63,33 +58,14 @@ function PaintableCube({ colors, onFaceClick }: PaintableCubeProps) {
   );
 }
 
-function PermutationCube({ permutation }: { permutation: number[] }) {
+function RotatedCube({ colors, rotation }: { colors: string[], rotation: number[] }) {
   const meshRef = useRef<THREE.Mesh>(null);
 
-  useFrame(() => {
-    if (meshRef.current) {
-      meshRef.current.rotation.y += 0.005;
-    }
-  });
-
-  // Create materials based on permutation
-  const baseMaterials = [
-    new THREE.MeshStandardMaterial({ color: '#ef4444' }), // red - top
-    new THREE.MeshStandardMaterial({ color: '#3b82f6' }), // blue - bottom
-    new THREE.MeshStandardMaterial({ color: '#22c55e' }), // green - front
-    new THREE.MeshStandardMaterial({ color: '#eab308' }), // yellow - back
-    new THREE.MeshStandardMaterial({ color: '#a855f7' }), // purple - right
-    new THREE.MeshStandardMaterial({ color: '#f97316' }), // orange - left
-  ];
-
-  // Apply permutation: materials[i] shows the color that should be at position i
-  const permutedMaterials = permutation.map(originalIndex => baseMaterials[originalIndex]);
-
   return (
-    <mesh ref={meshRef}>
+    <mesh ref={meshRef} rotation={rotation as [number, number, number]}>
       <boxGeometry args={[2, 2, 2]} />
-      {permutedMaterials.map((material, i) => (
+      {colors.map((color, i) => (
-        <primitive key={i} object={material} attach={`material-${i}`} />
+        <meshStandardMaterial key={i} attach={`material-${i}`} color={color} />
       ))}
     </mesh>
   );
@@ -246,7 +222,10 @@ const CubeColoring = ({ showSocialShare = false, shareUrl }: CubeColoringProps)
                         <Canvas camera={{ position: [4, 4, 4] }}>
                           <ambientLight intensity={0.5} />
                           <directionalLight position={[10, 10, 5]} intensity={1} />
-                          <PermutationCube permutation={selectedPermutation} />
+                          <RotatedCube 
+                            colors={faceColors} 
+                            rotation={permutationToRotation()!.rotation} 
+                          />
                           <OrbitControls enableZoom={true} />
                         </Canvas>
                       </div>
@@ -320,7 +299,10 @@ const CubeColoring = ({ showSocialShare = false, shareUrl }: CubeColoringProps)
                     <Canvas camera={{ position: [4, 4, 4] }}>
                       <ambientLight intensity={0.5} />
                       <directionalLight position={[10, 10, 5]} intensity={1} />
-                      <PermutationCube permutation={rotations[selectedRotation].permutation} />
+                      <RotatedCube 
+                        colors={faceColors} 
+                        rotation={rotations[selectedRotation].rotation} 
+                      />
                       <OrbitControls enableZoom={true} />
                     </Canvas>
                   </div>