### 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 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
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
```
```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 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
```
--------------------------------
### 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 - 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
```
--------------------------------
### 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>
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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` - 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` - A promise that resolves with the BluetoothRemoteGATTCharacteristic.
### `faceletStatus2Characteristic()`
Reads the facelet status characteristic 2 from the device.
#### Returns
* `Promise` - A promise that resolves with the BluetoothRemoteGATTCharacteristic.
### `getBattery()`
Retrieves the battery level of the GanCube device.
#### Returns
* `Promise` - A promise that resolves with the battery level.
### `getPattern()`
Retrieves the current pattern of the GanCube device.
#### Returns
* `Promise` - A promise that resolves with the current pattern.
### `intervalHandler()`
Handles the interval for certain operations.
#### Returns
* `Promise`
### `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` - 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`
```