Rubik

The problem

Speedcubing practice needs valid scrambles and a way to see each puzzle. Rubik generates official scrambles (WCA format) and shows the puzzle in 3D, from the classic cube to dodecahedra like the megaminx and gigaminx.

Highlights

1. 01Official scrambles and a 3D viewer with cubing.js, the cubing community's library, including its WebAssembly scramble generator.
2. 02No CDN dependency: the library ships with the site itself, so it keeps working if an external service goes down.
3. 03Practice mode with the 3D puzzle and a mode to view each puzzle, across many puzzle types.
4. 04Framework-free HTML, CSS and JavaScript, served from my homelab.

What I learned

• → 01Bundling a full library isn't just copying files: the scramble generator loads a WebAssembly module dynamically, and if that file is missing everything fails silently.
• → 02Test in more than one browser: a style that did nothing in Chromium broke the 3D in Firefox.
• → 03When the component is a black box (closed shadow DOM), automated screenshots are the best way to verify it actually renders.
• → 04Each puzzle has its own notation: some dodecahedron moves didn't animate and had to be translated to their equivalent form.