Randomize demo cube scrambles

app.js

@@ -2,6 +2,9 @@
 
 const FACES = ["U", "R", "F", "D", "L", "B"];
 const FACE_NAMES = {U: "Top", R: "Right", F: "Front", D: "Bottom", L: "Left", B: "Back"};
+const FACE_AXES = {U: "Y", D: "Y", R: "X", L: "X", F: "Z", B: "Z"};
+const SCRAMBLE_SUFFIXES = ["", "'", "2"];
+const DEMO_SCRAMBLE_LENGTH = 20;
 const COLOR_PRESETS = [
   {name: "white", label: "White", hex: "#f4f4f5"},
   {name: "yellow", label: "Yellow", hex: "#facc15"},
@@ -103,6 +106,26 @@ const sleep = milliseconds => new Promise(resolve => setTimeout(resolve, millise
 const nextPaint = () => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
 const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
+function randomInteger(maximum) {
+  const values = new Uint32Array(1);
+  const limit = 0x100000000 - (0x100000000 % maximum);
+  do window.crypto.getRandomValues(values); while (values[0] >= limit);
+  return values[0] % maximum;
+}
+
+function randomScramble(length = DEMO_SCRAMBLE_LENGTH) {
+  const scramble = [];
+  let previousAxis = null;
+  for (let index = 0; index < length; index++) {
+    const availableFaces = FACES.filter(face => FACE_AXES[face] !== previousAxis);
+    const face = availableFaces[randomInteger(availableFaces.length)];
+    const suffix = SCRAMBLE_SUFFIXES[randomInteger(SCRAMBLE_SUFFIXES.length)];
+    scramble.push(`${face}${suffix}`);
+    previousAxis = FACE_AXES[face];
+  }
+  return scramble;
+}
+
 async function transitionTransform(element, transform, duration, easing = "cubic-bezier(.4,.01,.18,1)") {
   element.style.transition = `transform ${Math.round(duration)}ms ${easing}`;
   await nextPaint();
@@ -764,17 +787,17 @@ function loadSolvedCube() {
   chooseView("HOME");
 }
 
-function loadDemoCube() {
+function loadRandomDemoCube() {
   hideEntryMessage();
   try {
-    const scramble = ["R", "U", "F2", "L'", "D", "B2"];
+    const scramble = randomScramble();
     let canonical = FACES.map(face => face.repeat(9)).join("");
     scramble.forEach(move => canonical = applyCanonicalMove(canonical, move));
     replaceCubeState(coloredFacesFromCanonical(canonical, SOLVED_COLORS));
-    showEntryMessage(`Demo loaded: ${scramble.join(" ")}`, "success");
+    showEntryMessage(`Random demo loaded: ${scramble.join(" ")}`, "success");
     chooseView("HOME");
   } catch (error) {
-    showEntryMessage(error.message || "The demo cube could not be loaded.");
+    showEntryMessage(error.message || "A random demo cube could not be loaded.");
   }
 }
 
@@ -1056,7 +1079,7 @@ function initialize() {
   initializeCameraControls();
   $("clearBtn").addEventListener("click", clearCube);
   $("solvedBtn").addEventListener("click", loadSolvedCube);
-  $("demoBtn").addEventListener("click", loadDemoCube);
+  $("demoBtn").addEventListener("click", loadRandomDemoCube);
   $("solveBtn").addEventListener("click", solveCube);
   $("prevBtn").addEventListener("click", () => { stopPlayback(); stepSolution(-1); });
   $("nextBtn").addEventListener("click", () => { stopPlayback(); stepSolution(1); });

index.html

@@ -103,7 +103,7 @@
           <div class="preset-row">
             <button class="soft-btn" id="clearBtn">Clear</button>
             <button class="soft-btn" id="solvedBtn">Solved example</button>
-            <button class="soft-btn accent" id="demoBtn">Try demo</button>
+            <button class="soft-btn accent" id="demoBtn">Random demo</button>
           </div>
           <button class="solve-btn" id="solveBtn" disabled><span>Solve my cube</span><i>→</i></button>
           <div class="status-message" id="entryMessage" role="status" aria-live="polite"></div>
@@ -147,6 +147,6 @@
     <button class="remove-color" id="removeColor">Clear this sticker</button>
   </div>
 
-  <script src="./app.js?v=20260810-cube-v2" defer></script>
+  <script src="./app.js?v=20260810-random-demo-v1" defer></script>
 </body>
 </html>