@houstonp/rubiks-cube 1.1.1 → 1.2.1

package/src/cube/cube.js

@@ -0,0 +1,194 @@
+import { Group, Vector3 } from 'three';
+import { createCoreMesh } from '../threejs/pieces';
+import { createCubeState } from './cubeState';
+import { CubeRotation } from './cubeRotation';
+
+const minimumGap = 1;
+
+export default class Cube {
+    /**
+     *   @param {{style: "exponential" | "next" | "fixed", speed: number, gap: number}} params
+     */
+    constructor({ gap, speed, style }) {
+        /** @type {number} */
+        this.gap = gap < minimumGap ? minimumGap : gap;
+        /** @type {Group} */
+        this.group = new Group();
+        /** @type {Group} */
+        this.rotationGroup = new Group();
+        /** @type {CubeRotation[]} */
+        this.rotationQueue = [];
+        /** @type {CubeRotation | undefined} */
+        this.currentRotation = undefined;
+        /** @type {number} */
+        this.animationSpeed = speed;
+        /** @type {"exponential" | "next" | "fixed"} */
+        this.animationStyle = style;
+
+        const core = createCoreMesh();
+        core.userData = {
+            position: { x: 0, y: 0, z: 0 },
+            rotation: { x: 0, y: 0, z: 0 },
+            initialPosition: { x: 0, y: 0, z: 0 },
+            initialRotation: { x: 0, y: 0, z: 0 },
+            type: 'core',
+        };
+        this.group.add(core);
+
+        for (const piece of createCubeState()) {
+            var pieceGroup = piece.group;
+            pieceGroup.position.set(piece.position.x * this.gap, piece.position.y * this.gap, piece.position.z * this.gap);
+            pieceGroup.rotation.set(piece.rotation.x, piece.rotation.y, piece.rotation.z);
+            pieceGroup.userData = {
+                position: Object.assign({}, piece.position),
+                rotation: Object.assign({}, piece.rotation),
+                initialPosition: Object.assign({}, piece.position),
+                initialRotation: Object.assign({}, piece.rotation),
+                type: piece.type,
+            };
+            this.group.add(pieceGroup);
+        }
+    }
+
+    update() {
+        if (this.currentRotation === undefined) {
+            this.currentRotation = this.rotationQueue.shift();
+            if (this.currentRotation === undefined) return;
+            this.rotationGroup.add(...this.getRotationLayer(this.currentRotation.rotation));
+            this.currentRotation.initialise();
+        }
+
+        if (this.currentRotation.status === 'complete') {
+            this.clearRotationGroup();
+            this.currentRotation.dispose();
+            this.currentRotation = this.rotationQueue.shift();
+            if (this.currentRotation === undefined) return;
+            this.rotationGroup.add(...this.getRotationLayer(this.currentRotation.rotation));
+            this.currentRotation.initialise();
+        }
+
+        this.currentRotation.update(this.rotationGroup, this.getRotationSpeed());
+    }
+
+    getRotationSpeed() {
+        if (this.animationStyle == 'exponential') {
+            return this.animationSpeed / 2 ** this.rotationQueue.length;
+        }
+        if (this.animationStyle == 'next') {
+            return this.rotationQueue.length > 0 ? 0 : this.animationSpeed;
+        }
+        return this.animationSpeed;
+    }
+
+    reset() {
+        this.rotationQueue = [];
+        if (this.currentRotation) {
+            this.currentRotation.update(this.rotationGroup, 0);
+            this.clearRotationGroup();
+            this.currentRotation.dispose();
+            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.gap, y * this.gap, z * this.gap);
+            piece.rotation.set(u, v, w);
+            piece.userData.position.x = x;
+            piece.userData.position.y = y;
+            piece.userData.position.z = z;
+            piece.userData.rotation.x = u;
+            piece.userData.rotation.y = v;
+            piece.userData.rotation.z = w;
+        });
+    }
+
+    clearRotationGroup() {
+        if (this.currentRotation.status != 'complete') {
+            throw Error('cannot clear rotation group while rotating');
+        }
+        this.rotationGroup.children.forEach((piece) => {
+            piece.getWorldPosition(piece.position);
+            piece.getWorldQuaternion(piece.quaternion);
+            var x = Math.round(piece.position.x);
+            var y = Math.round(piece.position.y);
+            var z = Math.round(piece.position.z);
+            piece.userData.position.x = Math.abs(x) > 1 ? Math.sign(x) : x;
+            piece.userData.position.y = Math.abs(y) > 1 ? Math.sign(y) : y;
+            piece.userData.position.z = Math.abs(z) > 1 ? Math.sign(z) : z;
+            piece.userData.rotation.x = piece.rotation.x;
+            piece.userData.rotation.y = piece.rotation.y;
+            piece.userData.rotation.z = piece.rotation.z;
+        });
+        this.group.add(...this.rotationGroup.children);
+        this.rotationGroup.rotation.set(0, 0, 0);
+    }
+
+    /**
+     * @param {{axis: "x"|"y"|"z", layers: (-1|0|1)[], direction: 1|-1|2|-2}} input
+     */
+    rotate(input) {
+        this.rotationQueue.push(new CubeRotation(input));
+    }
+
+    /**
+     * @param {{axis: "x"|"y"|"z", layers: (-1|0|1)[], direction: 1|-1|2|-2}}
+     * @returns {Object3D[]}
+     */
+    getRotationLayer({ axis, layers, direction }) {
+        if (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));
+            }
+            return false;
+        });
+    }
+
+    getStickerState() {
+        const 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') {
+                    const piecepos = new Vector3();
+                    piecepos.copy(piece.userData.position);
+                    piecepos.round();
+                    const stickerpos = new Vector3();
+                    mesh.getWorldPosition(stickerpos);
+                    stickerpos.sub(piecepos);
+                    stickerpos.multiplyScalar(2);
+                    stickerpos.round();
+                    if (stickerpos.x === 1) {
+                        state.right[1 - Math.round(piecepos.y)][1 - Math.round(piecepos.z)] = mesh.material.userData.face;
+                    } else if (stickerpos.x === -1) {
+                        state.left[1 - Math.round(piecepos.y)][1 + Math.round(piecepos.z)] = mesh.material.userData.face;
+                    } else if (stickerpos.y === 1) {
+                        state.up[1 + Math.round(piecepos.z)][1 + Math.round(piecepos.x)] = mesh.material.userData.face;
+                    } else if (stickerpos.y === -1) {
+                        state.down[1 - Math.round(piecepos.z)][1 + Math.round(piecepos.x)] = mesh.material.userData.face;
+                    } else if (stickerpos.z === 1) {
+                        state.front[1 - Math.round(piecepos.y)][1 + Math.round(piecepos.x)] = mesh.material.userData.face;
+                    } else if (stickerpos.z === -1) {
+                        state.back[1 - Math.round(piecepos.y)][1 - Math.round(piecepos.x)] = mesh.material.userData.face;
+                    }
+                }
+            });
+        });
+        return state;
+    }
+}

