[twisty] Add experimental-setup-to.

cubing · Jan 26, 2021 · fc8d43e · fc8d43e
1 parent afa6e5b
commit fc8d43e
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 6 deletions.
diff --git 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
@@ -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<string, AnyManagedAttribute> {
   // Alg
   "alg": AlgAttribute;
   "setup-alg": AlgAttribute;
+  "experimental-setup-to": StringEnumAttribute<SetupToLocation>;
 
   // Puzzle
   "puzzle": StringEnumAttribute<PuzzleID>;
@@ -141,6 +149,7 @@ interface TwistyPlayerAttributes extends Record<string, AnyManagedAttribute> {
 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
@@ -68,6 +68,18 @@ <h2>
       </div>
     </div>
 
+    <div class="content">
+      <h2>
+        <code>experimental-setup-to=&quot;end&quot;</code>
+      </h2>
+      <div class="multi" id="experimental-setup-to">
+        <span>DOM attributes:</span>
+        <span>Constructor config object:</span>
+        <span>Dynamic property setter:</span>
+        <twisty-player alg="R U R' U R U2' R'" experimental-setup-to="end"></twisty-player>
+      </div>
+    </div>
+
     <div class="content">
       <h2><code>puzzle=&quot;fto&quot;</code></h2>
       <div class="multi" id="puzzle">

diff --git 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({