@houstonp/rubiks-cube 2.0.0 → 3.0.0

package/src/threejs/materials.js

@@ -1,54 +0,0 @@
-// @ts-check
-import { MeshStandardMaterial, MeshBasicMaterial } from 'three';
-import { FaceColours, Faces } from '../core';
-/** @typedef {{type: "sticker", face: import('../core').Face , color: import('../core').FaceColour}} StickerUserData */
-/** @typedef {{type: "core" }} CoreUserData */
-export default class Materials {
-    static front = new MeshStandardMaterial({
-        color: '#2cbf13',
-        metalness: 0,
-        roughness: 0.4,
-        /** @type {StickerUserData} */
-        userData: { type: 'sticker', face: Faces.front, color: FaceColours.front },
-    });
-    static back = new MeshStandardMaterial({
-        color: 'blue',
-        metalness: 0,
-        roughness: 0.4,
-        /** @type {StickerUserData} */
-        userData: { type: 'sticker', face: Faces.back, color: FaceColours.back },
-    });
-    static up = new MeshStandardMaterial({
-        color: 'white',
-        metalness: 0,
-        roughness: 0.4,
-        /** @type {StickerUserData} */
-        userData: { type: 'sticker', face: Faces.up, color: FaceColours.up },
-    });
-    static down = new MeshStandardMaterial({
-        color: 'yellow',
-        metalness: 0,
-        roughness: 0.4,
-        /** @type {StickerUserData} */
-        userData: { type: 'sticker', face: Faces.down, color: FaceColours.down },
-    });
-    static left = new MeshStandardMaterial({
-        color: '#fc9a05',
-        metalness: 0,
-        roughness: 0.4,
-        /** @type {StickerUserData} */
-        userData: { type: 'sticker', face: Faces.left, color: FaceColours.left },
-    });
-    static right = new MeshStandardMaterial({
-        color: 'red',
-        metalness: 0,
-        roughness: 0.4,
-        /** @type {StickerUserData} */
-        userData: { type: 'sticker', face: Faces.right, color: FaceColours.right },
-    });
-    static core = new MeshBasicMaterial({
-        color: 'black',
-        /** @type {CoreUserData} */
-        userData: { type: 'core' },
-    });
-}

package/src/threejs/pieces.js

@@ -1,100 +0,0 @@
-// @ts-check
-import { Group, BoxGeometry, Mesh, SphereGeometry, Material } from 'three';
-import Stickers from './stickers';
-import Materials from './materials';
-
-/**
- * @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 {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 {Material} frontMaterial
- * @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/threejs/stickers.js

@@ -1,40 +0,0 @@
-// @ts-check
-import { SVGLoader } from 'three/examples/jsm/Addons.js';
-import { ExtrudeGeometry } from 'three';
-
-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 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 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 ExtrudeGeometry(SVGLoader.createShapes(cornerSVG.paths[0])[0], {
-        depth: 15,
-    })
-        .scale(0.002, 0.002, 0.002)
-        .translate(-0.5, -0.5, 0);
-}

package/types/cameraState.d.ts

@@ -1,19 +0,0 @@
-export class CameraState {
-    /**
-     * @param {boolean} up
-     * @param {boolean} right
-     */
-    constructor(up?: boolean, right?: boolean);
-    /** @type {boolean} */
-    Up: boolean;
-    /** @type {boolean} */
-    Right: boolean;
-    /**
-     * @param {import("./core").PeekType} peekType
-     */
-    peekCamera(peekType: import("./core").PeekType): void;
-    /**
-     * @returns {import("./core").PeekState}
-     */
-    toPeekState(): import("./core").PeekState;
-}

package/types/core.d.ts

