@houstonp/rubiks-cube 1.5.2 → 2.0.0

package/src/threejs/materials.js

@@ -1,42 +1,54 @@
-import { MeshStandardMaterial, MeshBasicMaterial } from "three";
+// @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,
-    userData: { face: "front", color: "green" },
-  });
-  static back = new MeshStandardMaterial({
-    color: "blue",
-    metalness: 0,
-    roughness: 0.4,
-    userData: { face: "back", color: "blue" },
-  });
-  static up = new MeshStandardMaterial({
-    color: "white",
-    metalness: 0,
-    roughness: 0.4,
-    userData: { face: "up", color: "white" },
-  });
-  static down = new MeshStandardMaterial({
-    color: "yellow",
-    metalness: 0,
-    roughness: 0.4,
-    userData: { face: "down", color: "yellow" },
-  });
-  static left = new MeshStandardMaterial({
-    color: "#fc9a05",
-    metalness: 0,
-    roughness: 0.4,
-    userData: { face: "left", color: "orange" },
-  });
-  static right = new MeshStandardMaterial({
-    color: "red",
-    metalness: 0,
-    roughness: 0.4,
-    userData: { face: "right", color: "red" },
-  });
-  static core = new MeshBasicMaterial({
-    color: "black",
-  });
+    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,9 +1,9 @@
+// @ts-check
 import { Group, BoxGeometry, Mesh, SphereGeometry, Material } from 'three';
 import Stickers from './stickers';
 import Materials from './materials';
 
 /**
- * @param {Geometry} sticker
  * @param {Material} frontMaterial
  * @param {Material} rightMaterial
  * @param {Material} topMaterial
@@ -42,7 +42,6 @@ export function createCornerGroup(frontMaterial, rightMaterial, topMaterial, cor
 }
 
 /**
- * @param {Geometry} sticker
  * @param {Material} frontMaterial
  * @param {Material} topMaterial
  * @param {Material} coreMaterial
@@ -73,9 +72,7 @@ export function createEdgeGroup(frontMaterial, topMaterial, coreMaterial) {
 }
 
 /**
- * @param {Geometry} sticker
  * @param {Material} frontMaterial
- * @param {Material} topMaterial
  * @param {Material} coreMaterial
  * @returns {Group}
  */

package/src/threejs/stickers.js

@@ -1,5 +1,6 @@
-import { SVGLoader } from "three/examples/jsm/Addons.js";
-import { ExtrudeGeometry } from "three";
+// @ts-check
+import { SVGLoader } from 'three/examples/jsm/Addons.js';
+import { ExtrudeGeometry } from 'three';
 
 const loader = new SVGLoader();
 const cornerSVG = loader.parse(`
@@ -19,30 +20,21 @@ const centerSVG = loader.parse(`
 `);
 
 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 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 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);
+    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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,125 @@
+/**
+ * @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

@@ -0,0 +1,102 @@
+/** @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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,17 @@
+/** @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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,15 @@
+/**
+ * @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/debouncer.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @param {number} delay
+ * @param {{ (entries: { contentRect: { width: number; height: number; }; }[]): void; apply?: any; }} f
+ */
+export function debounce(f: {
+    (entries: {
+        contentRect: {
+            width: number;
+            height: number;
+        };
+    }[]): void;
+    apply?: any;
+}, delay: number): (...args: any[]) => void;

package/types/globals.d.ts

@@ -0,0 +1,7 @@
+import { RubiksCubeElement } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rubiks-cube': RubiksCubeElement;
+    }
+}
+export {};

package/types/index.d.ts

@@ -0,0 +1,65 @@
+/// <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

@@ -0,0 +1,11 @@
+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/settings.d.ts

@@ -0,0 +1,34 @@
+export default class Settings {
+    /** @type {number} */
+    pieceGap: number;
+    /** @type {number} */
+    animationSpeedMs: number;
+    /** @type {import("./cube/cubeSettings").AnimationStyle} */
+    animationStyle: import("./cube/cubeSettings").AnimationStyle;
+    /** @type {number} */
+    cameraSpeedMs: number;
+    /** @type {number} */
+    cameraRadius: number;
+    /** @type {number} */
+    cameraFieldOfView: number;
+    /** @type {number} */
+    cameraPeekAngleHorizontal: number;
+    /** @type {number} */
+    cameraPeekAngleVertical: number;
+    /** @param {string | null} value*/
+    setPieceGap(value: string | null): void;
+    /** @param {string | null} value in ms */
+    setAnimationSpeed(value: string | null): void;
+    /** @param {string | null} value */
+    setAnimationStyle(value: string | null): void;
+    /** @param {string | null} value in ms */
+    setCameraSpeed(value: string | null): void;
+    /** @param {string | null} value */
+    setCameraRadius(value: string | null): void;
+    /** @param {string | null} value in ms */
+    setCameraPeekAngleHorizontal(value: string | null): void;
+    /** @param {string | null} value in ms */
+    setCameraPeekAngleVertical(value: string | null): void;
+    /** @param {string | null} value in ms */
+    setCameraFieldOfView(value: string | null): void;
+}

package/types/threejs/materials.d.ts

@@ -0,0 +1,21 @@
+/** @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';