@houstonp/rubiks-cube 2.1.0 → 3.0.0

package/types/webComponent/rubiksCubeElement.d.ts

@@ -0,0 +1,89 @@
+/// <reference path="globals.d.ts" preserve="true" />
+export class RubiksCubeElement extends HTMLElement {
+    /**
+     * @param {string} tagName the name of the tag to register the web component under
+     */
+    static register(tagName?: string): void;
+    static get observedAttributes(): ("cube-type" | "piece-gap" | "animation-speed-ms" | "animation-style" | "camera-speed-ms" | "camera-radius" | "camera-field-of-view" | "camera-peek-angle-horizontal" | "camera-peek-angle-vertical" | "logo")[];
+    /** @private @type {HTMLCanvasElement} */
+    private canvas;
+    /** @private @type {Settings} */
+    private settings;
+    /** @private @type {RubiksCube3D?} */
+    private _rubiksCube3D;
+    /** @private @type {RubiksCubeController?} */
+    private _rubiksCube;
+    connectedCallback(): void;
+    /**
+     * @param {string} name
+     * @param {string?} oldVal
+     * @param {string?} newVal
+     *  */
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    /** @private */
+    private animateCameraSetting;
+    /** @private */
+    private animateCameraRadius;
+    /** @private */
+    private updateCameraFOV;
+    /** @internal @typedef {{eventId: string, move: Movement, reason: string}} MovementFailedEventData */
+    /**
+     * @param {Movement} move
+     * @param {AnimationOptions} [options]
+     * @returns {Promise<string>}
+     */
+    move(move: Movement, options?: AnimationOptions): Promise<string>;
+    /**
+     * @param {Rotation} rotation
+     * @param {AnimationOptions} [options]
+     * @returns {Promise<string>}
+     */
+    rotate(rotation: Rotation, options?: AnimationOptions): Promise<string>;
+    /**
+     * @returns {string}
+     */
+    reset(): string;
+    /**
+     * @param {string} kociembaState
+     * @returns {boolean}
+     */
+    setState(kociembaState: string): boolean;
+    /**
+     * @returns {string}
+     */
+    getState(): string;
+    /**
+     * @param {CubeType} cubeType
+     * @returns {string}
+     */
+    setType(cubeType: CubeType): string;
+    /**
+     * @private
+     **/
+    private _rebuild;
+    /** @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: PeekAction, options?: CameraOptions | null): Promise<PeekState>;
+    /** @private */
+    private init;
+}
+import type { Movement } from '../core';
+import type { AnimationOptions } from '../rubiksCube';
+import type { Rotation } from '../core';
+import type { CubeType } from '../core';
+import type { PeekAction } from './constants';
+import type { CameraOptions } from './constants';
+import type { PeekState } from './constants';

package/types/{settings.d.ts → webComponent/settings.d.ts}

