Methods

The Web Cube element has a few methods that you can use to interact with the cube.

`setState`

Sets the state of the cube. You can use the Face enum to represent face values.

Parameters

`newState`

The new state of the cube.

Type: FlatState
Required: Yes

If newState.rotations is provided, sticker orientations are restored with the color state. If it is omitted, sticker orientations are reset to 0.

Example

import { WebCube, Face } from "@web-cube/web-cube";
const $cube = document.querySelector("web-cube") as WebCube;
$cube.setState({
    [Face.Up]: [
        [Face.Up, Face.Up],
        [Face.Up, Face.Down],
    ],
    [Face.Down]: [
        [Face.Down, Face.Down],
        [Face.Down, Face.Up],
    ],
    [Face.Left]: [
        [Face.Left, Face.Left],
        [Face.Left, Face.Right],
    ],
    [Face.Right]: [
        [Face.Right, Face.Right],
        [Face.Right, Face.Left],
    ],
    [Face.Front]: [
        [Face.Front, Face.Front],
        [Face.Front, Face.Back],
    ],
    [Face.Back]: [
        [Face.Back, Face.Back],
        [Face.Back, Face.Front],
});

When the state changes, the element emits web-cube:state-changed.

`getState`

Gets the state of the cube.

Returns

Type: FlatState

The returned state includes rotations, a serializable map of each visible sticker orientation. Passing the returned value to setState preserves both colors and sticker orientation.

Example

import { WebCube } from "@web-cube/web-cube";

const $cube = document.querySelector("web-cube") as WebCube;
const currentState = $cube.getState();
console.log(currentState);

`rotateCube`

Rotates the entire cube with an animation.

Parameters

`options`

The options for the rotation.

Type: CubeRotationOptions
Required: Yes

Returns

Type: Promise<void>

Validation rules

axis must be "x", "y", or "z".
angle must be 90, 180, 270, or 360.
speed must be greater than 0.

Example

import { WebCube } from "@web-cube/web-cube";

const $cube = document.querySelector("web-cube") as WebCube;

$cube.rotateCube({ axis: "x", angle: 90, backwards: false, speed: 500 });

This method emits web-cube:before-rotate, web-cube:before-cube-rotate, web-cube:after-rotate, and web-cube:after-cube-rotate.

`rotateLayer`

Rotates a layer of the cube.

Parameters

`options`

The options for the rotation.

Type: LayerRotationOptions
Required: Yes

Returns

Type: Promise<void>

Validation rules

axis must be "x", "y", or "z".
layer must be in range 0 to size - 1.
angle must be 90, 180, 270, or 360.
speed must be greater than 0.

Example

import { WebCube } from "@web-cube/web-cube";

const $cube = document.querySelector("web-cube") as WebCube;

$cube.rotateLayer({
  axis: "x",
  layer: 0,
  angle: 90,
  backwards: false,
  speed: 500,
});

This method emits web-cube:before-rotate, web-cube:before-layer-rotate, web-cube:after-rotate, and web-cube:after-layer-rotate.

Utility wrapper methods

The package also exports utility functions that wrap these methods, including rotateCube, rotateLayer, and rotate.

See Utilities for details.

Properties Events