package/src/cube/cubeRotation.js

@@ -0,0 +1,60 @@
+import { Vector3, Group } from 'three';
+
+export class CubeRotation {
+    /**
+     * @param {{axis: "x"|"y"|"z", layers: (-1|0|1)[], direction: 1|-1|2|-2}} input
+     */
+    constructor(rotation) {
+        /** @type {{axis: "x"|"y"|"z", layers: (-1|0|1)[], direction: 1|-1|2|-2}} */
+        this.rotation = rotation;
+        /** @type {"pending" | "initialised" | "complete" | "disposed"} */
+        this.status = 'pending';
+        /** @type {number} */
+        this._lastUpdatedTimeMs = undefined;
+        this._startTimeMs = undefined;
+        /** @type {number} */
+        this._rotationPercentage = 0;
+    }
+
+    initialise() {
+        this._lastUpdatedTimeMs = performance.now();
+        this._startTimeMs = this._lastUpdatedTimeMs;
+        this.status = 'initialised';
+    }
+
+    dispose() {
+        this.status = 'disposed';
+    }
+
+    /**
+     *
+     * @param {Group} rotationGroup
+     * @param {number} speedMs
+     */
+    update(rotationGroup, speedMs) {
+        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;
+            }
+        }
+        const rotationIncrement = (Math.abs(this.rotation.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,
+            ).normalize(),
+            rotationIncrement,
+        );
+
+        if (this._rotationPercentage >= 100) {
+            this.status = 'complete';
+        }
+    }
+}

package/src/cube/cubeState.js

