Spaces:
Running
Running
| ; | |
| 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"}, | |
| {name: "red", label: "Red", hex: "#ef4444"}, | |
| {name: "orange", label: "Orange", hex: "#f97316"}, | |
| {name: "blue", label: "Blue", hex: "#3b82f6"}, | |
| {name: "green", label: "Green", hex: "#22c55e"}, | |
| {name: "pink", label: "Pink", hex: "#ec4899"}, | |
| {name: "purple", label: "Purple", hex: "#a855f7"}, | |
| {name: "cyan", label: "Cyan", hex: "#06b6d4"}, | |
| {name: "teal", label: "Teal", hex: "#14b8a6"}, | |
| {name: "lime", label: "Lime", hex: "#84cc16"}, | |
| {name: "brown", label: "Brown", hex: "#92400e"}, | |
| {name: "black", label: "Black", hex: "#111827"}, | |
| {name: "gray", label: "Gray", hex: "#6b7280"}, | |
| {name: "magenta", label: "Magenta", hex: "#d946ef"}, | |
| {name: "maroon", label: "Maroon", hex: "#881337"}, | |
| {name: "navy", label: "Navy", hex: "#1e3a8a"}, | |
| {name: "gold", label: "Gold", hex: "#eab308"}, | |
| {name: "coral", label: "Coral", hex: "#fb7185"}, | |
| {name: "turquoise", label: "Turquoise", hex: "#2dd4bf"}, | |
| ]; | |
| const PRESET_MAP = Object.fromEntries(COLOR_PRESETS.map(color => [color.name, color])); | |
| let COLORS = [ | |
| {name: "blue", label: "Blue", hex: "#3b82f6"}, | |
| {name: "green", label: "Green", hex: "#22c55e"}, | |
| {name: "white", label: "White", hex: "#f4f4f5"}, | |
| {name: "pink", label: "Pink", hex: "#ec4899"}, | |
| {name: "yellow", label: "Yellow", hex: "#facc15"}, | |
| {name: "orange", label: "Orange", hex: "#f97316"}, | |
| ]; | |
| let COLOR_MAP = Object.fromEntries(COLORS.map(color => [color.name, color])); | |
| let SOLVED_COLORS = {U: "yellow", R: "orange", F: "white", D: "green", L: "blue", B: "pink"}; | |
| const TOPOLOGY_FACES = ["U", "R", "D", "L", "B"]; | |
| const CAMERA_PRESETS = { | |
| HOME: {x: -24, y: -36, label: "Free view"}, | |
| F: {x: -14, y: -8, label: "Front face"}, | |
| R: {x: -14, y: -82, label: "Right face"}, | |
| B: {x: -14, y: 172, label: "Back face"}, | |
| L: {x: -14, y: 82, label: "Left face"}, | |
| U: {x: -68, y: -10, label: "Top face"}, | |
| D: {x: 68, y: 10, label: "Bottom face"}, | |
| }; | |
| const CAMERA_UP_FACE = {F: "U", R: "U", B: "U", L: "U", U: "B", D: "F"}; | |
| const TURN_SPECS = { | |
| F: {axis: "Z", sign: 1, select: cubie => cubie.dataset.z === "1"}, | |
| B: {axis: "Z", sign: -1, select: cubie => cubie.dataset.z === "-1"}, | |
| R: {axis: "X", sign: 1, select: cubie => cubie.dataset.x === "1"}, | |
| L: {axis: "X", sign: -1, select: cubie => cubie.dataset.x === "-1"}, | |
| U: {axis: "Y", sign: -1, select: cubie => cubie.dataset.y === "1"}, | |
| D: {axis: "Y", sign: 1, select: cubie => cubie.dataset.y === "-1"}, | |
| }; | |
| const MOVE_TIMING = { | |
| announce: 650, | |
| cameraMin: 520, | |
| cameraMax: 1100, | |
| cameraPerDegree: 10, | |
| sameFaceCamera: 420, | |
| faceHold: 600, | |
| quarterTurn: 1350, | |
| halfTurn: 1800, | |
| settle: 420, | |
| betweenMoves: 520, | |
| }; | |
| const cube = Object.fromEntries(FACES.map(face => [face, Array(9).fill(null)])); | |
| function resetCubeToCenters() { | |
| FACES.forEach(face => { | |
| cube[face].fill(null); | |
| cube[face][4] = SOLVED_COLORS[face]; | |
| }); | |
| } | |
| resetCubeToCenters(); | |
| let inputMode = true; | |
| let solution = null; | |
| let frameIndex = 0; | |
| let selectedSticker = null; | |
| let camera = {...CAMERA_PRESETS.HOME}; | |
| let pointerStart = null; | |
| let dragging = false; | |
| let suppressStickerClick = false; | |
| let animating = false; | |
| let playing = false; | |
| let jumpVersion = 0; | |
| let menuGlobalListenersBound = false; | |
| let solverReady = false; | |
| let solverFailure = null; | |
| let solverWorker = null; | |
| let solverRequestId = 0; | |
| const solverPending = new Map(); | |
| let validationReturnFocus = null; | |
| const CUBE_INPUT_ERROR_CODES = new Set([ | |
| "input_type", "face_shape", "empty_sticker", "duplicate_centers", | |
| "color_multiplicity", "unknown_color", "piece_set", "corner_orientation", | |
| "edge_orientation", "corner_twist", "edge_flip", "parity", | |
| ]); | |
| const $ = id => document.getElementById(id); | |
| const sleep = milliseconds => new Promise(resolve => setTimeout(resolve, milliseconds)); | |
| 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(); | |
| element.style.transform = transform; | |
| await sleep(Math.round(duration) + 24); | |
| } | |
| function colorInfo(value) { | |
| return COLOR_MAP[String(value || "").toLowerCase()] || {name: value, label: String(value), hex: "#94a3b8"}; | |
| } | |
| function safeColorHex(value) { | |
| return /^#[0-9a-f]{6}$/i.test(String(value)) ? String(value) : "#94a3b8"; | |
| } | |
| function axisOffset(value) { | |
| if (value === 0) return "0px"; | |
| return value > 0 ? "var(--step)" : "calc(var(--step) * -1)"; | |
| } | |
| function faceletIndex(face, x, y, z) { | |
| if (face === "U") return (z + 1) * 3 + (x + 1); | |
| if (face === "D") return (1 - z) * 3 + (x + 1); | |
| if (face === "F") return (1 - y) * 3 + (x + 1); | |
| if (face === "B") return (1 - y) * 3 + (1 - x); | |
| if (face === "R") return (1 - y) * 3 + (1 - z); | |
| return (1 - y) * 3 + (z + 1); | |
| } | |
| const FACE_OFFSETS = Object.fromEntries(FACES.map((face, index) => [face, index * 9])); | |
| const FACE_NORMALS = { | |
| U: [0, 1, 0], R: [1, 0, 0], F: [0, 0, 1], | |
| D: [0, -1, 0], L: [-1, 0, 0], B: [0, 0, -1], | |
| }; | |
| function stickerGeometry(face, index) { | |
| const row = Math.floor(index / 3); | |
| const column = index % 3; | |
| if (face === "U") return {position: [column - 1, 1, row - 1], normal: FACE_NORMALS.U}; | |
| if (face === "D") return {position: [column - 1, -1, 1 - row], normal: FACE_NORMALS.D}; | |
| if (face === "F") return {position: [column - 1, 1 - row, 1], normal: FACE_NORMALS.F}; | |
| if (face === "B") return {position: [1 - column, 1 - row, -1], normal: FACE_NORMALS.B}; | |
| if (face === "R") return {position: [1, 1 - row, 1 - column], normal: FACE_NORMALS.R}; | |
| return {position: [-1, 1 - row, column - 1], normal: FACE_NORMALS.L}; | |
| } | |
| function geometryKey(position, normal) { | |
| return `${position.join(",")}|${normal.join(",")}`; | |
| } | |
| const FACELET_LOOKUP = new Map(); | |
| FACES.forEach(face => { | |
| for (let index = 0; index < 9; index++) { | |
| const geometry = stickerGeometry(face, index); | |
| FACELET_LOOKUP.set(geometryKey(geometry.position, geometry.normal), FACE_OFFSETS[face] + index); | |
| } | |
| }); | |
| function rotateClockwise(vector, face) { | |
| const [x, y, z] = vector; | |
| if (face === "F") return [y, -x, z]; | |
| if (face === "B") return [-y, x, z]; | |
| if (face === "R") return [x, z, -y]; | |
| if (face === "L") return [x, -z, y]; | |
| if (face === "U") return [-z, y, x]; | |
| return [z, y, -x]; | |
| } | |
| const QUARTER_TURN_PERMUTATIONS = Object.fromEntries(FACES.map(face => { | |
| const normal = FACE_NORMALS[face]; | |
| const permutation = Array.from({length: 54}, (_, index) => index); | |
| FACES.forEach(sourceFace => { | |
| for (let sourceIndex = 0; sourceIndex < 9; sourceIndex++) { | |
| const source = FACE_OFFSETS[sourceFace] + sourceIndex; | |
| const geometry = stickerGeometry(sourceFace, sourceIndex); | |
| const onLayer = geometry.position[0] * normal[0] | |
| + geometry.position[1] * normal[1] | |
| + geometry.position[2] * normal[2] === 1; | |
| if (!onLayer) continue; | |
| const targetPosition = rotateClockwise(geometry.position, face); | |
| const targetNormal = rotateClockwise(geometry.normal, face); | |
| const target = FACELET_LOOKUP.get(geometryKey(targetPosition, targetNormal)); | |
| if (target === undefined) throw new Error(`Internal facelet mapping failed for ${face}.`); | |
| permutation[source] = target; | |
| } | |
| }); | |
| return [face, permutation]; | |
| })); | |
| function applyCanonicalMove(canonical, move) { | |
| if (typeof canonical !== "string" || canonical.length !== 54 || !/^[URFDLB](?:2|')?$/.test(move)) { | |
| throw new Error("The solution contained invalid cube data."); | |
| } | |
| const face = move[0]; | |
| const turns = move.endsWith("2") ? 2 : move.endsWith("'") ? 3 : 1; | |
| let state = canonical.split(""); | |
| const permutation = QUARTER_TURN_PERMUTATIONS[face]; | |
| for (let turn = 0; turn < turns; turn++) { | |
| const next = Array(54); | |
| for (let source = 0; source < 54; source++) next[permutation[source]] = state[source]; | |
| state = next; | |
| } | |
| return state.join(""); | |
| } | |
| function coloredFacesFromCanonical(canonical, faceToColor) { | |
| return Object.fromEntries(FACES.map((face, faceIndex) => [ | |
| face, | |
| [...canonical.slice(faceIndex * 9, faceIndex * 9 + 9)].map(value => faceToColor[value]), | |
| ])); | |
| } | |
| function moveInstruction(index, move) { | |
| const face = move[0]; | |
| const turns = move.endsWith("2") ? 2 : move.endsWith("'") ? -1 : 1; | |
| const text = Math.abs(turns) === 2 | |
| ? `Turn the ${FACE_NAMES[face]} face 180 degrees.` | |
| : `Turn the ${FACE_NAMES[face]} face ${turns > 0 ? "clockwise" : "counterclockwise"} 90 degrees.`; | |
| return { | |
| index, | |
| move, | |
| text, | |
| camera: {transition: "rotate_cube_to_face", front_face: face, up_face: CAMERA_UP_FACE[face], center_identity: face}, | |
| turn: {layer: face, reference: "clockwise_when_viewed_directly_at_the_face", clockwise_quarter_turns: turns, absolute_degrees: Math.abs(turns) === 2 ? 180 : 90}, | |
| before_frame: index - 1, | |
| after_frame: index, | |
| }; | |
| } | |
| function buildVerifiedSolution(workerResult) { | |
| const solved = FACES.map(face => face.repeat(9)).join(""); | |
| let canonical = workerResult.canonical; | |
| const frames = [{index: 0, last_move: null, canonical_facelets: canonical, faces: coloredFacesFromCanonical(canonical, workerResult.faceToColor), solved: canonical === solved}]; | |
| const instructions = []; | |
| workerResult.moves.forEach((move, moveIndex) => { | |
| canonical = applyCanonicalMove(canonical, move); | |
| frames.push({index: moveIndex + 1, last_move: move, canonical_facelets: canonical, faces: coloredFacesFromCanonical(canonical, workerResult.faceToColor), solved: canonical === solved}); | |
| instructions.push(moveInstruction(moveIndex + 1, move)); | |
| }); | |
| if (canonical !== solved) { | |
| throw new Error("Safety check failed: the proposed moves did not solve the entered cube. No steps were shown."); | |
| } | |
| return { | |
| ok: true, | |
| valid: true, | |
| solver: {algorithm: "deterministic_two_phase_worker", trained: false, deterministic_search: true, optimality_guaranteed: false, search_seconds: workerResult.searchSeconds}, | |
| moves: workerResult.moves, | |
| move_count: workerResult.moves.length, | |
| instructions, | |
| frames, | |
| final_canonical_facelets: canonical, | |
| solved: true, | |
| }; | |
| } | |
| function setRuntimeStatus(status, text) { | |
| const pill = $("runtimePill"); | |
| pill.classList.remove("ready", "error"); | |
| if (status === "ready") pill.classList.add("ready"); | |
| if (status === "error") pill.classList.add("error"); | |
| $("runtimeText").textContent = text; | |
| pill.title = status === "error" && solverFailure ? solverFailure : text; | |
| } | |
| function rejectPendingSolverRequests(message) { | |
| solverPending.forEach(({reject, timeout}) => { | |
| clearTimeout(timeout); | |
| reject(new Error(message)); | |
| }); | |
| solverPending.clear(); | |
| } | |
| function initializeSolver() { | |
| if (!("Worker" in window)) { | |
| solverFailure = "This browser does not support Web Workers. Please use a current Chrome, Edge, Firefox, or Safari."; | |
| setRuntimeStatus("error", "Browser unsupported"); | |
| updateEntryStatus(); | |
| return; | |
| } | |
| setRuntimeStatus("preparing", "Preparing browser solver…"); | |
| const workerUrl = new URL("./solver-worker.js", window.location.href); | |
| workerUrl.searchParams.set("v", "20260810-cube-v2"); | |
| const privateSignature = new URLSearchParams(window.location.search).get("__sign"); | |
| if (privateSignature) workerUrl.searchParams.set("__sign", privateSignature); | |
| solverWorker = new Worker(workerUrl); | |
| solverWorker.addEventListener("message", event => { | |
| const message = event.data || {}; | |
| if (message.type === "status") { | |
| if (message.status === "ready") { | |
| solverReady = true; | |
| solverFailure = null; | |
| setRuntimeStatus("ready", "Solver ready · on-device"); | |
| } else if (message.status === "error") { | |
| solverReady = false; | |
| solverFailure = message.message || "The browser solver could not initialize."; | |
| console.error(solverFailure); | |
| setRuntimeStatus("error", "Solver unavailable"); | |
| rejectPendingSolverRequests(solverFailure); | |
| } else { | |
| setRuntimeStatus("preparing", message.message || "Building solve tables…"); | |
| } | |
| updateEntryStatus(); | |
| return; | |
| } | |
| if (message.type !== "result") return; | |
| const pending = solverPending.get(message.id); | |
| if (!pending) return; | |
| clearTimeout(pending.timeout); | |
| solverPending.delete(message.id); | |
| if (message.ok) pending.resolve(message); | |
| else pending.reject(Object.assign(new Error(message.error?.message || "The cube could not be solved."), {code: message.error?.code})); | |
| }); | |
| solverWorker.addEventListener("error", event => { | |
| solverReady = false; | |
| const detail = event && event.message ? ` (${event.message})` : ""; | |
| solverFailure = `The browser solver stopped unexpectedly${detail}. Reload the page to try again.`; | |
| console.error(solverFailure); | |
| setRuntimeStatus("error", "Solver unavailable"); | |
| rejectPendingSolverRequests(solverFailure); | |
| updateEntryStatus(); | |
| }); | |
| solverWorker.postMessage({type: "init"}); | |
| } | |
| function requestWorkerSolve(cubeInput) { | |
| return new Promise((resolve, reject) => { | |
| if (!solverReady || !solverWorker) { | |
| reject(new Error(solverFailure || "The browser solver is still preparing. Please wait a moment.")); | |
| return; | |
| } | |
| const id = ++solverRequestId; | |
| const timeout = setTimeout(() => { | |
| solverPending.delete(id); | |
| reject(new Error("This solve took too long. Please reload and recheck the entered cube.")); | |
| }, 60000); | |
| solverPending.set(id, {resolve, reject, timeout}); | |
| solverWorker.postMessage({type: "solve", id, cube: cubeInput}); | |
| }); | |
| } | |
| function stickerPositionName(index) { | |
| if (index === 4) return "center"; | |
| const rows = ["top", "middle", "bottom"]; | |
| const columns = ["left", "middle", "right"]; | |
| return `${rows[Math.floor(index / 3)]} ${columns[index % 3]}`; | |
| } | |
| function addPlasticFaces(cubie) { | |
| FACES.forEach(face => { | |
| const side = document.createElement("div"); | |
| side.className = `plastic-face surface-${face}`; | |
| cubie.append(side); | |
| }); | |
| } | |
| function setStickerAppearance(sticker, value) { | |
| if (!value) { | |
| sticker.style.background = "linear-gradient(145deg, #343947, #242833)"; | |
| sticker.dataset.color = ""; | |
| return; | |
| } | |
| const color = colorInfo(value); | |
| sticker.style.background = `linear-gradient(145deg, color-mix(in srgb, ${color.hex}, white 14%), ${color.hex} 58%, color-mix(in srgb, ${color.hex}, black 12%))`; | |
| sticker.dataset.color = color.name; | |
| } | |
| function addSticker(cubie, face, index, state, interactive) { | |
| const sticker = document.createElement("button"); | |
| const value = state[face][index]; | |
| const editable = interactive && index !== 4; | |
| sticker.className = `cube-sticker surface-${face}${editable ? "" : " locked"}${interactive && index === 4 ? " center-fixed" : ""}`; | |
| sticker.type = "button"; | |
| sticker.dataset.face = face; | |
| sticker.dataset.index = String(index); | |
| sticker.setAttribute("aria-label", `${FACE_NAMES[face]} face, ${stickerPositionName(index)} sticker${value ? `, ${colorInfo(value).label}` : ", uncolored"}${interactive && index === 4 ? ", fixed by cube setup" : ""}`); | |
| setStickerAppearance(sticker, value); | |
| if (editable) { | |
| sticker.addEventListener("click", event => { | |
| if (suppressStickerClick || dragging) return; | |
| openColorMenu(face, index, event); | |
| }); | |
| } | |
| cubie.append(sticker); | |
| } | |
| function renderCube(state = cube, interactive = inputMode) { | |
| const root = $("cube3d"); | |
| root.replaceChildren(); | |
| for (let x = -1; x <= 1; x++) { | |
| for (let y = -1; y <= 1; y++) { | |
| for (let z = -1; z <= 1; z++) { | |
| const cubie = document.createElement("div"); | |
| cubie.className = "cubie"; | |
| cubie.dataset.x = String(x); | |
| cubie.dataset.y = String(y); | |
| cubie.dataset.z = String(z); | |
| cubie.style.transform = `translate3d(${axisOffset(x)}, ${axisOffset(-y)}, ${axisOffset(z)})`; | |
| addPlasticFaces(cubie); | |
| if (y === 1) addSticker(cubie, "U", faceletIndex("U", x, y, z), state, interactive); | |
| if (y === -1) addSticker(cubie, "D", faceletIndex("D", x, y, z), state, interactive); | |
| if (z === 1) addSticker(cubie, "F", faceletIndex("F", x, y, z), state, interactive); | |
| if (z === -1) addSticker(cubie, "B", faceletIndex("B", x, y, z), state, interactive); | |
| if (x === 1) addSticker(cubie, "R", faceletIndex("R", x, y, z), state, interactive); | |
| if (x === -1) addSticker(cubie, "L", faceletIndex("L", x, y, z), state, interactive); | |
| root.append(cubie); | |
| } | |
| } | |
| } | |
| } | |
| function applyCamera(animated = true) { | |
| const rig = $("cubeRig"); | |
| rig.classList.toggle("no-transition", !animated); | |
| rig.style.transform = `rotateX(${camera.x}deg) rotateY(${camera.y}deg)`; | |
| } | |
| function chooseView(face, animated = true) { | |
| const preset = CAMERA_PRESETS[face] || CAMERA_PRESETS.HOME; | |
| camera = {...preset}; | |
| applyCamera(animated); | |
| $("viewLabel").textContent = preset.label; | |
| document.querySelectorAll("[data-view]").forEach(button => button.classList.toggle("active", button.dataset.view === face)); | |
| } | |
| function nearestAngle(current, target) { | |
| let candidate = target; | |
| while (candidate - current > 180) candidate -= 360; | |
| while (candidate - current < -180) candidate += 360; | |
| return candidate; | |
| } | |
| function cameraTransform(value) { | |
| return `rotateX(${value.x}deg) rotateY(${value.y}deg)`; | |
| } | |
| function cameraSegmentDuration(start, target) { | |
| const distance = Math.hypot(target.x - start.x, target.y - start.y); | |
| return Math.round(Math.max(MOVE_TIMING.cameraMin, Math.min(MOVE_TIMING.cameraMax, distance * MOVE_TIMING.cameraPerDegree))); | |
| } | |
| function sameCameraPosition(left, right) { | |
| return Math.hypot(left.x - right.x, left.y - right.y) < .6; | |
| } | |
| function cameraTravelStages(start, target) { | |
| const stages = []; | |
| let current = {...start}; | |
| const sidePitch = -14; | |
| const startIsVertical = Math.abs(current.x) > 48; | |
| const targetIsVertical = Math.abs(target.x) > 48; | |
| // Human hands reorient a cube around one principal axis at a time. First | |
| // return a top/bottom view to a side view, then yaw to the requested face, | |
| // and only then pitch into a new top/bottom view. | |
| if (startIsVertical) { | |
| current = {x: sidePitch, y: current.y}; | |
| stages.push(current); | |
| } | |
| if (Math.abs(target.y - current.y) >= .6) { | |
| current = {x: targetIsVertical ? sidePitch : target.x, y: target.y}; | |
| stages.push(current); | |
| } | |
| if (Math.abs(target.x - current.x) >= .6) stages.push({...target}); | |
| if (!stages.length && !sameCameraPosition(start, target)) stages.push({...target}); | |
| return stages; | |
| } | |
| async function animateCameraToFace(face) { | |
| const preset = CAMERA_PRESETS[face] || CAMERA_PRESETS.HOME; | |
| const start = {...camera}; | |
| const target = { | |
| ...preset, | |
| x: nearestAngle(start.x, preset.x), | |
| y: nearestAngle(start.y, preset.y), | |
| }; | |
| camera = target; | |
| $("viewLabel").textContent = preset.label; | |
| document.querySelectorAll("[data-view]").forEach(button => button.classList.toggle("active", button.dataset.view === face)); | |
| const rig = $("cubeRig"); | |
| rig.classList.add("no-transition"); | |
| const vertical = face === "U" || face === "D"; | |
| $("cubeViewport").dataset.travelAxis = vertical ? "vertical" : "horizontal"; | |
| rig.style.transform = cameraTransform(start); | |
| await nextPaint(); | |
| if (sameCameraPosition(start, target)) { | |
| await sleep(MOVE_TIMING.sameFaceCamera); | |
| } else { | |
| let segmentStart = start; | |
| for (const stage of cameraTravelStages(start, target)) { | |
| await transitionTransform(rig, cameraTransform(stage), cameraSegmentDuration(segmentStart, stage), "cubic-bezier(.25,.72,.28,1)"); | |
| segmentStart = stage; | |
| } | |
| } | |
| rig.style.transform = cameraTransform(target); | |
| rig.style.transition = ""; | |
| } | |
| function initializeCameraControls() { | |
| const viewport = $("cubeViewport"); | |
| viewport.addEventListener("pointerdown", event => { | |
| if (animating || event.button !== 0) return; | |
| pointerStart = {x: event.clientX, y: event.clientY, cameraX: camera.x, cameraY: camera.y}; | |
| dragging = false; | |
| }); | |
| viewport.addEventListener("pointermove", event => { | |
| if (!pointerStart || animating) return; | |
| const dx = event.clientX - pointerStart.x; | |
| const dy = event.clientY - pointerStart.y; | |
| if (Math.hypot(dx, dy) < 5 && !dragging) return; | |
| dragging = true; | |
| if (!viewport.hasPointerCapture(event.pointerId)) viewport.setPointerCapture(event.pointerId); | |
| suppressStickerClick = true; | |
| viewport.classList.add("dragging"); | |
| camera.x = Math.max(-88, Math.min(88, pointerStart.cameraX - dy * .42)); | |
| camera.y = pointerStart.cameraY + dx * .46; | |
| camera.label = "Free view"; | |
| $("viewLabel").textContent = "Free view"; | |
| document.querySelectorAll("[data-view]").forEach(button => button.classList.remove("active")); | |
| applyCamera(false); | |
| }); | |
| const finishDrag = event => { | |
| if (!pointerStart) return; | |
| if (viewport.hasPointerCapture(event.pointerId)) viewport.releasePointerCapture(event.pointerId); | |
| pointerStart = null; | |
| viewport.classList.remove("dragging"); | |
| if (dragging) setTimeout(() => suppressStickerClick = false, 80); | |
| dragging = false; | |
| }; | |
| viewport.addEventListener("pointerup", finishDrag); | |
| viewport.addEventListener("pointercancel", finishDrag); | |
| document.querySelectorAll("[data-view]").forEach(button => button.addEventListener("click", () => { | |
| if (!animating) chooseView(button.dataset.view); | |
| })); | |
| } | |
| function buildColorMenu() { | |
| const options = $("colorOptions"); | |
| options.replaceChildren(); | |
| COLORS.forEach(color => { | |
| const button = document.createElement("button"); | |
| button.className = "color-option"; | |
| button.dataset.color = color.name; | |
| const swatch = document.createElement("i"); | |
| swatch.style.background = safeColorHex(color.hex); | |
| const label = document.createElement("span"); | |
| label.textContent = color.label; | |
| const count = document.createElement("b"); | |
| count.className = "color-option-count"; | |
| button.append(swatch, label, count); | |
| options.append(button); | |
| }); | |
| $("colorOptions").querySelectorAll(".color-option").forEach(button => button.addEventListener("click", () => { | |
| if (!selectedSticker || button.disabled) return; | |
| cube[selectedSticker.face][selectedSticker.index] = button.dataset.color; | |
| closeColorMenu(); | |
| renderCube(cube, true); | |
| updateEntryStatus(); | |
| })); | |
| if (!menuGlobalListenersBound) { | |
| menuGlobalListenersBound = true; | |
| $("removeColor").addEventListener("click", () => { | |
| if (!selectedSticker) return; | |
| cube[selectedSticker.face][selectedSticker.index] = null; | |
| closeColorMenu(); | |
| renderCube(cube, true); | |
| updateEntryStatus(); | |
| }); | |
| $("closeColorMenu").addEventListener("click", closeColorMenu); | |
| document.addEventListener("pointerdown", event => { | |
| if (!$("colorMenu").hidden && !$("colorMenu").contains(event.target) && !event.target.closest(".cube-sticker")) closeColorMenu(); | |
| }); | |
| document.addEventListener("keydown", event => { | |
| if (event.key === "Escape" && !$("validationModal").hidden) { | |
| closeValidationModal(); | |
| return; | |
| } | |
| if (event.key === "Escape") closeColorMenu(); | |
| if (!solution) return; | |
| if (event.key === "ArrowRight") { event.preventDefault(); stepSolution(1); } | |
| if (event.key === "ArrowLeft") { event.preventDefault(); stepSolution(-1); } | |
| }); | |
| } | |
| } | |
| function buildSchemeEditor() { | |
| const palette = $("paletteEditor"); | |
| palette.replaceChildren(); | |
| COLORS.forEach(color => { | |
| const row = document.createElement("label"); | |
| row.className = "palette-slot"; | |
| row.dataset.color = color.name; | |
| const swatch = document.createElement("i"); | |
| const select = document.createElement("select"); | |
| select.dataset.paletteChoice = color.name; | |
| select.setAttribute("aria-label", `${color.label} palette color`); | |
| const currentPreset = COLOR_PRESETS.find(preset => preset.label.toLowerCase() === color.label.toLowerCase()) || PRESET_MAP[color.name] || COLOR_PRESETS[0]; | |
| const choices = color.name === "white" ? [PRESET_MAP.white] : COLOR_PRESETS.filter(preset => preset.name !== "white"); | |
| choices.forEach(preset => { | |
| const option = document.createElement("option"); | |
| option.value = preset.name; | |
| option.textContent = preset.label; | |
| option.selected = preset.name === currentPreset.name; | |
| select.append(option); | |
| }); | |
| if (color.name === "white") { | |
| select.disabled = true; | |
| select.title = "White is the fixed front reference."; | |
| } | |
| row.append(swatch, select); | |
| palette.append(row); | |
| }); | |
| const topology = $("topologyGrid"); | |
| topology.replaceChildren(); | |
| TOPOLOGY_FACES.forEach(face => { | |
| const field = document.createElement("label"); | |
| field.innerHTML = `<span>${FACE_NAMES[face]} center</span>`; | |
| const select = document.createElement("select"); | |
| select.dataset.topologyFace = face; | |
| select.setAttribute("aria-label", `${FACE_NAMES[face]} center color`); | |
| COLORS.filter(color => color.name !== "white").forEach(color => { | |
| const option = document.createElement("option"); | |
| option.value = color.name; | |
| option.textContent = color.label; | |
| option.selected = SOLVED_COLORS[face] === color.name; | |
| select.append(option); | |
| }); | |
| field.append(select); | |
| topology.append(field); | |
| }); | |
| palette.querySelectorAll("select").forEach(select => select.addEventListener("change", previewSchemeEditor)); | |
| previewSchemeEditor(); | |
| } | |
| function previewSchemeEditor() { | |
| const draftColors = Object.fromEntries(COLORS.map(color => { | |
| const select = document.querySelector(`[data-palette-choice="${color.name}"]`); | |
| const preset = PRESET_MAP[select?.value] || color; | |
| const swatch = document.querySelector(`.palette-slot[data-color="${color.name}"] > i`); | |
| if (swatch) swatch.style.background = safeColorHex(preset.hex); | |
| return [color.name, preset]; | |
| })); | |
| document.querySelectorAll("[data-topology-face]").forEach(select => { | |
| [...select.options].forEach(option => option.textContent = draftColors[option.value]?.label || option.value); | |
| }); | |
| $("referenceSwatch").style.background = safeColorHex(draftColors.white?.hex || COLOR_MAP.white.hex); | |
| } | |
| function schemeDescription() { | |
| return `${colorInfo(SOLVED_COLORS.F).label} front · ${colorInfo(SOLVED_COLORS.U).label} top · ${colorInfo(SOLVED_COLORS.R).label} right`; | |
| } | |
| function applyScheme() { | |
| const selectedPresets = {}; | |
| COLORS.forEach(color => { | |
| const select = document.querySelector(`[data-palette-choice="${color.name}"]`); | |
| selectedPresets[color.name] = PRESET_MAP[select.value]; | |
| }); | |
| if (new Set(Object.values(selectedPresets).map(preset => preset.name)).size !== 6) { | |
| $("schemeError").textContent = "Choose six different colors—each color can be used only once."; | |
| return; | |
| } | |
| const nextTopology = {F: "white"}; | |
| document.querySelectorAll("[data-topology-face]").forEach(select => nextTopology[select.dataset.topologyFace] = select.value); | |
| if (new Set(Object.values(nextTopology)).size !== 6) { | |
| $("schemeError").textContent = "Each center color must be used exactly once in the topology."; | |
| return; | |
| } | |
| COLORS = COLORS.map(color => ({...color, label: selectedPresets[color.name].label, hex: selectedPresets[color.name].hex})); | |
| COLOR_MAP = Object.fromEntries(COLORS.map(color => [color.name, color])); | |
| SOLVED_COLORS = nextTopology; | |
| $("schemeError").textContent = ""; | |
| $("schemeSummary").textContent = schemeDescription(); | |
| buildColorMenu(); | |
| resetCubeToCenters(); | |
| closeColorMenu(); | |
| renderCube(cube, true); | |
| updateEntryStatus(); | |
| hideEntryMessage(); | |
| chooseView("HOME"); | |
| $("schemeCard").open = false; | |
| showEntryMessage("Cube setup applied. Keep White facing you while copying stickers.", "success"); | |
| } | |
| function openColorMenu(face, index, event) { | |
| if (!inputMode) return; | |
| selectedSticker = {face, index}; | |
| updateColorOptionAvailability(); | |
| document.querySelectorAll(".cube-sticker").forEach(sticker => sticker.classList.toggle("selected", sticker.dataset.face === face && Number(sticker.dataset.index) === index)); | |
| $("colorMenuTitle").textContent = `${FACE_NAMES[face]} · ${stickerPositionName(index)}`; | |
| const menu = $("colorMenu"); | |
| menu.hidden = false; | |
| const width = 285; | |
| const approximateHeight = 220; | |
| menu.style.left = `${Math.max(12, Math.min(window.innerWidth - width - 12, event.clientX + 14))}px`; | |
| menu.style.top = `${Math.max(12, Math.min(window.innerHeight - approximateHeight - 12, event.clientY - 40))}px`; | |
| const firstOption = menu.querySelector(".color-option"); | |
| if (firstOption) firstOption.focus({preventScroll: true}); | |
| } | |
| function closeColorMenu() { | |
| $("colorMenu").hidden = true; | |
| selectedSticker = null; | |
| document.querySelectorAll(".cube-sticker.selected").forEach(sticker => sticker.classList.remove("selected")); | |
| } | |
| function colorCounts() { | |
| const counts = Object.fromEntries(COLORS.map(color => [color.name, 0])); | |
| let filled = 0; | |
| FACES.forEach(face => cube[face].forEach(value => { | |
| if (!value) return; | |
| filled++; | |
| counts[value] = (counts[value] || 0) + 1; | |
| })); | |
| return {counts, filled}; | |
| } | |
| function updateColorOptionAvailability() { | |
| const {counts} = colorCounts(); | |
| const currentColor = selectedSticker ? cube[selectedSticker.face][selectedSticker.index] : null; | |
| $("colorOptions").querySelectorAll(".color-option").forEach(button => { | |
| const color = button.dataset.color; | |
| const isCurrent = color === currentColor; | |
| const isFull = counts[color] >= 9; | |
| const unavailable = isFull && !isCurrent; | |
| button.disabled = unavailable; | |
| button.classList.toggle("current", isCurrent); | |
| button.classList.toggle("exhausted", unavailable); | |
| button.setAttribute("aria-disabled", String(unavailable)); | |
| button.querySelector(".color-option-count").textContent = `${counts[color]}/9`; | |
| button.title = unavailable | |
| ? `${colorInfo(color).label} is already used on all nine stickers.` | |
| : isCurrent ? `${colorInfo(color).label} is the current sticker color.` : ""; | |
| }); | |
| } | |
| function updateEntryStatus() { | |
| const {counts, filled} = colorCounts(); | |
| const percent = Math.round(filled / 54 * 100); | |
| $("progressLabel").textContent = `${filled} of 54 stickers`; | |
| $("progressPercent").textContent = `${percent}%`; | |
| $("entryProgress").style.width = `${percent}%`; | |
| const centers = FACES.map(face => cube[face][4]).filter(Boolean); | |
| const distinctCenters = centers.length === 6 && new Set(centers).size === 6; | |
| const balanced = COLORS.every(color => counts[color.name] === 9); | |
| const ready = filled === 54 && balanced && distinctCenters; | |
| $("solveBtn").disabled = !ready || !solverReady; | |
| const message = $("guideMessage").querySelector("p"); | |
| if (centers.length < 6) message.textContent = `Start with the six center stickers. ${6 - centers.length} center${6 - centers.length === 1 ? "" : "s"} still need a color.`; | |
| else if (!distinctCenters) message.textContent = "Each center needs a different color. Click a repeated center to change it."; | |
| else if (filled < 54) message.textContent = `Centers are done—great. Keep clicking stickers; ${54 - filled} remain.`; | |
| else if (!balanced) message.textContent = "Almost there. Open a sticker and check the color counts inside the picker."; | |
| else if (!solverReady) message.textContent = "Everything is filled correctly. The on-device solver is still preparing its lookup tables."; | |
| else message.textContent = "Everything is filled correctly. Click Solve my cube for the physical check and solution."; | |
| } | |
| function showEntryMessage(text, kind = "error") { | |
| const element = $("entryMessage"); | |
| element.textContent = text; | |
| element.className = `status-message show ${kind}`; | |
| } | |
| function hideEntryMessage() { | |
| $("entryMessage").className = "status-message"; | |
| } | |
| function showValidationModal(message) { | |
| closeColorMenu(); | |
| validationReturnFocus = document.activeElement; | |
| $("validationMessage").textContent = message; | |
| $("validationModal").hidden = false; | |
| document.body.classList.add("modal-open"); | |
| requestAnimationFrame(() => $("validationReviewBtn").focus({preventScroll: true})); | |
| } | |
| function closeValidationModal() { | |
| if ($("validationModal").hidden) return; | |
| $("validationModal").hidden = true; | |
| document.body.classList.remove("modal-open"); | |
| if (validationReturnFocus && typeof validationReturnFocus.focus === "function") { | |
| validationReturnFocus.focus({preventScroll: true}); | |
| } | |
| validationReturnFocus = null; | |
| } | |
| function replaceCubeState(nextState) { | |
| FACES.forEach(face => cube[face] = [...nextState[face]].flat(Infinity)); | |
| renderCube(cube, true); | |
| updateEntryStatus(); | |
| } | |
| function loadSolvedCube() { | |
| const state = Object.fromEntries(FACES.map(face => [face, Array(9).fill(SOLVED_COLORS[face])])); | |
| replaceCubeState(state); | |
| hideEntryMessage(); | |
| chooseView("HOME"); | |
| } | |
| function loadRandomDemoCube() { | |
| hideEntryMessage(); | |
| try { | |
| 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(`Random demo loaded: ${scramble.join(" ")}`, "success"); | |
| chooseView("HOME"); | |
| } catch (error) { | |
| showEntryMessage(error.message || "A random demo cube could not be loaded."); | |
| } | |
| } | |
| function clearCube() { | |
| resetCubeToCenters(); | |
| closeColorMenu(); | |
| renderCube(cube, true); | |
| updateEntryStatus(); | |
| hideEntryMessage(); | |
| chooseView("HOME"); | |
| } | |
| async function solveCube() { | |
| hideEntryMessage(); | |
| const button = $("solveBtn"); | |
| if (button.disabled) return; | |
| button.disabled = true; | |
| button.classList.add("busy"); | |
| try { | |
| const workerResult = await requestWorkerSolve(Object.fromEntries(FACES.map(face => [face, [...cube[face]]]))); | |
| const result = buildVerifiedSolution(workerResult); | |
| enterSolutionMode(result); | |
| } catch (error) { | |
| const message = error.message || "The solver request failed. Please try again."; | |
| if (CUBE_INPUT_ERROR_CODES.has(error.code)) showValidationModal(message); | |
| else showEntryMessage(message); | |
| } finally { | |
| button.classList.remove("busy"); | |
| updateEntryStatus(); | |
| } | |
| } | |
| function frameState(frame) { | |
| return Object.fromEntries(FACES.map(face => [face, [...frame.faces[face]].flat(Infinity)])); | |
| } | |
| function enterSolutionMode(result) { | |
| solution = result; | |
| frameIndex = 0; | |
| inputMode = false; | |
| playing = false; | |
| closeColorMenu(); | |
| $("entryPanel").hidden = true; | |
| $("solutionPanel").hidden = false; | |
| $("timelineCard").hidden = false; | |
| $("stageTitle").textContent = "Watch the cube solve"; | |
| $("dragHint").innerHTML = "<span>↔</span> Drag to inspect between turns"; | |
| $("solutionSummary").textContent = result.move_count ? `${result.move_count}-move solution ready` : "Already solved"; | |
| $("moveCount").textContent = String(result.move_count); | |
| $("searchTime").textContent = `${Number(result.solver.search_seconds).toFixed(3)}s`; | |
| $("timeline").innerHTML = result.moves.length ? result.moves.map((move, index) => `<button class="move-chip" data-step="${index + 1}" title="Play through step ${index + 1}">${move}</button>`).join("") : "<span>No turns needed</span>"; | |
| $("timeline").querySelectorAll(".move-chip").forEach(chip => chip.addEventListener("click", () => playToStep(Number(chip.dataset.step)))); | |
| renderCube(frameState(result.frames[0]), false); | |
| clearMoveCoach(); | |
| chooseView("HOME"); | |
| updateSolutionUI(); | |
| $("solutionPanel").scrollIntoView({behavior: "smooth", block: "nearest"}); | |
| } | |
| function exitSolutionMode() { | |
| stopPlayback(); | |
| solution = null; | |
| frameIndex = 0; | |
| inputMode = true; | |
| resetCubeToCenters(); | |
| $("entryPanel").hidden = false; | |
| $("solutionPanel").hidden = true; | |
| $("timelineCard").hidden = true; | |
| $("stageTitle").textContent = "Enter your cube"; | |
| clearMoveCoach(); | |
| $("dragHint").innerHTML = "<span>↔</span> Drag anywhere to rotate"; | |
| renderCube(cube, true); | |
| chooseView("HOME"); | |
| updateEntryStatus(); | |
| } | |
| function updateSolutionUI() { | |
| if (!solution) return; | |
| const total = solution.move_count; | |
| $("stepCount").textContent = `${frameIndex} / ${total}`; | |
| $("playerProgress").style.width = `${total ? frameIndex / total * 100 : 100}%`; | |
| $("prevBtn").disabled = animating || frameIndex === 0; | |
| $("nextBtn").disabled = animating || frameIndex === total; | |
| $("playBtn").disabled = animating || total === 0; | |
| $("playBtn").textContent = playing ? "Ⅱ" : "▶"; | |
| $("playBtn").setAttribute("aria-label", playing ? "Pause solution" : "Play solution"); | |
| if (frameIndex === 0) { | |
| $("stepNumber").textContent = total ? "Starting position" : "Solved cube"; | |
| $("moveSymbol").textContent = total ? "Ready" : "Solved"; | |
| $("moveDirection").textContent = total ? "Your cube before the first move." : "No turns are needed."; | |
| $("humanInstruction").textContent = total ? "Press Next or Play. The cube will face the correct side, then turn that layer." : "This cube is already solved."; | |
| } else { | |
| const instruction = solution.instructions[frameIndex - 1]; | |
| const turns = instruction.turn.clockwise_quarter_turns; | |
| $("stepNumber").textContent = `Step ${frameIndex} of ${total}`; | |
| $("moveSymbol").textContent = instruction.move; | |
| $("moveDirection").textContent = `${FACE_NAMES[instruction.camera.front_face]} face · ${Math.abs(turns) === 2 ? "half turn" : turns > 0 ? "clockwise" : "counterclockwise"}`; | |
| $("humanInstruction").textContent = instruction.text; | |
| } | |
| $("timeline").querySelectorAll(".move-chip").forEach((chip, index) => { | |
| chip.classList.toggle("active", index + 1 === frameIndex); | |
| chip.classList.toggle("done", index + 1 < frameIndex); | |
| if (index + 1 === frameIndex) chip.scrollIntoView({behavior: "smooth", block: "nearest", inline: "center"}); | |
| }); | |
| } | |
| function setMotionPhase(phase, label) { | |
| $("cubeViewport").dataset.motionPhase = phase; | |
| $("coachPhase").textContent = label; | |
| } | |
| function clearMoveCoach() { | |
| $("cubeViewport").dataset.motionPhase = "idle"; | |
| delete $("cubeViewport").dataset.travelAxis; | |
| $("moveCoach").hidden = true; | |
| $("turnGuide").hidden = true; | |
| document.querySelectorAll(".cube-sticker.active-turn-face").forEach(sticker => sticker.classList.remove("active-turn-face")); | |
| } | |
| function effectiveTurns(instruction, direction) { | |
| return instruction.turn.clockwise_quarter_turns * direction; | |
| } | |
| function turnDescription(turns) { | |
| if (Math.abs(turns) === 2) return {short: "180° HALF TURN", direction: "a half turn (180°)", arrow: "180°"}; | |
| if (turns > 0) return {short: "CLOCKWISE", direction: "clockwise by 90°", arrow: "↻"}; | |
| return {short: "COUNTERCLOCKWISE", direction: "counterclockwise by 90°", arrow: "↺"}; | |
| } | |
| function announceMove(instruction, direction, target) { | |
| const face = instruction.turn.layer; | |
| const detail = turnDescription(effectiveTurns(instruction, direction)); | |
| const action = direction > 0 ? "Next move" : "Undo move"; | |
| const text = `${action}: turn the ${FACE_NAMES[face]} face ${detail.direction}.`; | |
| $("moveCoach").hidden = false; | |
| $("coachFace").textContent = `${FACE_NAMES[face]} FACE`; | |
| $("coachInstruction").textContent = text; | |
| $("turnArrow").textContent = detail.arrow; | |
| $("turnGuideLabel").textContent = detail.short; | |
| $("stepNumber").textContent = `${action} · ${Math.max(frameIndex, target)} of ${solution.move_count}`; | |
| $("moveSymbol").textContent = instruction.move; | |
| $("moveDirection").textContent = `${FACE_NAMES[face]} face · ${detail.direction}`; | |
| $("humanInstruction").textContent = text; | |
| setMotionPhase("announce", `${instruction.move} · watch first`); | |
| } | |
| function highlightTurnFace(face, enabled = true) { | |
| document.querySelectorAll(`.cube-sticker[data-face="${face}"]`).forEach(sticker => sticker.classList.toggle("active-turn-face", enabled)); | |
| } | |
| async function animateLayer(instruction, direction, duration) { | |
| const face = instruction.turn.layer; | |
| const spec = TURN_SPECS[face]; | |
| const layer = document.createElement("div"); | |
| layer.className = "turn-layer"; | |
| layer.dataset.face = face; | |
| layer.dataset.axis = spec.axis; | |
| const cubies = [...$("cube3d").querySelectorAll(":scope > .cubie")].filter(spec.select); | |
| cubies.forEach(cubie => layer.append(cubie)); | |
| $("cube3d").append(layer); | |
| const quarters = instruction.turn.clockwise_quarter_turns * direction; | |
| const degrees = spec.sign * quarters * 90; | |
| const targetTransform = `rotate${spec.axis}(${degrees}deg)`; | |
| layer.style.transform = `rotate${spec.axis}(0deg)`; | |
| await transitionTransform(layer, targetTransform, duration, "cubic-bezier(.42,0,.18,1)"); | |
| layer.style.transform = targetTransform; | |
| } | |
| async function stepSolution(direction) { | |
| if (!solution || animating) return false; | |
| const target = frameIndex + direction; | |
| if (target < 0 || target > solution.move_count) return false; | |
| animating = true; | |
| updateSolutionUI(); | |
| const instructionIndex = direction > 0 ? frameIndex : target; | |
| const instruction = solution.instructions[instructionIndex]; | |
| const turns = effectiveTurns(instruction, direction); | |
| const motionScale = reduceMotion ? .82 : 1; | |
| const turnDuration = Math.round((Math.abs(turns) === 2 ? MOVE_TIMING.halfTurn : MOVE_TIMING.quarterTurn) * motionScale); | |
| try { | |
| announceMove(instruction, direction, target); | |
| await sleep(Math.round(MOVE_TIMING.announce * motionScale)); | |
| setMotionPhase("camera", `Slowly moving to the ${FACE_NAMES[instruction.camera.front_face]} face`); | |
| await animateCameraToFace(instruction.camera.front_face); | |
| highlightTurnFace(instruction.turn.layer, true); | |
| $("turnGuide").hidden = false; | |
| setMotionPhase("ready", "This highlighted layer will turn"); | |
| await sleep(Math.round(MOVE_TIMING.faceHold * motionScale)); | |
| setMotionPhase("turning", `Now turn ${turnDescription(turns).direction}`); | |
| await animateLayer(instruction, direction, turnDuration); | |
| setMotionPhase("settling", "Turn complete · hold this position"); | |
| await sleep(Math.round(MOVE_TIMING.settle * motionScale)); | |
| frameIndex = target; | |
| renderCube(frameState(solution.frames[frameIndex]), false); | |
| highlightTurnFace(instruction.turn.layer, true); | |
| await sleep(180); | |
| } finally { | |
| animating = false; | |
| clearMoveCoach(); | |
| updateSolutionUI(); | |
| } | |
| return true; | |
| } | |
| function stopPlayback() { | |
| playing = false; | |
| jumpVersion++; | |
| updateSolutionUI(); | |
| } | |
| async function togglePlayback() { | |
| if (!solution || animating) return; | |
| if (playing) { stopPlayback(); return; } | |
| if (frameIndex >= solution.move_count) { | |
| frameIndex = 0; | |
| renderCube(frameState(solution.frames[0]), false); | |
| } | |
| playing = true; | |
| const version = ++jumpVersion; | |
| updateSolutionUI(); | |
| while (playing && version === jumpVersion && frameIndex < solution.move_count) { | |
| await stepSolution(1); | |
| if (playing) await sleep(Math.round(MOVE_TIMING.betweenMoves * (reduceMotion ? .82 : 1))); | |
| } | |
| if (version === jumpVersion) { | |
| playing = false; | |
| updateSolutionUI(); | |
| } | |
| } | |
| async function playToStep(target) { | |
| if (!solution || animating || target === frameIndex) return; | |
| playing = false; | |
| const version = ++jumpVersion; | |
| const direction = target > frameIndex ? 1 : -1; | |
| while (version === jumpVersion && frameIndex !== target) { | |
| await stepSolution(direction); | |
| if (frameIndex !== target) await sleep(Math.round(MOVE_TIMING.betweenMoves * .7)); | |
| } | |
| } | |
| function initialize() { | |
| resetCubeToCenters(); | |
| document.body.dataset.appVersion = "cube-solver-v2"; | |
| buildSchemeEditor(); | |
| buildColorMenu(); | |
| initializeCameraControls(); | |
| $("clearBtn").addEventListener("click", clearCube); | |
| $("solvedBtn").addEventListener("click", loadSolvedCube); | |
| $("demoBtn").addEventListener("click", loadRandomDemoCube); | |
| $("solveBtn").addEventListener("click", solveCube); | |
| $("prevBtn").addEventListener("click", () => { stopPlayback(); stepSolution(-1); }); | |
| $("nextBtn").addEventListener("click", () => { stopPlayback(); stepSolution(1); }); | |
| $("playBtn").addEventListener("click", togglePlayback); | |
| $("startOverBtn").addEventListener("click", exitSolutionMode); | |
| $("applySchemeBtn").addEventListener("click", applyScheme); | |
| $("validationCloseBtn").addEventListener("click", closeValidationModal); | |
| $("validationReviewBtn").addEventListener("click", closeValidationModal); | |
| $("validationBackdrop").addEventListener("click", closeValidationModal); | |
| renderCube(cube, true); | |
| chooseView("HOME", false); | |
| updateEntryStatus(); | |
| initializeSolver(); | |
| } | |
| initialize(); | |