@houstonp/rubiks-cube 1.0.2 → 1.1.0

package/README.md

@@ -76,6 +76,17 @@ cube.addEventListener("state", (e) => {
 
 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.
 
+### Reset event
+
+The rubiks-cube element listens for the `reset` custom event and resets the cube to its initial state.
+
+#### Example
+
+```js
+const cube = document.querySelector("rubiks-cube");
+cube.dispatchEvent(new CustomEvent("reset"));
+```
+
 ### Camera events
 
 The rubiks-cube element listens for the `camera` custom event and moves the camera to the specified position.

package/index.js

@@ -108,12 +108,21 @@ class RubiksCube extends HTMLElement {
       cameraAnimationGroup.update();
       controls.update();
       animationQueue.update();
-      const animationGroup = animationQueue.getAnimationGroup();
-      if (animationGroup !== undefined) scene.add(animationGroup);
-      if (animationQueue.finished()) sendState();
+      if (animationQueue.currentAnimation) {
+        scene.add(animationQueue.getAnimationGroup());
+      }
+      if (animationQueue.finished()) {
+        sendState();
+        scene.remove(animationQueue.getAnimationGroup());
+      }
       renderer.render(scene, camera);
     }
 
+    this.addEventListener("reset", () => {
+      animationQueue.clear();
+      cube.reset();
+    });
+
     // add event listeners for rotation and camera controls
     this.addEventListener("rotate", (e) => {
       const action = getRotationDetails(e.detail.action);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@houstonp/rubiks-cube",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Rubiks Cube Web Component built with threejs",
   "main": "index.js",
   "author": "Houston Pearse",

package/src/animation.js

@@ -12,6 +12,15 @@ export class AnimationQueue {
     this.factor = factor;
   }
 
+  clear() {
+    this.queue = [];
+    if (this.currentAnimation) {
+      this.currentAnimation.fastforward = true;
+      this.currentAnimation.update();
+      this.currentAnimation = undefined;
+    }
+  }
+
   /**
    * @param {Animation} animation
    */
@@ -66,8 +75,7 @@ export class AnimationQueue {
    * @returns {THREE.Group | undefined}
    */
   getAnimationGroup() {
-    if (this.currentAnimation === undefined) return undefined;
-    return this.currentAnimation.getGroup();
+    return this.currentAnimation?.getGroup();
   }
 }
 
@@ -106,7 +114,6 @@ export class Animation {
     this._lastUpdate = Date.now();
     const layerObjects = this._cube.getRotationLayer(this._axis, this._layers);
     this._layerGroup.add(...layerObjects);
-    this._cube.group.remove(...layerObjects);
   }
 
   teardown() {
@@ -122,8 +129,6 @@ export class Animation {
       piece.userData.rotation.z = piece.rotation.z;
     });
     this._cube.group.add(...this._layerGroup.children);
-    this._layerGroup.clear();
-    this._cube.stickerState = this._cube.getStickerState();
   }
 
   update() {

package/src/cube.js

@@ -28,15 +28,29 @@ export default class Cube {
       );
       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,
+        position: Object.assign({}, state.position),
+        rotation: Object.assign({}, state.rotation),
+        initialPosition: Object.assign({}, state.position),
+        initialRotation: Object.assign({}, state.rotation),
         type: state.type,
       };
       this.group.add(piece);
     }
-    this.stickerState = this.getStickerState();
+  }
+
+  reset() {
+    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 * 1.04, y * 1.04, z * 1.04);
+      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
+    });
   }
   /**
    * @param {"x"|"y"|"z"} axis