cubing 0.20.1 → 0.21.0-pre11

package/src/cubing/twisty/{dom/TwistyAlgViewer.ts → old/dom/TwistyAlgViewerV1.ts}

@@ -11,11 +11,11 @@ import {
   Pause,
   TraversalDownUp,
   Unit,
-} from "../../alg";
-import type { Parsed } from "../../alg/parse";
-import { puzzles } from "../../puzzles";
-import { TwistyPlayer } from "../../twisty";
-import { KPuzzleWrapper } from "../3D/puzzles/KPuzzleWrapper";
+} from "../../../alg";
+import type { Parsed } from "../../../alg/parse";
+import { puzzles } from "../../../puzzles";
+import { TwistyPlayerV1 } from "../..";
+import { KPuzzleWrapper } from "../../views/3D/puzzles/KPuzzleWrapper";
 import type { TimeRange } from "../animation/cursor/AlgCursor";
 import type { MillisecondTimestamp } from "../animation/cursor/CursorTypes";
 import { TreeAlgIndexer } from "../animation/indexer/tree/TreeAlgIndexer";
@@ -24,22 +24,22 @@ import {
   customElementsShim,
   HTMLElementShim,
 } from "./element/node-custom-element-shims";
-import { twistyAlgViewerCSS } from "./TwistyAlgViewer.css_";
+import { twistyAlgViewerCSS } from "./TwistyAlgViewerV1.css";
 
 const DEFAULT_OFFSET_MS = 250; // TODO: make this a fraction?
 
 class DataDown {
   earliestMoveIndex: number;
-  twistyAlgViewer: TwistyAlgViewer;
+  twistyAlgViewer: TwistyAlgViewerV1;
   direction: ExperimentalIterationDirection;
 }
 
 class DataUp {
   moveCount: number;
-  element: TwistyAlgWrapperElem | TwistyAlgLeafElem;
+  element: TwistyAlgWrapperElemV1 | TwistyAlgLeafElemV1;
 }
 