@@ -1,125 +0,0 @@
-/**
- * @typedef {typeof Movements[keyof typeof Movements]} Movement
- */
-export const Movements: Readonly<{
-    R: "R";
-    R2: "R2";
-    RP: "R'";
-    L: "L";
-    L2: "L2";
-    LP: "L'";
-    U: "U";
-    U2: "U2";
-    UP: "U'";
-    D: "D";
-    D2: "D2";
-    DP: "D'";
-    F: "F";
-    F2: "F2";
-    FP: "F'";
-    B: "B";
-    B2: "B2";
-    BP: "B'";
-    r: "r";
-    r2: "r2";
-    rP: "r'";
-    l: "l";
-    l2: "l2";
-    lP: "l'";
-    u: "u";
-    u2: "u2";
-    uP: "u'";
-    d: "d";
-    d2: "d2";
-    dP: "d'";
-    f: "f";
-    f2: "f2";
-    fP: "f'";
-    b: "b";
-    b2: "b2";
-    bP: "b'";
-    M: "M";
-    M2: "M2";
-    MP: "M'";
-    E: "E";
-    E2: "E2";
-    EP: "E'";
-    S: "S";
-    S2: "S2";
-    SP: "S'";
-}>;
-/**
- * @typedef {typeof Rotations[keyof typeof Rotations]} Rotation
- */
-export const Rotations: Readonly<{
-    x: "x";
-    x2: "x2";
-    xP: "x'";
-    y: "y";
-    y2: "y2";
-    yP: "y'";
-    z: "z";
-    z2: "z2";
-    zP: "z'";
-}>;
-/**
- * @typedef {typeof Axi[keyof typeof Axi]} Axis
- */
-export const Axi: Readonly<{
-    x: "x";
-    y: "y";
-    z: "z";
-}>;
-/**
- * @typedef {typeof Faces [keyof typeof Faces]} Face
- */
-export const Faces: Readonly<{
-    up: "U";
-    down: "D";
-    left: "L";
-    right: "R";
-    front: "F";
-    back: "B";
-}>;
-/**
- * @typedef {typeof FaceColours [keyof typeof FaceColours]} FaceColour
- */
-export const FaceColours: Readonly<{
-    up: "white";
-    down: "yellow";
-    left: "orange";
-    right: "red";
-    front: "green";
-    back: "blue";
-}>;
-/**
- * @typedef {typeof PeekTypes [keyof typeof PeekTypes]} PeekType
- */
-export const PeekTypes: Readonly<{
-    Horizontal: "horizontal";
-    Vertical: "vertical";
-    Right: "right";
-    Left: "left";
-    Up: "up";
-    Down: "down";
-    RightUp: "rightUp";
-    RightDown: "rightDown";
-    LeftUp: "leftUp";
-    LeftDown: "leftDown";
-}>;
-/**
- * @typedef {typeof PeekStates [keyof typeof PeekStates]} PeekState
- */
-export const PeekStates: Readonly<{
-    RightUp: "rightUp";
-    RightDown: "rightDown";
-    LeftUp: "leftUp";
-    LeftDown: "leftDown";
-}>;
-export type Movement = (typeof Movements)[keyof typeof Movements];
-export type Rotation = (typeof Rotations)[keyof typeof Rotations];
-export type Axis = (typeof Axi)[keyof typeof Axi];
-export type Face = (typeof Faces)[keyof typeof Faces];
-export type FaceColour = (typeof FaceColours)[keyof typeof FaceColours];
-export type PeekType = (typeof PeekTypes)[keyof typeof PeekTypes];
-export type PeekState = (typeof PeekStates)[keyof typeof PeekStates];

package/types/cube/cube.d.ts

