Cube

Prompt

Create a complete, polished, interactive **3×3 Rubik’s Cube simulator and solver** as a **single HTML file** using **Three.js**. The application must not merely fake the solution by remembering the scramble and reversing it. It must use a **real state-based Rubik’s Cube solver based on Herbert Kociemba’s Two-Phase algorithm**. ## Core Requirement The solver must solve the Rubik’s Cube from its **current cube state only**. This is extremely important: **DO NOT solve the cube by storing the scramble history and reversing the moves.** The solving system must still work if the entire move history and scramble history are permanently deleted before pressing Solve. For example: 1. Start from solved cube. 2. Randomly scramble it with 30 moves. 3. Completely erase all move history. 4. Press "Solve". 5. Read the current cube state. 6. Convert the current cube state into the standard 54-facelet representation. 7. Run a real Kociemba Two-Phase solver. 8. Generate a new solution sequence such as: `R U2 F' L2 D B2 R' ...` 9. Animate those moves on the Three.js cube. 10. Finish in the solved state. The application should include a **"Clear History"** button specifically so this behavior can be tested. --- # 1. Three.js Rubik’s Cube Create a visually high-quality 3D Rubik’s Cube. Use: * Three.js * PerspectiveCamera * OrbitControls * WebGLRenderer * Lighting and shadows * Smooth animation * Responsive rendering Create the cube from individual cubies rather than using a single textured cube. Prefer 26 visible cubies plus an optional hidden center core, or a logically equivalent 27-cubie representation. Each cubie must preserve: * position * orientation * sticker orientation * logical cubie identity The cube must remain mathematically correct after hundreds of moves. Avoid accumulated floating-point errors. After every completed 90-degree turn: * snap positions to the exact logical grid coordinates -1, 0, +1 * normalize cubie orientations * keep visual state synchronized with logical state --- # 2. Appearance Make the cube look like a premium physical Rubik’s Cube. Use six conventional colors: * U = White * D = Yellow * F = Green * B = Blue * R = Red * L = Orange Include: * black plastic cubies * slightly rounded edges * small gaps between pieces * slightly inset or raised stickers * subtle reflections * ambient light * directional light * shadows * dark modern background * ground plane or subtle grid * professional-looking UI The cube should be the visual focus of the application. --- # 3. Camera Controls Support mouse/touch OrbitControls. Allow: * rotate camera * zoom * smooth damping The camera must not interfere with cube move animations. --- # 4. Rubik’s Cube Moves Support standard Singmaster notation: R R' R2 L L' L2 U U' U2 D D' D2 F F' F2 B B' B2 Also preferably support: M M' M2 E E' E2 S S' S2 Optional advanced support: x y z wide moves such as: Rw Uw Fw However, basic Kociemba solving only needs the six outer faces. --- # 5. Physical Move Animation Every move must animate the actual cubies. For a move such as R: 1. Determine the cubies belonging to the R layer. 2. Temporarily attach them to a Three.js Group/pivot. 3. Animate the pivot exactly 90 degrees. 4. Reattach the cubies back to the main scene. 5. Update their exact logical coordinates and orientation. 6. Snap values to prevent floating-point drift. Do not simply rotate sticker colors or swap textures. The geometry itself must move correctly. --- # 6. Clicking Faces Allow the user to click a visible sticker/face to rotate that face. For example: * normal click = clockwise * Shift + click = counterclockwise The system must determine the clicked sticker's **current world orientation**, not its original orientation. Therefore face clicking must remain correct even after the cube has already been heavily scrambled. --- # 7. Keyboard Controls Support keyboard controls: R L U D F B Shift + key can perform inverse turns. Optionally use another modifier for double turns. Display the most recent move. --- # 8. Algorithm Input Provide a text input field. Example: `R U R' U'` The application must parse the algorithm and animate it sequentially. Also accept: `R2 U2 F' L D2` Reject invalid notation cleanly. Provide a Run Algorithm button. --- # 9. Random Scramble Provide a Scramble button. Allow scramble lengths such as: 10 20 30 40 50 60 Generate realistic scramble sequences. Avoid trivial consecutive moves such as: R R' U U2 F F' Prefer avoiding consecutive turns on the same axis where practical. Animate the scramble. Display the generated scramble sequence. --- # 10. Cube State Model Maintain a logical Rubik’s Cube model independently from the visual Three.js representation. It must correctly track: * corner permutation * corner orientation * edge permutation * edge orientation or an equivalent full 54-facelet representation. The solver state must be generated from the **actual current cube configuration**, not from the move history. --- # 11. 54-Facelet State Implement conversion from the current internal cube state to the conventional Kociemba facelet ordering: U1-U9 R1-R9 F1-F9 D1-D9 L1-L9 B1-B9 Equivalent compact ordering: `UUUUUUUUURRRRRRRRRFFFFFFFFFDDDDDDDDDLLLLLLLLLBBBBBBBBB` for a solved cube. After scrambling, dynamically generate the new 54-character state. Display the current facelet string somewhere in a debug/status panel. This allows us to verify that the solver is actually reading the current state. --- # 12. REAL Kociemba Solver Integrate a genuine JavaScript implementation of Herbert Kociemba’s Two-Phase Rubik’s Cube algorithm. You may use a proven browser-compatible library such as Cube.js/cubejs or another reliable open-source Kociemba implementation. If using an external library, load it from a stable CDN. Initialize the solver correctly. Example conceptual flow: ```javascript initializeKociembaSolver(); const facelets = getCurrentFaceletState(); const solution = solveCurrentCube(facelets); executeAlgorithm(solution); ``` The solver must calculate a **new solution from the current cube configuration**. It must NOT read: * scrambleHistory * moveHistory * undoHistory to determine the solution. Move history may exist for UI purposes, but the solver must operate independently. --- # 13. Anti-Cheat Verification Add a button: **Clear History** When pressed: ```javascript moveHistory = []; scrambleHistory = []; undoHistory = []; ``` or equivalent. It must NOT modify the actual cube state. Then the user should still be able to press: **Solve with Kociemba** and successfully solve the cube. This test is mandatory. Also show something like: History: 0 moves while the cube remains visibly scrambled. Then pressing Solve must still work. --- # 14. Kociemba Solution Display When Solve is pressed, display: Current state: `URDUU...` Solution: `R U2 R' F2 D ...` Solution length: `19 moves` Then animate the solution one move at a time. Highlight the current move while solving. Display progress such as: `7 / 19` --- # 15. Solution Playback Controls Provide: * Solve with Kociemba * Pause * Resume * Step * Stop Provide a solution animation speed slider. Example range: 50 ms to 800 ms per quarter turn. --- # 16. Scramble Playback Speed Provide an animation speed slider. The cube should still behave correctly when rapidly scrambling or solving. Moves must run through a queue so simultaneous rotations cannot corrupt the cube. --- # 17. Solved-State Detection Determine whether the cube is solved using the actual current cube state. Do not determine solved status from history length. Display: `SOLVED` or `SCRAMBLED` Update automatically after every move. --- # 18. Reset Provide: **Reset Cube** This must return the cube directly to the canonical solved state and clear all queues/history. --- # 19. Undo An Undo button may use move history for convenience. That is acceptable. However: **Undo and Kociemba Solve must be completely separate systems.** Kociemba Solve must never rely on Undo history. --- # 20. UI Layout Create a professional responsive interface. Suggested layout: Left/center: Large Three.js Rubik’s Cube viewport. Right panel: * Reset * Scramble * scramble length * Clear History * Solve with Kociemba * Pause * Step * animation speed * face-turn buttons * algorithm input * Run Algorithm * current cube status * facelet state * Kociemba solution * move counter * solution progress On mobile, collapse controls below the cube. --- # 21. Technical Requirements Produce a single HTML file containing: * HTML * CSS * JavaScript External dependencies may be imported from CDN. Use ES modules when appropriate. Do not require: * Node.js * npm install * build systems * Python server * backend * database The user should be able to open the HTML file in a modern browser. If direct `file://` execution causes module/CORS restrictions, clearly structure the imports so it can also be run from a minimal local HTTP server. --- # 22. Robustness Prevent: * overlapping animations * double execution * corrupted pivot groups * coordinate drift * invalid cube states * UI presses during unsafe transitions Use an asynchronous move queue. A new move should execute only when the previous move has completed. --- # 23. Validation Before providing the final code, mentally/test logically these scenarios: ### Test A Reset cube. Run: `R R'` Result must be solved. ### Test B Run: `R R R R` Result must be solved. ### Test C Run: `R U R' U'` Cube must be scrambled. ### Test D Scramble 30 random moves. Press Solve. Kociemba must solve it. ### Test E — Most Important Scramble 30 random moves. Press Clear History. Confirm: History = 0. Cube remains scrambled. Press Solve with Kociemba. The cube must still solve correctly. ### Test F Scramble. Manually rotate several faces using keyboard/click controls. Clear History. Press Solve. The solver must still solve the current mixed state. --- # 24. Important Implementation Constraint Do not fake the Kociemba behavior with something like: ```javascript const solution = history .reverse() .map(invertMove); ``` This is explicitly forbidden. Do not reconstruct or secretly preserve the scramble sequence somewhere else. The solver's only relevant input must be the cube's **current physical/logical state**. --- # 25. Deliverable Return the **complete working HTML file**, not snippets. Do not give me only explanations or pseudocode. Write all required HTML, CSS, and JavaScript. The final result should feel like a polished mini web application rather than a technical demo. Prioritize correctness of the Rubik’s Cube state model and Kociemba solver integration over decorative effects. At the top of the source code, include a short comment explaining: 1. which Kociemba library is being used, 2. how the current cube state is converted into solver input, 3. confirmation that solving does not use scramble history.

A system prompt was added to support web rendering