cubing.js

https://js.cubing.net/cubing/
Admin
cubing.js is a JavaScript library for displaying, playing with, and solving twisty puzzles like...
Tokens:118,117
Snippets:902
Trust Score:8
Update:4 months ago
Show doc for...
Tokens:
Raw
### Twisty Player with Experimental Setup Alg

Source: https://js.cubing.net/cubing/twisty

Use the 'experimental-setup-alg' parameter to define a setup algorithm that is applied before the main algorithm. This example also shows multi-line algorithm notation.

```html
<twisty-player
             experimental-setup-alg="F U2 L2 B2 F' U L2 U R2 D2 L' B L2 B' R2 U2"
             alg="y x' // inspection
                  U R2 U' F' L F' U' L' // XX-Cross + EO
                  U' R U R' // 3rd slot
                  R' U R U2' R' U R // 4th slot
                  U R' U' R U' R' U2 R // OLL / ZBLL
                  U // AUF"
           ></twisty-player>
```

--------------------------------

### Twisty Player with Experimental Setup Anchor

Source: https://js.cubing.net/cubing/twisty

Set 'experimental-setup-anchor="end"' to make the algorithm end with the solved pattern, instead of starting with it. When used with 'experimental-setup-alg', the setup pattern becomes the starting point.

```html
<twisty-player
             experimental-setup-anchor="end"
             alg="U M' U' R' U' R U M2' U' R' U r"
           ></twisty-player>
```

--------------------------------

### experimentalSetupAnchor

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Sets the anchor for the experimental setup. Accepts 'end' or 'start'.

```APIDOC
## set experimentalSetupAnchor

### Description
Sets the anchor for the experimental setup.

### Parameters
* `anchor` ('end' | 'start') - The anchor position.

### Returns
void
```

--------------------------------

### Alg Example Constants

Source: https://js.cubing.net/cubing/api/variables/alg.Example.html

This snippet outlines the structure of the 'Example' variable, which is an object containing various predefined algorithms like AntiSune, APermCompact, EPerm, and more. Each property is of type 'Alg'.

```APIDOC
## Variable Example`Const`

Example: {
  AntiSune: Alg;
  APermCompact: Alg;
  EPerm: Alg;
  FURURFCompact: Alg;
  FURURFMoves: Alg;
  HeadlightSwaps: Alg;
  Niklas: Alg;
  Sune: Alg;
  SuneCommutator: Alg;
  TPerm: Alg;
  TriplePause: Alg;
}

### Type Declaration
  * ##### AntiSune: Alg
  * ##### APermCompact: Alg
  * ##### EPerm: Alg
  * ##### FURURFCompact: Alg
  * ##### FURURFMoves: Alg
  * ##### HeadlightSwaps: Alg
  * ##### Niklas: Alg
  * ##### Sune: Alg
  * ##### SuneCommutator: Alg
  * ##### TPerm: Alg
  * ##### TriplePause: Alg
```

--------------------------------

### Example

Source: https://js.cubing.net/cubing/api/modules/alg.html

Represents an example, likely for demonstration purposes.

```APIDOC
## Example

### Description
Represents an example, likely for demonstration purposes.

### Type
Class
```

--------------------------------

### experimentalSetupAlg

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Sets an experimental setup algorithm. Accepts a string or Alg object.

```APIDOC
## set experimentalSetupAlg

### Description
Sets an experimental setup algorithm.

### Parameters
* `newSetup` (string | Alg) - The setup algorithm to apply.

### Returns
void
```

--------------------------------

### startTrackingMoves

Source: https://js.cubing.net/cubing/api/classes/bluetooth.GanCube.html

Starts tracking moves on the GanCube. Returns void.

```APIDOC
## startTrackingMoves

### Description
Starts tracking moves on the GanCube.

### Returns
void
```

--------------------------------

### onloadstart

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Handles the loadstart event, fired when the browser starts loading the media.

```APIDOC
## onloadstart

### Description
Handles the loadstart event.

### Type
`((this: GlobalEventHandlers, ev: Event) => any) | null`
```

--------------------------------

### onloadstart

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyAlgViewer.html

Handles the loadstart event, which fires when the browser starts loading the media.

```APIDOC
## onloadstart

### Description
Handles the `loadstart` event, which fires when the browser starts loading the media.

### Method Signature
`((this: GlobalEventHandlers, ev: Event) => any) | null`
```

--------------------------------

### onloadstart

Source: https://js.cubing.net/cubing/api/classes/twisty.TwizzleLink.html

Handles the loadstart event, which fires when the browser starts loading the media element.

```APIDOC
## onloadstart

### Description
Handles the `loadstart` event.

### Method
Event Handler

### Parameters
- **ev** (Event) - The event object.

### Response
- **(this: GlobalEventHandlers, ev: Event) => any | null**
```

--------------------------------

### onanimationstart

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyAlgViewer.html

Handles the animationstart event, which fires when an animation starts.