@@ -1,102 +0,0 @@
-/** @typedef {{ up: import('../core').Face[][], down: import('../core').Face[][], front: import('../core').Face[][], back: import('../core').Face[][], left: import('../core').Face[][], right: import('../core').Face[][] }} StickerState*/
-export default class Cube {
-    /**
-     *   @param {CubeSettings} cubeSettings
-     */
-    constructor(cubeSettings: CubeSettings);
-    /** @type {CubeSettings} */
-    cubeSettings: CubeSettings;
-    /** @type {Group} */
-    group: Group;
-    /** @type {Group} */
-    rotationGroup: Group;
-    /** @type {CubeRotation[]} */
-    rotationQueue: CubeRotation[];
-    /** @type {CubeRotation | undefined} */
-    currentRotation: CubeRotation | undefined;
-    /** @type {number | undefined} */
-    _matchSpeed: number | undefined;
-    /** @type {number} */
-    _lastGap: number;
-    /** @type {StickerState} */
-    currentState: StickerState;
-    /**
-     * adds threejs objects to group
-     */
-    init(): Group<import("three").Object3DEventMap>;
-    /**
-     * update the cube and continue any rotations
-     */
-    update(): void;
-    /**
-     * Updates the gap of the pieces. To be used when the cube is not rotating
-     * @returns {void}
-     */
-    updateGap(): void;
-    /**
-     *
-     * calculates the current speed of the current rotation in ms.
-     * calculation is dependent on animation style and animation speed settings
-     * - exponential: speeds up rotations depending on the queue length
-     * - next: an animation speed of 0 when there is another animation in the queue
-     * - match: will match the speed of rotations to the frequency of key presses.
-     * - fixed: will return a constant value
-     * @returns {number}
-     */
-    getRotationSpeed(): number;
-    /**
-     * Complete the current rotation and reset the cube
-     * @param {(state:string) => boolean} completedCallback
-     * @returns {void}
-     */
-    reset(completedCallback: (state: string) => boolean): void;
-    /**
-     * Adds pieces in the rotationGroup back into the main group.
-     * @returns {void}
-     */
-    clearRotationGroup(): void;
-    /**
-     *  @param {string} eventId
-     *  @param {import('../core').Rotation} rotation
-     * @param {((state: string) => void )} completedCallback
-     * @param {((reason: string) => void )} failedCallback
-     */
-    rotation(eventId: string, rotation: import("../core").Rotation, completedCallback: ((state: string) => void), failedCallback: ((reason: string) => void)): void;
-    /**
-     *  @param {string} eventId
-     *  @param {import('../core').Movement} movement
-     * @param {((state: string) => void )} completedCallback
-     * @param {((reason: string) => void )} failedCallback
-     */
-    movement(eventId: string, movement: import("../core").Movement, completedCallback: ((state: string) => void), failedCallback: ((reason: string) => void)): void;
-    /**
-     * @param {import('./slice').Slice} slice
-     * @returns {Object3D[]}
-     */
-    getRotationLayer(slice: import("./slice").Slice): Object3D[];
-    /**
-     * @returns {string}
-     */
-    get kociembaState(): string;
-    /**
-     * @param {StickerState} stickerState
-     * @returns {string}
-     */
-    toKociemba(stickerState: StickerState): string;
-    /**
-     * @returns {StickerState}
-     */
-    getStickerState(): StickerState;
-}
-export type StickerState = {
-    up: import("../core").Face[][];
-    down: import("../core").Face[][];
-    front: import("../core").Face[][];
-    back: import("../core").Face[][];
-    left: import("../core").Face[][];
-    right: import("../core").Face[][];
-};
-import CubeSettings from './cubeSettings';
-import { Group } from 'three';
-import { CubeRotation } from './cubeRotation';
-import { Object3D } from 'three';

package/types/cube/cubeRotation.d.ts

@@ -1,33 +0,0 @@
-export class CubeRotation {
-    /**
-     * @param {string} eventId
-     * @param {import('./slice').Slice} slice
-     * @param {((state: string) => void )} completedCallback
-     * @param {((reason: string) => void )} failedCallback
-     */
-    constructor(eventId: string, slice: import("./slice").Slice, completedCallback: ((state: string) => void), failedCallback: ((reason: string) => void));
-    /** @type {((state: string) => void )} */
-    completedCallback: ((state: string) => void);
-    /** @type {((reason: string) => void )} */
-    failedCallback: ((reason: string) => void);
-    /** @type {string} */
-    eventId: string;
-    /** @type {import('./slice').Slice} */
-    slice: import("./slice").Slice;
-    /** @type {"pending" | "initialised" | "inProgress" | "complete" | "disposed"} */
-    status: "pending" | "initialised" | "inProgress" | "complete" | "disposed";
-    /** @type {number} */
-    timestampMs: number;
-    /** @type {number | undefined} */
-    _lastUpdatedTimeMs: number | undefined;
-    /** @type {number} */
-    _rotationPercentage: number;
-    initialise(): void;
-    /**
-     *
-     * @param {Group} rotationGroup
-     * @param {number} speedMs
-     */
-    update(rotationGroup: Group, speedMs: number): void;
-}
-import { Group } from 'three';