@@ -0,0 +1,191 @@
+import { Group } from 'three';
+import Materials from '../threejs/materials';
+import { createCornerGroup, createEdgeGroup, createCenterGroup } from '../threejs/pieces';
+
+/**
+ * @typedef {{x: number,y: number,z: number}} vector
+ */
+
+/**
+ * @typedef {{position: vector, rotation: vector, type: "corner" | "edge" | "center", group: Group}} state
+ */
+
+/**
+ * @return {state[]}
+ */
+const corners = () => [
+    {
+        position: { x: 1, y: 1, z: 1 },
+        rotation: { x: 0, y: 0, z: 0 },
+        type: 'corner',
+        group: createCornerGroup(Materials.front, Materials.right, Materials.up, Materials.core),
+    },
+    {
+        position: { x: 1, y: 1, z: -1 },
+        rotation: { x: 0, y: Math.PI / 2, z: 0 },
+        type: 'corner',
+        group: createCornerGroup(Materials.right, Materials.back, Materials.up, Materials.core),
+    },
+    {
+        position: { x: 1, y: -1, z: 1 },
+        rotation: { x: 0, y: Math.PI / 2, z: Math.PI },
+        type: 'corner',
+        group: createCornerGroup(Materials.right, Materials.front, Materials.down, Materials.core),
+    },
+    {
+        position: { x: 1, y: -1, z: -1 },
+        rotation: { x: 0, y: Math.PI, z: Math.PI },
+        type: 'corner',
+        group: createCornerGroup(Materials.back, Materials.right, Materials.down, Materials.core),
+    },
+    {
+        position: { x: -1, y: 1, z: 1 },
+        rotation: { x: 0, y: -Math.PI / 2, z: 0 },
+        type: 'corner',
+        group: createCornerGroup(Materials.left, Materials.front, Materials.up, Materials.core),
+    },
+    {
+        position: { x: -1, y: 1, z: -1 },
+        rotation: { x: 0, y: Math.PI, z: 0 },
+        type: 'corner',
+        group: createCornerGroup(Materials.back, Materials.left, Materials.up, Materials.core),
+    },
+    {
+        position: { x: -1, y: -1, z: 1 },
+        rotation: { x: 0, y: 0, z: Math.PI },
+        type: 'corner',
+        group: createCornerGroup(Materials.front, Materials.left, Materials.down, Materials.core),
+    },
+    {
+        position: { x: -1, y: -1, z: -1 },
+        rotation: { x: 0, y: -Math.PI / 2, z: Math.PI },
+        type: 'corner',
+        group: createCornerGroup(Materials.left, Materials.back, Materials.down, Materials.core),
+    },
+];
+
+/**
+ * @return {state[]}
+ */
+const edges = () => [
+    {
+        position: { x: 1, y: 1, z: 0 },
+        rotation: { x: 0, y: Math.PI / 2, z: 0 },
+        type: 'edge',
+        group: createEdgeGroup(Materials.right, Materials.up, Materials.core),
+    },
+    {
+        position: { x: 1, y: 0, z: 1 },
+        rotation: { x: 0, y: 0, z: -Math.PI / 2 },
+        type: 'edge',
+        group: createEdgeGroup(Materials.front, Materials.right, Materials.core),
+    },
+    {
+        position: { x: 1, y: 0, z: -1 },
+        rotation: { x: 0, y: Math.PI / 2, z: -Math.PI / 2 },
+        type: 'edge',
+        group: createEdgeGroup(Materials.right, Materials.back, Materials.core),
+    },
+    {
+        position: { x: 1, y: -1, z: 0 },
+        rotation: { x: Math.PI, y: Math.PI / 2, z: 0 },
+        type: 'edge',
+        group: createEdgeGroup(Materials.right, Materials.down, Materials.core),
+    },
+    {
+        position: { x: 0, y: 1, z: 1 },
+        rotation: { x: 0, y: 0, z: 0 },
+        type: 'edge',
+        group: createEdgeGroup(Materials.front, Materials.up, Materials.core),
+    },
+    {
+        position: { x: 0, y: 1, z: -1 },
+        rotation: { x: -Math.PI / 2, y: 0, z: 0 },
+        type: 'edge',
+        group: createEdgeGroup(Materials.up, Materials.back, Materials.core),
+    },
+    {
+        position: { x: 0, y: -1, z: 1 },
+        rotation: { x: Math.PI / 2, y: 0, z: 0 },
+        type: 'edge',
+        group: createEdgeGroup(Materials.down, Materials.front, Materials.core),
+    },
+    {
+        position: { x: 0, y: -1, z: -1 },
+        rotation: { x: Math.PI, y: 0, z: 0 },
+        type: 'edge',
+        group: createEdgeGroup(Materials.back, Materials.down, Materials.core),
+    },
+    {
+        position: { x: -1, y: 1, z: 0 },
+        rotation: { x: 0, y: -Math.PI / 2, z: 0 },
+        type: 'edge',
+        group: createEdgeGroup(Materials.left, Materials.up, Materials.core),
+    },
+    {
+        position: { x: -1, y: 0, z: 1 },
+        rotation: { x: 0, y: 0, z: Math.PI / 2 },
+        type: 'edge',
+        group: createEdgeGroup(Materials.front, Materials.left, Materials.core),
+    },
+    {
+        position: { x: -1, y: 0, z: -1 },
+        rotation: { x: 0, y: -Math.PI / 2, z: Math.PI / 2 },
+        type: 'edge',
+        group: createEdgeGroup(Materials.left, Materials.back, Materials.core),
+    },
+    {
+        position: { x: -1, y: -1, z: 0 },
+        rotation: { x: 0, y: -Math.PI / 2, z: Math.PI },
+        type: 'edge',
+        group: createEdgeGroup(Materials.left, Materials.down, Materials.core),
+    },
+];
+
+/**
+ * @return {state[]}
+ */
+const centers = () => [
+    {
+        position: { x: 1, y: 0, z: 0 },
+        rotation: { x: 0, y: Math.PI / 2, z: 0 },
+        type: 'center',
+        group: createCenterGroup(Materials.right, Materials.core),
+    },
+    {
+        position: { x: 0, y: 1, z: 0 },
+        rotation: { x: -Math.PI / 2, y: 0, z: 0 },
+        type: 'center',
+        group: createCenterGroup(Materials.up, Materials.core),
+    },
+    {
+        position: { x: 0, y: 0, z: 1 },
+        rotation: { x: 0, y: 0, z: 0 },
+        type: 'center',
+        group: createCenterGroup(Materials.front, Materials.core),
+    },
+    {
+        position: { x: 0, y: 0, z: -1 },
+        rotation: { x: 0, y: Math.PI, z: 0 },
+        type: 'center',
+        group: createCenterGroup(Materials.back, Materials.core),
+    },
+    {
+        position: { x: 0, y: -1, z: 0 },
+        rotation: { x: Math.PI / 2, y: 0, z: 0 },
+        type: 'center',
+        group: createCenterGroup(Materials.down, Materials.core),
+    },
+    {
+        position: { x: -1, y: 0, z: 0 },
+        rotation: { x: 0, y: -Math.PI / 2, z: 0 },
+        type: 'center',
+        group: createCenterGroup(Materials.left, Materials.core),
+    },
+];
+
+/**
+ * @return {state[]}
+ */
+const createCubeState = () => [...corners(), ...edges(), ...centers()];
+export { createCubeState };

