@houstonp/rubiks-cube 2.1.0 → 3.0.0

package/src/webComponent/rubiksCubeElement.js

@@ -0,0 +1,379 @@
+// @ts-check
+/// <reference path="./globals.ts" preserve="true" />
+import { AmbientLight, DirectionalLight, PerspectiveCamera, Scene, Spherical, WebGLRenderer } from 'three';
+import { OrbitControls } from 'three/examples/jsm/Addons.js';
+import { debounce } from './debouncer';
+import { gsap } from 'gsap';
+import Settings from './settings';
+import { CameraState } from './cameraState';
+import { RubiksCubeController } from '../rubiksCube';
+import RubiksCube3D from '../rubiksCube3D/rubiksCube3D';
+import { AttributeNames, PeekActions } from './constants';
+
+/** @import {Rotation, Movement, CubeType} from '../core' */
+/** @import {PeekAction, PeekState, CameraOptions} from './constants' */
+/** @import {AnimationOptions} from '../rubiksCube' */
+
+const maxAzimuthAngle = (5 * Math.PI) / 16;
+const polarAngleOffset = Math.PI / 2;
+const maxPolarAngle = (5 * Math.PI) / 16;
+const notInitialisedMessage = 'RubiksCubeElement is not initialised — element must be connected to the DOM before calling this method.';
+const InternalEvents = Object.freeze({
+    cameraRadiusChanged: 'cameraRadiusChanged',
+    cameraSettingsChanged: 'cameraSettingsChanged',
+    cameraFieldOfViewChanged: 'cameraFieldOfViewChanged',
+    cameraPeek: 'cameraPeek',
+    cameraPeekComplete: 'cameraPeekComplete',
+});
+
+export class RubiksCubeElement extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        const root = /** @type {ShadowRoot} */ (this.shadowRoot);
+        root.innerHTML = `<canvas id="cube-canvas" style="display:block;"></canvas>`;
+        /** @private @type {HTMLCanvasElement} */
+        this.canvas = /** @type {HTMLCanvasElement} */ (root.getElementById('cube-canvas'));
+        /** @private @type {Settings} */
+        this.settings = new Settings();
+        /** @private @type {RubiksCube3D?} */
+        this._rubiksCube3D = null;
+        /** @private @type {RubiksCubeController?} */
+        this._rubiksCube = null;
+    }
+
+    /**
+     * @param {string} tagName the name of the tag to register the web component under
+     */
+    static register(tagName = 'rubiks-cube') {
+        customElements.define(tagName, this);
+    }
+
+    static get observedAttributes() {
+        return [
+            AttributeNames.cubeType,
+            AttributeNames.pieceGap,
+            AttributeNames.animationSpeed,
+            AttributeNames.animationStyle,
+            AttributeNames.cameraSpeed,
+            AttributeNames.cameraRadius,
+            AttributeNames.cameraFieldOfView,
+            AttributeNames.cameraPeekAngleHorizontal,
+            AttributeNames.cameraPeekAngleVertical,
+            AttributeNames.logo,
+        ];
+    }
+
+    connectedCallback() {
+        for (const attr of RubiksCubeElement.observedAttributes) {
+            if (this.hasAttribute(attr)) {
+                this.attributeChangedCallback(attr, null, this.getAttribute(attr));
+            }
+        }
+        this.init();
+    }
+
+    /**
+     * @param {string} name
+     * @param {string?} oldVal
+     * @param {string?} newVal
+     *  */
+    attributeChangedCallback(name, oldVal, newVal) {
+        switch (name) {
+            case AttributeNames.cubeType:
+                this.settings.setCubeType(newVal);
+                if (this._rubiksCube !== null) {
+                    this._rebuild();
+                }
+                break;
+            case AttributeNames.pieceGap:
+                this.settings.setPieceGap(newVal);
+                break;
+            case AttributeNames.animationSpeed:
+                this.settings.setAnimationSpeed(newVal);
+                break;
+            case AttributeNames.animationStyle:
+                this.settings.setAnimationStyle(newVal);
+                break;
+            case AttributeNames.cameraSpeed:
+                this.settings.setCameraSpeed(newVal);
+                break;
+            case AttributeNames.cameraRadius:
+                this.settings.setCameraRadius(newVal);
+                if (oldVal !== newVal && oldVal !== null) {
+                    this.animateCameraRadius();
+                }
+                break;
+            case AttributeNames.cameraFieldOfView:
+                this.settings.setCameraFieldOfView(newVal);
+                if (oldVal !== newVal && oldVal !== null) {
+                    this.updateCameraFOV();
+                }
+                break;
+            case AttributeNames.cameraPeekAngleHorizontal:
+                this.settings.setCameraPeekAngleHorizontal(newVal);
+                if (oldVal !== newVal && oldVal !== null) {
+                    this.animateCameraSetting();
+                }
+                break;
+            case AttributeNames.cameraPeekAngleVertical:
+                this.settings.setCameraPeekAngleVertical(newVal);
+                if (oldVal !== newVal && oldVal !== null) {
+                    this.animateCameraSetting();
+                }
+                break;
+            case AttributeNames.logo:
+                this.settings.setLogo(newVal);
+        }
+    }
+
+    /** @private */
+    animateCameraSetting() {
+        this.dispatchEvent(new CustomEvent(InternalEvents.cameraSettingsChanged));
+    }
+
+    /** @private */
+    animateCameraRadius() {
+        this.dispatchEvent(new CustomEvent(InternalEvents.cameraRadiusChanged));
+    }
+
+    /** @private */
+    updateCameraFOV() {
+        this.dispatchEvent(new CustomEvent(InternalEvents.cameraFieldOfViewChanged));
+    }
+
+    /** @internal @typedef {{eventId: string, move: Movement, reason: string}} MovementFailedEventData */
+    /**
+     * @param {Movement} move
+     * @param {AnimationOptions} [options]
+     * @returns {Promise<string>}
+     */
+    move(move, options) {
+        if (this._rubiksCube == null) {
+            return Promise.reject(new Error(notInitialisedMessage));
+        }
+        return this._rubiksCube.movement(move, options);
+    }
+
+    /**
+     * @param {Rotation} rotation
+     * @param {AnimationOptions} [options]
+     * @returns {Promise<string>}
+     */
+    rotate(rotation, options) {
+        if (this._rubiksCube == null) {
+            return Promise.reject(new Error(notInitialisedMessage));
+        }
+        return this._rubiksCube.rotation(rotation, options);
+    }
+
+    /**
+     * @returns {string}
+     */
+    reset() {
+        if (this._rubiksCube == null) {
+            throw new Error(notInitialisedMessage);
+        }
+        return this._rubiksCube.reset();
+    }
+
+    /**
+     * @param {string} kociembaState
+     * @returns {boolean}
+     */
+    setState(kociembaState) {
+        if (this._rubiksCube == null) {
+            throw new Error(notInitialisedMessage);
+        }
+        return this._rubiksCube.setState(kociembaState);
+    }
+
+    /**
+     * @returns {string}
+     */
+    getState() {
+        if (this._rubiksCube == null) {
+            throw new Error(notInitialisedMessage);
+        }
+        return this._rubiksCube.getState();
+    }
+
+    /**
+     * @param {CubeType} cubeType
+     * @returns {string}
+     */
+    setType(cubeType) {
+        this.setAttribute(AttributeNames.cubeType, cubeType);
+        return this.getState();
+    }
+
+    /**
+     * @private
+     **/
+    _rebuild() {
+        if (this._rubiksCube == null) {
+            throw new Error(notInitialisedMessage);
+        }
+        return this._rubiksCube.setType(this.settings.rubiksCube3DSettings.cubeType);
+    }
+
+    /** @internal @typedef {{eventId: string, action: PeekAction, options: CameraOptions?}} CameraPeekEventData */
+    /** @internal @typedef {{eventId: string, peekState: PeekState }} CameraPeekCompleteEventData */
+    /**
+     * Animates the camera to a new "peek" position.
+     *
+     * The camera tracks two independent boolean axes (horizontal: Right/Left, vertical: Up/Down), giving four
+     * reachable positions (the {@link PeekState}s). Each `PeekAction` operates on this state machine: actions like
+     * `RightUp` set both axes; `Up`/`Right`/`Left`/`Down` set one axis and leave the other untouched;
+     * `Horizontal`/`Vertical` toggle one axis relative to its current value. The result of a partial action
+     * therefore depends on the current peek state.
+     *
+     * @param {PeekAction} action
+     * @param {CameraOptions?} options
+     * @returns {Promise<PeekState>}
+     */
+    peek(action, options = null) {
+        if (this._rubiksCube3D == null) {
+            return Promise.reject(new Error(notInitialisedMessage));
+        }
+        if (!Object.values(PeekActions).includes(action)) {
+            return Promise.reject(new Error(`Invalid peek action: ${action}. Valid actions are ${Object.values(PeekActions).join(', ')}`));
+        }
+        /** @type {CameraPeekEventData} */
+        const data = { eventId: crypto.randomUUID(), action, options };
+        return new Promise((resolve) => {
+            /** @param {CustomEvent<CameraPeekCompleteEventData> | Event} event */ const handler = (event) => {
+                const customEvent = /** @type {CustomEvent<CameraPeekCompleteEventData>} */ (event);
+                if (customEvent.detail.eventId === data.eventId) {
+                    this.removeEventListener(InternalEvents.cameraPeekComplete, handler);
+                    resolve(customEvent.detail.peekState);
+                }
+            };
+            this.addEventListener(InternalEvents.cameraPeekComplete, handler);
+            this.dispatchEvent(new CustomEvent(InternalEvents.cameraPeek, { detail: data }));
+        });
+    }
+
+    /** @private */
+    init() {
+        this._rubiksCube3D = new RubiksCube3D(this.settings.rubiksCube3DSettings);
+        this._rubiksCube = new RubiksCubeController(this.settings.rubiksCube3DSettings.cubeType, this._rubiksCube3D);
+
+        // defined core threejs objects
+        const canvas = this.canvas;
+        const scene = new Scene();
+        const renderer = new WebGLRenderer({
+            alpha: true,
+            canvas,
+            antialias: true,
+        });
+        renderer.setSize(this.clientWidth, this.clientHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+
+        //update renderer and camera when container resizes. debouncing events to reduce frequency
+        new ResizeObserver(
+            debounce((/** @type {{ contentRect: { width: number; height: number; }; }[]} */ entries) => {
+                const { width, height } = entries[0].contentRect;
+                camera.aspect = width / height;
+                camera.updateProjectionMatrix();
+                renderer.setSize(width, height);
+            }, 30),
+        ).observe(this);
+
+        // add camera
+        /**
+         * @returns {Spherical}
+         */
+        const cameraState = new CameraState();
+        const getTargetCameraSpherical = () => {
+            const phi = polarAngleOffset + (cameraState.Up ? -this.settings.cameraPeekAngleVertical : this.settings.cameraPeekAngleVertical) * maxPolarAngle;
+            const theta = (cameraState.Right ? this.settings.cameraPeekAngleHorizontal : -this.settings.cameraPeekAngleHorizontal) * maxAzimuthAngle;
+            return new Spherical(this.settings.cameraRadius, phi, theta);
+        };
+        const camera = new PerspectiveCamera(this.settings.cameraFieldOfView, this.clientWidth / this.clientHeight, 1, 2000);
+        const cameraSpherical = getTargetCameraSpherical();
+        camera.position.setFromSpherical(cameraSpherical);
+
+        // add orbit controls for camera
+        const controls = new OrbitControls(camera, renderer.domElement);
+        controls.enableZoom = false;
+        controls.enablePan = false;
+        controls.enableDamping = true;
+
+        // add lighting to scene
+        const ambientLight = new AmbientLight('white', 0.4);
+        const spotLight1 = new DirectionalLight('white', 2);
+        const spotLight2 = new DirectionalLight('white', 2);
+        const spotLight3 = new DirectionalLight('white', 2);
+        const spotLight4 = new DirectionalLight('white', 2);
+        spotLight1.position.set(5, 5, 5);
+        spotLight2.position.set(-5, 5, 5);
+        spotLight3.position.set(5, -5, 0);
+        spotLight4.position.set(-10, -5, -5);
+        scene.add(ambientLight, spotLight1, spotLight2, spotLight3, spotLight4);
+
+        // create cube and add to scene
+        const cube = this._rubiksCube3D;
+        scene.add(cube);
+
+        // animation loop
+        function animate() {
+            controls.update();
+            renderer.render(scene, camera);
+        }
+
+        renderer.setAnimationLoop(animate);
+
+        // Camera Events
+
+        /**
+         * @param {Spherical} targetSpherical
+         * @param {number} cameraSpeedMs
+         * @param {gsap.EaseString | gsap.EaseFunction | undefined} ease
+         * @param { undefined | (() => void) } completedCallback
+         */
+        const updateCameraPosition = (targetSpherical, cameraSpeedMs, ease, completedCallback = undefined) => {
+            const startSpherical = new Spherical().setFromVector3(camera.position);
+            gsap.to(startSpherical, {
+                radius: targetSpherical.radius,
+                theta: targetSpherical.theta,
+                phi: targetSpherical.phi,
+                duration: (cameraSpeedMs ? cameraSpeedMs : this.settings.cameraSpeedMs) / 1000,
+                ease: ease,
+                overwrite: false,
+                onUpdate: () => {
+                    camera.position.setFromSpherical(startSpherical);
+                    camera.lookAt(cube.position);
+                    controls.update();
+                },
+                onComplete: completedCallback,
+            });
+        };
+
+        this.addEventListener(InternalEvents.cameraPeek, (event) => {
+            const customEvent = /** @type {CustomEvent<CameraPeekEventData>} */ (event);
+            cameraState.peekCamera(customEvent.detail.action);
+            /** @type {CameraPeekCompleteEventData} */
+            const data = { eventId: customEvent.detail.eventId, peekState: cameraState.toPeekState() };
+            const completedCallback = () => this.dispatchEvent(new CustomEvent(InternalEvents.cameraPeekComplete, { detail: data }));
+            const targetSpherical = getTargetCameraSpherical();
+            updateCameraPosition(targetSpherical, customEvent.detail.options?.cameraSpeedMs ?? this.settings.cameraSpeedMs, 'none', completedCallback);
+        });
+
+        this.addEventListener(InternalEvents.cameraSettingsChanged, () => {
+            const targetSpherical = getTargetCameraSpherical();
+            updateCameraPosition(targetSpherical, this.settings.cameraSpeedMs, 'none');
+        });
+
+        this.addEventListener(InternalEvents.cameraRadiusChanged, () => {
+            const targetSpherical = new Spherical().setFromVector3(camera.position);
+            targetSpherical.radius = this.settings.cameraRadius;
+            updateCameraPosition(targetSpherical, this.settings.cameraSpeedMs, 'none');
+        });
+
+        this.addEventListener(InternalEvents.cameraFieldOfViewChanged, () => {
+            camera.fov = this.settings.cameraFieldOfView;
+            camera.updateProjectionMatrix();
+        });
+    }
+}

