From fc8d43e66918394aea372af9720a7ffbc08158a7 Mon Sep 17 00:00:00 2001 From: Lucas Garron Date: Tue, 26 Jan 2021 03:18:45 -0800 Subject: [PATCH] [twisty] Add `experimental-setup-to`. --- src/cubing/twisty/dom/TwistyPlayer.ts | 43 ++++++++++++++++++--- src/cubing/twisty/dom/TwistyPlayerConfig.ts | 14 +++++++ src/demo/twisty/attributes.html | 12 ++++++ src/demo/twisty/attributes.ts | 14 +++++++ 4 files changed, 77 insertions(+), 6 deletions(-) diff --git a/src/cubing/twisty/dom/TwistyPlayer.ts b/src/cubing/twisty/dom/TwistyPlayer.ts index a2dcdcb3c..94b05eea4 100644 --- a/src/cubing/twisty/dom/TwistyPlayer.ts +++ b/src/cubing/twisty/dom/TwistyPlayer.ts @@ -3,6 +3,7 @@ import { algToString, BlockMove, experimentalAppendBlockMove, + invert, Sequence, } from "../../alg"; import { parseAlg } from "../../alg/parser"; @@ -40,6 +41,7 @@ import { ExperimentalStickering, HintFaceletStyle, PuzzleID, + SetupToLocation, TwistyPlayerConfig, TwistyPlayerInitialConfig, ViewerLinkPage, @@ -133,6 +135,7 @@ export class TwistyPlayer extends ManagedCustomElement { } this.#config.attributes["alg"].setValue(seq); this.cursor?.setAlg(seq); // TODO: can we ensure the cursor already exists? + this.setCursorStartState(); } get alg(): Sequence { @@ -149,15 +152,37 @@ export class TwistyPlayer extends ManagedCustomElement { seq = parseAlg((seq as unknown) as string) as Sequence; } this.#config.attributes["setup-alg"].setValue(seq); - if (this.cursor) { - this.cursor.setStartState(this.cursor.algToState(seq)); // TODO - } + this.setCursorStartState(); } get setupAlg(): Sequence { return this.#config.attributes["setup-alg"].value; } + private setCursorStartState(): void { + if (this.cursor) { + this.cursor.setStartState(this.cursor.algToState(this.cursorStartAlg())); // TODO + } + } + + private cursorStartAlg(): Sequence { + let seq = this.setupAlg; + if (this.experimentalSetupTo === "end") { + seq = new Sequence(seq.nestedUnits.concat(invert(this.alg).nestedUnits)); + } + return seq; // TODO + } + + set experimentalSetupTo(setupToLocation: SetupToLocation) { + this.#config.attributes["experimental-setup-to"].setValue(setupToLocation); + this.setCursorStartState(); + } + + get experimentalSetupTo(): SetupToLocation { + return this.#config.attributes["experimental-setup-to"] + .value as SetupToLocation; + } + set puzzle(puzzle: PuzzleID) { if (this.#config.attributes["puzzle"].setValue(puzzle)) { this.updatePuzzleDOM(); @@ -476,7 +501,7 @@ export class TwistyPlayer extends ManagedCustomElement { } private setCursor(cursor: AlgCursor): void { - cursor.setStartState(cursor.algToState(this.setupAlg)); + cursor.setStartState(cursor.algToState(this.cursorStartAlg())); this.timeline.addCursor(cursor); if (this.cursor) { this.timeline.removeCursor(this.cursor); @@ -520,16 +545,22 @@ export class TwistyPlayer extends ManagedCustomElement { let cursor: AlgCursor; try { - cursor = new AlgCursor(this.timeline, def, this.alg, this.setupAlg); // TODO: validate more directly if the alg is okay for the puzzle. + cursor = new AlgCursor( + this.timeline, + def, + this.alg, + this.cursorStartAlg(), + ); // TODO: validate more directly if the alg is okay for the puzzle. } catch (e) { if (initial) { + // TODO: also take into account setup alg. this.experimentalInvalidInitialAlgCallback(this.alg); } cursor = new AlgCursor( this.timeline, def, new Sequence([]), - this.setupAlg, + new Sequence([]), ); } this.setCursor(cursor); diff --git a/src/cubing/twisty/dom/TwistyPlayerConfig.ts b/src/cubing/twisty/dom/TwistyPlayerConfig.ts index d6a49eac1..ea7af4a53 100644 --- a/src/cubing/twisty/dom/TwistyPlayerConfig.ts +++ b/src/cubing/twisty/dom/TwistyPlayerConfig.ts @@ -21,6 +21,13 @@ export const centeredCameraPosition = new Vector3( // TODO export const cubeCameraPosition = new Vector3(3, 4, 5); +// TODO: turn these maps into lists? +export const SetupToLocations = { + start: true, // default // TODO: "beginning" + end: true, +}; +export type SetupToLocation = keyof typeof SetupToLocations; + // TODO: turn these maps into lists? export const visualizationFormats = { "3D": true, // default @@ -119,6 +126,7 @@ interface TwistyPlayerAttributes extends Record { // Alg "alg": AlgAttribute; "setup-alg": AlgAttribute; + "experimental-setup-to": StringEnumAttribute; // Puzzle "puzzle": StringEnumAttribute; @@ -141,6 +149,7 @@ interface TwistyPlayerAttributes extends Record { export interface TwistyPlayerConfigValues { alg: Sequence; setupAlg: Sequence; + experimentalSetupTo: SetupToLocation; puzzle: PuzzleID; visualization: VisualizationFormat; @@ -164,6 +173,7 @@ const twistyPlayerAttributeMap: Record< > = { "alg": "alg", "setup-alg": "setupAlg", + "experimental-setup-to": "experimentalSetupTo", "puzzle": "puzzle", "visualization": "visualization", @@ -189,6 +199,10 @@ export class TwistyPlayerConfig { this.attributes = { "alg": new AlgAttribute(initialValues.alg), "setup-alg": new AlgAttribute(initialValues.setupAlg), + "experimental-setup-to": new StringEnumAttribute( + SetupToLocations, + initialValues.experimentalSetupTo, + ), "puzzle": new StringEnumAttribute(puzzleIDs, initialValues.puzzle), "visualization": new StringEnumAttribute( diff --git a/src/demo/twisty/attributes.html b/src/demo/twisty/attributes.html index 5875620da..a373a61a7 100644 --- a/src/demo/twisty/attributes.html +++ b/src/demo/twisty/attributes.html @@ -68,6 +68,18 @@

+
+

+ experimental-setup-to="end" +

+
+ DOM attributes: + Constructor config object: + Dynamic property setter: + +
+
+

puzzle="fto"

diff --git a/src/demo/twisty/attributes.ts b/src/demo/twisty/attributes.ts index 6ca17d0ec..58e15c5d8 100644 --- a/src/demo/twisty/attributes.ts +++ b/src/demo/twisty/attributes.ts @@ -35,6 +35,20 @@ experimentalSetShareAllNewRenderers(true); tw.setupAlg = parseAlg("(R U R' U R U2' R')'"); } +{ + document.querySelector("#experimental-setup-to")!.appendChild( + new TwistyPlayer({ + alg: parseAlg("R U R' U R U2' R'"), + experimentalSetupTo: "end", + }), + ); + const tw = new TwistyPlayer({ + alg: parseAlg("R U R' U R U2' R'"), + }); + document.querySelector("#experimental-setup-to")!.appendChild(tw); + tw.experimentalSetupTo = "end"; +} + { document.querySelector("#puzzle")!.appendChild( new TwistyPlayer({