package/src/{materials.js → threejs/materials.js}

@@ -1,42 +1,42 @@
-import * as THREE from "three";
+import { MeshStandardMaterial, MeshBasicMaterial } from "three";
 export default class Materials {
-  static front = new THREE.MeshStandardMaterial({
+  static front = new MeshStandardMaterial({
     color: "#2cbf13",
     metalness: 0,
     roughness: 0.4,
     userData: { face: "front", color: "green" },
   });
-  static back = new THREE.MeshStandardMaterial({
+  static back = new MeshStandardMaterial({
     color: "blue",
     metalness: 0,
     roughness: 0.4,
     userData: { face: "back", color: "blue" },
   });
-  static up = new THREE.MeshStandardMaterial({
+  static up = new MeshStandardMaterial({
     color: "white",
     metalness: 0,
     roughness: 0.4,
     userData: { face: "up", color: "white" },
   });
-  static down = new THREE.MeshStandardMaterial({
+  static down = new MeshStandardMaterial({
     color: "yellow",
     metalness: 0,
     roughness: 0.4,
     userData: { face: "down", color: "yellow" },
   });
-  static left = new THREE.MeshStandardMaterial({
+  static left = new MeshStandardMaterial({
     color: "#fc9a05",
     metalness: 0,
     roughness: 0.4,
     userData: { face: "left", color: "orange" },
   });
-  static right = new THREE.MeshStandardMaterial({
+  static right = new MeshStandardMaterial({
     color: "red",
     metalness: 0,
     roughness: 0.4,
     userData: { face: "right", color: "red" },
   });
-  static core = new THREE.MeshBasicMaterial({
+  static core = new MeshBasicMaterial({
     color: "black",
   });
 }

package/src/threejs/pieces.js

@@ -0,0 +1,103 @@
+import { Group, BoxGeometry, Mesh, SphereGeometry, Material } from 'three';
+import Stickers from './stickers';
+import Materials from './materials';
+
+/**
+ * @param {Geometry} sticker
+ * @param {Material} frontMaterial
+ * @param {Material} rightMaterial
+ * @param {Material} topMaterial
+ * @param {Material} coreMaterial
+ * @returns {Group}
+ */
+export function createCornerGroup(frontMaterial, rightMaterial, topMaterial, coreMaterial) {
+    const group = new Group();
+    const boxGeom = new BoxGeometry(1, 1, 1);
+    const boxMesh = new Mesh(boxGeom, coreMaterial);
+    boxMesh.userData = { type: 'piece' };
+    group.add(boxMesh);
+
+    // front
+    const frontSticker = new Mesh(Stickers.corner, frontMaterial);
+    frontSticker.userData = { type: 'sticker' };
+    frontSticker.position.set(0, 0, 0.5);
+    frontSticker.rotation.set(0, 0, 0);
+    group.add(frontSticker);
+
+    //right
+    const rightSticker = new Mesh(Stickers.corner, rightMaterial);
+    rightSticker.userData = { type: 'sticker' };
+    rightSticker.position.set(0.5, 0, 0);
+    rightSticker.rotation.set(Math.PI / 2, Math.PI / 2, 0);
+    group.add(rightSticker);
+
+    //white/yellow
+    const topSticker = new Mesh(Stickers.corner, topMaterial);
+    topSticker.userData = { type: 'sticker' };
+    topSticker.position.set(0, 0.5, 0);
+    topSticker.rotation.set(-Math.PI / 2, 0, -Math.PI / 2);
+    group.add(topSticker);
+
+    return group;
+}
+
+/**
+ * @param {Geometry} sticker
+ * @param {Material} frontMaterial
+ * @param {Material} topMaterial
+ * @param {Material} coreMaterial
+ * @returns {Group}
+ */
+export function createEdgeGroup(frontMaterial, topMaterial, coreMaterial) {
+    const group = new Group();
+    const boxGeom = new BoxGeometry(1, 1, 1);
+    const boxMesh = new Mesh(boxGeom, coreMaterial);
+    boxMesh.userData = { type: 'piece' };
+    group.add(boxMesh);
+
+    // front
+    const frontSticker = new Mesh(Stickers.edge, frontMaterial);
+    frontSticker.userData = { type: 'sticker' };
+    frontSticker.position.set(0, 0, 0.5);
+    frontSticker.rotation.set(0, 0, 0);
+    group.add(frontSticker);
+
+    // top
+    const topSticker = new Mesh(Stickers.edge, topMaterial);
+    topSticker.userData = { type: 'sticker' };
+    topSticker.position.set(0, 0.5, 0);
+    topSticker.rotation.set(-Math.PI / 2, 0, Math.PI);
+    group.add(topSticker);
+
+    return group;
+}
+
+/**
+ * @param {Geometry} sticker
+ * @param {Material} frontMaterial
+ * @param {Material} topMaterial
+ * @param {Material} coreMaterial
+ * @returns {Group}
+ */
+export function createCenterGroup(frontMaterial, coreMaterial) {
+    const group = new Group();
+    const boxGeom = new BoxGeometry(1, 1, 1);
+    const boxMesh = new Mesh(boxGeom, coreMaterial);
+    boxMesh.userData = { type: 'piece' };
+    group.add(boxMesh);
+
+    const frontSticker = new Mesh(Stickers.center, frontMaterial);
+    frontSticker.userData = { type: 'sticker' };
+    frontSticker.position.set(0, 0, 0.5);
+    frontSticker.rotation.set(0, 0, 0);
+    group.add(frontSticker);
+
+    return group;
+}
+
+/**
+ * @returns {Mesh}
+ */
+export function createCoreMesh() {
+    return new Mesh(new SphereGeometry(1.53), Materials.core);
+}

package/src/{stickers.js → threejs/stickers.js}

@@ -1,5 +1,5 @@
-import * as THREE from "three";
 import { SVGLoader } from "three/examples/jsm/Addons.js";
+import { ExtrudeGeometry } from "three";
 
 const loader = new SVGLoader();
 const cornerSVG = loader.parse(`
@@ -19,7 +19,7 @@ const centerSVG = loader.parse(`
 `);
 
 export default class Stickers {
-  static center = new THREE.ExtrudeGeometry(
+  static center = new ExtrudeGeometry(
     SVGLoader.createShapes(centerSVG.paths[0])[0],
     {
       depth: 15,
@@ -28,7 +28,7 @@ export default class Stickers {
     .scale(0.002, 0.002, 0.002)
     .translate(-0.5, -0.5, 0);
 
-  static edge = new THREE.ExtrudeGeometry(
+  static edge = new ExtrudeGeometry(
     SVGLoader.createShapes(edgeSVG.paths[0])[0],
     {
       depth: 15,
@@ -37,7 +37,7 @@ export default class Stickers {
     .scale(0.002, 0.002, 0.002)
     .translate(-0.5, -0.5, 0);
 
-  static corner = new THREE.ExtrudeGeometry(
+  static corner = new ExtrudeGeometry(
     SVGLoader.createShapes(cornerSVG.paths[0])[0],
     {
       depth: 15,

package/src/utils/debouncer.js

@@ -0,0 +1,7 @@
+export function debounce(f, delay) {
+  let timer = 0;
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => f.apply(this, args), delay);
+  };
+}

package/src/utils/rotation.js

@@ -0,0 +1,53 @@
+/**
+ * @param {string} action
+ * @returns {{axis: "x"|"y"|"z", layers: (0|1|-1)[], direction: (1|-1|2|-2)}}
+ */
+export default function getRotationDetailsFromNotation(action) {
+    if (!action) return;
+    const reverse = action.includes("'") ? -1 : 1;
+    action = action.replace("'", '');
+    const multiplier = action.includes('2') ? 2 : 1;
+    action = action.replace('2', '');
+    if (!action) return;
+    const move = action[0];
+
+    if (move === 'x') {
+        return { axis: 'x', layers: [], direction: -reverse * multiplier };
+    } else if (move === 'y') {
+        return { axis: 'y', layers: [], direction: -reverse * multiplier };
+    } else if (move === 'z') {
+        return { axis: 'z', layers: [], direction: -reverse * multiplier };
+    } else if (move === 'U') {
+        return { axis: 'y', layers: [1], direction: -reverse * multiplier };
+    } else if (move === 'u') {
+        return { axis: 'y', layers: [1, 0], direction: -reverse * multiplier };
+    } else if (move === 'R') {
+        return { axis: 'x', layers: [1], direction: -reverse * multiplier };
+    } else if (move === 'r') {
+        return { axis: 'x', layers: [1, 0], direction: -reverse * multiplier };
+    } else if (move === 'L') {
+        return { axis: 'x', layers: [-1], direction: -reverse * multiplier };
+    } else if (move == 'l') {
+        return { axis: 'x', layers: [-1, 0], direction: -reverse * multiplier };
+    } else if (move === 'D') {
+        return { axis: 'y', layers: [-1], direction: -reverse * multiplier };
+    } else if (move === 'd') {
+        return { axis: 'y', layers: [-1, 0], direction: -reverse * multiplier };
+    } else if (move === 'F') {
+        return { axis: 'z', layers: [1], direction: -reverse * multiplier };
+    } else if (move === 'f') {
+        return { axis: 'z', layers: [1, 0], direction: -reverse * multiplier };
+    } else if (move === 'B') {
+        return { axis: 'z', layers: [-1], direction: -reverse * multiplier };
+    } else if (move === 'b') {
+        return { axis: 'z', layers: [-1, 0], direction: -reverse * multiplier };
+    } else if (move === 'M') {
+        return { axis: 'x', layers: [0], direction: -reverse * multiplier };
+    } else if (move === 'E') {
+        return { axis: 'y', layers: [0], direction: -reverse * multiplier };
+    } else if (move === 'S') {
+        return { axis: 'z', layers: [0], direction: -reverse * multiplier };
+    }
+    console.log(`rubiks-cube invalid Action: ${action}`);
+    return undefined;
+}