package/src/{settings.js → webComponent/settings.js}

@@ -1,32 +1,40 @@
 // @ts-check
-import { AnimationStyles, CubeTypes } from './core';
-const defaultSettings = {
-    cubeType: CubeTypes.Seven,
+import { CubeTypes } from '../core';
+import RubiksCube3DSettings from '../rubiksCube3D/cubeSettings';
+import { AnimationStyles } from './constants';
+/** @import {CubeType} from '../core' */
+/** @import {AnimationStyle} from './constants' */
+
+const defaultCubeSettings = {
+    cubeType: CubeTypes.Three,
     animationSpeedMs: 100,
-    /** @type {import('./core').AnimationStyle} */
-    animationStyle: 'fixed',
+    animationStyle: 'linear',
     pieceGap: 1.04,
+};
+
+const defaultSettings = {
     cameraSpeedMs: 100,
     cameraRadius: 5,
     cameraPeekAngleHorizontal: 0.6,
     cameraPeekAngleVertical: 0.6,
     cameraFieldOfView: 75,
 };
+
 const minGap = 1;
+const maxGap = 1.1;
 const minRadius = 4;
 const minFieldOfView = 30;
 const maxFieldOfView = 100;
 
 export default class Settings {
     constructor() {
-        /** @type {import("./core").CubeType} */
-        this.cubeType = defaultSettings.cubeType;
-        /** @type {number} */
-        this.pieceGap = defaultSettings.pieceGap;
-        /** @type {number} */
-        this.animationSpeedMs = defaultSettings.animationSpeedMs;
-        /** @type {import("./core").AnimationStyle} */
-        this.animationStyle = defaultSettings.animationStyle;
+        /** @type {RubiksCube3DSettings} */
+        this.rubiksCube3DSettings = new RubiksCube3DSettings({
+            pieceGap: defaultCubeSettings.pieceGap,
+            animationSpeedMs: defaultCubeSettings.animationSpeedMs,
+            cubeType: defaultCubeSettings.cubeType,
+            animationStyle: defaultCubeSettings.animationStyle,
+        });
         /** @type {number} */
         this.cameraSpeedMs = defaultSettings.cameraSpeedMs;
         /** @type {number} */
@@ -42,8 +50,8 @@ export default class Settings {
     /** @param {any} value */
     setCubeType(value) {
         if (value && Object.values(CubeTypes).includes(value)) {
-            const cubeType = /** @type {import('./core').CubeType} */ (value);
-            this.cubeType = cubeType;
+            const cubeType = /** @type {CubeType} */ (value);
+            this.rubiksCube3DSettings.cubeType = cubeType;
             return;
         }
         console.warn(`Invalid cube type value. Accepted Values are [${Object.values(CubeTypes).join(', ')}] Value is ${value}`);
@@ -52,18 +60,18 @@ export default class Settings {
     /** @param {string | null} value*/
     setPieceGap(value) {
         const gap = Number(value);
-        if (gap >= minGap && value != null) {
-            this.pieceGap = gap;
+        if (gap >= minGap && gap <= maxGap && value != null) {
+            this.rubiksCube3DSettings.pieceGap = gap;
             return;
         }
-        console.warn(`Invalid pieceGap value. Min is ${minGap}. Value is ${value}`);
+        console.warn(`Invalid pieceGap value. Min is ${minGap}. Max is ${maxGap}. Value is ${value}`);
     }
 
     /** @param {string | null} value in ms */
     setAnimationSpeed(value) {
         var speed = Number(value);
         if (speed >= 0 && value != null) {
-            this.animationSpeedMs = speed;
+            this.rubiksCube3DSettings.animationSpeedMs = speed;
             return;
         }
         console.warn(`Invalid animation speed value. Min is 0. Value is ${value}`);
@@ -72,8 +80,8 @@ export default class Settings {
     /** @param {any} value */
     setAnimationStyle(value) {
         if (value && Object.values(AnimationStyles).includes(value)) {
-            const validStyle = /** @type {import("./core").AnimationStyle} */ (value);
-            this.animationStyle = validStyle;
+            const validStyle = /** @type {AnimationStyle} */ (value);
+            this.rubiksCube3DSettings.animationStyle = validStyle;
             return;
         }
         console.warn(`Invalid animation style value. Accepted Values are [${Object.values(AnimationStyles).join(', ')}] Value is ${value}`);
@@ -96,7 +104,7 @@ export default class Settings {
             this.cameraRadius = radius;
             return;
         }
-        console.warn(`Invalid camera radius value. Min is ${radius}. Value is ${value}`);
+        console.warn(`Invalid camera radius value. Min is ${minRadius}. Value is ${value}`);
     }
 
     /** @param {string | null} value in ms */
@@ -127,7 +135,7 @@ export default class Settings {
             return;
         }
         if (fov > maxFieldOfView && value != null) {
-            console.warn(`Invalid camera FOV value. Min is ${minFieldOfView} Max is ${maxFieldOfView}. Value is ${value} which is aboe the maximum.`);
+            console.warn(`Invalid camera FOV value. Min is ${minFieldOfView} Max is ${maxFieldOfView}. Value is ${value} which is above the maximum.`);
             return;
         }
         if (value == null) {
@@ -135,4 +143,9 @@ export default class Settings {
         }
         this.cameraFieldOfView = fov;
     }
+
+    /** @param {string | null} value in ms */
+    setLogo(value) {
+        this.rubiksCube3DSettings.logo = value;
+    }
 }

package/tests/common.js

@@ -1,27 +1,10 @@
-import CubeSettings from '../src/cube/cubeSettings.js';
-import RubiksCube3D from '../src/three/cube.js';
+import RubiksCube3DSettings from '../src/rubiksCube3D/cubeSettings.js';
+import RubiksCube3D from '../src/rubiksCube3D/rubiksCube3D.js';
 /**
  * @param {import('../src/core.js').CubeType} cubeType
  * @returns {RubiksCube3D}
  **/
 export function createTestCube(cubeType) {
-    // Use a fixed animation style and zero duration so rotations complete deterministically in tests.
-    const settings = new CubeSettings(1.04, 0, 'fixed', cubeType);
+    const settings = new RubiksCube3DSettings({ pieceGap: 1.04, animationSpeedMs: 0, cubeType, animationStyle: 'sine' });
     return new RubiksCube3D(settings);
 }
-
-/**
- *
- * @param {RubiksCube3D} cube
- * @param {number} maxIterations
- */
-export function drainUpdates(cube, maxIterations = 20) {
-    // Step the cube until the current rotation and queue are empty, or until we hit a safety cap.
-    for (let i = 0; i < maxIterations; i++) {
-        cube.update();
-        if (!cube._currentRotation && cube._rotationQueue.length === 0) {
-            return;
-        }
-    }
-    throw new Error('Animation Queue not empty');
-}

package/tests/core.test.js

@@ -0,0 +1,56 @@
+import { expect, test } from 'bun:test';
+import { CubeTypes, isMovement, IsRotation, Movements, reverse, Rotations, translate } from '../src/core';
+
+test("reverse 5B -> 5B'", () => {
+    expect(Movements.Five.B).toBe(reverse(Movements.Five.BP));
+});
+
+test("reverse 2Uw -> 2Uw'", () => {
+    expect(Movements.Two.Uw).toBe(reverse(Movements.Two.UwP));
+});
+
+test("reverse f -> f'", () => {
+    expect(Movements.Wide.f).toBe(reverse(Movements.Wide.fP));
+});
+
+test("reverse 2-3f -> 2-3f'", () => {
+    expect('2-3f').toBe(reverse("2-3f'"));
+});
+
+test("reverse U -> U'", () => {
+    expect(Movements.Single.U).toBe(reverse(Movements.Single.UP));
+});
+
+test('translate u -> 5u', () => {
+    expect(Movements.Five.u).toBe(translate(Movements.Wide.u, CubeTypes.Six));
+});
+
+test('translate Rw -> 4Rw', () => {
+    expect(Movements.Four.u).toBe(translate(Movements.Wide.u, CubeTypes.Five));
+});
+
+test('translate l -> 6l', () => {
+    expect(Movements.Six.u).toBe(translate(Movements.Wide.u, CubeTypes.Seven));
+});
+
+const allMovements = Object.values(Movements).flatMap((group) => (typeof group === 'object' ? Object.values(group) : []));
+test.each(allMovements)('IsMovement %s', (movement) => {
+    expect(isMovement(movement)).toBe(true);
+});
+
+const allRotations = Object.values(Rotations);
+test.each(allRotations)('IsRotation %s', (rotation) => {
+    expect(IsRotation(rotation)).toBe(true);
+});
+
+const rangeableBases = [...Object.values(Movements.Wide), ...Object.values(Movements.Single)];
+const layerRanges = [];
+for (let lower = 1; lower <= 6; lower++) {
+    for (let upper = lower + 1; upper <= 7; upper++) {
+        layerRanges.push([lower, upper]);
+    }
+}
+const allRangeMovements = layerRanges.flatMap(([lower, upper]) => rangeableBases.map((base) => Movements.Range(lower, upper, base)));
+test.each(allRangeMovements)('IsMovement Range %s', (movement) => {
+    expect(isMovement(movement)).toBe(true);
+});

package/tests/rubiksCube.solves.test.js

@@ -0,0 +1,41 @@
+// @ts-check
+import './setup.js';
+import { expect, test } from 'bun:test';
+import { scrambles } from './testScrambles.js';
+import { RubiksCubeController } from '../src/rubiksCube';
+import RubiksCube3D from '../src/rubiksCube3D/rubiksCube3D.js';
+import RubiksCube3DSettings from '../src/rubiksCube3D/cubeSettings.js';
+import { toKociemba } from '../src/state/stickerState.js';
+import { IsRotation } from '../src/core/index.js';
+
+test.each(scrambles)('RubiksCube with 3D view $cubeType solve with scramble = $scramble', ({ cubeType, scramble, solution }) => {
+    // Arrange
+    const cube3D = new RubiksCube3D(new RubiksCube3DSettings({ pieceGap: 1, animationSpeedMs: 0, cubeType, animationStyle: 'sine' }));
+    const cube = new RubiksCubeController(cubeType, cube3D);
+    const initialState = cube.getState();
+    const scrambleMoves = /** @type {import('../src/core/index.js').Movement[]} */ (scramble.split(' '));
+
+    for (const move of scrambleMoves) {
+        cube.movement(move);
+    }
+    const scrambleState3D = toKociemba(cube3D.getStickerState());
+    const scrambleState = cube.getState();
+
+    // Act
+    const solutionActions = /** @type {(import('../src/core/index.js').Movement | import('../src/core/index.js').Rotation)[]} */ (solution.split(' '));
+    for (const action of solutionActions) {
+        if (IsRotation(action)) {
+            cube.rotation(/** @type {import('../src/core/index.js').Rotation} */ (action));
+        } else {
+            cube.movement(/** @type {import('../src/core/index.js').Movement} */ (action));
+        }
+    }
+    const solutionState3D = toKociemba(cube3D.getStickerState());
+    const solutionState = cube.getState();
+
+    // Assert
+    expect(scrambleState3D).toBe(scrambleState);
+    expect(solutionState3D).toBe(solutionState);
+    expect(scrambleState).not.toBe(initialState);
+    expect(solutionState).toBe(initialState);
+});