@houstonp/rubiks-cube 1.5.2 → 2.1.0

package/src/settings.js

@@ -0,0 +1,138 @@
+// @ts-check
+import { AnimationStyles, CubeTypes } from './core';
+const defaultSettings = {
+    cubeType: CubeTypes.Seven,
+    animationSpeedMs: 100,
+    /** @type {import('./core').AnimationStyle} */
+    animationStyle: 'fixed',
+    pieceGap: 1.04,
+    cameraSpeedMs: 100,
+    cameraRadius: 5,
+    cameraPeekAngleHorizontal: 0.6,
+    cameraPeekAngleVertical: 0.6,
+    cameraFieldOfView: 75,
+};
+const minGap = 1;
+const minRadius = 4;
+const minFieldOfView = 30;
+const maxFieldOfView = 100;
+
+export default class Settings {
+    constructor() {
+        /** @type {import("./core").CubeType} */
+        this.cubeType = defaultSettings.cubeType;
+        /** @type {number} */
+        this.pieceGap = defaultSettings.pieceGap;
+        /** @type {number} */
+        this.animationSpeedMs = defaultSettings.animationSpeedMs;
+        /** @type {import("./core").AnimationStyle} */
+        this.animationStyle = defaultSettings.animationStyle;
+        /** @type {number} */
+        this.cameraSpeedMs = defaultSettings.cameraSpeedMs;
+        /** @type {number} */
+        this.cameraRadius = defaultSettings.cameraRadius;
+        /** @type {number} */
+        this.cameraFieldOfView = defaultSettings.cameraFieldOfView;
+        /** @type {number} */
+        this.cameraPeekAngleHorizontal = defaultSettings.cameraPeekAngleHorizontal;
+        /** @type {number} */
+        this.cameraPeekAngleVertical = defaultSettings.cameraPeekAngleVertical;
+    }
+
+    /** @param {any} value */
+    setCubeType(value) {
+        if (value && Object.values(CubeTypes).includes(value)) {
+            const cubeType = /** @type {import('./core').CubeType} */ (value);
+            this.cubeType = cubeType;
+            return;
+        }
+        console.warn(`Invalid cube type value. Accepted Values are [${Object.values(CubeTypes).join(', ')}] Value is ${value}`);
+    }
+
+    /** @param {string | null} value*/
+    setPieceGap(value) {
+        const gap = Number(value);
+        if (gap >= minGap && value != null) {
+            this.pieceGap = gap;
+            return;
+        }
+        console.warn(`Invalid pieceGap value. Min is ${minGap}. Value is ${value}`);
+    }
+
+    /** @param {string | null} value in ms */
+    setAnimationSpeed(value) {
+        var speed = Number(value);
+        if (speed >= 0 && value != null) {
+            this.animationSpeedMs = speed;
+            return;
+        }
+        console.warn(`Invalid animation speed value. Min is 0. Value is ${value}`);
+    }
+
+    /** @param {any} value */
+    setAnimationStyle(value) {
+        if (value && Object.values(AnimationStyles).includes(value)) {
+            const validStyle = /** @type {import("./core").AnimationStyle} */ (value);
+            this.animationStyle = validStyle;
+            return;
+        }
+        console.warn(`Invalid animation style value. Accepted Values are [${Object.values(AnimationStyles).join(', ')}] Value is ${value}`);
+    }
+
+    /** @param {string | null} value in ms */
+    setCameraSpeed(value) {
+        var speed = Number(value);
+        if (speed >= 0 && value != null) {
+            this.cameraSpeedMs = speed;
+            return;
+        }
+        console.warn(`Invalid camera speed value. Min is 0. Value is ${value}`);
+    }
+
+    /** @param {string | null} value */
+    setCameraRadius(value) {
+        var radius = Number(value);
+        if (radius >= minRadius && value != null) {
+            this.cameraRadius = radius;
+            return;
+        }
+        console.warn(`Invalid camera radius value. Min is ${radius}. Value is ${value}`);
+    }
+
+    /** @param {string | null} value in ms */
+    setCameraPeekAngleHorizontal(value) {
+        var angle = Number(value);
+        if (angle >= 0 && angle <= 1 && value != null) {
+            this.cameraPeekAngleHorizontal = angle;
+            return;
+        }
+        console.warn(`Invalid camera peek angle horizontal value. Min is 0, Max is 1. Value is ${value}`);
+    }
+
+    /** @param {string | null} value in ms */
+    setCameraPeekAngleVertical(value) {
+        var angle = Number(value);
+        if (angle >= 0 && angle <= 1 && value != null) {
+            this.cameraPeekAngleVertical = angle;
+            return;
+        }
+        console.warn(`Invalid camera peek angle vertical value. Min is 0, Max is 1. Value is ${value}`);
+    }
+
+    /** @param {string | null} value in ms */
+    setCameraFieldOfView(value) {
+        var fov = Number(value);
+        if (fov < minFieldOfView && value != null) {
+            console.warn(`Invalid camera FOV value. Min is ${minFieldOfView} Max is ${maxFieldOfView}. Value is ${value} which is below the minimum.`);
+            return;
+        }
+        if (fov > maxFieldOfView && value != null) {
+            console.warn(`Invalid camera FOV value. Min is ${minFieldOfView} Max is ${maxFieldOfView}. Value is ${value} which is aboe the maximum.`);
+            return;
+        }
+        if (value == null) {
+            console.warn(`Invalid camera FOV value. Min is ${minFieldOfView} Max is ${maxFieldOfView}. Value is ${value}.`);
+        }
+        this.cameraFieldOfView = fov;
+    }
+}

package/src/three/centerPiece.js

@@ -0,0 +1,44 @@
+// @ts-check
+import { BoxGeometry, ExtrudeGeometry, Mesh, MeshBasicMaterial, Object3D } from 'three';
+import { SVGLoader } from 'three/examples/jsm/Addons.js';
+import { Sticker } from './sticker';
+
+/** @typedef {{ positon: import('three').Vector3Like, rotation: import('three').Vector3Like }} CenterPieceUserData */
+
+export class CenterPiece extends Object3D {
+    constructor() {
+        super();
+        const boxGeom = new BoxGeometry(1, 1, 1);
+        const boxMesh = new Mesh(boxGeom, new MeshBasicMaterial({ color: 'black' }));
+        this.add(boxMesh);
+        /** @type {CenterPieceUserData} */
+        this.userData = { position: { x: 0, y: 0, z: 0 }, rotation: { x: 0, y: 0, z: 0 } };
+
+        this.frontSticker = new CenterSticker();
+        this.frontSticker.position.set(0, 0, 0.5);
+        this.frontSticker.rotation.set(0, 0, 0);
+        this.add(this.frontSticker);
+    }
+
+    get stickers() {
+        return [this.frontSticker];
+    }
+}
+
+const loader = new SVGLoader();
+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>
+`);
+const centerGeometry = new ExtrudeGeometry(SVGLoader.createShapes(centerSVG.paths[0])[0], {
+    depth: 15,
+})
+    .scale(0.002, 0.002, 0.002)
+    .translate(-0.5, -0.5, 0);
+
+export class CenterSticker extends Sticker {
+    constructor() {
+        super(centerGeometry);
+    }
+}

package/src/three/cornerPiece.js

@@ -0,0 +1,60 @@
+/// @ts-check
+import { BoxGeometry, ExtrudeGeometry, Material, Mesh, MeshBasicMaterial, Object3D } from 'three';
+import { Sticker } from './sticker';
+import { SVGLoader } from 'three/examples/jsm/Addons.js';
+
+/** @typedef {{ positon: import('three').Vector3Like, rotation: import('three').Vector3Like }} CornerPieceUserData */
+/**
+ * @param {Material} frontMaterial
+ * @param {Material} rightMaterial
+ * @param {Material} topMaterial
+ * @param {Material} coreMaterial
+ * @returns {Group}
+ */
+export class CornerPiece extends Object3D {
+    constructor() {
+        super();
+        const boxGeom = new BoxGeometry(1, 1, 1);
+        const boxMesh = new Mesh(boxGeom, new MeshBasicMaterial({ color: 'black' }));
+        this.add(boxMesh);
+        /** @type {CornerPieceUserData} */
+        this.userData = { position: { x: 0, y: 0, z: 0 }, rotation: { x: 0, y: 0, z: 0 } };
+
+        this.frontSticker = new CornerSticker();
+        this.frontSticker.position.set(0, 0, 0.5);
+        this.frontSticker.rotation.set(0, 0, 0);
+        this.add(this.frontSticker);
+
+        this.rightSticker = new CornerSticker();
+        this.rightSticker.position.set(0.5, 0, 0);
+        this.rightSticker.rotation.set(Math.PI / 2, Math.PI / 2, 0);
+        this.add(this.rightSticker);
+
+        this.topSticker = new CornerSticker();
+        this.topSticker.position.set(0, 0.5, 0);
+        this.topSticker.rotation.set(-Math.PI / 2, 0, -Math.PI / 2);
+        this.add(this.topSticker);
+    }
+
+    get stickers() {
+        return [this.frontSticker, this.rightSticker, this.topSticker];
+    }
+}
+
+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 cornerGeometry = new ExtrudeGeometry(SVGLoader.createShapes(cornerSVG.paths[0])[0], {
+    depth: 15,
+})
+    .scale(0.002, 0.002, 0.002)
+    .translate(-0.5, -0.5, 0);
+
+export class CornerSticker extends Sticker {
+    constructor() {
+        super(cornerGeometry);
+    }
+}