package/types/cube/cubeSettings.d.ts

@@ -1,17 +0,0 @@
-/** @typedef {"exponential" | "next" | "fixed" | "match"} AnimationStyle */
-export default class CubeSettings {
-    /**
-     *
-     * @param {number} pieceGap
-     * @param {number} animationSpeed
-     * @param {AnimationStyle} animationStyle
-     */
-    constructor(pieceGap: number, animationSpeed: number, animationStyle: AnimationStyle);
-    /** @type {number} pieceGap */
-    pieceGap: number;
-    /** @type {number} pieceGap */
-    animationSpeedMs: number;
-    /** @type {AnimationStyle} pieceGap */
-    animationStyle: AnimationStyle;
-}
-export type AnimationStyle = "exponential" | "next" | "fixed" | "match";

package/types/cube/cubeState.d.ts

@@ -1,16 +0,0 @@
-export type vector = {
-    x: number;
-    y: number;
-    z: number;
-};
-export type state = {
-    position: vector;
-    rotation: vector;
-    type: "corner" | "edge" | "center";
-    group: Group;
-};
-/**
- * @return {state[]}
- */
-export function createCubeState(): state[];
-import { Group } from 'three';

package/types/cube/slice.d.ts

@@ -1,15 +0,0 @@
-/**
- * @param {import("../core").Movement} movement
- * @returns {Slice}
- */
-export default function GetMovementSlice(movement: import("../core").Movement): Slice;
-/**
- * @param {import("../core").Rotation} rotation
- * @returns {Slice}
- */
-export function GetRotationSlice(rotation: import("../core").Rotation): Slice;
-export type Slice = {
-    axis: import("../core").Axis;
-    layers: (-1 | 0 | 1)[];
-    direction: 1 | -1 | 2 | -2;
-};

package/types/index.d.ts

@@ -1,65 +0,0 @@
-/// <reference path="globals.d.ts" preserve="true" />
-export class RubiksCubeElement extends HTMLElement {
-    /**
-     * @param {string} tagName the name of the tag to register the web component under
-     */
-    static register(tagName?: string): void;
-    static get observedAttributes(): ("piece-gap" | "animation-speed-ms" | "animation-style" | "camera-speed-ms" | "camera-radius" | "camera-field-of-view" | "camera-peek-angle-horizontal" | "camera-peek-angle-vertical")[];
-    /** @private @type {HTMLCanvasElement} */
-    private canvas;
-    /** @private @type {Settings} */
-    private settings;
-    /** @private @type {CubeSettings} */
-    private cubeSettings;
-    /**
-     * @param {string} name
-     * @param {string} oldVal
-     * @param {string} newVal
-     *  */
-    attributeChangedCallback(name: string, oldVal: string, newVal: string): void;
-    connectedCallback(): void;
-    /** @private */
-    private animateCameraSetting;
-    /** @private */
-    private updateCameraFOV;
-    /** @import {Movement} from './core' */
-    /** @internal @typedef {{eventId: string, move: Movement}} MovementEvent */
-    /** @internal @typedef {{eventId: string, move: Movement, state: string}} MovementCompleteEventData */
-    /** @internal @typedef {{eventId: string, move: Movement, reason: string}} MovementFailedEventData */
-    /**
-     * @param {Movement} move
-     * @returns {Promise<string>}
-     */
-    move(move: Movement): Promise<string>;
-    /** @import {Rotation} from './core' */
-    /** @internal @typedef {{eventId: string, rotation: Rotation}} RotationEventData */
-    /** @internal @typedef {{eventId: string, rotation: Rotation, state: string, }} RotationCompleteEventData*/
-    /** @internal @typedef {{eventId: string, rotation: Rotation, reason: string, }} RotationFailedEventData*/
-    /**
-     * @param {Rotation} rotation
-     * @returns {Promise<string>}
-     */
-    rotate(rotation: Rotation): Promise<string>;
-    /** @internal @typedef {{state: string }} ResetCompleteEventData */
-    /**
-     * @returns {Promise<string>}
-     */
-    reset(): Promise<string>;
-    /** @import {PeekType} from './core' */
-    /** @internal @typedef {{eventId: string, peekType: PeekType}} CameraPeekEventData */
-    /** @import {PeekState} from './core' */
-    /** @internal @typedef {{eventId: string, peekState: PeekState }} CameraPeekCompleteEventData */
-    /**
-     * This function changes the camera position to one of four states depending on the arguments passed.
-     *
-     * @param {PeekType} peekType
-     * @returns {Promise<PeekState>}
-     */
-    peek(peekType: PeekType): Promise<PeekState>;
-    /** @private */
-    private init;
-}
-import type { Movement } from './core';
-import type { Rotation } from './core';
-import type { PeekType } from './core';
-import type { PeekState } from './core';