@@ -1,12 +1,6 @@
 export default class Settings {
-    /** @type {import("./core").CubeType} */
-    cubeType: import("./core").CubeType;
-    /** @type {number} */
-    pieceGap: number;
-    /** @type {number} */
-    animationSpeedMs: number;
-    /** @type {import("./core").AnimationStyle} */
-    animationStyle: import("./core").AnimationStyle;
+    /** @type {RubiksCube3DSettings} */
+    rubiksCube3DSettings: RubiksCube3DSettings;
     /** @type {number} */
     cameraSpeedMs: number;
     /** @type {number} */
@@ -35,4 +29,7 @@ export default class Settings {
     setCameraPeekAngleVertical(value: string | null): void;
     /** @param {string | null} value in ms */
     setCameraFieldOfView(value: string | null): void;
+    /** @param {string | null} value in ms */
+    setLogo(value: string | null): void;
 }
+import RubiksCube3DSettings from '../rubiksCube3D/cubeSettings';

package/src/cube/animationSlice.js

@@ -1,205 +0,0 @@
-// @ts-check
-import { Rotations } from '../core';
-import { getAllLayers } from './cubeState';
-
-/** @typedef {typeof Axi[keyof typeof Axi]} Axis */
-export const Axi = Object.freeze({
-    x: 'x',
-    y: 'y',
-    z: 'z',
-});
-
-/** @typedef {{axis: Axis, layers: number[], direction: number}} Slice */
-
-/**
- * @param {import('../core').Movement } outerBlockMovement
- * @param {import('../core').CubeType} cubeType
- * @param {boolean} prioritiseStandardMovement
- * @returns {Slice | undefined}
- */
-export function GetLayerSlice(outerBlockMovement, cubeType, prioritiseStandardMovement = false) {
-    const layers = getAllLayers(cubeType);
-    const result = RegExp(`^([1234567]|[123456]-[1234567])?([RLUDFB]w|[RLUDFBMES]|[rludfbmes])([123])?(\')?$`).exec(outerBlockMovement);
-    if (result == null) {
-        console.error(`Failed to parse outerBlockMovement. invalid movement: ${outerBlockMovement}`);
-        return undefined;
-    }
-    let layerRangeLower = undefined;
-    let layerRangeUpper = undefined;
-    let layerNumber = undefined;
-    if (result[1]?.includes('-')) {
-        layerRangeLower = parseInt(result[1][0]);
-        layerRangeUpper = parseInt(result[1][2]);
-    } else {
-        layerNumber = result[1] ? parseInt(result[1]) : undefined;
-    } // some input validation
-
-    if (layerRangeLower != null && layerRangeUpper != null) {
-        if (layerRangeLower >= layerRangeUpper || layerRangeUpper > layers.length || layerRangeLower > layers.length - 1) {
-            console.error(
-                `${outerBlockMovement} is not valid for the current cubeType: ${cubeType}. For range inputs like x-yr it should follow that 1 <= x < y <= ${layers.length}.`,
-            );
-            return undefined;
-        }
-    }
-    if (layerNumber != null && layerNumber > layers.length) {
-        console.error(
-            `${outerBlockMovement} is not valid for the current cubeType: ${cubeType}. For inputs like xR it should follow that x <= ${layers.length}.`,
-        );
-        return undefined;
-    }
-
-    const movementType = result[2];
-    const rotationNumber = result[3] ? parseInt(result[3]) % 4 : 1;
-    const isPrime = result[4] === "'";
-    const direction = (isPrime ? -1 : 1) * rotationNumber;
-
-    let axis = undefined;
-    switch (movementType) {
-        case 'R':
-        case 'Rw':
-        case 'r':
-        case 'L':
-        case 'Lw':
-        case 'l':
-        case 'M':
-        case 'm':
-            axis = Axi.x;
-            break;
-        case 'U':
-        case 'Uw':
-        case 'u':
-        case 'D':
-        case 'Dw':
-        case 'd':
-        case 'E':
-        case 'e':
-            axis = Axi.y;
-            break;
-        case 'F':
-        case 'Fw':
-        case 'f':
-        case 'B':
-        case 'Bw':
-        case 'b':
-        case 'S':
-        case 's':
-            axis = Axi.z;
-            break;
-        default:
-            console.error(`${outerBlockMovement} is invalid. Invalid movementType ${movementType}.`);
-    }
-    if (axis == null) {
-        return undefined;
-    }
-
-    switch (movementType) {
-        case 'R':
-        case 'U':
-        case 'F':
-            layerNumber = layerNumber ? layerNumber : 1;
-            var layer = layers[layers.length - layerNumber];
-            return { axis, layers: [layer], direction: -direction };
-        case 'L':
-        case 'D':
-        case 'B':
-            layerNumber = layerNumber ? layerNumber : 1;
-            var layer = layers[layerNumber - 1];
-            return { axis, layers: [layer], direction };
-        case 'Rw':
-        case 'Uw':
-        case 'Fw':
-            layerNumber = layerNumber ? layerNumber : 2;
-            var sliceLayers = layers.slice(layers.length - layerNumber);
-            if (layerRangeLower != null && layerRangeUpper != null) {
-                var sliceLayers = layers.slice(layers.length - layerRangeUpper, layers.length - (layerRangeLower - 1));
-            }
-            return { axis, layers: sliceLayers, direction: -direction };
-        case 'r':
-        case 'u':
-        case 'f':
-            var defaultLayerNumber = prioritiseStandardMovement ? layers.length - 1 : 2;
-            layerNumber = layerNumber ? layerNumber : defaultLayerNumber;
-            var sliceLayers = layers.slice(layers.length - layerNumber);
-            if (layerRangeLower != null && layerRangeUpper != null) {
-                var sliceLayers = layers.slice(layers.length - layerRangeUpper, layers.length - (layerRangeLower - 1));
-            }
-            return { axis, layers: sliceLayers, direction: -direction };
-        case 'Lw':
-        case 'Dw':
-        case 'Bw':
-            layerNumber = layerNumber ? layerNumber : 2;
-            var sliceLayers = layers.slice(0, layerNumber);
-            if (layerRangeLower != null && layerRangeUpper != null) {
-                var sliceLayers = layers.slice(layerRangeLower - 1, layerRangeUpper);
-            }
-            return { axis, layers: sliceLayers, direction };
-        case 'l':
-        case 'd':
-        case 'b':
-            var defaultLayerNumber = prioritiseStandardMovement ? layers.length - 1 : 2;
-            layerNumber = layerNumber ? layerNumber : defaultLayerNumber;
-            var sliceLayers = layers.slice(0, layerNumber);
-            if (layerRangeLower != null && layerRangeUpper != null) {
-                var sliceLayers = layers.slice(layerRangeLower - 1, layerRangeUpper);
-            }
-            return { axis, layers: sliceLayers, direction };
-        case 'M':
-        case 'E':
-            var defaultLayerNumber = prioritiseStandardMovement ? Math.floor(layers.length / 2) : 1;
-            layerNumber = layerNumber ? layerNumber : defaultLayerNumber;
-            var lower = Math.max(Math.floor(layers.length / 2) - (layerNumber - 1), 1);
-            var upper = Math.min(Math.ceil(layers.length / 2) + (layerNumber - 1), layers.length - 1);
-            var sliceLayers = layers.slice(lower, upper);
-            return { axis, layers: sliceLayers, direction };
-        case 'm':
-        case 'e':
-            layerNumber = layerNumber ? layerNumber : 1;
-            var sliceLayers = layers.slice(layerNumber, layers.length - layerNumber);
-            return { axis, layers: sliceLayers, direction };
-        case 'S':
-            var defaultLayerNumber = prioritiseStandardMovement ? Math.floor(layers.length / 2) : 1;
-            layerNumber = layerNumber ? layerNumber : defaultLayerNumber;
-            var lower = Math.max(Math.floor(layers.length / 2) - (layerNumber - 1), 1);
-            var upper = Math.min(Math.ceil(layers.length / 2) + (layerNumber - 1), layers.length - 1);
-            var sliceLayers = layers.slice(lower, upper);
-            return { axis, layers: sliceLayers, direction: -direction };
-        case 's':
-            layerNumber = layerNumber ? layerNumber : 1;
-            var sliceLayers = layers.slice(layerNumber, layers.length - layerNumber);
-            return { axis, layers: sliceLayers, direction: -direction };
-
-        default:
-            console.error(`${outerBlockMovement} is invalid. Invalid movementType ${movementType}.`);
-            return undefined;
-    }
-}
-
-/**
- * @param {import("../core").Rotation} rotation
- * @param {import('../core').CubeType} cubeType
- * @returns {Slice | undefined}
- */
-export function GetRotationSlice(rotation, cubeType) {
-    const result = RegExp(`^([xyz])(\\d)?(\')?$`).exec(rotation);
-    if (result == null) {
-        console.error(`Failed to parse rotation. invalid rotation: [${rotation}]`);
-        return undefined;
-    }
-    const rotationType = result[1];
-    const rotationNumber = result[2] ? parseInt(result[2]) : 1;
-
-    const isPrime = result[3] === "'";
-    const direction = (isPrime ? 1 : -1) * (rotationNumber % 4);
-    switch (rotationType) {
-        case Rotations.x:
-            return { axis: Axi.x, layers: getAllLayers(cubeType), direction };
-        case Rotations.y:
-            return { axis: Axi.y, layers: getAllLayers(cubeType), direction };
-        case Rotations.z:
-            return { axis: Axi.z, layers: getAllLayers(cubeType), direction };
-        default:
-            console.error(`Failed to get rotation slice. invalid rotationType: ${rotationType}`);
-            return undefined;
-    }
-}

package/src/cube/animationState.js

@@ -1,96 +0,0 @@
-// @ts-check
-/** @typedef {AnimationStatus[keyof AnimationStatus]} AnimationStatusType */
-export const AnimationStatus = Object.freeze({
-    Pending: 'pending',
-    Initialised: 'initialised',
-    InProgress: 'inProgress',
-    Complete: 'complete',
-    Disposed: 'disposed',
-});
-
-export class AnimationState {
-    /**
-     * @param {import('./animationSlice').Slice} slice
-     * @param {((state: string) => void )} completedCallback
-     * @param {((reason: string) => void )} failedCallback
-     */
-    constructor(slice, completedCallback, failedCallback) {
-        /** @type {((state: string) => void )} */
-        this.completedCallback = completedCallback;
-        /** @type {((reason: string) => void )} */
-        this.failedCallback = failedCallback;
-        /** @type {import('./animationSlice').Slice} */
-        this.slice = slice;
-        /** @type {AnimationStatusType} */
-        this.status = AnimationStatus.Pending;
-        /** @type {number} */
-        this.timestampMs = performance.now();
-        /** @type {number | undefined} */
-        this._lastUpdatedTimeMs = undefined;
-        /** @type {number} */
-        this._rotationPercentage = 0;
-    }
-
-    initialise() {
-        this._lastUpdatedTimeMs = performance.now();
-        this.status = AnimationStatus.Initialised;
-    }
-
-    /** @param {string} state */
-    complete(state) {
-        this.status = AnimationStatus.Disposed;
-        this.completedCallback(state);
-    }
-
-    /** @param {string} reason */
-    abort(reason) {
-        this.status = AnimationStatus.Complete;
-        this.failedCallback(reason);
-    }
-
-    /**
-     * @param {number} speedMs
-     * @returns {number} rotationIncrement
-     */
-    update(speedMs) {
-        if (speedMs < 0) {
-            throw new Error(`Speed is negative.`);
-        }
-        if (this.status === AnimationStatus.Initialised) {
-            this.status = AnimationStatus.InProgress;
-        }
-
-        if (this.status !== AnimationStatus.InProgress) {
-            throw new Error(`Cannot update AnimationState. Invalid Status - [${this.status}]`);
-        }
-
-        if (this._lastUpdatedTimeMs == null) {
-            throw new Error(`Cannot update AnimationState. LastUpdated is not set. Value: "${this._lastUpdatedTimeMs}".`);
-        }
-
-        var intervalMs = performance.now() - this._lastUpdatedTimeMs;
-        this._lastUpdatedTimeMs = performance.now();
-
-        var increment = 100 - this._rotationPercentage;
-        if (speedMs != 0) {
-            var potentialIncrement = (intervalMs / speedMs) * 100;
-            if (potentialIncrement + this._rotationPercentage < 100) {
-                increment = potentialIncrement;
-            }
-        }
-
-        if (this._rotationPercentage + increment > 100) {
-            throw new Error(
-                `Cannot update AnimationState. Next increment would cause over rotation. Increment: ${increment}%. Current rotation: ${this._rotationPercentage}%.`,
-            );
-        }
-
-        this._rotationPercentage += increment;
-
-        if (this._rotationPercentage === 100) {
-            this.status = AnimationStatus.Complete;
-        }
-
-        return increment;
-    }
-}

package/src/cube/cubeSettings.js

@@ -1,19 +0,0 @@
-// @ts-check
-export default class CubeSettings {
-    /**
-     * @param {import('../core').CubeType} cubeType
-     * @param {number} pieceGap
-     * @param {number} animationSpeed
-     * @param {import('../core').AnimationStyle} animationStyle
-     */
-    constructor(pieceGap, animationSpeed, animationStyle, cubeType) {
-        /** @type {number} pieceGap */
-        this.pieceGap = pieceGap;
-        /** @type {import("../core").CubeType} */
-        this.cubeType = cubeType;
-        /** @type {number} pieceGap */
-        this.animationSpeedMs = animationSpeed;
-        /** @type {import('../core').AnimationStyle} pieceGap */
-        this.animationStyle = animationStyle;
-    }
-}