npm - @houstonp/rubiks-cube - Versions diffs - 1.0.0 - Mend

@houstonp/rubiks-cube 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,95 @@
+# Rubiks Cube Web Component
+This package is a rubiks cube web component built with threejs. Camera animation smoothing is done with the tweenjs package.
+## adding the component
+You can dd the component to a webpage by adding a module script tag with the index.js file. And then
+by adding the webcomponent tag.
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <rubiks-cube></rubiks-cube>
+    <script type="module" src="index.js"></script>
+  </body>
+</html>
+```
+## updating the component
+The Rubiks cube web component listens for custom events to perform twists, rotations and camera changes. As per convention, the starting rotation has green facing forward, white facing up and red facing to the right.
+### Camera events
+The rubiks-cube element listens for the `camera` custom event and moves the camera to the specified position.
+The camera position specified in the event details must be one of the following:
+- `peek-right` - Camera is moved to the right of the cube so that the right face is visible
+- `peek-left` - Camera is moved to the left of the cube so that the left face is visible
+- `peek-top` - Camera is moved above the cube so that the top face is visible
+- `peek-bottom` - Camera is moved below the cube so that the bottom face is visible
+- `peek-toggle-horizontal` - Camera is moved to the opposite side of the cube in the horizontal plane
+- `peek-toggle-vertical` - Camera is moved to the opposite side of the cube in the vertical plane
+#### Example
+```js
+const cube = document.querySelector("rubiks-cube");
+cube.dispatchEvent(
+  new CustomEvent("camera", {
+    detail: { action: "peek-right" },
+  })
+);
+```
+### Rotation event
+The rubiks-cube element listens for the `rotate` custom event and rotates a face or entire cube in the direction specified by the event details.
+The rotation type specified in the event details must follow standard rubiks cube notation.
+#### Rubiks Cube Notation
+Notations can include the number of roations of a face. For example, `U2` means rotate the upper face 180 degrees.
+Noations can also include a prime symbol `'` to indicate a counter clockwise rotation. For example, `U'` means rotate the upper face counter clockwise. The direction is always determined relative to the face being moved.
+When both a number and a prime symbol are included the number is stated before the prime symbol. For example, `U2'` means rotate the upper face 180 degrees counter clockwise. and `U'2` is invalid.
+| Notation | Movement                                         |
+| -------- | ------------------------------------------------ |
+| U        | Top face clockwise                               |
+| u        | Top two layers clockwise                         |
+| D        | Bottom face clockwise                            |
+| d        | Bottom two layers clockwise                      |
+| L        | Left face clockwise                              |
+| l        | Left two layers clockwise                        |
+| R        | Right face clockwise                             |
+| r        | Right two layers clockwise                       |
+| F        | Front face clockwise                             |
+| f        | Front two layers clockwise                       |
+| B        | Back face clockwise                              |
+| b        | Back two layers clockwise                        |
+| M        | Middle layer clockwise (relative to L)           |
+| E        | Equatorial layer clockwise (relative to D)       |
+| S        | Standing layer clockwise (relative to F)         |
+| x        | Rotate cube on x axis clockwise (direction of R) |
+| y        | Rotate cube on y axis clockwise (direction of U) |
+| z        | Rotate cube on z axis clockwise (direction of F) |
+#### Example
+```js
+const cube = document.querySelector("rubiks-cube");
+cube.dispatchEvent(
+  new CustomEvent("rotate", {
+    detail: { action: "u2'" },
+  })
+);
+```

package/index.js ADDED Viewed

@@ -0,0 +1,194 @@
+import * as THREE from "three";
+import * as TWEEN from "@tweenjs/tween.js";
+import { OrbitControls } from "three/examples/jsm/Addons.js";
+import Cube from "./src/cube";
+import getRotationDetails from "./src/rotation";
+import { AnimationQueue, Animation } from "./src/animation";
+class RubiksCube extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `<canvas id="cube-canvas" style="display:block;"></canvas>`;
+    this.canvas = this.shadowRoot.getElementById("cube-canvas");
+  }
+  connectedCallback() {
+    this.init();
+  }
+  init() {
+    // defined core threejs objects
+    const canvas = this.canvas;
+    const scene = new THREE.Scene();
+    const renderer = new THREE.WebGLRenderer({
+      alpha: true,
+      canvas,
+      antialias: true,
+    });
+    renderer.setSize(this.clientWidth, this.clientHeight);
+    renderer.setAnimationLoop(animate);
+    renderer.setPixelRatio(2);
+    //update renderer and camera when container resizes. debouncing events to reduce frequency
+    function debounce(f, delay) {
+      let timer = 0;
+      return function (...args) {
+        clearTimeout(timer);
+        timer = setTimeout(() => f.apply(this, args), delay);
+      };
+    }
+    const resizeObserver = new ResizeObserver(
+      debounce((entries) => {
+        const { width, height } = entries[0].contentRect;
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+        renderer.setSize(width, height);
+      }, 30)
+    );
+    resizeObserver.observe(this);
+    // add camera
+    const camera = new THREE.PerspectiveCamera(
+      75,
+      this.clientWidth / this.clientHeight,
+      0.1,
+      1000
+    );
+    camera.position.z = 4;
+    camera.position.y = 3;
+    camera.position.x = 0;
+    // add orbit controls for camera
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableZoom = false;
+    controls.enablePan = false;
+    controls.enableDamping = true;
+    controls.maxAzimuthAngle = Math.PI / 4;
+    controls.minAzimuthAngle = -Math.PI / 4;
+    controls.maxPolarAngle = (3 * Math.PI) / 4;
+    controls.minPolarAngle = Math.PI / 4;
+    // add lighting to scene
+    const ambientLight = new THREE.AmbientLight("white", 0.5);
+    const spotLight1 = new THREE.DirectionalLight("white", 2);
+    const spotLight2 = new THREE.DirectionalLight("white", 2);
+    const spotLight3 = new THREE.DirectionalLight("white", 2);
+    const spotLight4 = new THREE.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 = new Cube();
+    scene.add(cube.group);
+    // animation queue
+    const animationQueue = new AnimationQueue();
+    // initial camera animation
+    new TWEEN.Tween(camera.position)
+      .to({ x: 3, y: 3, z: 4 }, 1000)
+      .easing(TWEEN.Easing.Cubic.InOut)
+      .start();
+    // animation loop
+    function animate() {
+      TWEEN.update();
+      controls.update();
+      animationQueue.update();
+      const animationGroup = animationQueue.getAnimationGroup();
+      if (animationGroup !== undefined) scene.add(animationGroup);
+      renderer.render(scene, camera);
+    }
+    // add event listeners for rotation and camera controls
+    this.addEventListener("rotate", (e) => {
+      const action = getRotationDetails(e.detail.action);
+      if (action !== undefined) {
+        const animation = new Animation(
+          cube,
+          action.axis,
+          action.layers,
+          action.direction,
+          200
+        );
+        animationQueue.add(animation);
+      }
+    });
+    this.addEventListener("camera", (e) => {
+      console.log(cube.getStickerState());
+      new TWEEN.Tween(camera.position);
+      if (e.detail.action === "peek-toggle-horizontal") {
+        new TWEEN.Tween(camera.position)
+          .to(
+            {
+              x: camera.position.x > 0 ? -2.5 : 2.5,
+              y: camera.position.y > 0 ? 2.5 : -2.5,
+              z: 4,
+            },
+            200
+          )
+          .start();
+      } else if (e.detail.action === "peek-toggle-vertical") {
+        new TWEEN.Tween(camera.position)
+          .to(
+            {
+              x: camera.position.x > 0 ? 2.5 : -2.5,
+              y: camera.position.y > 0 ? -2.5 : 2.5,
+              z: 4,
+            },
+            200
+          )
+          .start();
+      } else if (e.detail.action === "peek-right") {
+        new TWEEN.Tween(camera.position)
+          .to(
+            {
+              x: 2.5,
+              y: camera.position.y > 0 ? 2.5 : -2.5,
+              z: 4,
+            },
+            200
+          )
+          .start();
+      } else if (e.detail.action === "peek-left") {
+        new TWEEN.Tween(camera.position)
+          .to(
+            {
+              x: -2.5,
+              y: camera.position.y > 0 ? 2.5 : -2.5,
+              z: 4,
+            },
+            200
+          )
+          .start();
+      } else if (e.detail.action === "peek-up") {
+        new TWEEN.Tween(camera.position)
+          .to(
+            {
+              x: camera.position.x > 0 ? 2.5 : -2.5,
+              y: 2.5,
+              z: 4,
+            },
+            200
+          )
+          .start();
+      } else if (e.detail.action === "peek-down") {
+        new TWEEN.Tween(camera.position)
+          .to(
+            {
+              x: camera.position.x > 0 ? 2.5 : -2.5,
+              y: -2.5,
+              z: 4,
+            },
+            200
+          )
+          .start();
+      }
+    });
+  }
+}
+customElements.define("rubiks-cube", RubiksCube);

package/package.json ADDED Viewed

@@ -0,0 +1,21 @@
+{
+  "name": "@houstonp/rubiks-cube",
+  "version": "1.0.0",
+  "description": "Rubiks Cube Web Component built with threejs",
+  "main": "index.js",
+  "author": "Houston Pearse",
+  "license": "MIT",
+  "dependencies": {
+    "@tweenjs/tween.js": "^25.0.0",
+    "three": "^0.167.1"
+  },
+  "devDependencies": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/houstonpearse/rubiks-cube.git"
+  },
+  "bugs": {
+    "url": "https://github.com/houstonpearse/rubiks-cube/issues"
+  },
+  "homepage": "https://github.com/houstonpearse/rubiks-cube#readme"
+}

package/src/animation.js ADDED Viewed

@@ -0,0 +1,158 @@
+import * as THREE from "three";
+import Cube from "./cube";
+export class AnimationQueue {
+  constructor(type = "exponential", factor = 1.3) {
+    /** @type {Animation[]} */
+    this.queue = [];
+    /** @type {Animation | undefined} */
+    this.currentAnimation = undefined;
+    /** @type {{type: "fast-forward" | "exponential", factor: number}} */
+    this.type = type;
+    this.factor = factor;
+  }
+  /**
+   * @param {Animation} animation
+   */
+  add(animation) {
+    if (this.type === "fast-forward") {
+      this.fastForward();
+    } else if (this.type === "exponential") {
+      this.exponential();
+    }
+    this.queue.push(animation);
+  }
+  /* exponentially increases the animation speed with the depth of the queue */
+  exponential() {
+    let animations = [];
+    if (this.currentAnimation) animations.push(this.currentAnimation);
+    animations = animations.concat(this.queue);
+    for (let i = 0; i < animations.length; i++) {
+      animations[i].setSpeed(this.factor ** (animations.length - i - 1));
+    }
+  }
+  /* instantly completes any queued animations */
+  fastForward() {
+    if (this.currentAnimation) {
+      this.currentAnimation.setFastForward();
+    }
+    if (this.queue.length) {
+      for (const a of this.queue) {
+        a.setFastForward();
+      }
+    }
+  }
+  update() {
+    if (
+      this.currentAnimation === undefined ||
+      this.currentAnimation.finished()
+    ) {
+      this.currentAnimation = this.queue.shift();
+    }
+    if (this.currentAnimation === undefined) return;
+    this.currentAnimation.update();
+  }
+  /**
+   *
+   * @returns {THREE.Group | undefined}
+   */
+  getAnimationGroup() {
+    if (this.currentAnimation === undefined) return undefined;
+    return this.currentAnimation.getGroup();
+  }
+}
+export class Animation {
+  /**
+   *
+   * @param {Cube} cube
+   * @param {"x"|"y"|"z"} axis
+   * @param {(-1|0|1)[]} layers
+   * @param {1|-1|2|-2} direction
+   * @param {number} duration milliseconds
+   */
+  constructor(cube, axis, layers, direction, duration) {
+    this._cube = cube;
+    this._axis = axis;
+    this._layers = layers;
+    this._direction = direction;
+    this._duration = duration;
+    this._layerGroup = new THREE.Group();
+    this._finished = false;
+    this._lastUpdate = undefined;
+    this._totalRotation = 0;
+    this.fastforward = false;
+    this.speed = 1;
+  }
+  setFastForward(value = true) {
+    this.fastforward = value;
+  }
+  setSpeed(value = 1) {
+    this.speed = value;
+  }
+  init() {
+    this._lastUpdate = Date.now();
+    const layerObjects = this._cube.getRotationLayer(this._axis, this._layers);
+    this._layerGroup.add(...layerObjects);
+    this._cube.group.remove(...layerObjects);
+  }
+  teardown() {
+    this._finished = true;
+    this._layerGroup.children.forEach((piece) => {
+      piece.getWorldPosition(piece.position);
+      piece.getWorldQuaternion(piece.quaternion);
+      piece.userData.position.x = Math.round(piece.position.x);
+      piece.userData.position.y = Math.round(piece.position.y);
+      piece.userData.position.z = Math.round(piece.position.z);
+      piece.userData.rotation.x = piece.rotation.x;
+      piece.userData.rotation.y = piece.rotation.y;
+      piece.userData.rotation.z = piece.rotation.z;
+    });
+    this._cube.group.add(...this._layerGroup.children);
+    this._layerGroup.clear();
+  }
+  update() {
+    if (this._lastUpdate === undefined) {
+      this.init();
+    }
+    var interval = (Date.now() - this._lastUpdate) * this.speed;
+    this._lastUpdate = Date.now();
+    if (this.fastforward || interval + this._totalRotation > this._duration) {
+      interval = this._duration - this._totalRotation;
+    }
+    const rotationIncrement =
+      (Math.abs(this._direction) * ((interval / this._duration) * Math.PI)) / 2;
+    this._totalRotation += interval;
+    this._layerGroup.rotateOnWorldAxis(
+      new THREE.Vector3(
+        this._axis === "x" ? this._direction : 0,
+        this._axis === "y" ? this._direction : 0,
+        this._axis === "z" ? this._direction : 0
+      ).normalize(),
+      rotationIncrement
+    );
+    if (this._totalRotation >= this._duration) {
+      this.teardown();
+    }
+  }
+  getGroup() {
+    return this._layerGroup;
+  }
+  finished() {
+    return this._finished;
+  }
+}

package/src/center.js ADDED Viewed

@@ -0,0 +1,23 @@
+import * as THREE from "three";
+/**
+ * @param {THREE.Geometry} sticker
+ * @param {THREE.Material} frontMaterial
+ * @param {THREE.Material} topMaterial
+ * @param {THREE.Material} coreMaterial
+ * @returns {{group: THREE.Group, frontSticker: THREE.Mesh, topSticker:THREE.Mesh}}
+ */
+export default function newCenter(sticker, frontMaterial, coreMaterial) {
+  const group = new THREE.Group();
+  const boxGeom = new THREE.BoxGeometry(1, 1, 1);
+  const boxMesh = new THREE.Mesh(boxGeom, coreMaterial);
+  boxMesh.userData = { type: "piece" };
+  group.add(boxMesh);
+  const frontSticker = new THREE.Mesh(sticker, frontMaterial);
+  frontSticker.userData = { type: "sticker" };
+  frontSticker.position.set(0, 0, 0.5);
+  frontSticker.rotation.set(0, 0, 0);
+  group.add(frontSticker);
+  return { group, frontSticker };
+}

package/src/corner.js ADDED Viewed

@@ -0,0 +1,45 @@
+import * as THREE from "three";
+/**
+ * @param {THREE.Geometry} sticker
+ * @param {THREE.Material} frontMaterial
+ * @param {THREE.Material} rightMaterial
+ * @param {THREE.Material} topMaterial
+ * @param {THREE.Material} coreMaterial
+ * @returns {{group: THREE.Group, frontSticker: THREE.Mesh, rightSticker:THREE.Mesh, topSticker:THREE.Mesh}}
+ */
+export default function newCorner(
+  sticker,
+  frontMaterial,
+  rightMaterial,
+  topMaterial,
+  coreMaterial
+) {
+  const group = new THREE.Group();
+  const boxGeom = new THREE.BoxGeometry(1, 1, 1);
+  const boxMesh = new THREE.Mesh(boxGeom, coreMaterial);
+  boxMesh.userData = { type: "piece" };
+  group.add(boxMesh);
+  // front
+  const frontSticker = new THREE.Mesh(sticker, 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 THREE.Mesh(sticker, 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 THREE.Mesh(sticker, 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, frontSticker, rightSticker, topSticker };
+}

package/src/cube.js ADDED Viewed

@@ -0,0 +1,318 @@
+import * as THREE from "three";
+import Materials from "./materials";
+import Stickers from "./stickers";
+import newCorner from "./corner";
+import newEdge from "./edge";
+import newCenter from "./center";
+import { newCubeState } from "./cubeState";
+export default class Cube {
+  constructor() {
+    this.group = new THREE.Group();
+    const core = this.createCore();
+    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 state of newCubeState()) {
+      const piece = this.createPiece(state.position, state.type);
+      piece.position.set(
+        state.position.x * 1.04,
+        state.position.y * 1.04,
+        state.position.z * 1.04
+      );
+      piece.rotation.set(state.rotation.x, state.rotation.y, state.rotation.z);
+      piece.userData = {
+        position: state.position,
+        rotation: state.rotation,
+        initialPosition: state.position,
+        initialRotation: state.rotation,
+        type: state.type,
+      };
+      this.group.add(piece);
+    }
+  }
+  /**
+   * @param {"x"|"y"|"z"} axis
+   * @param {{-1|0|1}[]} layers
+   * @returns {THREE.Object3D[]}
+   */
+  getRotationLayer(axis, layers) {
+    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 THREE.Vector3();
+          piecepos.copy(piece.position);
+          piecepos.round();
+          const stickerpos = new THREE.Vector3();
+          mesh.getWorldPosition(stickerpos);
+          stickerpos.sub(piecepos);
+          stickerpos.multiplyScalar(2);
+          stickerpos.round();
+          if (stickerpos.x === 1) {
+            state.right[1 - Math.round(piece.position.y)][
+              1 - Math.round(piece.position.z)
+            ] = mesh.material.userData.face;
+          } else if (stickerpos.x === -1) {
+            state.left[1 - Math.round(piece.position.y)][
+              1 + Math.round(piece.position.z)
+            ] = mesh.material.userData.face;
+          } else if (stickerpos.y === 1) {
+            state.up[1 + Math.round(piece.position.z)][
+              1 + Math.round(piece.position.x)
+            ] = mesh.material.userData.face;
+          } else if (stickerpos.y === -1) {
+            state.down[1 - Math.round(piece.position.z)][
+              1 + Math.round(piece.position.x)
+            ] = mesh.material.userData.face;
+          } else if (stickerpos.z === 1) {
+            state.front[1 - Math.round(piece.position.y)][
+              1 + Math.round(piece.position.x)
+            ] = mesh.material.userData.face;
+          } else if (stickerpos.z === -1) {
+            state.back[1 - Math.round(piece.position.y)][
+              1 - Math.round(piece.position.x)
+            ] = mesh.material.userData.face;
+          }
+        }
+      });
+    });
+    return state;
+  }
+  /**
+   * @param {{x:number,y:number,z:number}} position
+   * @param {"corner | edge | center"} type
+   * @returns {THREE.Group}
+   */
+  createPiece(position, type) {
+    if (type === "corner") {
+      return this.createCorner(position).group;
+    } else if (type === "edge") {
+      return this.createEdge(position).group;
+    } else if (type === "center") {
+      return this.createCenter(position).group;
+    } else {
+      throw new Error("Invalid type: " + type);
+    }
+  }
+  /**
+   * @param {{x:number,y:number,z:number}} position
+   * @returns {THREE.Group}
+   */
+  createCorner(position) {
+    if (position.x == 1 && position.y == 1 && position.z == 1) {
+      return newCorner(
+        Stickers.corner,
+        Materials.front,
+        Materials.right,
+        Materials.up,
+        Materials.core
+      );
+    } else if (position.x == 1 && position.y == 1 && position.z == -1) {
+      return newCorner(
+        Stickers.corner,
+        Materials.right,
+        Materials.back,
+        Materials.up,
+        Materials.core
+      );
+    } else if (position.x == 1 && position.y == -1 && position.z == 1) {
+      return newCorner(
+        Stickers.corner,
+        Materials.right,
+        Materials.front,
+        Materials.down,
+        Materials.core
+      );
+    } else if (position.x == 1 && position.y == -1 && position.z == -1) {
+      return newCorner(
+        Stickers.corner,
+        Materials.back,
+        Materials.right,
+        Materials.down,
+        Materials.core
+      );
+    } else if (position.x == -1 && position.y == 1 && position.z == 1) {
+      return newCorner(
+        Stickers.corner,
+        Materials.left,
+        Materials.front,
+        Materials.up,
+        Materials.core
+      );
+    } else if (position.x == -1 && position.y == 1 && position.z == -1) {
+      return newCorner(
+        Stickers.corner,
+        Materials.back,
+        Materials.left,
+        Materials.up,
+        Materials.core
+      );
+    } else if (position.x == -1 && position.y == -1 && position.z == 1) {
+      return newCorner(
+        Stickers.corner,
+        Materials.front,
+        Materials.left,
+        Materials.down,
+        Materials.core
+      );
+    } else if (position.x == -1 && position.y == -1 && position.z == -1) {
+      return newCorner(
+        Stickers.corner,
+        Materials.left,
+        Materials.back,
+        Materials.down,
+        Materials.core
+      );
+    } else {
+      throw new Error("Invalid corner position: " + position);
+    }
+  }
+  /**
+   * @param {{x:number,y:number,z:number}} position
+   * @returns {THREE.Group}
+   */
+  createEdge(position) {
+    if (position.x == 1 && position.y == 1 && position.z == 0) {
+      return newEdge(
+        Stickers.edge,
+        Materials.right,
+        Materials.up,
+        Materials.core
+      );
+    } else if (position.x == 1 && position.y == -1 && position.z == 0) {
+      return newEdge(
+        Stickers.edge,
+        Materials.right,
+        Materials.down,
+        Materials.core
+      );
+    } else if (position.x == 1 && position.y == 0 && position.z == 1) {
+      return newEdge(
+        Stickers.edge,
+        Materials.front,
+        Materials.right,
+        Materials.core
+      );
+    } else if (position.x == 1 && position.y == 0 && position.z == -1) {
+      return newEdge(
+        Stickers.edge,
+        Materials.right,
+        Materials.back,
+        Materials.core
+      );
+    } else if (position.x == -1 && position.y == 1 && position.z == 0) {
+      return newEdge(
+        Stickers.edge,
+        Materials.left,
+        Materials.up,
+        Materials.core
+      );
+    } else if (position.x == -1 && position.y == -1 && position.z == 0) {
+      return newEdge(
+        Stickers.edge,
+        Materials.left,
+        Materials.down,
+        Materials.core
+      );
+    } else if (position.x == -1 && position.y == 0 && position.z == 1) {
+      return newEdge(
+        Stickers.edge,
+        Materials.front,
+        Materials.left,
+        Materials.core
+      );
+    } else if (position.x == -1 && position.y == 0 && position.z == -1) {
+      return newEdge(
+        Stickers.edge,
+        Materials.left,
+        Materials.back,
+        Materials.core
+      );
+    } else if (position.x == 0 && position.y == 1 && position.z == 1) {
+      return newEdge(
+        Stickers.edge,
+        Materials.front,
+        Materials.up,
+        Materials.core
+      );
+    } else if (position.x == 0 && position.y == 1 && position.z == -1) {
+      return newEdge(
+        Stickers.edge,
+        Materials.up,
+        Materials.back,
+        Materials.core
+      );
+    } else if (position.x == 0 && position.y == -1 && position.z == 1) {
+      return newEdge(
+        Stickers.edge,
+        Materials.down,
+        Materials.front,
+        Materials.core
+      );
+    } else if (position.x == 0 && position.y == -1 && position.z == -1) {
+      return newEdge(
+        Stickers.edge,
+        Materials.back,
+        Materials.down,
+        Materials.core
+      );
+    } else {
+      throw new Error("Invalid edge position: " + position);
+    }
+  }
+  /**
+   * @param {{x:number,y:number,z:number}} position
+   * @returns {THREE.Group}
+   */
+  createCenter(position) {
+    var centerColor = Materials.up;
+    if (position.x !== 0) {
+      centerColor = position.x > 0 ? Materials.right : Materials.left;
+    } else if (position.y !== 0) {
+      centerColor = position.y > 0 ? Materials.up : Materials.down;
+    } else if (position.z !== 0) {
+      centerColor = position.z > 0 ? Materials.front : Materials.back;
+    }
+    return newCenter(Stickers.center, centerColor, Materials.core);
+  }
+  /**
+   * @returns {THREE.Group}
+   */
+  createCore() {
+    return new THREE.Mesh(new THREE.SphereGeometry(1.55), Materials.core);
+  }
+}

package/src/cubeState.js ADDED Viewed

@@ -0,0 +1,128 @@
+/**
+ * @typedef {{x: number,y: number,z: number}} vector
+ */
+/**
+ * @type {vector[]}
+ */
+const corners = [
+  { position: { x: 1, y: 1, z: 1 }, rotation: { x: 0, y: 0, z: 0 } },
+  { position: { x: 1, y: 1, z: -1 }, rotation: { x: 0, y: Math.PI / 2, z: 0 } },
+  {
+    position: { x: 1, y: -1, z: 1 },
+    rotation: { x: 0, y: Math.PI / 2, z: Math.PI },
+  },
+  {
+    position: { x: 1, y: -1, z: -1 },
+    rotation: { x: 0, y: Math.PI, z: Math.PI },
+  },
+  {
+    position: { x: -1, y: 1, z: 1 },
+    rotation: { x: 0, y: -Math.PI / 2, z: 0 },
+  },
+  { position: { x: -1, y: 1, z: -1 }, rotation: { x: 0, y: Math.PI, z: 0 } },
+  { position: { x: -1, y: -1, z: 1 }, rotation: { x: 0, y: 0, z: Math.PI } },
+  {
+    position: { x: -1, y: -1, z: -1 },
+    rotation: { x: 0, y: -Math.PI / 2, z: Math.PI },
+  },
+];
+/**
+ * @type {vector[]}
+ */
+const edges = [
+  { position: { x: 1, y: 1, z: 0 }, rotation: { x: 0, y: Math.PI / 2, z: 0 } },
+  {
+    position: { x: 1, y: 0, z: 1 },
+    rotation: { x: 0, y: 0, z: -Math.PI / 2 },
+  },
+  {
+    position: { x: 1, y: 0, z: -1 },
+    rotation: { x: 0, y: Math.PI / 2, z: -Math.PI / 2 },
+  },
+  {
+    position: { x: 1, y: -1, z: 0 },
+    rotation: { x: Math.PI, y: Math.PI / 2, z: 0 },
+  },
+  { position: { x: 0, y: 1, z: 1 }, rotation: { x: 0, y: 0, z: 0 } },
+  {
+    position: { x: 0, y: 1, z: -1 },
+    rotation: { x: -Math.PI / 2, y: 0, z: 0 },
+  },
+  { position: { x: 0, y: -1, z: 1 }, rotation: { x: Math.PI / 2, y: 0, z: 0 } },
+  { position: { x: 0, y: -1, z: -1 }, rotation: { x: Math.PI, y: 0, z: 0 } },
+  {
+    position: { x: -1, y: 1, z: 0 },
+    rotation: { x: 0, y: -Math.PI / 2, z: 0 },
+  },
+  { position: { x: -1, y: 0, z: 1 }, rotation: { x: 0, y: 0, z: Math.PI / 2 } },
+  {
+    position: { x: -1, y: 0, z: -1 },
+    rotation: { x: 0, y: -Math.PI / 2, z: Math.PI / 2 },
+  },
+  {
+    position: { x: -1, y: -1, z: 0 },
+    rotation: { x: 0, y: -Math.PI / 2, z: Math.PI },
+  },
+];
+/**
+ * @type {vector[]}
+ */
+const centers = [
+  { position: { x: 1, y: 0, z: 0 }, rotation: { x: 0, y: Math.PI / 2, z: 0 } },
+  { position: { x: 0, y: 1, z: 0 }, rotation: { x: -Math.PI / 2, y: 0, z: 0 } },
+  { position: { x: 0, y: 0, z: 1 }, rotation: { x: 0, y: 0, z: 0 } },
+  { position: { x: 0, y: 0, z: -1 }, rotation: { x: 0, y: Math.PI, z: 0 } },
+  { position: { x: 0, y: -1, z: 0 }, rotation: { x: Math.PI / 2, y: 0, z: 0 } },
+  {
+    position: { x: -1, y: 0, z: 0 },
+    rotation: { x: 0, y: -Math.PI / 2, z: 0 },
+  },
+];
+/**
+ * @typedef {Object} state
+ * @property {string} type
+ * @property {vector} initialPosition
+ * @property {vector} initialRotation
+ * @property {vector} position
+ * @property {vector} rotation
+ */
+/**
+ *  @returns {state[]}
+ */
+export function newCubeState() {
+  let cubeState = [];
+  corners.forEach(({ position, rotation }) => {
+    cubeState.push({
+      type: "corner",
+      initialPosition: position,
+      initialRotation: rotation,
+      position: position,
+      rotation: rotation,
+    });
+  });
+  edges.forEach(({ position, rotation }) => {
+    cubeState.push({
+      type: "edge",
+      initialPosition: position,
+      initialRotation: rotation,
+      position: position,
+      rotation: rotation,
+    });
+  });
+  centers.forEach(({ position, rotation }) => {
+    cubeState.push({
+      type: "center",
+      initialPosition: position,
+      initialRotation: rotation,
+      position: position,
+      rotation: rotation,
+    });
+  });
+  return cubeState;
+}

package/src/edge.js ADDED Viewed

@@ -0,0 +1,36 @@
+import * as THREE from "three";
+/**
+ * @param {THREE.Geometry} sticker
+ * @param {THREE.Material} frontMaterial
+ * @param {THREE.Material} topMaterial
+ * @param {THREE.Material} coreMaterial
+ * @returns {{group: THREE.Group, frontSticker: THREE.Mesh, topSticker:THREE.Mesh}}
+ */
+export default function newEdge(
+  sticker,
+  frontMaterial,
+  topMaterial,
+  coreMaterial
+) {
+  const group = new THREE.Group();
+  const boxGeom = new THREE.BoxGeometry(1, 1, 1);
+  const boxMesh = new THREE.Mesh(boxGeom, coreMaterial);
+  boxMesh.userData = { type: "piece" };
+  group.add(boxMesh);
+  // front
+  const frontSticker = new THREE.Mesh(sticker, 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 THREE.Mesh(sticker, 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, frontSticker, topSticker };
+}

package/src/materials.js ADDED Viewed

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

package/src/rotation.js ADDED Viewed

@@ -0,0 +1,52 @@
+/**
+ * @param {string} action
+ * @returns {{axis: "x"|"y"|"z", layers: (0|1|-1)[], direction: (1|-1|2|-2)}}
+ */
+export default function getRotationDetails(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 };
+  }
+  return undefined;
+}

package/src/stickers.js ADDED Viewed

@@ -0,0 +1,48 @@
+import * as THREE from "three";
+import { SVGLoader } from "three/examples/jsm/Addons.js";
+const loader = new SVGLoader();
+const cornerSVG = loader.parse(`
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+  <path  d="M 25 0 H 500 V 500 H 0 V 25 A 25 25 0 0 1 25 0 Z" bx:shape="rect 0 0 500 500 25 0 0 0 1@a864c1ee"/>
+</svg>
+`);
+const edgeSVG = loader.parse(`
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 150 0 L 350 0 C 450 0 500 50 500 120 L 500 500 L 0 500 L 0 120 C 0 50 50 0 150 0 Z"></path>
+</svg>
+`);
+const centerSVG = loader.parse(`
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+  <path  d="M 120 0 L 380 0 C 450 0 500 50 500 120 L 500 380 C 500 450 450 500 380 500 L 120 500 C 50 500 0 450 0 380 L 0 120 C 0 50 50 0 120 0 Z"></path>
+</svg>
+`);
+export default class Stickers {
+  static center = new THREE.ExtrudeGeometry(
+    SVGLoader.createShapes(centerSVG.paths[0])[0],
+    {
+      depth: 15,
+    }
+  )
+    .scale(0.002, 0.002, 0.002)
+    .translate(-0.5, -0.5, 0);
+  static edge = new THREE.ExtrudeGeometry(
+    SVGLoader.createShapes(edgeSVG.paths[0])[0],
+    {
+      depth: 15,
+    }
+  )
+    .scale(0.002, 0.002, 0.002)
+    .translate(-0.5, -0.5, 0);
+  static corner = new THREE.ExtrudeGeometry(
+    SVGLoader.createShapes(cornerSVG.paths[0])[0],
+    {
+      depth: 15,
+    }
+  )
+    .scale(0.002, 0.002, 0.002)
+    .translate(-0.5, -0.5, 0);
+}