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 the faces of the cube to help you set the state.

Parameters

`newState`

The new state of the cube.

Type: FlatState
Required: Yes

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],
});

`getState`

Gets the state of the cube.

Returns

Type: FlatState

`rotateCube`

Rotates the entire cube with an animation.

Parameters

`options`

The options for the rotation.

Type: CubeRotationOptions
Required: Yes

Returns

Type: Promise<void>

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 });

`rotateLayer`

Rotates a layer of the cube.

Parameters

`options`

The options for the rotation.

Type: LayerRotationOptions
Required: Yes

Returns

Type: Promise<void>

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,
});

Properties Types