### 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` ```