package/types/schema.d.ts

@@ -1,11 +0,0 @@
-export namespace AttributeNames {
-    let pieceGap: "piece-gap";
-    let animationSpeed: "animation-speed-ms";
-    let animationStyle: "animation-style";
-    let cameraSpeed: "camera-speed-ms";
-    let cameraRadius: "camera-radius";
-    let cameraFieldOfView: "camera-field-of-view";
-    let cameraPeekAngleHorizontal: "camera-peek-angle-horizontal";
-    let cameraPeekAngleVertical: "camera-peek-angle-vertical";
-}
-export type AttributeName = (typeof AttributeNames)[keyof typeof AttributeNames];

package/types/threejs/materials.d.ts

@@ -1,21 +0,0 @@
-/** @typedef {{type: "sticker", face: import('../core').Face , color: import('../core').FaceColour}} StickerUserData */
-/** @typedef {{type: "core" }} CoreUserData */
-export default class Materials {
-    static front: MeshStandardMaterial;
-    static back: MeshStandardMaterial;
-    static up: MeshStandardMaterial;
-    static down: MeshStandardMaterial;
-    static left: MeshStandardMaterial;
-    static right: MeshStandardMaterial;
-    static core: MeshBasicMaterial;
-}
-export type StickerUserData = {
-    type: "sticker";
-    face: import("../core").Face;
-    color: import("../core").FaceColour;
-};
-export type CoreUserData = {
-    type: "core";
-};
-import { MeshStandardMaterial } from 'three';
-import { MeshBasicMaterial } from 'three';

package/types/threejs/pieces.d.ts

@@ -1,28 +0,0 @@
-/**
- * @param {Material} frontMaterial
- * @param {Material} rightMaterial
- * @param {Material} topMaterial
- * @param {Material} coreMaterial
- * @returns {Group}
- */
-export function createCornerGroup(frontMaterial: Material, rightMaterial: Material, topMaterial: Material, coreMaterial: Material): Group;
-/**
- * @param {Material} frontMaterial
- * @param {Material} topMaterial
- * @param {Material} coreMaterial
- * @returns {Group}
- */
-export function createEdgeGroup(frontMaterial: Material, topMaterial: Material, coreMaterial: Material): Group;
-/**
- * @param {Material} frontMaterial
- * @param {Material} coreMaterial
- * @returns {Group}
- */
-export function createCenterGroup(frontMaterial: Material, coreMaterial: Material): Group;
-/**
- * @returns {Mesh}
- */
-export function createCoreMesh(): Mesh;
-import { Material } from 'three';
-import { Group } from 'three';
-import { Mesh } from 'three';

package/types/threejs/stickers.d.ts

@@ -1,6 +0,0 @@
-export default class Stickers {
-    static center: ExtrudeGeometry;
-    static edge: ExtrudeGeometry;
-    static corner: ExtrudeGeometry;
-}
-import { ExtrudeGeometry } from 'three';