-class TwistyAlgLeafElem extends ManagedCustomElement {
+class TwistyAlgLeafElemV1 extends ManagedCustomElement {
   constructor(
     className: string,
     text: string,
@@ -73,7 +73,9 @@ class TwistyAlgLeafElem extends ManagedCustomElement {
     }
   }
 
-  pathToIndex(_index: number): (TwistyAlgWrapperElem | TwistyAlgLeafElem)[] {
+  pathToIndex(
+    _index: number,
+  ): (TwistyAlgWrapperElemV1 | TwistyAlgLeafElemV1)[] {
     return [];
   }
 
@@ -82,9 +84,9 @@ class TwistyAlgLeafElem extends ManagedCustomElement {
   }
 }
 
-customElementsShim.define("twisty-alg-leaf-elem", TwistyAlgLeafElem);
+customElementsShim.define("twisty-alg-leaf-elem-v1", TwistyAlgLeafElemV1);
 
-class TwistyAlgWrapperElem extends HTMLElementShim {
+class TwistyAlgWrapperElemV1 extends HTMLElementShim {
   private queue: (Element | Text)[] = [];
 
   constructor(className: string, public algOrUnit: Alg | Unit) {
@@ -110,12 +112,14 @@ class TwistyAlgWrapperElem extends HTMLElementShim {
     this.queue = [];
   }
 
-  pathToIndex(_index: number): (TwistyAlgWrapperElem | TwistyAlgLeafElem)[] {
+  pathToIndex(
+    _index: number,
+  ): (TwistyAlgWrapperElemV1 | TwistyAlgLeafElemV1)[] {
     return [];
   }
 }
 
-customElementsShim.define("twisty-alg-wrapper-elem", TwistyAlgWrapperElem);
+customElementsShim.define("twisty-alg-wrapper-elem-v1", TwistyAlgWrapperElemV1);
 
 function oppositeDirection(
   direction: ExperimentalIterationDirection,
@@ -149,7 +153,7 @@ function maybeReverseList<T>(
 class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
   public traverseAlg(alg: Alg, dataDown: DataDown): DataUp {
     let moveCount = 0;
-    const element = new TwistyAlgWrapperElem("twisty-alg-alg", alg); // TODO: pick a better class name.
+    const element = new TwistyAlgWrapperElemV1("twisty-alg-alg", alg); // TODO: pick a better class name.
     let first = true;
     for (const unit of experimentalDirect(alg.units(), dataDown.direction)) {
       if (!first) {
@@ -182,13 +186,13 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
       grouping.amount,
     );
     let moveCount = 0;
-    const element = new TwistyAlgWrapperElem("twisty-alg-grouping", grouping);
+    const element = new TwistyAlgWrapperElemV1("twisty-alg-grouping", grouping);
     element.addString("(");
 
     if (square1Tuple) {
       moveCount += element.addElem({
         moveCount: 1,
-        element: new TwistyAlgLeafElem(
+        element: new TwistyAlgLeafElemV1(
           "twisty-alg-move", // TODO: Mark the tuple with a special class?
           square1Tuple[0].amount.toString(),
           dataDown,
@@ -200,7 +204,7 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
       element.addString(", ");
       moveCount += element.addElem({
         moveCount: 1,
-        element: new TwistyAlgLeafElem(
+        element: new TwistyAlgLeafElemV1(
           "twisty-alg-move", // TODO: Mark the tuple with a special class?
           square1Tuple[1].amount.toString(),
           dataDown,
@@ -228,7 +232,7 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
   }
 
   public traverseMove(move: Move, dataDown: DataDown): DataUp {
-    const element = new TwistyAlgLeafElem(
+    const element = new TwistyAlgLeafElemV1(
       "twisty-alg-move",
       move.toString(),
       dataDown,
@@ -251,7 +255,7 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
     dataDown: DataDown,
   ): DataUp {
     let moveCount = 0;
-    const element = new TwistyAlgWrapperElem(
+    const element = new TwistyAlgWrapperElemV1(
       "twisty-alg-commutator",
       commutator,
     );
@@ -287,7 +291,10 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
 
   public traverseConjugate(conjugate: Conjugate, dataDown: DataDown): DataUp {
     let moveCount = 0;
-    const element = new TwistyAlgWrapperElem("twisty-alg-conjugate", conjugate);
+    const element = new TwistyAlgWrapperElemV1(
+      "twisty-alg-conjugate",
+      conjugate,
+    );
     element.addString("[");
     const aLen = element.addElem(
       this.traverseAlg(conjugate.A, {
@@ -316,7 +323,7 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
   public traversePause(pause: Pause, dataDown: DataDown): DataUp {
     return {
       moveCount: 1,
-      element: new TwistyAlgLeafElem(
+      element: new TwistyAlgLeafElemV1(
         "twisty-alg-pause",
         ".",
         dataDown,
@@ -328,7 +335,7 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
   }
 
   public traverseNewline(newline: Newline, _dataDown: DataDown): DataUp {
-    const element = new TwistyAlgWrapperElem("twisty-alg-newline", newline);
+    const element = new TwistyAlgWrapperElemV1("twisty-alg-newline", newline);
     element.append(document.createElement("br"));
     return {
       moveCount: 0,
@@ -342,7 +349,7 @@ class AlgToDOMTree extends TraversalDownUp<DataDown, DataUp, DataUp> {
   ): DataUp {
     return {
       moveCount: 0,
-      element: new TwistyAlgLeafElem(
+      element: new TwistyAlgLeafElemV1(
         "twisty-alg-line-comment",
         `//${lineComment.text}`,
         dataDown,
@@ -360,10 +367,10 @@ const algToDOMTree = algToDOMTreeInstance.traverseAlg.bind(
 ) as (alg: Alg, dataDown: DataDown) => DataUp;
 
 class MoveHighlighter {
-  moveCharIndexMap: Map<number, TwistyAlgLeafElem> = new Map();
-  currentElem: TwistyAlgLeafElem | null = null;
+  moveCharIndexMap: Map<number, TwistyAlgLeafElemV1> = new Map();
+  currentElem: TwistyAlgLeafElemV1 | null = null;
 
-  addMove(charIndex: number, elem: TwistyAlgLeafElem): void {
+  addMove(charIndex: number, elem: TwistyAlgLeafElemV1): void {
     this.moveCharIndexMap.set(charIndex, elem);
   }
 
@@ -382,12 +389,12 @@ class MoveHighlighter {
   }
 }
 
-export class TwistyAlgViewer extends HTMLElementShim {
+export class TwistyAlgViewerV1 extends HTMLElementShim {
   highlighter: MoveHighlighter = new MoveHighlighter();
-  #domTree: TwistyAlgWrapperElem | TwistyAlgLeafElem;
-  twistyPlayer: TwistyPlayer | null = null;
+  #domTree: TwistyAlgWrapperElemV1 | TwistyAlgLeafElemV1;
+  twistyPlayer: TwistyPlayerV1 | null = null;
   lastClickTimestamp: number | null = null;
-  constructor(options?: { twistyPlayer?: TwistyPlayer }) {
+  constructor(options?: { twistyPlayer?: TwistyPlayerV1 }) {
     super();
     if (options?.twistyPlayer) {
       this.setTwistyPlayer(options?.twistyPlayer);
@@ -408,7 +415,7 @@ export class TwistyAlgViewer extends HTMLElementShim {
     this.appendChild(this.#domTree);
   }
 
-  setTwistyPlayer(twistyPlayer: TwistyPlayer): void {
+  setTwistyPlayer(twistyPlayer: TwistyPlayerV1): void {
     if (this.twistyPlayer) {
       console.warn("twisty-player reassignment is not supported");
       return;
@@ -431,14 +438,14 @@ export class TwistyAlgViewer extends HTMLElementShim {
     this.setAlg(parsedAlg);
     (async () => {
       const wrapper = new KPuzzleWrapper(
-        await puzzles[twistyPlayer!.puzzle].def(),
+        await puzzles[twistyPlayer.puzzle].def(),
       );
       const indexer = new TreeAlgIndexer(wrapper, parsedAlg);
       twistyPlayer.timeline.addTimestampListener({
         onTimelineTimestampChange: (timestamp: MillisecondTimestamp): void => {
           // TODO: improve perf, e.g. only get notified when the move index changes.
           this.highlighter.set(
-            indexer.getMove(
+            indexer.getAnimLeaf(
               indexer.timestampToIndex(timestamp),
             ) as Parsed<Move> | null,
           );
@@ -493,7 +500,7 @@ export class TwistyAlgViewer extends HTMLElementShim {
         console.warn("for= elem does not exist");
         return;
       }
-      if (!(elem instanceof TwistyPlayer)) {
+      if (!(elem instanceof TwistyPlayerV1)) {
         console.warn("for= elem is not a twisty-player");
         return;
       }
@@ -506,4 +513,4 @@ export class TwistyAlgViewer extends HTMLElementShim {
   }
 }
 
-customElementsShim.define("twisty-alg-viewer", TwistyAlgViewer);
+customElementsShim.define("twisty-alg-viewer-v1", TwistyAlgViewerV1);

package/src/cubing/twisty/{dom/TwistyPlayer.css_.ts → old/dom/TwistyPlayer.css.ts}

@@ -25,7 +25,9 @@ export const twistyPlayerCSS = new CSSSource(`
 }
 
 .wrapper.controls-none twisty-scrubber,
-.wrapper.controls-none twisty-control-button-panel {
+.wrapper.controls-none twisty-control-button-panel ,
+.wrapper.controls-none twisty-scrubber-v2,
+.wrapper.controls-none twisty-buttons-v2 {
   display: none;
 }
 
@@ -40,4 +42,29 @@ twisty-scrubber {
   background-size: 32px 32px;
   background-position: 0 0, 16px 16px;
 }
+
+.visualization-wrapper > * {
+  width: 100%;
+  height: 100%;
+}
+
+.error-elem {
+  width: 100%;
+  height: 100%;
+  display: none;
+  place-content: center;
+  font-family: sans-serif;
+  box-shadow: inset 0 0 2em rgb(255, 0, 0);
+  color: red;
+  text-shadow: 0 0 0.2em white;
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.wrapper.error .visualization-wrapper {
+  display: none;
+}
+
+.wrapper.error .error-elem {
+  display: grid;
+}
 `);

package/src/cubing/twisty/{dom → old/dom}/TwistyPlayer.spec.ts

@@ -2,24 +2,23 @@
  * @jest-environment jsdom
  */
 
-import { Alg } from "../../alg";
-import { TwistyPlayer } from "./TwistyPlayer";
-import "../../alg/test/alg-comparison";
+import { Alg } from "../../../alg";
+import "../../../alg/test/alg-comparison";
+import { TwistyPlayerV1 } from "./TwistyPlayer";
 
 describe("TwistyPlayer", () => {
   it("can be constructed", () => {
-    const twistyPlayer = new TwistyPlayer({
+    const twistyPlayer = new TwistyPlayerV1({
       alg: "R U R'",
     });
     expect(twistyPlayer.alg.experimentalNumUnits()).toEqual(3);
   });
 
   it("can set alg using string", () => {
-    const twistyPlayer = new TwistyPlayer({
+    const twistyPlayer = new TwistyPlayerV1({
       alg: "R U R'",
     });
     // TODO(https://github.com/microsoft/TypeScript/pull/42425): remove `@ts-ignore`.
-    // @ts-ignore
     twistyPlayer.alg = "F2";
     expect(twistyPlayer.alg).toBeIdentical(new Alg("F2"));
   });

package/src/cubing/twisty/{dom → old/dom}/TwistyPlayer.ts

@@ -1,15 +1,15 @@
 import { Vector3 } from "three";
-import { Alg, experimentalAppendMove, Move } from "../../alg";
-import type { KPuzzleDefinition, Transformation } from "../../kpuzzle";
-import { countMoves } from "../../notation"; // TODO
-import type { StickerDat } from "../../puzzle-geometry";
-import { puzzles } from "../../puzzles";
-import type { PuzzleLoader } from "../../puzzles/PuzzleLoader";
-import type { PuzzleAppearance } from "../../puzzles/stickerings/appearance";
-import { Cube3D } from "../3D/puzzles/Cube3D";
-import { PG3D, PG3DOptions } from "../3D/puzzles/PG3D";
-import type { Twisty3DPuzzle } from "../3D/puzzles/Twisty3DPuzzle";
-import { Twisty3DScene } from "../3D/Twisty3DScene";
+import { Alg, experimentalAppendMove, Move } from "../../../alg";
+import type { KPuzzleDefinition, Transformation } from "../../../kpuzzle";
+import { countMoves } from "../../../notation"; // TODO
+import type { StickerDat } from "../../../puzzle-geometry";
+import { puzzles } from "../../../puzzles";
+import type { PuzzleLoader } from "../../../puzzles/PuzzleLoader";
+import type { PuzzleAppearance } from "../../../puzzles/stickerings/appearance";
+import { Cube3D } from "../../views/3D/puzzles/Cube3D";
+import { PG3D, PG3DOptions } from "../../views/3D/puzzles/PG3D";
+import type { Twisty3DPuzzle } from "../../views/3D/puzzles/Twisty3DPuzzle";
+import { Twisty3DScene } from "../../views/3D/Twisty3DScene";
 import { AlgCursor, IndexerConstructor } from "../animation/cursor/AlgCursor";
 import { SimpleAlgIndexer } from "../animation/indexer/SimpleAlgIndexer";
 import { SimultaneousMoveIndexer } from "../animation/indexer/simultaneous-moves/SimultaneousMoveIndexer";
@@ -21,12 +21,12 @@ import {
   TimestampLocationType,
 } from "../animation/Timeline";
 import { TwistyControlButtonPanel } from "./controls/buttons";
-import type { TwistyControlElement } from "./controls/TwistyControlElement.ts";
+import type { TwistyControlElement } from "./controls/TwistyControlElement";
 import { TwistyScrubber } from "./controls/TwistyScrubber";
 import { ClassListManager } from "./element/ClassListManager";
 import { ManagedCustomElement } from "./element/ManagedCustomElement";
 import { customElementsShim } from "./element/node-custom-element-shims";
-import { twistyPlayerCSS } from "./TwistyPlayer.css_";
+import { twistyPlayerCSS } from "./TwistyPlayer.css";
 import {
   BackgroundTheme,
   CameraLatitudeLimits,
@@ -77,8 +77,7 @@ const indexerMap = {
   simultaneous: SimultaneousMoveIndexer,
 };
 
-// <twisty-player>
-export class TwistyPlayer extends ManagedCustomElement {
+export class TwistyPlayerV1 extends ManagedCustomElement {
   #config: TwistyPlayerConfig;
 
   timeline: Timeline;
@@ -86,7 +85,7 @@ export class TwistyPlayer extends ManagedCustomElement {
   scene: Twisty3DScene | null = null;
   twisty3D: Twisty3DPuzzle | null = null;
 
-  #connected: boolean = false;
+  #connected = false;
   #legacyExperimentalPG3DViewConfig: LegacyExperimentalPG3DViewConfig | null =
     null;
 
@@ -97,7 +96,7 @@ export class TwistyPlayer extends ManagedCustomElement {
   viewerElems: TwistyViewerElement[] = []; // TODO: can we represent the intermediate state better?
   controlElems: TwistyControlElement[] = []; // TODO: can we represent the intermediate state better?
 
-  #hackyPendingFinalMoveCoalesce: boolean = false;
+  #hackyPendingFinalMoveCoalesce = false;
 
   #viewerWrapper: TwistyViewerWrapper;
   public legacyExperimentalCoalesceModFunc: (move: Move) => number = (
@@ -108,7 +107,7 @@ export class TwistyPlayer extends ManagedCustomElement {
     new ClassListManager(this, "controls-", ["none", "bottom-row"]);
 
   #experimentalInvalidInitialAlgCallback: (alg: Alg) => void;
-  #initialized: boolean = false;
+  #initialized = false;
 
   // TODO: support config from DOM.
   constructor(
@@ -198,8 +197,7 @@ export class TwistyPlayer extends ManagedCustomElement {
 
   /** @deprecated */
   get experimentalSetupAnchor(): SetupToLocation {
-    return this.#config.attributes["experimental-setup-anchor"]
-      .value as SetupToLocation;
+    return this.#config.attributes["experimental-setup-anchor"].value;
   }
 
   set puzzle(puzzle: PuzzleID) {
@@ -209,7 +207,7 @@ export class TwistyPlayer extends ManagedCustomElement {
   }
 
   get puzzle(): PuzzleID {
-    return this.#config.attributes["puzzle"].value as PuzzleID;
+    return this.#config.attributes["puzzle"].value;
   }
 
   set visualization(visualization: VisualizationFormat) {
@@ -219,8 +217,7 @@ export class TwistyPlayer extends ManagedCustomElement {
   }
 
   get visualization(): VisualizationFormat {
-    return this.#config.attributes["visualization"]
-      .value as VisualizationFormat;
+    return this.#config.attributes["visualization"].value;
   }
 
   set hintFacelets(hintFacelets: HintFaceletStyle) {
@@ -233,7 +230,7 @@ export class TwistyPlayer extends ManagedCustomElement {
   }
 
   get hintFacelets(): HintFaceletStyle {
-    return this.#config.attributes["hint-facelets"].value as HintFaceletStyle;
+    return this.#config.attributes["hint-facelets"].value;
   }
 
   // TODO: Implement for PG3D
@@ -257,7 +254,7 @@ export class TwistyPlayer extends ManagedCustomElement {
         })();
       }
       if (this.viewerElems[0] instanceof Twisty2DSVG) {
-        (this.viewerElems[0] as Twisty2DSVG).experimentalSetStickering(
+        this.viewerElems[0].experimentalSetStickering(
           this.experimentalStickering,
         );
       }
@@ -267,8 +264,7 @@ export class TwistyPlayer extends ManagedCustomElement {
   // TODO: Implement for PG3D
   /** @deprecated */
   get experimentalStickering(): ExperimentalStickering {
-    return this.#config.attributes["experimental-stickering"]
-      .value as ExperimentalStickering;
+    return this.#config.attributes["experimental-stickering"].value;
   }
 
   set background(background: BackgroundTheme) {
@@ -281,7 +277,7 @@ export class TwistyPlayer extends ManagedCustomElement {
   }
 
   get background(): BackgroundTheme {
-    return this.#config.attributes["background"].value as BackgroundTheme;
+    return this.#config.attributes["background"].value;
   }
 
   set controlPanel(controlPanel: ControlsLocation) {
@@ -290,7 +286,7 @@ export class TwistyPlayer extends ManagedCustomElement {
   }
 
   get controlPanel(): ControlsLocation {
-    return this.#config.attributes["control-panel"].value as ControlsLocation;
+    return this.#config.attributes["control-panel"].value;
   }
 
   /** @deprecated use `controlPanel */
@@ -319,7 +315,7 @@ export class TwistyPlayer extends ManagedCustomElement {
   }
 
   get backView(): BackViewLayout {
-    return this.#config.attributes["back-view"].value as BackViewLayout;
+    return this.#config.attributes["back-view"].value;
   }
 
   #orbitControls(): TwistyOrbitControls | null {
@@ -397,8 +393,7 @@ export class TwistyPlayer extends ManagedCustomElement {
 
   get experimentalCameraLatitudeLimits(): CameraLatitudeLimits {
     // TODO: sync with orbit controls
-    return this.#config.attributes["experimental-camera-latitude-limits"]
-      .value as CameraLatitudeLimits;
+    return this.#config.attributes["experimental-camera-latitude-limits"].value;
   }
 
   set viewerLink(viewerLinkPage: ViewerLinkPage) {
@@ -427,8 +422,9 @@ export class TwistyPlayer extends ManagedCustomElement {
 
   /** @deprecated */
   experimentalDerivedCameraOrbitCoordinates(): OrbitCoordinates {
-    let defaultCoordinatesForPuzzle = defaultCameraOrbitCoordinates(
+    const defaultCoordinatesForPuzzle = defaultCameraOrbitCoordinates(
       this.puzzle,
+      this.twisty3D instanceof PG3D ? "PG3D" : "Cube3D",
     );
 
     return {
@@ -496,9 +492,7 @@ export class TwistyPlayer extends ManagedCustomElement {
     // TODO: Are there any SVGs where we'd want a separate back view?
     const setBackView: boolean =
       this.backView && is3DVisualization(this.visualization);
-    const backView: BackViewLayout = setBackView
-      ? (this.backView as BackViewLayout)
-      : "none";
+    const backView: BackViewLayout = setBackView ? this.backView : "none";
     this.#viewerWrapper = new TwistyViewerWrapper({
       backView,
     });
@@ -662,8 +656,7 @@ export class TwistyPlayer extends ManagedCustomElement {
     this.experimentalSetCursorIndexer(this.#cursorIndexerName);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental
-  async updatePuzzleDOM(initial: boolean = false): Promise<void> {
+  async updatePuzzleDOM(initial = false): Promise<void> {
     if (!this.#connected) {
       return;
     }
@@ -674,7 +667,7 @@ export class TwistyPlayer extends ManagedCustomElement {
         id: "custom",
         fullName: "Custom (PG3D)",
         def: () => Promise.resolve(this.#legacyExperimentalPG3DViewConfig!.def),
-        svg: async () => {
+        svg: () => {
           throw "unimplemented";
         },
       };
@@ -780,7 +773,7 @@ export class TwistyPlayer extends ManagedCustomElement {
               if (pendingPuzzleUpdate.cancelled) {
                 return;
               }
-              def = pg.writekpuzzle(true) as KPuzzleDefinition; // TODO
+              def = pg.writekpuzzle(true); // TODO
               stickerDat = pg.get3d();
             } else {
               throw "Unimplemented!";
@@ -865,8 +858,8 @@ export class TwistyPlayer extends ManagedCustomElement {
   // Note: setting `coalesce`
   experimentalAddMove(
     move: Move,
-    coalesce: boolean = false,
-    coalesceDelayed: boolean = false,
+    coalesce = false,
+    coalesceDelayed = false,
   ): void {
     if (this.#hackyPendingFinalMoveCoalesce) {
       this.#hackyCoalescePending();
@@ -931,4 +924,4 @@ export class TwistyPlayer extends ManagedCustomElement {
   }
 }
 
-customElementsShim.define("twisty-player", TwistyPlayer);
+customElementsShim.define("twisty-player-v1", TwistyPlayerV1);

package/src/cubing/twisty/{dom → old/dom}/TwistyPlayerConfig.ts

@@ -1,12 +1,13 @@
 import { Vector3 } from "three";
-import type { Alg } from "../../alg";
-import { DEGREES_PER_RADIAN } from "../3D/TAU";
+import type { Alg } from "../../../alg";
+import type { VisualizationStrategy } from "../../model/props/viewer/VisualizationStrategyProp";
+import { DEGREES_PER_RADIAN } from "../../views/3D/TAU";
 import {
   AlgAttribute,
   RangedFloatAttribute,
   StringEnumAttribute,
 } from "./element/ElementConfig";
-import type { TwistyPlayer } from "./TwistyPlayer";
+import type { TwistyPlayerV1 } from "./TwistyPlayer";
 import type { OrbitCoordinates } from "./viewers/TwistyOrbitControls";
 import { BackViewLayout, backViewLayouts } from "./viewers/TwistyViewerWrapper";
 
@@ -19,10 +20,18 @@ export const centeredCameraOrbitCoordinates: OrbitCoordinates = {
   distance: 5.877852522924731,
 };
 
-export const cubeCameraOrbitCoordinates: OrbitCoordinates = {
-  latitude: 34.44990198795349,
-  longitude: 30.96375653207353,
-  distance: 5.656854249492381,
+// This is tuned so that the hint facelets for 3x3x3 always fit in the canvas.
+export const cubeCube3DCameraOrbitCoordinates: OrbitCoordinates = {
+  latitude: 35,
+  longitude: 30,
+  distance: 6,
+};
+
+// This is tuned so that the hint facelets always fit in the canvas.
+export const cubePG3DCameraOrbitCoordinates: OrbitCoordinates = {
+  latitude: 35,
+  longitude: 30,
+  distance: 6.25,
 };
 
 export const megaminxCameraOrbitCoordinates: OrbitCoordinates = {
@@ -48,9 +57,14 @@ export const pyraminxLookAt = new Vector3(0, 1 / 6, 0);
 // TODO
 export function defaultCameraOrbitCoordinates(
   puzzleID: PuzzleID,
+  strategy: VisualizationStrategy,
 ): OrbitCoordinates {
   if (puzzleID[1] === "x") {
-    return cubeCameraOrbitCoordinates;
+    if (strategy === "Cube3D") {
+      return cubeCube3DCameraOrbitCoordinates;
+    } else {
+      return cubePG3DCameraOrbitCoordinates;
+    }
   } else {
     switch (puzzleID) {
       case "megaminx":
@@ -60,7 +74,7 @@ export function defaultCameraOrbitCoordinates(
       case "master_tetraminx":
         return pyraminxCameraOrbitCoordinates;
       case "skewb":
-        return cubeCameraOrbitCoordinates;
+        return cubePG3DCameraOrbitCoordinates;
       default:
         return centeredCameraOrbitCoordinates;
     }
@@ -137,6 +151,8 @@ export const experimentalStickerings = {
   "experimental-fto-sc": true,
   "experimental-fto-l2c": true,
   "experimental-fto-lbt": true,
+  "experimental-global-custom-1": true,
+  "experimental-global-custom-2": true,
 };
 export type ExperimentalStickering = keyof typeof experimentalStickerings;
 
@@ -265,7 +281,7 @@ const twistyPlayerAttributeMap: Record<
 export class TwistyPlayerConfig {
   attributes: TwistyPlayerAttributes;
   constructor(
-    private twistyPlayer: TwistyPlayer, // TODO
+    private twistyPlayer: TwistyPlayerV1, // TODO
     initialValues: TwistyPlayerInitialConfig,
   ) {
     this.attributes = {

package/src/cubing/twisty/{dom → old/dom}/controls/TwistyScrubber.ts

@@ -8,8 +8,8 @@ import type {
 } from "../../animation/Timeline";
 import { ManagedCustomElement } from "../element/ManagedCustomElement";
 import { customElementsShim } from "../element/node-custom-element-shims";
-import type { TwistyControlElement } from "./TwistyControlElement.ts";
-import { twistyScrubberCSS } from "./TwistyScrubber.css_";
+import type { TwistyControlElement } from "./TwistyControlElement";
+import { twistyScrubberCSS } from "./TwistyScrubber.css";
 
 // Usually a horizontal line.
 export class TwistyScrubber
@@ -46,7 +46,7 @@ export class TwistyScrubber
   }
 
   private onInput(): void {
-    this.timeline!.setTimestamp(parseInt(this.range.value, 10));
+    this.timeline.setTimestamp(parseInt(this.range.value, 10));
   }
 }