@houstonp/rubiks-cube 1.5.1 → 2.0.0

package/src/cube/cube.js

@@ -1,38 +1,45 @@
-import { Group, Vector3 } from 'three';
+// @ts-check
+import { Group, Material, Mesh, Object3D, Vector3 } from 'three';
 import { createCoreMesh } from '../threejs/pieces';
 import { createCubeState } from './cubeState';
 import { CubeRotation } from './cubeRotation';
+import CubeSettings from './cubeSettings';
+import GetMovementSlice, { GetRotationSlice } from './slice';
+import { Axi } from '../core';
 
+/** @typedef {{ up: import('../core').Face[][], down: import('../core').Face[][], front: import('../core').Face[][], back: import('../core').Face[][], left: import('../core').Face[][], right: import('../core').Face[][] }} StickerState*/
 export default class Cube {
     /**
-     *   @param {import('../..').Settings} settings
+     *   @param {CubeSettings} cubeSettings
      */
-    constructor(settings) {
-        /** @type {import('../..').Settings} */
-        this.settings = settings;
+    constructor(cubeSettings) {
+        /** @type {CubeSettings} */
+        this.cubeSettings = cubeSettings;
         /** @type {Group} */
-        this.group = this.createCubeGroup();
+        this.group = new Group();
         /** @type {Group} */
         this.rotationGroup = new Group();
         /** @type {CubeRotation[]} */
         this.rotationQueue = [];
         /** @type {CubeRotation | undefined} */
         this.currentRotation = undefined;
-        /** @type {{ up: string[][], down: string[][], front: string[][], back: string[][], left: string[][], right: string[][] }} */
-        this.currentState = this.getStickerState();
+
         /** @type {number | undefined} */
         this._matchSpeed = undefined;
         /** @type {number} */
-        this._lastGap = settings.gap;
+        this._lastGap = cubeSettings.pieceGap;
+
+        // initialise threejs Objects
+        this.init();
+
+        /** @type {StickerState} */
+        this.currentState = this.getStickerState();
     }
 
     /**
-     * creates a ThreeJS group with all the required pieces for a cube
-     * @param {Group} group
-     * @returns {Group}
+     * adds threejs objects to group
      */
-    createCubeGroup(group) {
-        var group = new Group();
+    init() {
         const core = createCoreMesh();
         core.userData = {
             position: { x: 0, y: 0, z: 0 },
@@ -41,14 +48,14 @@ export default class Cube {
             initialRotation: { x: 0, y: 0, z: 0 },
             type: 'core',
         };
-        group.add(core);
+        this.group.add(core);
 
         for (const piece of createCubeState()) {
             var pieceGroup = piece.group;
             pieceGroup.position.set(
-                piece.position.x * this.settings.pieceGap,
-                piece.position.y * this.settings.pieceGap,
-                piece.position.z * this.settings.pieceGap,
+                piece.position.x * this.cubeSettings.pieceGap,
+                piece.position.y * this.cubeSettings.pieceGap,
+                piece.position.z * this.cubeSettings.pieceGap,
             );
             pieceGroup.rotation.set(piece.rotation.x, piece.rotation.y, piece.rotation.z);
             pieceGroup.userData = {
@@ -58,42 +65,40 @@ export default class Cube {
                 initialRotation: Object.assign({}, piece.rotation),
                 type: piece.type,
             };
-            group.add(pieceGroup);
+            this.group.add(pieceGroup);
         }
-        return group;
+        return this.group;
     }
 
     /**
      * update the cube and continue any rotations
-     * @returns {string}
      */
     update() {
         if (this.currentRotation === undefined) {
-            if (this._lastGap !== this.settings.pieceGap) {
+            if (this._lastGap !== this.cubeSettings.pieceGap) {
                 this.updateGap();
             }
             this.currentRotation = this.rotationQueue.shift();
             if (this.currentRotation === undefined) {
                 this._matchSpeed = undefined; // reset speed for the match animation options
-                return undefined;
+                return;
             }
         }
         if (this.currentRotation.status === 'pending') {
-            this.rotationGroup.add(...this.getRotationLayer(this.currentRotation.rotation));
+            this.rotationGroup.add(...this.getRotationLayer(this.currentRotation.slice));
             this.currentRotation.initialise();
         }
-        if (this.currentRotation.status === 'initialised') {
+        if (this.currentRotation.status === 'initialised' || this.currentRotation.status === 'inProgress') {
             var speed = this.getRotationSpeed();
             this.currentRotation.update(this.rotationGroup, speed);
         }
         if (this.currentRotation.status === 'complete') {
             this.clearRotationGroup();
-            var eventId = this.currentRotation.eventId;
-            this.currentRotation = undefined;
             this.currentState = this.getStickerState();
-            return eventId;
+            this.currentRotation.completedCallback(this.kociembaState);
+            this.currentRotation = undefined;
         }
-        return undefined;
+        return;
     }
 
     /**
@@ -104,9 +109,9 @@ export default class Cube {
         if (this.currentRotation === undefined) {
             this.group.children.forEach((piece) => {
                 var { x, y, z } = piece.userData.position;
-                piece.position.set(x * this.settings.pieceGap, y * this.settings.pieceGap, z * this.settings.pieceGap);
+                piece.position.set(x * this.cubeSettings.pieceGap, y * this.cubeSettings.pieceGap, z * this.cubeSettings.pieceGap);
             });
-            this._lastGap = this.settings.pieceGap;
+            this._lastGap = this.cubeSettings.pieceGap;
         }
     }
 
@@ -121,16 +126,17 @@ export default class Cube {
      * @returns {number}
      */
     getRotationSpeed() {
-        if (this.settings.animationStyle === 'exponential') {
-            return this.settings.animationSpeedMs / 2 ** this.rotationQueue.length;
+        if (this.cubeSettings.animationStyle === 'exponential') {
+            return this.cubeSettings.animationSpeedMs / 2 ** this.rotationQueue.length;
         }
-        if (this.settings.animationStyle === 'next') {
-            return this.rotationQueue.length > 0 ? 0 : this.settings.animationSpeedMs;
+        if (this.cubeSettings.animationStyle === 'next') {
+            return this.rotationQueue.length > 0 ? 0 : this.cubeSettings.animationSpeedMs;
         }
-        if (this.settings.animationStyle === 'match') {
+        if (this.cubeSettings.animationStyle === 'match') {
             if (this.rotationQueue.length > 0) {
-                var lastTimeStamp = this.currentRotation.timestampMs;
-                var minGap = this._matchSpeed ?? this.settings.animationSpeedMs;
+                const rotation = /** @type {CubeRotation} */ (this.currentRotation);
+                const lastTimeStamp = rotation.timestampMs;
+                let minGap = this._matchSpeed ?? this.cubeSettings.animationSpeedMs;
                 for (var i = 0; i < this.rotationQueue.length; i++) {
                     var gap = this.rotationQueue[i].timestampMs - lastTimeStamp;
                     if (gap < minGap) {
@@ -142,29 +148,32 @@ export default class Cube {
             if (this._matchSpeed !== undefined) {
                 return this._matchSpeed;
             }
-            return this.settings.animationSpeedMs;
+            return this.cubeSettings.animationSpeedMs;
         }
-        if (this.settings.animationStyle === 'fixed') {
-            return this.settings.animationSpeedMs;
+        if (this.cubeSettings.animationStyle === 'fixed') {
+            return this.cubeSettings.animationSpeedMs;
         }
-        return this.settings.animationSpeedMs;
+        return this.cubeSettings.animationSpeedMs;
     }
 
     /**
      * Complete the current rotation and reset the cube
+     * @param {(state:string) => boolean} completedCallback
      * @returns {void}
      */
-    reset() {
+    reset(completedCallback) {
+        this.rotationQueue.forEach((cubeRotation) => cubeRotation.failedCallback('State reset during action'));
         this.rotationQueue = [];
         if (this.currentRotation) {
             this.currentRotation.update(this.rotationGroup, 0);
             this.clearRotationGroup();
+            this.currentRotation.failedCallback('State reset during action');
             this.currentRotation = undefined;
         }
         this.group.children.forEach((piece) => {
             const { x, y, z } = piece.userData.initialPosition;
             const { x: u, y: v, z: w } = piece.userData.initialRotation;
-            piece.position.set(x * this.settings.pieceGap, y * this.settings.pieceGap, z * this.settings.pieceGap);
+            piece.position.set(x * this.cubeSettings.pieceGap, y * this.cubeSettings.pieceGap, z * this.cubeSettings.pieceGap);
             piece.rotation.set(u, v, w);
             piece.userData.position.x = x;
             piece.userData.position.y = y;
@@ -173,6 +182,11 @@ export default class Cube {
             piece.userData.rotation.y = v;
             piece.userData.rotation.z = w;
         });
+
+        this.currentState = this.getStickerState();
+        if (!completedCallback(this.kociembaState)) {
+            console.error('Failed to invoke reset completedCallback');
+        }
     }
 
     /**
@@ -180,8 +194,13 @@ export default class Cube {
      * @returns {void}
      */
     clearRotationGroup() {
+        if (this.currentRotation == null) {
+            console.error('cannot clear rotation when rotation is null');
+            return;
+        }
         if (this.currentRotation.status != 'complete') {
-            throw Error('cannot clear rotation group while rotating');
+            console.error('cannot clear rotation group while rotating');
+            return;
         }
         this.rotationGroup.children.forEach((piece) => {
             piece.getWorldPosition(piece.position);
@@ -202,51 +221,78 @@ export default class Cube {
     }
 
     /**
-     * @param {string} eventId
-     * @param {{axis: "x"|"y"|"z", layers: (-1|0|1)[], direction: 1|-1|2|-2}} input
+     *  @param {string} eventId
+     *  @param {import('../core').Rotation} rotation
+     * @param {((state: string) => void )} completedCallback
+     * @param {((reason: string) => void )} failedCallback
+     */
+    rotation(eventId, rotation, completedCallback, failedCallback) {
+        const slice = GetRotationSlice(rotation);
+        this.rotationQueue.push(new CubeRotation(eventId, slice, completedCallback, failedCallback));
+    }
+
+    /**
+     *  @param {string} eventId
+     *  @param {import('../core').Movement} movement
+     * @param {((state: string) => void )} completedCallback
+     * @param {((reason: string) => void )} failedCallback
      */
-    rotate(eventId, input) {
-        this.rotationQueue.push(new CubeRotation(eventId, input));
+    movement(eventId, movement, completedCallback, failedCallback) {
+        const slice = GetMovementSlice(movement);
+        this.rotationQueue.push(new CubeRotation(eventId, slice, completedCallback, failedCallback));
     }
 
     /**
-     * @param {{axis: "x"|"y"|"z", layers: (-1|0|1)[], direction: 1|-1|2|-2}}
+     * @param {import('./slice').Slice} slice
      * @returns {Object3D[]}
      */
-    getRotationLayer({ axis, layers, direction }) {
-        if (layers.length === 0) {
+    getRotationLayer(slice) {
+        if (slice.layers.length === 0) {
             return [...this.group.children];
         }
         return this.group.children.filter((piece) => {
-            if (axis === 'x') {
-                return layers.includes(Math.round(piece.userData.position.x));
-            } else if (axis === 'y') {
-                return layers.includes(Math.round(piece.userData.position.y));
-            } else if (axis === 'z') {
-                return layers.includes(Math.round(piece.userData.position.z));
+            if (slice.axis === Axi.x) {
+                const roundedPos = /** @type {(-1|0|1)} */ (Math.round(piece.userData.position.x));
+                return slice.layers.includes(roundedPos);
+            } else if (slice.axis === Axi.y) {
+                const roundedPos = /** @type {(-1|0|1)} */ (Math.round(piece.userData.position.y));
+                return slice.layers.includes(roundedPos);
+            } else if (slice.axis === Axi.z) {
+                const roundedPos = /** @type {(-1|0|1)} */ (Math.round(piece.userData.position.z));
+                return slice.layers.includes(roundedPos);
             }
             return false;
         });
     }
 
     /**
-     * @returns {{ up: string[][], down: string[][], front: string[][], back: string[][], left: string[][], right: string[][] }}
+     * @returns {string}
+     */
+    get kociembaState() {
+        return this.toKociemba(this.currentState);
+    }
+
+    /**
+     * @param {StickerState} stickerState
+     * @returns {string}
+     */
+    toKociemba(stickerState) {
+        return `${stickerState.up.flat().join('')}${stickerState.right.flat().join('')}${stickerState.front.flat().join('')}${stickerState.down.flat().join('')}${stickerState.left.flat().join('')}${stickerState.back.flat().join('')}`;
+    }
+
+    /**
+     * @returns {StickerState}
      */
     getStickerState() {
-        const state = {
-            up: [[], [], []],
-            down: [[], [], []],
-            front: [[], [], []],
-            back: [[], [], []],
-            left: [[], [], []],
-            right: [[], [], []],
-        };
+        /** @type {StickerState} */
+        let state = { up: [[], [], []], down: [[], [], []], front: [[], [], []], back: [[], [], []], left: [[], [], []], right: [[], [], []] };
         this.group.children.forEach((piece) => {
             if (piece.userData.type === 'core') {
                 return;
             }
-            piece.children.forEach((mesh) => {
-                if (mesh.userData.type === 'sticker') {
+            piece.children.forEach((object3D) => {
+                if (object3D.userData.type === 'sticker') {
+                    const mesh = /** @type {Mesh} */ (object3D);
                     const piecepos = new Vector3();
                     piecepos.copy(piece.userData.position);
                     piecepos.round();
@@ -255,18 +301,20 @@ export default class Cube {
                     stickerpos.sub(piecepos);
                     stickerpos.multiplyScalar(2);
                     stickerpos.round();
+                    const material = /** @type {Material} */ (mesh.material);
+                    const materialUserData = /** @type {import('../threejs/materials').StickerUserData} */ (material.userData);
                     if (stickerpos.x === 1) {
-                        state.right[1 - Math.round(piecepos.y)][1 - Math.round(piecepos.z)] = mesh.material.userData.face;
+                        state.right[1 - Math.round(piecepos.y)][1 - Math.round(piecepos.z)] = materialUserData.face;
                     } else if (stickerpos.x === -1) {
-                        state.left[1 - Math.round(piecepos.y)][1 + Math.round(piecepos.z)] = mesh.material.userData.face;
+                        state.left[1 - Math.round(piecepos.y)][1 + Math.round(piecepos.z)] = materialUserData.face;
                     } else if (stickerpos.y === 1) {
-                        state.up[1 + Math.round(piecepos.z)][1 + Math.round(piecepos.x)] = mesh.material.userData.face;
+                        state.up[1 + Math.round(piecepos.z)][1 + Math.round(piecepos.x)] = materialUserData.face;
                     } else if (stickerpos.y === -1) {
-                        state.down[1 - Math.round(piecepos.z)][1 + Math.round(piecepos.x)] = mesh.material.userData.face;
+                        state.down[1 - Math.round(piecepos.z)][1 + Math.round(piecepos.x)] = materialUserData.face;
                     } else if (stickerpos.z === 1) {
-                        state.front[1 - Math.round(piecepos.y)][1 + Math.round(piecepos.x)] = mesh.material.userData.face;
+                        state.front[1 - Math.round(piecepos.y)][1 + Math.round(piecepos.x)] = materialUserData.face;
                     } else if (stickerpos.z === -1) {
-                        state.back[1 - Math.round(piecepos.y)][1 - Math.round(piecepos.x)] = mesh.material.userData.face;
+                        state.back[1 - Math.round(piecepos.y)][1 - Math.round(piecepos.x)] = materialUserData.face;
                     }
                 }
             });

package/src/cube/cubeRotation.js

@@ -1,20 +1,27 @@
+// @ts-check
 import { Vector3, Group } from 'three';
 
 export class CubeRotation {
     /**
      * @param {string} eventId
-     * @param {{axis: "x"|"y"|"z", layers: (-1|0|1)[], direction: 1|-1|2|-2}} rotationDetails
+     * @param {import('./slice').Slice} slice
+     * @param {((state: string) => void )} completedCallback
+     * @param {((reason: string) => void )} failedCallback
      */
-    constructor(eventId, rotationDetails) {
+    constructor(eventId, slice, completedCallback, failedCallback) {
+        /** @type {((state: string) => void )} */
+        this.completedCallback = completedCallback;
+        /** @type {((reason: string) => void )} */
+        this.failedCallback = failedCallback;
         /** @type {string} */
         this.eventId = eventId;
-        /** @type {{axis: "x"|"y"|"z", layers: (-1|0|1)[], direction: 1|-1|2|-2}} */
-        this.rotation = rotationDetails;
-        /** @type {"pending" | "initialised" | "complete" | "disposed"} */
+        /** @type {import('./slice').Slice} */
+        this.slice = slice;
+        /** @type {"pending" | "initialised" | "inProgress" | "complete" | "disposed"} */
         this.status = 'pending';
         /** @type {number} */
         this.timestampMs = performance.now();
-        /** @type {number} */
+        /** @type {number | undefined} */
         this._lastUpdatedTimeMs = undefined;
         /** @type {number} */
         this._rotationPercentage = 0;
@@ -31,6 +38,15 @@ export class CubeRotation {
      * @param {number} speedMs
      */
     update(rotationGroup, speedMs) {
+        if (this.status === 'initialised') {
+            this.status = 'inProgress';
+        }
+
+        if (this.status !== 'inProgress' || this._lastUpdatedTimeMs == null) {
+            console.error(`Cannot update cubeRotation. Status - [${this.status}]. LastUpdated - [${this._lastUpdatedTimeMs}].`);
+            return;
+        }
+
         var intervalMs = performance.now() - this._lastUpdatedTimeMs;
         this._lastUpdatedTimeMs = performance.now();
 
@@ -41,13 +57,13 @@ export class CubeRotation {
                 increment = potentialIncrement;
             }
         }
-        const rotationIncrement = (Math.abs(this.rotation.direction) * ((increment / 100) * Math.PI)) / 2;
+        const rotationIncrement = (Math.abs(this.slice.direction) * ((increment / 100) * Math.PI)) / 2;
         this._rotationPercentage += increment;
         rotationGroup.rotateOnWorldAxis(
             new Vector3(
-                this.rotation.axis === 'x' ? this.rotation.direction : 0,
-                this.rotation.axis === 'y' ? this.rotation.direction : 0,
-                this.rotation.axis === 'z' ? this.rotation.direction : 0,
+                this.slice.axis === 'x' ? this.slice.direction : 0,
+                this.slice.axis === 'y' ? this.slice.direction : 0,
+                this.slice.axis === 'z' ? this.slice.direction : 0,
             ).normalize(),
             rotationIncrement,
         );

package/src/cube/cubeSettings.js

@@ -0,0 +1,18 @@
+// @ts-check
+/** @typedef {"exponential" | "next" | "fixed" | "match"} AnimationStyle */
+export default class CubeSettings {
+    /**
+     *
+     * @param {number} pieceGap
+     * @param {number} animationSpeed
+     * @param {AnimationStyle} animationStyle
+     */
+    constructor(pieceGap, animationSpeed, animationStyle) {
+        /** @type {number} pieceGap */
+        this.pieceGap = pieceGap;
+        /** @type {number} pieceGap */
+        this.animationSpeedMs = animationSpeed;
+        /** @type {AnimationStyle} pieceGap */
+        this.animationStyle = animationStyle;
+    }
+}

package/src/cube/cubeState.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { Group } from 'three';
 import Materials from '../threejs/materials';
 import { createCornerGroup, createEdgeGroup, createCenterGroup } from '../threejs/pieces';

package/src/cube/slice.js

@@ -0,0 +1,143 @@
+// @ts-check
+/** @typedef {{axis: import('../core').Axis, layers: (-1|0|1)[], direction: 1|-1|2|-2}} Slice */
+
+import { Axi, Movements, Rotations } from '../core';
+
+/**
+ * @param {import("../core").Movement} movement
+ * @returns {Slice}
+ */
+export default function GetMovementSlice(movement) {
+    switch (movement) {
+        // Up
+        case Movements.U:
+            return { axis: Axi.y, layers: [1], direction: -1 };
+        case Movements.U2:
+            return { axis: Axi.y, layers: [1], direction: -2 };
+        case Movements.UP:
+            return { axis: Axi.y, layers: [1], direction: 1 };
+        case Movements.u:
+            return { axis: Axi.y, layers: [1, 0], direction: -1 };
+        case Movements.u2:
+            return { axis: Axi.y, layers: [1, 0], direction: -2 };
+        case Movements.uP:
+            return { axis: Axi.y, layers: [1, 0], direction: 1 };
+        // Down
+        case Movements.D:
+            return { axis: Axi.y, layers: [-1], direction: -1 };
+        case Movements.D2:
+            return { axis: Axi.y, layers: [-1], direction: -2 };
+        case Movements.DP:
+            return { axis: Axi.y, layers: [-1], direction: 1 };
+        case Movements.d:
+            return { axis: Axi.y, layers: [-1, 0], direction: -1 };
+        case Movements.d2:
+            return { axis: Axi.y, layers: [-1, 0], direction: -2 };
+        case Movements.dP:
+            return { axis: Axi.y, layers: [-1, 0], direction: 1 };
+        // Right
+        case Movements.R:
+            return { axis: Axi.x, layers: [1], direction: -1 };
+        case Movements.R2:
+            return { axis: Axi.x, layers: [1], direction: -2 };
+        case Movements.RP:
+            return { axis: Axi.x, layers: [1], direction: 1 };
+        case Movements.r:
+            return { axis: Axi.x, layers: [1, 0], direction: -1 };
+        case Movements.r2:
+            return { axis: Axi.x, layers: [1, 0], direction: -2 };
+        case Movements.rP:
+            return { axis: Axi.x, layers: [1, 0], direction: 1 };
+        // Left
+        case Movements.L:
+            return { axis: Axi.x, layers: [-1], direction: -1 };
+        case Movements.L2:
+            return { axis: Axi.x, layers: [-1], direction: -2 };
+        case Movements.LP:
+            return { axis: Axi.x, layers: [-1], direction: 1 };
+        case Movements.l:
+            return { axis: Axi.x, layers: [-1, 0], direction: -1 };
+        case Movements.l2:
+            return { axis: Axi.x, layers: [-1, 0], direction: -2 };
+        case Movements.lP:
+            return { axis: Axi.x, layers: [-1, 0], direction: 1 };
+        // Front
+        case Movements.F:
+            return { axis: Axi.z, layers: [1], direction: -1 };
+        case Movements.F2:
+            return { axis: Axi.z, layers: [1], direction: -2 };
+        case Movements.FP:
+            return { axis: Axi.z, layers: [1], direction: 1 };
+        case Movements.f:
+            return { axis: Axi.z, layers: [1, 0], direction: -1 };
+        case Movements.f2:
+            return { axis: Axi.z, layers: [1, 0], direction: -2 };
+        case Movements.fP:
+            return { axis: Axi.z, layers: [1, 0], direction: 1 };
+        // Back
+        case Movements.B:
+            return { axis: Axi.z, layers: [-1], direction: -1 };
+        case Movements.B2:
+            return { axis: Axi.z, layers: [-1], direction: -2 };
+        case Movements.BP:
+            return { axis: Axi.z, layers: [-1], direction: 1 };
+        case Movements.b:
+            return { axis: Axi.z, layers: [-1, 0], direction: -1 };
+        case Movements.b2:
+            return { axis: Axi.z, layers: [-1, 0], direction: -2 };
+        case Movements.bP:
+            return { axis: Axi.z, layers: [-1, 0], direction: 1 };
+        //Middle
+        case Movements.M:
+            return { axis: Axi.x, layers: [0], direction: -1 };
+        case Movements.M2:
+            return { axis: Axi.x, layers: [0], direction: -2 };
+        case Movements.MP:
+            return { axis: Axi.x, layers: [0], direction: 1 };
+        //Equator
+        case Movements.E:
+            return { axis: Axi.y, layers: [0], direction: -1 };
+        case Movements.E2:
+            return { axis: Axi.y, layers: [0], direction: -2 };
+        case Movements.EP:
+            return { axis: Axi.y, layers: [0], direction: 1 };
+        //Slice
+        case Movements.S:
+            return { axis: Axi.z, layers: [0], direction: -1 };
+        case Movements.S2:
+            return { axis: Axi.z, layers: [0], direction: -2 };
+        case Movements.SP:
+            return { axis: Axi.z, layers: [0], direction: 1 };
+        default:
+            throw Error(`Failed to get movement slice. invalid movement: ${movement}`);
+    }
+}
+
+/**
+ * @param {import("../core").Rotation} rotation
+ * @returns {Slice}
+ */
+export function GetRotationSlice(rotation) {
+    switch (rotation) {
+        case Rotations.x:
+            return { axis: Axi.x, layers: [], direction: -1 };
+        case Rotations.x2:
+            return { axis: Axi.x, layers: [], direction: -2 };
+        case Rotations.xP:
+            return { axis: Axi.x, layers: [], direction: 1 };
+        case Rotations.y:
+            return { axis: Axi.y, layers: [], direction: -1 };
+        case Rotations.y2:
+            return { axis: Axi.y, layers: [], direction: -2 };
+        case Rotations.yP:
+            return { axis: Axi.y, layers: [], direction: 1 };
+        case Rotations.z:
+            return { axis: Axi.z, layers: [], direction: -1 };
+        case Rotations.z2:
+            return { axis: Axi.z, layers: [], direction: -2 };
+        case Rotations.zP:
+            return { axis: Axi.z, layers: [], direction: 1 };
+        default:
+            throw Error(`Failed to get rotation slice. invalid rotation: ${rotation}`);
+    }
+}

package/src/debouncer.js

@@ -0,0 +1,16 @@
+// @ts-check
+/**
+ * @param {number} delay
+ * @param {{ (entries: { contentRect: { width: number; height: number; }; }[]): void; apply?: any; }} f
+ */
+export function debounce(f, delay) {
+    let timer = 0;
+    /**
+     * @this {any}
+     * @param {any[]} args
+     */
+    return function (...args) {
+        clearTimeout(timer);
+        timer = setTimeout(() => f.apply(this, args), delay);
+    };
+}

package/src/globals.ts

@@ -0,0 +1,9 @@
+import { RubiksCubeElement } from '.';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'rubiks-cube': RubiksCubeElement;
+    }
+}
+
+export {};