Rubik's Cube Trainer 🎲

#Features

• 🎮 Interactive 3D Cube - Orbit, zoom, and manipulate realistic 2×2, 3×3, 4×4, and 5×5 cubes
• 🎲 Cube Selector - Switch between all cube sizes with one click
• 🧊 Physical Rotation - True 3D cubie rotation, not color swapping
• 📷 Camera-Relative Controls - Move buttons rotate faces as you see them on screen
• 🔄 Multi-Layer Moves - Middle slices, wide moves, and layer-specific rotations
• 💡 Smart Learning Hints - Explanations for WHY each move helps, with warnings
• ✨ Face Highlighting - Hover over buttons to see which face will rotate
• 🔀 Scramble Generator - Size-appropriate scrambles (8-11 → 60 moves)
• 📖 Learning Mode - Stage detection, hints, and practice moves
• 🤖 Auto-Solve - Optimal solving with Kociemba algorithm
• ↩️ Move History - Track, undo, and replay your moves
• 🌙 Dark Theme - Modern glassmorphism UI

#Supported Cube Sizes

• 2×2 - R, L, U, D, F, B (8-11 moves scramble)
• 3×3 - + M, E, S middle slices (20-25 moves scramble)
• 4×4 - + Rw, Lw, Uw, Dw, Fw, Bw wide moves (40-45 moves scramble)
• 5×5 - + 2R, 2L, 3Rw layer-specific moves (60 moves scramble)

#Realistic Cube Rotation Engine

Unlike simple color-based simulators, this app models a true physical Rubik's Cube:

• Each mini-cube (cubie) exists as an independent 3D object
• Face turns rotate actual cubies in 3D space
• Cubie positions and orientations are preserved
• No color swapping or face repainting

#Smart Learning System

• 💡 "Why this move?" - Expandable explanations for each hint
• ⚠️ Smart warnings - Learn what NOT to do to avoid breaking your progress
• 🎯 One-click apply - Execute the suggested move instantly
• 👻 Ghost preview - See a transparent preview before committing

#Modes

#Tech Stack

• Electron – Desktop application shell
• React 18 – UI framework
• Three.js – 3D rendering
• @react-three/fiber – React-Three.js bridge
• Zustand – State management
• cubejs – Cube solving (Kociemba algorithm)
• Vite – Build tool

#Controls

• 🖱️ Drag on cube - Rotate the face you clicked
• 🖱️ Drag outside cube - Rotate camera around cube
• 🖱️ Scroll - Zoom in/out
• 🖱️ Hover button - Highlight face on cube
• R, L, U, D, F, B - Face rotations (camera-relative)
• M, E, S - Middle layer moves (3×3+)
• Rw, Lw, Uw... - Wide moves (4×4+)