CubeTrainer

A web application that serves as a timer, scramble generator, and algorithm driller for speedcubers (people who try to solve a Rubik's cube as fast as possible).

Live Demo

How to run locally

Download or clone the Git repo from GitHub. Open the index.html file inside the repo. Make sure you are connected to the internet or the driller will not work.

Features

• A timer that times your Rubik's cube solves.
• A scramble generator that generates scrambles for you to time on the timer.
• A net of the cube (A.K.A. Drawing) displays the current scramble that the scramble generator generated.
• Solves are stored accross sessions, even after the page is closed or is refreshed.
• Settings, including the options to hide certain elements or change the theme of the website, are saved between sessions, even after page refresh.

How it Works

Timer

1. When the trigger button is pressed, the JavaScript value Date.now() records the current time.
2. Uses InnerHTML to change the trigger button's text from "start" to "stop" and from black to red.
3. When the trigger button is pressed again, the JavaScript value Date.now() records the current time.
4. The difference between the two values is calculated, and therefore returns the time in milliseconds.
5. Uses InnerHTML to change back the trigger button's text from "stop" to "start" and from red back to black.

Scramble Generator

1. Upon the page loading or the timer stopping, the scramble generator is told to generate a new scramble.
2. For each of the 20 moves in the scramble, a random basic move is picked (U, L, F, R, B, or D). At this stage there are no prime moves or double moves yet.
3. The chosen move is compared against the previous move. If it is the same move, a different one is picked. If it is not, it procedes.
4. A modifier is chosen (basic, prime, or two). A basic move is just a clockwise rotation, while a prime is a counterclockwise rotations and a two is two rotations (yes, it counts as one move).
5. InnerHTML is used to change the previous/filler scramble text into the actual scramble.

Cube Drawing (The Cube Net Thing)

1. An array is set up to store the positions of each sticker (not pieces cause I don't want to figure that out)
2. Functions for rotation of the top layer and rotatation of the entire cube are the base for every single other move.They work by switching the positions of the stickers in the array to simulate a normal, physical 3x3 cube.
3. A function, when called, analyzes the moves of the scramble, and does every single move in the scramble.
4. The array is then "rendered". That is too say that the actual cube net, (which was made using CSS and HTML) has each sticker on it updated according to it's correspondent in the array.

The Algorithm Driller

This took me SOOO long to make and I procrastinated making this for so long.

1. When driller mode is activated, the program fetches a JSON file with a algorithm set according to what the user selected, what the user last selected, or what appears first in the HTML list of selection options. The user can change the selected set at any time.
2. A scramble is generated by getting a random algorithm from the algorithm set and doing the reverse of it. This involves doing both the reverse of the specified move, and also reversing the sequence in which the moves are executed. For example, R U L' becomes L U' R'.

• If the selected set is stage EO of Roux, though, a prefix, or moves leading up to the actual scramble, is added after the scramble is flipped. This is because most EO algorithms don't solve the cube, but instead lead into two basic cases that solve all the edges to either be white or yellow.

3. InnerHTML is used to change the previous/filler scramble text into the actual scramble, like with the timer.

Local Storage

1. A object containing the scramble and time is added to a list inside an object once a scramble is completed.
2. The object containing the list of all stored scrambles is converted into a string and stored in local storage.
3. When the page is reloaded, the storaged scrambles are "fetched" from local storage and appear in the bottom left corner.

• Note that I only used local storage because I was too lazy to learn IndexedDB. Local storage has limitations of only being able to store 5-10MB, which should be enough for this project.

Credits

• AI was used to indentify bugs.
• Algorithm sets from sites like JPerm.net and Ruwix were converted into a readable format by AI because it would've taken forever to do manually, and would also be very prone to human error.
• The algorithms for Roux Edge Orientation (EO) were taken from the JPerm video: Rubik's Cube: Learn the Roux Method in 10 Minutes
• A bunch of code was stolen from my other project CubeOS
• W3Schools, GeeksForGeeks, and MDN Web Docs were helpful for researching what code to write because I'm still very inexperienced.
• CSTimer.net and JPerm.net were the inspirations for me even making this project. A large portion of this project is me trying to copy them lol.
• Ruwix Cube Solver helped me determine the fastest way to scramble a cube into the Roux EO position.
• Favicon Icon from Google Fonts, converted to .ico by Cloud Convert