```APIDOC
## onanimationstart

### Description
Handles the `animationstart` event, which fires when an animation starts.

### Method Signature
`((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null`
```

--------------------------------

### play

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Starts or resumes media playback.

```APIDOC
## play

### Description
Starts or resumes media playback.

### Returns
void
```

--------------------------------

### onselectstart

Source: https://js.cubing.net/cubing/api/classes/twisty.TwizzleLink.html

Handles the event when the user starts selecting text within an element.

```APIDOC
## onselectstart

### Description
Handles the event when the user starts selecting text within an element.

### Method
Event Handler

### Parameters
#### Event
- **ev** (Event) - The event object containing details about the select start event.
```

--------------------------------

### onplay

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Handles the play event, fired when the media playback starts.

```APIDOC
## onplay

### Description
Handles the play event.

### Type
`((this: GlobalEventHandlers, ev: Event) => any) | null`
```

--------------------------------

### Twisty Player with Experimental Stickering (Cross)

Source: https://js.cubing.net/cubing/twisty

Apply 'experimental-stickering="Cross"' to visualize the Cross step. Currently, this is only supported on the default D face (yellow). This example also includes an 'experimental-setup-alg'.

```html
<twisty-player
             alg="y' R' D2 R' y' R' U L2'"
             experimental-setup-alg="D U2 B D2 U2 L2 B D2 R2 F R2 B U2 D B2 F U B" R" B2 D"
             experimental-stickering="Cross"
           ></twisty-player>
```

--------------------------------

### ondragstart

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyAlgViewer.html

Handles the dragstart event, which fires when a drag operation starts.

```APIDOC
## ondragstart

### Description
Handles the `dragstart` event, which fires when a drag operation starts.

### Method Signature
`((this: GlobalEventHandlers, ev: DragEvent) => any) | null`
```

--------------------------------

### Twisty Player with Experimental 2D LL Visualization

Source: https://js.cubing.net/cubing/twisty

Utilize experimental 2D Last Layer (LL) visualization with the 'visualization="experimental-2D-LL"' parameter. This example also sets background to none and disables the control panel.

```html
<twisty-player
             alg="R U R' (U' D) R2 U' R
           U' R' U R' U R2 (D' U)"
             experimental-setup-anchor="end"
             visualization="experimental-2D-LL"
             background="none"
             control-panel="none"
           ></twisty-player>
```

--------------------------------

### Manipulate Algorithms with Alg Class

Source: https://js.cubing.net/cubing

Import and use the `Alg` class to parse, manipulate, and log algorithms. This example demonstrates creating a commutator, inverting it, and expanding it.

```javascript
import { Alg } from "`https://cdn.cubing.net/v0/js/`cubing/alg";  

const commutator = new Alg("[R, [U': L']]");  
commutator.invert().expand().log();
```

--------------------------------

### onplay

Source: https://js.cubing.net/cubing/api/classes/twisty.TwizzleLink.html

Handles the event when media playback is started or resumed.

```APIDOC
## onplay

### Description
Handles the event when media playback is started or resumed.

### Method
Event Handler

### Parameters
#### Event
- **ev** (Event) - The event object containing details about the play event.
```

--------------------------------

### ontransitionrun

Source: https://js.cubing.net/cubing/api/classes/twisty.TwizzleLink.html

Handles the event when a CSS transition starts.

```APIDOC
## ontransitionrun

### Description
Handles the event when a CSS transition starts.

### Method
Event Handler

### Parameters
#### Event
- **ev** (TransitionEvent) - The event object containing details about the transition run event.
```

--------------------------------

### Advanced Smart Puzzle Connection with UI Integration

Source: https://js.cubing.net/cubing/bluetooth

This example demonstrates connecting a smart puzzle to a twisty-player UI component. It includes an option for keyboard debugging and updates the button text upon successful connection.

```html
<twisty-player id="player"></twisty-player>
<button id="connect">Connect</button>
<twisty-alg-viewer for="player"></twisty-alg-viewer>
```

```javascript
import "https://cdn.cubing.net/v0/js/cubing/twisty";
import { connectSmartPuzzle, debugKeyboardConnect } from "https://cdn.cubing.net/v0/js/cubing/bluetooth";

const debug = new URL(location.href).searchParams.get("debug-keyboard") === "true";
const button = document.querySelector("button#connect");

async function connect() {
const puzzle =
debug
? await debugKeyboardConnect()
: await connectSmartPuzzle();

button.textContent = "↔️ Connected!";
button.disabled = true;

const twistyPlayer = document.querySelector("twisty-player");
puzzle.addAlgLeafListener((e) => {
twistyPlayer.experimentalAddAlgLeaf(e.latestAlgLeaf, {
cancel: true,
});
});
}

if (debug) {
button.textContent += " (keyboard)";
}
button.addEventListener("click", connect);
```

--------------------------------

### Import cubing.js modules via npm

Source: https://js.cubing.net/cubing

When using a bundler, import modules directly from the installed `cubing` package. Remove the CDN prefix from the import paths.

```javascript
import { Alg } from "cubing/alg";  
import { TwistyPlayer } from "cubing/twisty";  
import { randomScrambleForEvent } from "cubing/scramble";
```

--------------------------------

### Create a new project with create-cubing-app

Source: https://js.cubing.net/cubing

Use `npm` to quickly scaffold a new project using `create-cubing-app`. This command initializes a project with recommended configurations.

```bash
npm create --yes cubing-app@latest my-cubing-project  
  cd my-cubing-project  
  npm run dev
```

--------------------------------

### Styling Twisty Player with CSS

Source: https://js.cubing.net/cubing/twisty

Control the dimensions and other visual styles of the Twisty Player using CSS. This example sets custom width, height, margin, background, and border.

```html
<twisty-player
               style="width: 256px;
                    height: 192px;
                    margin: auto;
                    background: #0088ff22;
                    border: 4px double #00000044;"
               puzzle="fto"
               alg="[R: [B', R F R']]"
               hint-facelets="none"
               back-view="side-by-side"
               background="none"
             ></twisty-player>
```

--------------------------------

### Twisty Player with Multiple Parameters

Source: https://js.cubing.net/cubing/twisty

Customize the Twisty Player's appearance and behavior using various parameters. This example demonstrates setting the puzzle type, algorithm, hint facelets, back view, and background.

```html
<twisty-player
               puzzle="4x4x4"
               alg="r U2 x r U2 r U2 r' U2 l U2 r' U2 r U2 r' U2 r'"
               hint-facelets="none"
               back-view="top-right"
               background="none"
             ></twisty-player>
```

--------------------------------

### ontouchstart

Source: https://js.cubing.net/cubing/api/classes/twisty.TwizzleLink.html

Handles the event when a finger is placed on the screen.

```APIDOC
## ontouchstart

### Description
Handles the event when a finger is placed on the screen.

### Method
Event Handler

### Parameters
#### Event
- **ev** (TouchEvent) - The event object containing details about the touch start event.
```

--------------------------------

### name

Source: https://js.cubing.net/cubing/api/classes/bluetooth.GoCube.html

Gets the name of the GoCube.

```APIDOC
## name

### Description
Gets the name of the GoCube.

### Returns
* string | undefined - The name of the GoCube, or undefined if not available.
```

--------------------------------

### name

Source: https://js.cubing.net/cubing/api/classes/bluetooth.GiiKERCube.html

Gets the name of the GiiKERCube.

```APIDOC
## name

### Description
Retrieves the name of the GiiKERCube.

### Method
name(): string | undefined

### Returns
- string | undefined - The name of the cube, or undefined if not available.
```

--------------------------------

### name

Source: https://js.cubing.net/cubing/api/interfaces/bluetooth.BluetoothPuzzle.html

Gets the name of the Bluetooth puzzle.

```APIDOC
## name

### Description
Gets the name of the Bluetooth puzzle.

### Method
name

### Returns
string | undefined: The name of the puzzle, or undefined if not available.
```

--------------------------------

### experimentalNumAlgNodes

Source: https://js.cubing.net/cubing/api/classes/alg.AlgBuilder.html

Gets the number of algorithm nodes in the builder.

```APIDOC
## experimentalNumAlgNodes

### Description
Returns the number of algorithm nodes currently in the builder.

### Returns
number
```

--------------------------------

### Accessor A

Source: https://js.cubing.net/cubing/api/classes/alg.Commutator.html

Gets the first Alg component of the commutator.

```APIDOC
## A
  * get A(): Alg
#### Returns Alg
```

--------------------------------

### constructor

Source: https://js.cubing.net/cubing/api/classes/kpuzzle.KPattern.html

Initializes a new KPattern instance.

```APIDOC
## constructor
  * new KPattern(kpuzzle: KPuzzle, patternData: KPatternData): KPattern
#### Parameters
    * kpuzzle: KPuzzle
    * patternData: KPatternData
#### Returns KPattern
```

--------------------------------

### Alg Constructor and Creation

Source: https://js.cubing.net/cubing/api/classes/alg.Alg.html

Demonstrates how to create an Alg instance from a string, either directly or using the recommended fromString method for user-provided input.

```APIDOC
## Constructors

### constructor
  * new Alg(alg?: FlexibleAlgSource): Alg

Creates a new Alg instance. The input `alg` can be a string or other `FlexibleAlgSource`.

#### Parameters
    * `Optional`alg: FlexibleAlgSource

#### Returns Alg

## Static Methods

### fromString
  * Alg.fromString(dynamicString: string): Alg

Recommended method for creating an Alg from user-provided string input.

#### Parameters
    * dynamicString: string

#### Returns Alg
```

--------------------------------

### constructor

Source: https://js.cubing.net/cubing/api/classes/stream.ExperimentalTwizzleStreamServer.html

Initializes a new instance of ExperimentalTwizzleStreamServer.

```APIDOC
## constructor

### Description
Initializes a new instance of ExperimentalTwizzleStreamServer.

### Returns
ExperimentalTwizzleStreamServer
```

--------------------------------

### getPuzzleDescriptionString

Source: https://js.cubing.net/cubing/api/modules/puzzle-geometry.html

Gets a string representation of a puzzle's description.

```APIDOC
## getPuzzleDescriptionString

### Description
Gets a string representation of a puzzle's description.

### Method
GET

### Endpoint
/puzzle-geometry/description/{puzzle_id}/string
```

--------------------------------

### numAnimatedLeaves

Source: https://js.cubing.net/cubing/api/classes/twisty.TreeAlgIndexer.html

Gets the total number of animated leaves in the algorithm.

```APIDOC
## numAnimatedLeaves
  * numAnimatedLeaves(): ExperimentalLeafCount
#### Returns ExperimentalLeafCount
```

--------------------------------

### Constructor

Source: https://js.cubing.net/cubing/api/classes/stream.ExperimentalWebSocketProxySender.html

Initializes a new instance of the ExperimentalWebSocketProxySender class.

```APIDOC
## constructor
  * new ExperimentalWebSocketProxySender(
url: string,
): ExperimentalWebSocketProxySender
#### Parameters
    * url: string
#### Returns ExperimentalWebSocketProxySender
```

--------------------------------

### Accessor B

Source: https://js.cubing.net/cubing/api/classes/alg.Commutator.html

Gets the second Alg component of the commutator.

```APIDOC
## B
  * get B(): Alg
#### Returns Alg
```

--------------------------------

### SimpleAlgIndexer Constructor

Source: https://js.cubing.net/cubing/api/classes/twisty.SimpleAlgIndexer.html

Initializes a new instance of the SimpleAlgIndexer class.

```APIDOC
## constructor
  * new SimpleAlgIndexer(kpuzzle: KPuzzle, alg: Alg): SimpleAlgIndexer
#### Parameters
    * kpuzzle: KPuzzle
    * alg: Alg
#### Returns SimpleAlgIndexer
```

--------------------------------

### Static connect

Source: https://js.cubing.net/cubing/api/classes/bluetooth.GiiKERCube.html

Establishes a connection to the GiiKER Cube using a BluetoothRemoteGATTServer.

```APIDOC
## Static connect

### Description
Connects to a GiiKER Cube using the provided BluetoothRemoteGATTServer.

### Method
`Static` connect

### Parameters
#### Parameters
- **server** (BluetoothRemoteGATTServer) - Description not provided.

### Returns
Promise<GiiKERCube> - A promise that resolves with the GiiKERCube instance.
```

--------------------------------

### indexToMoveStartTimestamp

Source: https://js.cubing.net/cubing/api/classes/twisty.TreeAlgIndexer.html

Converts a leaf index to the timestamp when the move starts.

```APIDOC
## indexToMoveStartTimestamp
  * indexToMoveStartTimestamp(
index: ExperimentalLeafIndex,
): ExperimentalMillisecondTimestamp
#### Parameters
    * index: ExperimentalLeafIndex
#### Returns ExperimentalMillisecondTimestamp
```

--------------------------------

### name

Source: https://js.cubing.net/cubing/api/classes/bluetooth.KeyboardPuzzle.html

Gets the name of the puzzle. Returns undefined if the name is not set.

```APIDOC
## name
  * name(): string | undefined

#### Returns string | undefined
```

--------------------------------

### Create TwistyPlayer with Dynamic Config

Source: https://js.cubing.net/cubing/api/interfaces/twisty.TwistyPlayerConfig.html

Demonstrates how to create a TwistyPlayer instance by merging default configurations with dynamic overrides, such as those obtained from URL parameters. This approach helps avoid bugs when creating players with variable settings.

```typescript
import { TwistyPlayer, type TwistyPlayerConfig } from "cubing/twisty";  
  
const MY_DEFAULT_CONFIG: TwistyPlayerConfig = {  
  puzzle: "megaminx",  
  alg: "R U R'"  
};
export function createTwistyPlayer(overrideConfig: TwistyPlayerConfig) {
  const options = { ...MY_DEFAULT_CONFIG, ...overrideConfig };  
  return new TwistyPlayer(options);
}

// Example: if the current page is https://alpha.twizzle.net/edit/?alg=M2+E2+S2  
// then this gives us the "alg" param value "M2 E2 S2".  
const myOverrideConfig: TwistyPlayerConfig = {};  
const algParam = new URL(location.href).searchParams.get("alg");  
if (algParam) {  
  myOverrideConfig.alg = algParam;
}
createTwistyPlayer(myOverrideConfig);
```

--------------------------------

### jumpToStart

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Jumps the player to the beginning of the content.

```APIDOC
## jumpToStart

### Description
Jumps the player to the beginning of the content.

### Method
`jumpToStart(options?: { flash: boolean }): void`

### Parameters
#### Query Parameters
- **options** ({ flash: boolean }) - Optional. An object that may contain a `flash` property.
  - **flash** (boolean) - If true, flashes the player.

### Returns
- **void**
```

--------------------------------

### ExperimentalPGNotation Constructor

Source: https://js.cubing.net/cubing/api/classes/puzzle-geometry.ExperimentalPGNotation.html

Initializes a new instance of the ExperimentalPGNotation class.

```APIDOC
## constructor ExperimentalPGNotation

### Description
Initializes a new instance of the ExperimentalPGNotation class.

### Parameters
- **pg** (PuzzleGeometry) - The puzzle geometry object.
- **od** (PGOrbitsDef) - The PG orbits definition.

### Returns
ExperimentalPGNotation - A new instance of ExperimentalPGNotation.
```

--------------------------------

### indexToMoveStartTimestamp

Source: https://js.cubing.net/cubing/api/classes/twisty.SimpleAlgIndexer.html

Converts a move index to its corresponding start timestamp in milliseconds.

```APIDOC
## indexToMoveStartTimestamp
  * indexToMoveStartTimestamp(index: number): ExperimentalMillisecondTimestamp
#### Parameters
    * index: number
#### Returns ExperimentalMillisecondTimestamp
```

--------------------------------

### connect

Source: https://js.cubing.net/cubing/api/classes/bluetooth.GoCube.html

Establishes a connection to a GoCube via a BluetoothGATTServer.

```APIDOC
## connect

### Description
Connects to a GoCube using a provided BluetoothRemoteGATTServer.

### Parameters
#### Parameters
- **server** (BluetoothRemoteGATTServer) - Required - The BluetoothGATTServer instance to connect with.

### Returns Promise<GoCube>
```

--------------------------------

### experimentalCurrentThreeJSPuzzleObject

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Gets the first available puzzle Object3D for integration into other three.js scenes.

```APIDOC
## experimentalCurrentThreeJSPuzzleObject

### Description
Get the first available puzzle `Object3D`. This can be inserted into another `three.js` scene, essentially "adopting" it from the `TwistyPlayer`'s scenes while still allowing the `TwistyPlayer` to animate it. The function returns a `Promise` that returns if and when the `Object3D` is available, and accepts a callback that is called whenever a render is scheduled for the puzzle (essentially, if something about the puzzle has changed, like its appearance or current animated state).

Note:
    * This may never resolve if the player never creates the relevant 3D object under the hood (e.g. if the config is set to 2D, or is not valid for rendering a puzzle)
    * The architecture of `cubing.js` may change significantly, so it is not guaranteed that a `three.js` `Object3D` will be available from the main thread in the future.
    * This function only returns the current `three.js` puzzle object (once one exists). If you change e.g. the `puzzle` config for the player, then the object will currently become stale. This may be replaced with more convenient behaviour in the future.

### Parameters
#### Parameters
- **puzzleRenderScheduledCallback** (() => void) - Optional - Description: A callback that is called whenever a render is scheduled for the puzzle.

### Returns
- Promise<Object3D<Object3DEventMap>>
```

--------------------------------

### Twisty Player with Experimental Stickering (OLL)

Source: https://js.cubing.net/cubing/twisty

Use 'experimental-stickering="OLL"' to display algorithms corresponding to the Orientation of the Last Layer (OLL) step. This is useful for visualizing specific method steps.

```html
<twisty-player
             alg="r U R' U R U2 r'"
             experimental-setup-anchor="end"
             experimental-stickering="OLL"
           ></twisty-player>
```

--------------------------------

### oncanplay

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyAlgViewer.html

Handles the canplay event, which fires when the browser can start playing the media.

```APIDOC
## oncanplay

### Description
Handles the `canplay` event, which fires when the browser can start playing the media.

### Method Signature
`((this: GlobalEventHandlers, ev: Event) => any) | null`
```

--------------------------------

### onanimationstart

Source: https://js.cubing.net/cubing/api/classes/twisty.TwizzleLink.html

Handles the animationstart event, which fires when an animation begins to play.

```APIDOC
## onanimationstart

### Description
Handles the `animationstart` event.

### Method
Event Handler

### Parameters
- **ev** (AnimationEvent) - The event object.

### Response
- **(this: GlobalEventHandlers, ev: AnimationEvent) => any | null**
```

--------------------------------

### ExperimentalWebSocketProxyReceiver Constructor

Source: https://js.cubing.net/cubing/api/classes/stream.ExperimentalWebSocketProxyReceiver.html

Initializes a new instance of the ExperimentalWebSocketProxyReceiver class.

```APIDOC
## constructor
  * new ExperimentalWebSocketProxyReceiver(
url: string,
socketOrigin?: string,
): ExperimentalWebSocketProxyReceiver

### Parameters
    * url: string
    * `Optional`socketOrigin: string

### Returns ExperimentalWebSocketProxyReceiver
```

--------------------------------

### patternAtIndex

Source: https://js.cubing.net/cubing/api/classes/twisty.TreeAlgIndexer.html

Retrieves the pattern at a specific index, optionally starting from a given pattern.

```APIDOC
## patternAtIndex
  * patternAtIndex(index: ExperimentalLeafIndex, startPattern?: KPattern): KPattern
#### Parameters
    * index: ExperimentalLeafIndex
    * `Optional`startPattern: KPattern
#### Returns KPattern
```

--------------------------------

### QuantumMove Constructor

Source: https://js.cubing.net/cubing/api/classes/alg.QuantumMove.html

Initializes a new QuantumMove instance.

```APIDOC
## constructor
  * new QuantumMove(
family: string,
innerLayer?: number | null,
outerLayer?: number | null,
): QuantumMove

### Parameters
    * family: string
    * `Optional`innerLayer: number | null
    * `Optional`outerLayer: number | null
```

--------------------------------

### twistyPlayer

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyAlgViewer.html

Gets or sets the TwistyPlayer instance associated with the element. Can be a TwistyPlayer object or null.

```APIDOC
## twistyPlayer

### Description
Gets or sets the TwistyPlayer instance associated with the element. Can be a TwistyPlayer object or null.

### Accessor
`twistyPlayer`: TwistyPlayer | null

### Setter
`twistyPlayer(twistyPlayer: TwistyPlayer | null): void`
```

--------------------------------

### oncanplay

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Event handler for the 'canplay' event, fired when the browser can start playing media.

```APIDOC
## oncanplay

### Description
Handler for the 'canplay' event.

### Type
`((this: GlobalEventHandlers, ev: Event) => any) | null`
```

--------------------------------

### KPuzzle Constructor

Source: https://js.cubing.net/cubing/api/classes/kpuzzle.KPuzzle.html

Initializes a new KPuzzle instance. It takes a KPuzzleDefinition and an optional options object.

```APIDOC
## constructor
  * new KPuzzle(
definition: KPuzzleDefinition,
options?: { experimentalPGNotation?: ExperimentalPGNotation },
): KPuzzle

### Parameters
    * definition: KPuzzleDefinition
    * `Optional`options: { experimentalPGNotation?: ExperimentalPGNotation }

### Returns KPuzzle
```

--------------------------------

### Quat Constructor

Source: https://js.cubing.net/cubing/api/classes/puzzle-geometry.Quat.html

Initializes a new Quat object.

```APIDOC
## constructor
  * new Quat(a: number, b: number, c: number, d: number): Quat

### Parameters
    * a: number
    * b: number
    * c: number
    * d: number

### Returns Quat
```

--------------------------------

### oncanplay

Source: https://js.cubing.net/cubing/api/classes/twisty.TwizzleLink.html

Handles the canplay event, which fires when the media has finished loading enough to start playing.

```APIDOC
## oncanplay

### Description
Handles the `canplay` event.

### Method
Event Handler

### Parameters
- **ev** (Event) - The event object.

### Response
- **(this: GlobalEventHandlers, ev: Event) => any | null**
```

--------------------------------

### Touch Event Handlers

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyAlgViewer.html

Optional handlers for touch events like start, move, end, and cancel.

```APIDOC
## ontouchcancel

### Description
Handles the event when a touch point is interrupted.

### Method
`ontouchcancel`

### Parameters
- `ev` (TouchEvent) - The event object.

### Type
`((this: GlobalEventHandlers, ev: TouchEvent) => any) | null`
```

```APIDOC
## ontouchend

### Description
Handles the event when a touch point is removed from the surface.

### Method
`ontouchend`

### Parameters
- `ev` (TouchEvent) - The event object.

### Type
`((this: GlobalEventHandlers, ev: TouchEvent) => any) | null`
```

```APIDOC
## ontouchmove

### Description
Handles the event when a touch point is moved along the surface.

### Method
`ontouchmove`

### Parameters
- `ev` (TouchEvent) - The event object.

### Type
`((this: GlobalEventHandlers, ev: TouchEvent) => any) | null`
```

```APIDOC
## ontouchstart

### Description
Handles the event when a touch point is placed on the surface.

### Method
`ontouchstart`

### Parameters
- `ev` (TouchEvent) - The event object.

### Type
`((this: GlobalEventHandlers, ev: TouchEvent) => any) | null`
```

--------------------------------

### Constructor

Source: https://js.cubing.net/cubing/api/classes/alg.LineComment.html

Initializes a new instance of the LineComment class.

```APIDOC
## constructor
  * new LineComment(commentText: string): LineComment
#### Parameters
    * commentText: string
#### Returns LineComment
```

--------------------------------

### Log Alg to Console

Source: https://js.cubing.net/cubing/alg

Use the .log() method for convenient display of an Alg object in a JavaScript console. This is useful for debugging and examples.

```javascript
import { Alg } from "https://cdn.cubing.net/v0/js/cubing/alg"
  
new Alg("R U R' U R U2' R'").log();
```

--------------------------------

### Connect to a Smart Puzzle and Listen for Events

Source: https://js.cubing.net/cubing/bluetooth

Import and use `connectSmartPuzzle` to establish a connection with a smart puzzle. Add a listener to process incoming algorithm leaf data.

```javascript
import { connectSmartPuzzle } from "https://cdn.cubing.net/v0/js/cubing/bluetooth";

const puzzle = await connectSmartPuzzle();
puzzle.addAlgLeafListener((e) => {
console.log(e.latestAlgLeaf);
});
```

--------------------------------

### Basic Twisty Player Usage

Source: https://js.cubing.net/cubing/twisty

Create a basic Twisty Player instance by providing an algorithm to the 'alg' parameter. This will display the algorithm and allow user interaction.

```html
<twisty-player alg="R U R' U R U2' R'"></twisty-player>
```

--------------------------------

### TwistyPlayer Constructor

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Demonstrates how to construct a TwistyPlayer instance directly in JavaScript.

```APIDOC
## constructor

### Description
Initializes a new instance of the TwistyPlayer class.

### Method
`new TwistyPlayer(options?: TwistyPlayerOptions)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **options** (TwistyPlayerOptions) - Optional - An object containing configuration options for the player.
  * **alg** (string) - Optional - The algorithm to display initially.

### Request Example
```javascript
import { TwistyPlayer } from "cubing/twisty";
const twistyPlayer = new TwistyPlayer({ alg: "R U R'" });
document.body.appendChild(twistyPlayer);
```

### Response
#### Success Response (200)
Returns a new TwistyPlayer instance.

#### Response Example
```javascript
// No direct response example, as it returns an instance of TwistyPlayer
```
```

--------------------------------

### ExperimentalSVGAnimator Constructor

Source: https://js.cubing.net/cubing/api/classes/twisty.ExperimentalSVGAnimator.html

Initializes a new instance of the ExperimentalSVGAnimator class.

```APIDOC
## constructor
  * new ExperimentalSVGAnimator(
kpuzzle: KPuzzle,
svgSource: string,
experimentalStickeringMask?: StickeringMask,
showUnknownOrientations?: boolean,
): ExperimentalSVGAnimator

### Parameters
    * kpuzzle: KPuzzle
    * svgSource: string
    * `Optional`experimentalStickeringMask: StickeringMask
    * showUnknownOrientations: boolean = false

### Returns ExperimentalSVGAnimator
```

--------------------------------

### TwistyPlayer Accessors

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

This section details the various accessors available on the TwistyPlayer class, allowing users to get and set properties related to the player's state and appearance.

```APIDOC
## Accessors

### alg
  * get alg(): never
    * Returns: never
  * set alg(newAlg: string | Alg): void
    * Parameters:
      * newAlg: string | Alg
    * Returns: void

### background
  * get background(): never
    * Returns: never
  * set background(backgroundTheme: BackgroundThemeWithAuto): void
    * Parameters:
      * backgroundTheme: BackgroundThemeWithAuto
    * Returns: void

### backView
  * get backView(): never
    * Returns: never
  * set backView(backView: BackViewLayoutWithAuto): void
    * Parameters:
      * backView: BackViewLayoutWithAuto
    * Returns: void

### cameraDistance
  * get cameraDistance(): never
    * Returns: never
  * set cameraDistance(distance: number): void
    * Parameters:
      * distance: number
    * Returns: void

### cameraLatitude
  * get cameraLatitude(): never
    * Returns: never
  * set cameraLatitude(latitude: number): void
    * Parameters:
      * latitude: number
    * Returns: void

### cameraLatitudeLimit
  * get cameraLatitudeLimit(): never
    * Returns: never
  * set cameraLatitudeLimit(latitudeLimit: number): void
    * Parameters:
      * latitudeLimit: number
    * Returns: void

### cameraLongitude
  * get cameraLongitude(): never
    * Returns: never
  * set cameraLongitude(longitude: number): void
    * Parameters:
      * longitude: number
    * Returns: void

### classList
  * get classList(): DOMTokenList
    * Description: The read-only **`classList`**property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.
    * MDN Reference
    * Returns: DOMTokenList
  * set classList(value: string): void
    * Parameters:
      * value: string
    * Returns: void

### colorScheme
  * get colorScheme(): never
```

--------------------------------

### onanimationstart

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Event handler for the 'animationstart' event, fired when an animation begins.

```APIDOC
## onanimationstart

### Description
Handler for the 'animationstart' event.

### Type
`((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null`
```

--------------------------------

### Generate a 3x3x3 Scramble

Source: https://js.cubing.net/cubing/scramble

Use `randomScrambleForEvent` to get a scramble for a specific event. This returns a JavaScript Promise for an `Alg`, which is best used with `await`. The output is a string compatible with WCA notation.

```javascript
import { randomScrambleForEvent } from "https://cdn.cubing.net/v0/js/cubing/scramble";

const scramble = await randomScrambleForEvent("333"); console.log(scramble.toString());
```

--------------------------------

### ondragstart

Source: https://js.cubing.net/cubing/api/classes/twisty.TwizzleLink.html

Handles the dragstart event, which fires when a drag operation is initiated.

```APIDOC
## ondragstart

### Description
Handles the `dragstart` event.

### Method
Event Handler

### Parameters
- **ev** (DragEvent) - The event object.

### Response
- **(this: GlobalEventHandlers, ev: DragEvent) => any | null**
```

--------------------------------

### Constructor

Source: https://js.cubing.net/cubing/api/classes/alg.Grouping.html

Initializes a new instance of the Grouping class.

```APIDOC
## constructor
  * new Grouping(algSource: FlexibleAlgSource, amount?: number): Grouping
#### Parameters
    * algSource: FlexibleAlgSource
    * `Optional`amount: number
#### Returns Grouping
```

--------------------------------

### TwistyAlgEditor Constructor

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyAlgEditor.html

Initializes a new instance of the TwistyAlgEditor class.

```APIDOC
## constructor

### Description
Initializes a new instance of the TwistyAlgEditor class.

### Parameters
None
```

--------------------------------

### Constructor

Source: https://js.cubing.net/cubing/api/classes/alg.Move.html

Creates a new Move instance. Accepts various argument types for defining the move.

```APIDOC
## constructor
  * new Move(
...args:  
| [string, number]  
| [string]  
| [QuantumMove]  
| [QuantumMove, number],
): Move

### Parameters
    * ...args: [string, number] | [string] | [QuantumMove] | [QuantumMove, number]

### Returns Move
```

--------------------------------

### AlgCubingNetOptions

Source: https://js.cubing.net/cubing/api/modules/alg.html

Options related to Alg.Cubing.net integration.

```APIDOC
## AlgCubingNetOptions

### Description
Options related to Alg.Cubing.net integration.

### Type
Class
```

--------------------------------

### experimentalInitialHintFaceletsAnimation

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Configures the initial animation for hint facelets. Accepts an InitialHintFaceletsAnimation object.

```APIDOC
## set experimentalInitialHintFaceletsAnimation

### Description
Configures the initial animation for hint facelets.

### Parameters
* `anim` (InitialHintFaceletsAnimation) - The animation configuration.

### Returns
void
```

--------------------------------

### experimentalStickering

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Sets the experimental stickering pattern. Accepts a string.

```APIDOC
## set experimentalStickering

### Description
Sets the experimental stickering pattern.

### Parameters
* `stickering` (string) - The stickering pattern.

### Returns
void
```

--------------------------------

### Constructor

Source: https://js.cubing.net/cubing/api/classes/puzzle-geometry.PuzzleGeometry.html

Initializes a new instance of the PuzzleGeometry class.

```APIDOC
## constructor
  * new PuzzleGeometry(
puzzleDescription: ExperimentalPuzzleDescription,
options: ExperimentalPuzzleGeometryOptions,
): PuzzleGeometry

### Parameters
    * puzzleDescription: ExperimentalPuzzleDescription
    * options: ExperimentalPuzzleGeometryOptions

### Returns PuzzleGeometry
```

--------------------------------

### Create Alg Instance

Source: https://js.cubing.net/cubing/api/classes/alg.Alg.html

Instantiate an Alg object using the constructor for convenient string parsing or use the static fromString method for user-provided input.

```javascript
new Alg("R U R'"); // Convenient
Alg.fromString(dynamicString); // Recommended when the string input is user-provided.
```

--------------------------------

### onseeking

Source: https://js.cubing.net/cubing/api/classes/twisty.TwizzleLink.html

Handles the event when the user is seeking to a new position in media.

```APIDOC
## onseeking

### Description
Handles the event when the user is seeking to a new position in media.

### Method
Event Handler

### Parameters
#### Event
- **ev** (Event) - The event object containing details about the seeking event.
```

--------------------------------

### apply

Source: https://js.cubing.net/cubing/api/classes/kpuzzle.KPattern.html

Applies a transformation source to the current pattern and returns a new KPattern.

```APIDOC
## apply
  * apply(source: KTransformationSource): KPattern
#### Parameters
    * source: KTransformationSource
#### Returns KPattern
#### Deprecated
```

--------------------------------

### TreeAlgIndexer Constructor

Source: https://js.cubing.net/cubing/api/classes/twisty.TreeAlgIndexer.html

Initializes a new instance of the TreeAlgIndexer class.

```APIDOC
## constructor
  * new TreeAlgIndexer(kpuzzle: KPuzzle, alg: Alg): TreeAlgIndexer
#### Parameters
    * kpuzzle: KPuzzle
    * alg: Alg
#### Returns TreeAlgIndexer
```

--------------------------------

### TwistyAlgViewer Constructor

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyAlgViewer.html

Initializes a new instance of the TwistyAlgViewer. It accepts an optional options object that can include a TwistyPlayer configuration.

```APIDOC
## new TwistyAlgViewer(options?: { twistyPlayer?: TwistyPlayer })

### Description
Constructs a new TwistyAlgViewer instance.

### Parameters
#### Optional Parameters
- **options** (object) - Optional configuration object.
  - **twistyPlayer** (TwistyPlayer) - Configuration for the TwistyPlayer.
```

--------------------------------

### experimentalBinaryComponentsToReid3x3x3

Source: https://js.cubing.net/cubing/api/functions/protocol.experimentalBinaryComponentsToReid3x3x3.html

Converts binary 3x3x3 components into a KPattern.

```APIDOC
## Function experimentalBinaryComponentsToReid3x3x3

### Description
Converts binary 3x3x3 components into a KPattern.

### Signature
experimentalBinaryComponentsToReid3x3x3(
  components: Binary3x3x3Components,
): KPattern

### Parameters
#### components
- **components** (Binary3x3x3Components) - Required - The binary components of a 3x3x3 cube.

### Returns
- **KPattern** - The resulting KPattern.
```

--------------------------------

### connect

Source: https://js.cubing.net/cubing/api/classes/bluetooth.GanCube.html

Connects to a GanCube device using a BluetoothRemoteGATTServer. Returns a Promise that resolves with a GanCube instance.

```APIDOC
## connect

### Description
Connects to a GanCube device using a BluetoothRemoteGATTServer.

### Parameters
#### Path Parameters
- **server** (BluetoothRemoteGATTServer) - Description

### Returns
Promise<GanCube>
```

--------------------------------

### TwistyAlgEditor Constructor

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyAlgEditor.html

Initializes a new instance of the TwistyAlgEditor class. It can optionally accept configuration options for a TwistyPlayer and its properties.

```APIDOC
## new TwistyAlgEditor(options?)

### Description
Constructs a new TwistyAlgEditor instance.

### Parameters
* `options` (object) - Optional. Configuration options for the editor.
  * `twistyPlayer` (TwistyPlayer) - An optional TwistyPlayer instance to associate with the editor.
  * `twistyPlayerProp` (TwistyPlayerAlgProp) - Optional properties for the TwistyPlayer.

### Returns
* `TwistyAlgEditor` - The newly created TwistyAlgEditor instance.
```

--------------------------------

### TwistyPlayer Constructor

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Initializes a new instance of the TwistyPlayer class. Accepts an optional configuration object.

```APIDOC
## new TwistyPlayer(config?: TwistyPlayerConfig): TwistyPlayer

### Description
Initializes a new instance of the TwistyPlayer class.

### Parameters
* `config` (TwistyPlayerConfig) - Optional - Configuration object for the TwistyPlayer.
```

--------------------------------

### onplaying

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Handles the playing event, fired when the media is playing.

```APIDOC
## onplaying

### Description
Handles the playing event.

### Type
`((this: GlobalEventHandlers, ev: Event) => any) | null`
```

--------------------------------

### push

Source: https://js.cubing.net/cubing/api/classes/alg.AlgBuilder.html

Pushes an AlgNode to the builder.

```APIDOC
## push

### Description
Pushes an AlgNode into the builder.

### Parameters
* **u**: AlgNode - The AlgNode to push.

### Returns
void
```

--------------------------------

### simplify(options?: SimplifyOptions)

Source: https://js.cubing.net/cubing/api/classes/alg.Alg.html

Simplifies the algorithm. Deprecated, use experimentalSimplify instead.

```APIDOC
## simplify(options?: SimplifyOptions)

### Description
Simplifies the algorithm. Deprecated, use experimentalSimplify instead.

### Method
`simplify(options?: SimplifyOptions): Alg`

### Parameters
* `options` (SimplifyOptions) - Optional simplification options.

### Returns
Alg - The simplified algorithm.
```

--------------------------------

### TwistyAlgViewer Constructor

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyAlgViewer.html

Initializes a new instance of TwistyAlgViewer. It can optionally accept an options object to configure the associated TwistyPlayer.

```APIDOC
## constructor

### Description
Initializes a new instance of TwistyAlgViewer.

### Signature
constructor(options?: { twistyPlayer?: TwistyPlayer }): TwistyAlgViewer
```

--------------------------------

### experimentalHintSprite

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Sets the URL for the hint sprite. Accepts a string or URL object.

```APIDOC
## set experimentalHintSprite

### Description
Sets the URL for the hint sprite.

### Parameters
* `url` (string | URL) - The URL of the hint sprite.

### Returns
void
```

--------------------------------

### onopen Method

Source: https://js.cubing.net/cubing/api/classes/stream.ExperimentalWebSocketProxyReceiver.html

Handles the event when the WebSocket connection is successfully opened.

```APIDOC
## onopen
  * onopen(): void

### Returns void
```

--------------------------------

### experimentalDownloadScreenshot

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Initiates a download of the current player view as a screenshot.

```APIDOC
## experimentalDownloadScreenshot

### Description
Initiates a download of the current player view as a screenshot.

### Parameters
#### Parameters
- **filename** (string) - Optional - Description: The desired filename for the screenshot.

### Returns
- Promise<void>
```

--------------------------------

### ondragstart

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Event handler for the 'dragstart' event, fired when a drag operation begins.

```APIDOC
## ondragstart

### Description
Handler for the 'dragstart' event.

### Type
`((this: GlobalEventHandlers, ev: DragEvent) => any) | null`
```

--------------------------------

### KTransformation Constructor

Source: https://js.cubing.net/cubing/api/classes/kpuzzle.KTransformation.html

Initializes a new KTransformation object.

```APIDOC
## constructor
  * new KTransformation(
kpuzzle: KPuzzle,
transformationData: KTransformationData,
): KTransformation

### Parameters
    * kpuzzle: KPuzzle
    * transformationData: KTransformationData

### Returns KTransformation
```

--------------------------------

### ExperimentalSerializationOptions

Source: https://js.cubing.net/cubing/api/modules/alg.html

Options for experimental serialization of algorithms.

```APIDOC
## ExperimentalSerializationOptions

### Description
Options for experimental serialization of algorithms.

### Type
Class
```

--------------------------------

### GanCube Methods

Source: https://js.cubing.net/cubing/api/classes/bluetooth.GanCube.html

This section outlines the various methods available on the GanCube class for controlling and retrieving information from the device.

```APIDOC
## GanCube Methods

### `actualAngleAndBatteryCharacteristic()`

Reads the actual angle and battery characteristic from the device.

#### Returns
* `Promise<BluetoothRemoteGATTCharacteristic>` - A promise that resolves with the BluetoothRemoteGATTCharacteristic.

### `addAlgLeafListener(listener: (e: MoveEvent) => void)`

Adds a listener for algorithm leaf events.

#### Parameters
* `listener` (function) - The callback function to be executed when an algorithm leaf event occurs.

#### Returns
* `void`

### `addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions)`

Adds an event listener to the GanCube device.

#### Parameters
* `type` (string) - The type of event to listen for.
* `callback` (EventListenerOrEventListenerObject | null) - The function to call when the event is triggered.
* `options` (boolean | AddEventListenerOptions, optional) - Options for the event listener.

#### Returns
* `void`

### `addOrientationListener(listener: (e: OrientationEvent) => void)`

Adds a listener for orientation events.

#### Parameters
* `listener` (function) - The callback function to be executed when an orientation event occurs.

#### Returns
* `void`

### `disconnect()`

Disconnects from the GanCube device.

#### Returns
* `void`

### `dispatchEvent(event: Event): boolean`

Dispatches an event to the GanCube device.

#### Parameters
* `event` (Event) - The event to dispatch.

#### Returns
* `boolean` - True if the event was dispatched successfully, false otherwise.

### `experimentalAddBasicRotationTransformer()`

Adds a basic rotation transformer. This method is experimental.

#### Returns
* `void`

### `faceletStatus1Characteristic()`

Reads the facelet status characteristic 1 from the device.

#### Returns
* `Promise<BluetoothRemoteGATTCharacteristic>` - A promise that resolves with the BluetoothRemoteGATTCharacteristic.

### `faceletStatus2Characteristic()`

Reads the facelet status characteristic 2 from the device.

#### Returns
* `Promise<BluetoothRemoteGATTCharacteristic>` - A promise that resolves with the BluetoothRemoteGATTCharacteristic.

### `getBattery()`

Retrieves the battery level of the GanCube device.

#### Returns
* `Promise<number>` - A promise that resolves with the battery level.

### `getPattern()`

Retrieves the current pattern of the GanCube device.

#### Returns
* `Promise<KPattern>` - A promise that resolves with the current pattern.

### `intervalHandler()`

Handles the interval for certain operations.

#### Returns
* `Promise<void>`

### `name()`

Gets the name of the GanCube device.

#### Returns
* `string | undefined` - The name of the device or undefined if not available.

### `readActualAngleAndBatteryCharacteristic()`

Reads the actual angle and battery data from the device.

#### Returns
* `Promise<ArrayBufferLike>` - A promise that resolves with the ArrayBufferLike data.

```

--------------------------------

### apply

Source: https://js.cubing.net/cubing/api/classes/kpuzzle.KTransformation.html

Applies this transformation to a source.

```APIDOC
## apply
  * apply(source: KTransformationSource): KTransformation

### Parameters
    * source: KTransformationSource

### Returns KTransformation

#### Deprecated
```

--------------------------------

### onprogress

Source: https://js.cubing.net/cubing/api/classes/twisty.TwistyPlayer.html

Handles the progress event, fired when the browser is fetching the media.

```APIDOC
## onprogress

### Description
Handles the progress event.

### Type
`((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null`
```
Tokens:
Raw