This project was bootstrapped with Create React App.
Development version live at merpig.github.io/RubiksProgram
Hosted by ruwix.com at cube-solver.com
RubiksProgram simulates a rubiks cube. A user can try to solve the cube, input a real cube (2x2 through 5x5 currently) for a generated solution, or see various pattern algorithms (2x2 through 30x30) with a turn by turn visual guide.
Mouse
-
Left click, hold down, and drag along any slice of the cube to make a turn in the direction you drag your mouse in. On mobile just drag your finger along the slice.
-
Left click, hold down, and drag anywhere in the space around the cube to rotate the camera. On mobile just drag your finger in that space.
Keyboard
-
Right arrow will redo a move if you have undone at least one. Hold down to have moves continuously redone.
-
Left arrow with undo a move if you made at least one. Hold down to have moves continuously undone.
-
Shows a dropdown list of cube sizes 2-10.
-
Select any to generate that sized cube.
-
To access larger cubes (up to 70) change the url variable.
-
Example of 30x30: https://merpig.github.io/RubiksProgram/id=30
- Opens a model with basic overview of the application and how to use.
- Puts the application into fullscreen mode. Click exit or press escape to leave fullscreen.
- Click the left button to undo one move.
- Click the right button to redo a move.
- Use left and right arrow keys to undo and redo respectively.
- Shows a drown list of application features.
- Click the checkbox to toggle on/off
- Slider to adjust the turn speed of moves on the cube.
- Allows a cube to be inputted into the program to be solved.
- Support for the color picker works for all cubes.
- Support for the solve component work for 2x2 - 5x5.
- Support for bigger cubes coming soon.
- Select a color using either the mouse or keyboard by using the number beside the color.
- Click any sticker on the cube to change the color to the current one.
- When the cube is in a solvable state, the feedback panel will show a solve button.
- Choose from a selection of patterns.
- Selecting a pattern will automatically generate that pattern on the cube.
- Moves are selectable and the cube will jump to the selected move.
- The current move will be highlighted.
- Previous will go back one move.
- Next with go forward one move.
- Auto Rewind will continuously rewind until there are no moves left.
- Auto Forward will continuously forward until there are no moves left.
- Returns the cube back to its default state.
- Generates 25 random moves.
Solver will solve the current state of the cube and display the moves.
- Moves are selectable and the cube will jump to the selected move.
- The current move will be highlighted.
- Previous will go back one move.
- Next with go forward one move.
- Auto Rewind will continuously rewind until there are no moves left.
- Auto Forward will continuously forward until there are no moves left.
- Threejs - Library for displaying 3D graphics in the browser
- OrbitControls - "Orbit controls allow the camera to orbit around a target."
- Stats - "This class provides a simple info box that will help you monitor your code performance."
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify