@houstonp/rubiks-cube 2.0.0 → 3.0.0

package/src/rubiksCube3D/centerPiece.js

@@ -0,0 +1,79 @@
+// @ts-check
+import { BoxGeometry, ExtrudeGeometry, Mesh, MeshBasicMaterial, MeshStandardMaterial, Object3D, PlaneGeometry, SRGBColorSpace, TextureLoader } from 'three';
+import { SVGLoader } from 'three/examples/jsm/Addons.js';
+import { Sticker } from './sticker';
+/** @import {Vector3Like} from 'three' */
+
+/** @typedef {{ positon: Vector3Like, rotation: 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);
+
+        /** @type {Mesh<PlaneGeometry, MeshStandardMaterial> | null} */
+        this.logo = null;
+    }
+
+    get stickers() {
+        return [this.frontSticker];
+    }
+
+    /**
+     * @param {string} logoPath
+     */
+    addLogo(logoPath) {
+        this.removeLogo();
+        const material = new MeshStandardMaterial({
+            transparent: true,
+            color: 'white',
+            metalness: 0,
+            roughness: 0.4,
+        });
+        const mesh = new Mesh(new PlaneGeometry(0.9, 0.9), material);
+        mesh.position.set(0, 0, 0.54);
+        this.logo = mesh;
+        this.add(mesh);
+        const texture = new TextureLoader().load(logoPath, (texture) => {
+            texture.colorSpace = SRGBColorSpace;
+            material.map = texture;
+            material.needsUpdate = true;
+            texture.anisotropy = 16;
+        });
+    }
+
+    removeLogo() {
+        if (!this.logo) return;
+        this.remove(this.logo);
+        this.logo.material.map?.dispose();
+        this.logo.material.dispose();
+        this.logo = null;
+    }
+}
+
+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/rubiksCube3D/cornerPiece.js

@@ -0,0 +1,114 @@
+/// @ts-check
+import {
+    BoxGeometry,
+    ExtrudeGeometry,
+    Material,
+    Mesh,
+    MeshBasicMaterial,
+    MeshStandardMaterial,
+    Object3D,
+    PlaneGeometry,
+    SRGBColorSpace,
+    TextureLoader,
+} from 'three';
+import { Sticker } from './sticker';
+import { SVGLoader } from 'three/examples/jsm/Addons.js';
+import { Faces } from '../core';
+/** @import {Vector3Like} from 'three' */
+/** @import {Face} from "../core" */
+
+/** @typedef {{ positon: Vector3Like, rotation: 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];
+    }
+
+    /**
+     * @param {Face} face
+     * @param {string} logoPath
+     */
+    addLogo(face, logoPath) {
+        this.removeLogo();
+        const material = new MeshStandardMaterial({
+            transparent: true,
+            color: 'white',
+            metalness: 0,
+            roughness: 0.4,
+        });
+        const mesh = new Mesh(new PlaneGeometry(0.9, 0.9), material);
+        if (face === Faces.U) {
+            mesh.position.set(0, 0.54, 0);
+            mesh.rotation.set(-Math.PI / 2, 0, -Math.PI / 2);
+        } else if (face === Faces.F) {
+            mesh.position.set(0, 0, 0.54);
+        } else if (face === Faces.R) {
+            mesh.position.set(0.54, 0, 0);
+            mesh.rotation.set(Math.PI / 2, Math.PI / 2, 0);
+        }
+        this.logo = mesh;
+        this.add(mesh);
+        const texture = new TextureLoader().load(logoPath, (texture) => {
+            texture.colorSpace = SRGBColorSpace;
+            material.map = texture;
+            material.needsUpdate = true;
+            texture.anisotropy = 16;
+        });
+    }
+
+    removeLogo() {
+        if (!this.logo) return;
+        this.remove(this.logo);
+        this.logo.material.map?.dispose();
+        this.logo.material.dispose();
+        this.logo = null;
+    }
+}
+
+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);
+    }
+}

package/src/rubiksCube3D/cubeConfig.js

@@ -0,0 +1,87 @@
+// @ts-check
+import { CubeTypes, Faces } from '../core';
+/** @import {CubeType, Face} from '../core' */
+/** @import {ColorRepresentation} from 'three' */
+
+/**
+ * @typedef CubeConfig
+ * @property {number[]} layers
+ * @property {number} pieceSize
+ * @property {number} coreSize
+ * @property {number} outerLayerMultiplier
+ */
+
+/**
+ * @param {CubeType} cubeType
+ * @return {CubeConfig}
+ */
+export function getCubeConfig(cubeType) {
+    switch (cubeType) {
+        case CubeTypes.Two:
+            return {
+                layers: [-1, 1],
+                pieceSize: 2,
+                coreSize: 1.7,
+                outerLayerMultiplier: 1,
+            };
+            break;
+        case CubeTypes.Three:
+            return {
+                layers: [-1, 0, 1],
+                pieceSize: 1,
+                coreSize: 1.32,
+                outerLayerMultiplier: 1,
+            };
+        case CubeTypes.Four:
+            return {
+                layers: [-1, -1 / 3, 1 / 3, 1],
+                pieceSize: 2 / 3,
+                coreSize: 1.25,
+                outerLayerMultiplier: 1.1,
+            };
+        case CubeTypes.Five:
+            return {
+                layers: [-1, -1 / 2, 0, 1 / 2, 1],
+                pieceSize: 1 / 2,
+                coreSize: 1.2,
+                outerLayerMultiplier: 1.2,
+            };
+        case CubeTypes.Six:
+            return {
+                layers: [-1, -3 / 5, -1 / 5, 1 / 5, 3 / 5, 1],
+                pieceSize: 2 / 5,
+                coreSize: 1.18,
+                outerLayerMultiplier: 1.3,
+            };
+        case CubeTypes.Seven:
+            return {
+                layers: [-1, -2 / 3, -1 / 3, 0, 1 / 3, 2 / 3, 1],
+                pieceSize: 1 / 3,
+                coreSize: 1.16,
+                outerLayerMultiplier: 1.35,
+            };
+        default:
+            throw new Error(`Unsupported cube type: ${cubeType}`);
+    }
+}
+
+export const FaceColors = {
+    [Faces.B]: 'blue',
+    [Faces.D]: 'yellow',
+    [Faces.F]: '#2cbf13',
+    [Faces.L]: '#fc9a05',
+    [Faces.R]: 'red',
+    [Faces.U]: 'white',
+};
+
+/**
+ * @param {ColorRepresentation} color
+ * @return {Face}
+ * */
+export const ColorToFace = (color) => {
+    const face = Object.values(Faces).find((face) => FaceColors[face] === color);
+    if (!face) {
+        throw new Error(`Invalid color: ${color}`);
+    }
+    return face;
+};

package/src/rubiksCube3D/cubeSettings.js

@@ -0,0 +1,30 @@
+// @ts-check
+import { CubeTypes } from '../core';
+/** @import {CubeType} from '../core' */
+
+/**
+ * @typedef RubiksCube3DSettingsOptions
+ * @property {CubeType} [cubeType]
+ * @property {number} [pieceGap]
+ * @property {number} [animationSpeedMs]
+ * @property {gsap.EaseString | gsap.EaseFunction} [animationStyle]
+ * @property {string | null} [logo]
+ */
+
+export default class RubiksCube3DSettings {
+    /**
+     * @param {RubiksCube3DSettingsOptions} [options]
+     */
+    constructor(options = {}) {
+        /** @type {CubeType} */
+        this.cubeType = options.cubeType ?? CubeTypes.Three;
+        /** @type {number} */
+        this.pieceGap = options.pieceGap ?? 1.04;
+        /** @type {number} */
+        this.animationSpeedMs = options.animationSpeedMs ?? 150;
+        /** @type {gsap.EaseString | gsap.EaseFunction} */
+        this.animationStyle = options.animationStyle ?? 'sine';
+        /** @type {string | null} */
+        this.logo = options.logo ?? null;
+    }
+}

package/src/rubiksCube3D/edgePiece.js

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

package/src/rubiksCube3D/index.js

@@ -0,0 +1,3 @@
+import RubiksCube3D from './rubiksCube3D';
+import RubiksCube3DSettings from './cubeSettings';
+export { RubiksCube3D, RubiksCube3DSettings };