Cube Guide

CubeGuide Devlog #1: Building the Input

Welcome to the first CubeGuide devlog.The goal of this project is pretty simple: make it easy for someone to enter what their real Rubik’s Cube looks like, and learn how to solve it.

Right now, I’m focusing on the input page. Before CubeGuide can solve anything, it needs a reliable way for users to copy their physical cube into the app. That means building the color picker, the 2D cube net, the sticker interactions, and the basic validation rules that make sure the cube state actually makes sense before solving starts.

HOW THE INPUT PAGE WORK

Each face is stored as a flat list of 9 stickers, and the center sticker is locked to that face’s fixed color. That matters because on a real Rubik’s Cube, the center pieces don’t move. They define which face is which.

Here is the shape of the current cube model:

type FaceName = “Up” | “Down” | “Front” | “Back” | “Left” | “Right”;

type CubeColor =
| “white”
| “yellow”
| “red”
| “orange”
| “blue”
| “green”
| “none”;

type CubeState = Record<FaceName, CubeColor[]>;

A few important details:

• Centers: the center sticker is fixed and cannot be painted over.
• Unset state: empty stickers use none, which renders as gray so it is easy to tell what still needs to be filled in.
• Interaction model: clicking paints a sticker, clicking the same selected color again clears it, and drag painting makes it faster to fill several stickers in a row.

WHAT’S ALREADY WORKING

The color picker lets users choose between white, yellow, red, orange, blue, green, and unset. The 2D cube net shows all six faces, with the center pieces already locked in place.

The main interaction is simple: pick a color, then click stickers to paint them. If a sticker already has the selected color, clicking it again clears it back to gray. I also added drag painting so entering a cube feels less repetitive, especially when several stickers have the same color.

There are also some convivence items:

• color picker: large color chips for white, yellow, red, orange, blue, green, and unset.
• 2D cube net: a full editable net for all six faces with locked centers.
• toggle to unset: clicking a sticker with the same selected color clears it back to gray.
• clear: clears all editable stickers and leaves unset selected.
• random: fills the 48 editable stickers with a valid shuffled distribution of exactly 8 of each color.
• export json: downloads the current cube state for later use.
• validation: checks the editable stickers only, so each color must appear exactly 8 times outside its center.

THE GOAL

CubeGuide should let someone look at their physical cube, enter it quickly, check that the state is valid, and then move directly into a clear step-by-step solving experience.