cubing 0.21.1 → 0.22.1

package/src/cubing/twisty/views/3D/TwistyOrbitControls.ts

@@ -0,0 +1,176 @@
+import { Spherical, Vector3 } from "three";
+import type { OrbitCoordinates } from "../../model/props/viewer/OrbitCoordinatesRequestProp";
+import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
+import { RenderScheduler } from "../../controllers/RenderScheduler";
+import type { DragMovementInfo, DragTracker } from "./DragTracker";
+import { DEGREES_PER_RADIAN } from "./TAU";
+
+const INERTIA_DEFAULT: boolean = true;
+
+const INERTIA_DURATION_MS = 500;
+// If the first inertial render is this long after the last move, we assume the
+// user has halted the cursor and we consider inertia to have "timed out". We
+// never begin animating the inertia.
+const INERTIA_TIMEOUT_MS = 50;
+
+const VERTICAL_MOVEMENT_BASE_SCALE = 0.75;
+
+// progress is from 0 to 1.
+function momentumScale(progress: number) {
+  // This is the exponential curve flipped so that
+  // - The slope at progress = 0 is 1 (this corresponds to "x = 1" on the normal
+  //   curve).
+  // - The scale exponentially "decays" until progress = 1.
+  // This means the scale at the end will be about 0.418
+  return (Math.exp(1 - progress) - (1 - progress)) / (1 - Math.E) + 1;
+}
+
+class Inertia {
+  private scheduler = new RenderScheduler(this.render.bind(this));
+  private lastTimestamp: number;
+  constructor(
+    private startTimestamp: number,
+    private momentumX: number,
+    private momentumY: number,
+    private callback: (movementX: number, movementY: number) => void,
+  ) {
+    this.scheduler.requestAnimFrame();
+    this.lastTimestamp = startTimestamp;
+  }
+
+  private render(now: DOMHighResTimeStamp) {
+    const progressBefore =
+      (this.lastTimestamp - this.startTimestamp) / INERTIA_DURATION_MS;
+    const progressAfter = Math.min(
+      1,
+      (now - this.startTimestamp) / INERTIA_DURATION_MS,
+    );
+
+    if (
+      progressBefore === 0 &&
+      progressAfter > INERTIA_TIMEOUT_MS / INERTIA_DURATION_MS
+    ) {
+      // The user has already paused for a while. Don't start any inertia.
+      return;
+    }
+
+    const delta = momentumScale(progressAfter) - momentumScale(progressBefore);
+
+    // TODO: For now, we only carry horizontal momentum. If this should stay, we
+    // can remove the plumbing for the Y dimension.
+    this.callback(this.momentumX * delta * 1000, this.momentumY * delta * 1000);
+
+    if (progressAfter < 1) {
+      this.scheduler.requestAnimFrame();
+    }
+    this.lastTimestamp = now;
+  }
+}
+
+export function positionToOrbitCoordinates(
+  position: Vector3,
+): OrbitCoordinates {
+  const spherical = new Spherical();
+  spherical.setFromVector3(position);
+  return {
+    latitude: 90 - spherical.phi * DEGREES_PER_RADIAN,
+    longitude: spherical.theta * DEGREES_PER_RADIAN,
+    distance: spherical.radius,
+  };
+}
+
+interface TwistyOrbitControlsDragAttachedInfo {
+  lastTemperedX: number;
+  lastTemperedY: number;
+  timestamp: number;
+}
+
+// TODO: change mouse cursor while moving.
+export class TwistyOrbitControls {
+  /** @deprecated */
+  experimentalInertia: boolean = INERTIA_DEFAULT;
+  private onMovementBound = this.onMovement.bind(this);
+  public experimentalHasBeenMoved: boolean = false;
+  constructor(
+    private model: TwistyPlayerModel,
+    private mirror: boolean,
+    private canvas: HTMLCanvasElement,
+    private dragTracker: DragTracker,
+  ) {
+    this.dragTracker.addEventListener("move", this.onMove.bind(this));
+    this.dragTracker.addEventListener("up", this.onUp.bind(this));
+  }
+
+  // f is the fraction of the canvas traversed per ms.
+  temperMovement(f: number): number {
+    // This is scaled to be linear for small values, but to reduce large values
+    // by a significant factor.
+    return (Math.sign(f) * Math.log(Math.abs(f * 10) + 1)) / 6;
+  }
+
+  onMove(e: CustomEvent<DragMovementInfo>): void {
+    e.detail.attachedInfo ??= {};
+
+    const { temperedX, temperedY } = this.onMovement(
+      e.detail.movementX,
+      e.detail.movementY,
+    );
+    const attachedInfo = e.detail
+      .attachedInfo as TwistyOrbitControlsDragAttachedInfo;
+    attachedInfo.lastTemperedX = temperedX * 10;
+    attachedInfo.lastTemperedY = temperedY * 10;
+    attachedInfo.timestamp = e.timeStamp; // TODO
+  }
+
+  onMovement(
+    movementX: number,
+    movementY: number,
+  ): {
+    temperedX: number;
+    temperedY: number;
+  } {
+    const scale = this.mirror ? -1 : 1;
+
+    // TODO: refactor
+    const minDim = Math.min(this.canvas.offsetWidth, this.canvas.offsetHeight);
+
+    const temperedX = this.temperMovement(movementX / minDim);
+    const temperedY = this.temperMovement(
+      (movementY / minDim) * VERTICAL_MOVEMENT_BASE_SCALE,
+    );
+    this.model.orbitCoordinatesRequestProp.set(
+      (async () => {
+        const prevCoords = await this.model.orbitCoordinatesProp.get();
+
+        const newCoords = {
+          latitude:
+            prevCoords.latitude + 2 * temperedY * DEGREES_PER_RADIAN * scale,
+          longitude: prevCoords.longitude - 2 * temperedX * DEGREES_PER_RADIAN,
+        };
+        return newCoords;
+      })(),
+    );
+    return { temperedX, temperedY };
+  }
+
+  onUp(e: CustomEvent<DragMovementInfo>): void {
+    e.preventDefault();
+    if (
+      "lastTemperedX" in e.detail.attachedInfo &&
+      "lastTemperedY" in e.detail.attachedInfo &&
+      "timestamp" in e.detail.attachedInfo &&
+      e.timeStamp - e.detail.attachedInfo.timestamp < 60 // TODO
+    ) {
+      new Inertia(
+        e.timeStamp, // TODO
+        (
+          e.detail.attachedInfo as TwistyOrbitControlsDragAttachedInfo
+        ).lastTemperedX,
+        (
+          e.detail.attachedInfo as TwistyOrbitControlsDragAttachedInfo
+        ).lastTemperedY,
+        this.onMovementBound,
+      ); // TODO: cancel inertia
+    }
+  }
+}

package/src/cubing/twisty/views/3D/puzzles/Cube3D.ts

@@ -16,21 +16,20 @@ import {
   Vector2,
   Vector3,
 } from "three";
+import type { ExperimentalStickering } from "../../..";
 import type { KPuzzleDefinition } from "../../../../kpuzzle";
 import { puzzles } from "../../../../puzzles";
 import type {
   FaceletMeshAppearance,
   PuzzleAppearance,
 } from "../../../../puzzles/stickerings/appearance";
-import type { AlgCursor } from "../../../old/animation/cursor/AlgCursor";
-import type { PuzzlePosition } from "../../../old/animation/cursor/CursorTypes";
-import { smootherStep } from "../../../old/animation/easing";
 import {
-  ExperimentalStickering,
-  experimentalStickerings,
   HintFaceletStyle,
   hintFaceletStyles,
-} from "../../../old/dom/TwistyPlayerConfig";
+} from "../../../model/props/puzzle/display/HintFaceletProp";
+import { experimentalStickerings } from "../../../model/props/puzzle/display/StickeringProp";
+import type { PuzzlePosition } from "../../../controllers/AnimationTypes";
+import { smootherStep } from "../../../controllers/easing";
 import { TAU } from "../TAU";
 import type { Twisty3DPuzzle } from "./Twisty3DPuzzle";
 
@@ -556,7 +555,6 @@ export class Cube3D extends Object3D implements Twisty3DPuzzle {
 
   constructor(
     private def: KPuzzleDefinition,
-    cursor?: AlgCursor,
     private scheduleRenderCallback?: () => void,
     options: Cube3DOptions = {},
   ) {
@@ -592,8 +590,6 @@ export class Cube3D extends Object3D implements Twisty3DPuzzle {
     if (this.options.experimentalStickering) {
       this.setStickering(this.options.experimentalStickering);
     }
-
-    cursor?.addPositionListener(this);
   }
 
   // Can only be called once.

package/src/cubing/twisty/views/3D/puzzles/PG3D.ts

@@ -13,15 +13,19 @@ import {
   Texture,
   Vector3,
 } from "three";
+import { Move } from "../../../../alg";
 import {
   areTransformationsEquivalent,
+  KPuzzle,
   KPuzzleDefinition,
   Transformation,
+  transformationOrder,
 } from "../../../../kpuzzle";
 import { experimentalTransformationForQuantumMove } from "../../../../kpuzzle";
 import type {
   StickerDat,
   StickerDatSticker,
+  StickerDatAxis,
 } from "../../../../puzzle-geometry";
 import type { TextureMapper } from "../../../../puzzle-geometry/PuzzleGeometry";
 import {
@@ -29,10 +33,9 @@ import {
   experimentalGetFaceletAppearance,
   ExperimentalPuzzleAppearance,
 } from "../../../../puzzles";
-import type { AlgCursor } from "../../../old/animation/cursor/AlgCursor";
-import type { PuzzlePosition } from "../../../old/animation/cursor/CursorTypes";
-import { smootherStep } from "../../../old/animation/easing";
-import type { HintFaceletStyle } from "../../../old/dom/TwistyPlayerConfig";
+import type { HintFaceletStyle } from "../../../model/props/puzzle/display/HintFaceletProp";
+import type { PuzzlePosition } from "../../../controllers/AnimationTypes";
+import { smootherStep } from "../../../controllers/easing";
 import { TAU } from "../TAU";
 
 import type { Twisty3DPuzzle } from "./Twisty3DPuzzle";
@@ -430,7 +433,7 @@ class StickerDef {
 class HitPlaneDef {
   public cubie: Group;
   private geo: BufferGeometry;
-  constructor(hitface: any, tm: TextureMapper) {
+  constructor(hitface: any, tm: TextureMapper, stickerDat: StickerDat) {
     this.cubie = new Group();
     const coords = hitface.coords as number[];
     const filler = new Filler(coords.length / 3 - 2, tm);
@@ -442,7 +445,9 @@ class HitPlaneDef {
     this.geo = new BufferGeometry();
     filler.setAttributes(this.geo);
     const obj = new Mesh(this.geo, invisMaterial);
-    obj.userData.name = hitface.name;
+    obj.userData.quantumMove = stickerDat.notationMapper.notationToExternal(
+      new Move(hitface.name),
+    );
     this.cubie.scale.setScalar(0.99);
     this.cubie.add(obj);
   }
@@ -451,10 +456,10 @@ class HitPlaneDef {
 class AxisInfo {
   public axis: Vector3;
   public order: number;
-  constructor(axisDat: any) {
-    const vec = axisDat[0] as number[];
+  constructor(axisDat: StickerDatAxis) {
+    const vec = axisDat.coordinates;
     this.axis = new Vector3(vec[0], vec[1], vec[2]);
-    this.order = axisDat[2];
+    this.order = axisDat.order;
   }
 }
 
@@ -512,23 +517,24 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
   private materialArray1: Material[];
   private materialArray2: Material[];
   private textured: boolean = false;
+  private showHintStickers: boolean = false;
+  private showFoundations: boolean = false;
   private hintMaterialDisposable: boolean;
   private stickerMaterialDisposable: boolean;
 
   #pendingStickeringUpdate: boolean = false;
 
   constructor(
-    cursor: AlgCursor,
     private scheduleRenderCallback: () => void,
     private definition: KPuzzleDefinition,
-    private pgdat: StickerDat,
-    private showFoundation: boolean = false,
-    private showHintStickers: boolean = false,
+    private stickerDat: StickerDat,
+    enableFoundationOpt: boolean = false,
+    enableHintStickersOpt: boolean = false,
     hintStickerHeightScale: number = 1,
     private params: PG3DOptions = {},
   ) {
     super();
-    if (pgdat.stickers.length === 0) {
+    if (stickerDat.stickers.length === 0) {
       throw Error("Reuse of stickerdat from pg; please don't do that.");
     }
     this.hintMaterial = new MeshBasicMaterial({
@@ -540,27 +546,33 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
     this.stickerMaterial = basicStickerMaterial;
     this.stickerMaterialDisposable = false;
     this.axesInfo = {};
-    const axesDef = this.pgdat.axis as any[];
+    const axesDef = this.stickerDat.axis;
     for (const axis of axesDef) {
-      this.axesInfo[axis[1]] = new AxisInfo(axis);
+      this.axesInfo[axis.quantumMove.family] = new AxisInfo(axis);
     }
-    const stickers = this.pgdat.stickers as any[];
+    const stickers = this.stickerDat.stickers as any[];
     this.stickers = {};
     this.materialArray1 = new Array(8);
     this.materialArray2 = new Array(8);
-    this.enableFoundation(showFoundation);
-    this.updateMaterialArrays();
+    // TODO: the argument enableFoundationOpt really means, do we ever want to display
+    // foundations.  But it is presently *used* to mean, show foundations initially
+    // (and maybe experimentalSetAppearance changes this).  So for now we set up the
+    // show flag from the enable flag, and turn on the enable flag so later when it's
+    // used we will get the foundations.  What this means is the geometry always "pays"
+    // for foundations, even if they aren't displayed.
+    this.showFoundation(enableFoundationOpt);
+    enableFoundationOpt = true;
     let triangleCount = 0;
     const multiplier = 3;
     for (const sticker of stickers) {
       const sides = sticker.coords.length / 3;
       triangleCount += multiplier * (sides - 2);
     }
-    const filler = new Filler(triangleCount, pgdat.textureMapper);
+    const filler = new Filler(triangleCount, stickerDat.textureMapper);
     const black = 0;
     const normals: number[][] = [];
     let totArea = 0;
-    for (const f of pgdat.faces) {
+    for (const f of stickerDat.faces) {
       normals.push(normal(f.coords));
       totArea += polyarea(f.coords);
     }
@@ -596,6 +608,14 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
       const stickerdef = new StickerDef(filler, sticker, trim, options);
       this.stickers[orbit][ori][ord] = stickerdef;
     }
+    // TODO: the argument enableHintStickersOpt really means, do we ever want to display
+    // hint stickers.  But it is presently *used* to mean, show hint stickers initially
+    // (and maybe experimentalSetAppearance changes this).  So for now we set up the
+    // show flag from the enable flag, and turn on the enable flag so later when it's
+    // used we will get the hint stickers.  What this means is the geometry always "pays"
+    // for hint stickers, even if they aren't displayed.
+    this.showHintStickers = enableHintStickersOpt;
+    enableHintStickersOpt = true;
     for (const sticker of stickers) {
       const orbit = sticker.orbit;
       const ord = sticker.ord;
@@ -603,7 +623,7 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
       this.stickers[orbit][ori][ord].addHint(
         filler,
         sticker,
-        showHintStickers,
+        enableHintStickersOpt,
         hintStickerHeightScale,
         trim,
         normals[sticker.face],
@@ -614,7 +634,9 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
       const orbit = sticker.orbit;
       const ord = sticker.ord;
       const ori = sticker.ori;
-      this.stickers[orbit][ori][ord].addFoundation(filler, sticker, black);
+      if (enableFoundationOpt) {
+        this.stickers[orbit][ori][ord].addFoundation(filler, sticker, black);
+      }
     }
     const fixedGeo = new BufferGeometry();
     filler.setAttributes(fixedGeo);
@@ -625,19 +647,23 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
     const obj2 = new Mesh(fixedGeo, this.materialArray2);
     obj2.scale.set(PG_SCALE, PG_SCALE, PG_SCALE);
     this.add(obj2);
-    const hitfaces = this.pgdat.faces as any[];
+    const hitfaces = this.stickerDat.faces as any[];
     this.movingObj = obj2;
     this.fixedGeo = fixedGeo;
     this.filler = filler;
     for (const hitface of hitfaces) {
-      const facedef = new HitPlaneDef(hitface, pgdat.textureMapper);
+      const facedef = new HitPlaneDef(
+        hitface,
+        stickerDat.textureMapper,
+        this.stickerDat,
+      );
       facedef.cubie.scale.set(PG_SCALE, PG_SCALE, PG_SCALE);
       this.add(facedef.cubie);
       this.controlTargets.push(facedef.cubie.children[0]);
     }
     filler.saveOriginalColors();
-    cursor.addPositionListener(this);
-    pgdat.stickers = []; // don't need these anymore
+    stickerDat.stickers = []; // don't need these anymore
+    this.updateMaterialArrays();
     /*
     this.experimentalUpdateTexture(
       true,
@@ -675,6 +701,69 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
     return this.controlTargets;
   }
 
+  #cachedKPuzzle: KPuzzle | null;
+  get #kpuzzle() {
+    return (this.#cachedKPuzzle ??= new KPuzzle(this.definition));
+  }
+  #isValidMove(move: Move): boolean {
+    try {
+      this.#kpuzzle.applyMove(move);
+      return true;
+    } catch (_) {
+      return false;
+    }
+  }
+
+  getClosestMoveToAxis(
+    point: Vector3,
+    transformations: {
+      invert: boolean;
+      depth?: "secondSlice" | "rotation" | "none";
+    },
+  ): { move: Move; order: number } | null {
+    let closestMove: Move | null = null;
+    let closestMoveDotProduct: number = 0;
+
+    let modify: (move: Move) => Move = (m) => m;
+    switch (transformations.depth) {
+      case "secondSlice":
+        modify = (m: Move) => m.modified({ innerLayer: 2 });
+        break;
+      case "rotation":
+        modify = (m: Move) => m.modified({ family: m.family + "v" });
+        break;
+    }
+
+    for (const axis of this.stickerDat.axis) {
+      const product = point.dot(new Vector3(...axis.coordinates));
+      if (product > closestMoveDotProduct) {
+        const modified = this.stickerDat.notationMapper.notationToExternal(
+          modify(axis.quantumMove),
+        );
+        if (!modified) {
+          continue;
+        }
+        if (this.#isValidMove(modified)) {
+          closestMoveDotProduct = product;
+          closestMove = modified;
+        }
+      }
+    }
+
+    if (!closestMove) {
+      return null;
+    }
+
+    if (transformations.invert) {
+      closestMove = closestMove.invert();
+    }
+    // TODO: cache order or make this lookup more efficient.
+    this.#kpuzzle.reset();
+    this.#kpuzzle.applyMove(closestMove);
+    const order = transformationOrder(this.definition, this.#kpuzzle.state);
+    return { move: closestMove, order }; // TODO: push this down
+  }
+
   experimentalSetAppearance(appearance: ExperimentalPuzzleAppearance): void {
     this.params.appearance = appearance;
     for (const orbitName in this.definition.orbits) {
@@ -751,8 +840,9 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
       const externalMove = moveProgress.move;
       // TODO: unswizzle goes external to internal, and so does the call after that
       // and so does the stateForBlockMove call
-      const unswizzled = this.pgdat.unswizzle(externalMove);
-      const move = this.pgdat.notationMapper.notationToInternal(externalMove);
+      const unswizzled = this.stickerDat.unswizzle(externalMove);
+      const move =
+        this.stickerDat.notationMapper.notationToInternal(externalMove);
       if (move === null) {
         throw Error("Bad blockmove " + externalMove.family);
       }
@@ -841,9 +931,8 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
     return smootherStep(fraction);
   }
 
-  private enableHintFacelets(v: boolean) {
+  private showHintFacelets(v: boolean) {
     this.showHintStickers = v;
-    this.updateMaterialArrays();
   }
 
   private updateMaterialArrays() {
@@ -860,7 +949,7 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
       this.materialArray1[2] = invisMaterial;
       this.materialArray2[3] = invisMaterial;
     }
-    if (this.showFoundation) {
+    if (this.showFoundations) {
       this.materialArray1[6] = foundationMaterial;
       this.materialArray2[7] = foundationMaterial;
     } else {
@@ -869,9 +958,8 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
     }
   }
 
-  private enableFoundation(v: boolean) {
-    this.showFoundation = v;
-    this.updateMaterialArrays();
+  private showFoundation(v: boolean) {
+    this.showFoundations = v;
   }
 
   private setHintStickerOpacity(v: number): void {
@@ -879,6 +967,7 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
       this.hintMaterial.dispose();
       this.hintMaterialDisposable = false;
     }
+    console.log("hint sticker opacity " + v);
     if (v === 0) {
       this.hintMaterial = invisMaterial;
     } else if (v === 1) {
@@ -900,10 +989,10 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
     hintStickerOpacity?: number;
   }): void {
     if (options.hintFacelets !== undefined) {
-      this.enableHintFacelets(options.hintFacelets !== "none");
+      this.showHintFacelets(options.hintFacelets !== "none");
     }
     if (options.showFoundation !== undefined) {
-      this.enableFoundation(options.showFoundation);
+      this.showFoundation(options.showFoundation);
     }
     if (options.hintStickerOpacity !== undefined) {
       this.setHintStickerOpacity(options.hintStickerOpacity);
@@ -912,6 +1001,7 @@ export class PG3D extends Object3D implements Twisty3DPuzzle {
     if (this.lastPos) {
       this.onPositionChange(this.lastPos);
     }
+    this.updateMaterialArrays();
     this.scheduleRenderCallback();
   }
 

package/src/cubing/twisty/views/3D/puzzles/Twisty3DPuzzle.ts

@@ -1,5 +1,5 @@
 import type { Object3D } from "three";
-import type { PuzzlePosition } from "../../../old/animation/cursor/CursorTypes";
+import type { PuzzlePosition } from "../../../controllers/AnimationTypes";
 
 export interface Twisty3DPuzzle extends Object3D {
   onPositionChange(position: PuzzlePosition): void;

package/src/cubing/twisty/views/TwistyAlgEditor/LeafTokens.ts

@@ -10,7 +10,7 @@ import {
   TraversalDownUp,
 } from "../../../alg";
 import type { Parsed } from "../../../alg/parse";
-import type { AnimatedLeafUnit } from "../../old/animation/indexer/simultaneous-moves/simul-moves";
+import type { AnimatedLeafUnit } from "../../controllers/indexer/simultaneous-moves/simul-moves";
 
 export type AnimatedLeafUnitInfo = {
   leaf: Parsed<AnimatedLeafUnit>;

package/src/cubing/twisty/views/TwistyAlgEditor/TwistyAlgEditor.css.ts

@@ -1,4 +1,4 @@
-import { CSSSource } from "../../old/dom/element/ManagedCustomElement";
+import { CSSSource } from "../ManagedCustomElement";
 
 export const twistyAlgEditorCSS = new CSSSource(`
 :host {

package/src/cubing/twisty/views/TwistyAlgEditor/TwistyAlgEditor.ts

@@ -19,9 +19,9 @@ import type {
   AlgWithIssues,
 } from "../../model/props/puzzle/state/AlgProp";
 import type { CurrentLeavesSimplified } from "../../model/props/puzzle/state/CurrentLeavesSimplified";
-import { ClassListManager } from "../../old/dom/element/ClassListManager";
-import { ManagedCustomElement } from "../../old/dom/element/ManagedCustomElement";
-import { customElementsShim } from "../../old/dom/element/node-custom-element-shims";
+import { ClassListManager } from "../ClassListManager";
+import { ManagedCustomElement } from "../ManagedCustomElement";
+import { customElementsShim } from "../node-custom-element-shims";
 import { TwistyPlayer } from "../TwistyPlayer";
 import { HighlightInfo, TwistyAlgEditorModel } from "./model";
 import { twistyAlgEditorCSS } from "./TwistyAlgEditor.css";
@@ -63,6 +63,9 @@ export class TwistyAlgEditor extends ManagedCustomElement {
     }
   }
 
+  // Temporary Workaround for Twizzle Explorer
+  debugNeverRequestTimestamp: boolean = false;
+
   constructor(options?: {
     twistyPlayer?: TwistyPlayer;
     twistyPlayerProp?: TwistyPlayerAlgProp;
@@ -301,7 +304,11 @@ export class TwistyAlgEditor extends ManagedCustomElement {
               console.log("invalid where");
               throw new Error("Invalid where!");
           }
-          twistyPlayer.experimentalModel.timestampRequestProp.set(newTimestamp);
+          if (!this.debugNeverRequestTimestamp) {
+            twistyPlayer.experimentalModel.timestampRequestProp.set(
+              newTimestamp,
+            );
+          }
         },
       );
 

package/src/cubing/twisty/views/TwistyAlgViewer.css.ts

@@ -1,4 +1,4 @@
-import { CSSSource } from "../old/dom/element/ManagedCustomElement";
+import { CSSSource } from "./ManagedCustomElement";
 
 export const twistyAlgViewerCSS = new CSSSource(`
 :host {

package/src/cubing/twisty/views/TwistyAlgViewer.ts

@@ -15,13 +15,13 @@ import {
 import type { Parsed } from "../../alg/parse";
 import type { AlgWithIssues } from "../model/props/puzzle/state/AlgProp";
 import type { DetailedTimelineInfo } from "../model/props/timeline/DetailedTimelineInfoProp";
-import type { MillisecondTimestamp } from "../old/animation/cursor/CursorTypes";
-import type { CurrentMoveInfo } from "../old/animation/indexer/AlgIndexer";
-import { ManagedCustomElement } from "../old/dom/element/ManagedCustomElement";
+import type { MillisecondTimestamp } from "../controllers/AnimationTypes";
+import type { CurrentMoveInfo } from "../controllers/indexer/AlgIndexer";
+import { ManagedCustomElement } from "./ManagedCustomElement";
 import {
   customElementsShim,
   HTMLElementShim,
-} from "../old/dom/element/node-custom-element-shims";
+} from "./node-custom-element-shims";
 import { twistyAlgViewerCSS } from "./TwistyAlgViewer.css";
 import { TwistyPlayer } from "./TwistyPlayer";
 

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

@@ -1,4 +1,4 @@
-import { CSSSource } from "./element/ManagedCustomElement";
+import { CSSSource } from "./ManagedCustomElement";
 
 // TODO: figure out why `:host(twisty-player):fullscreen { background-color: white }` doesn't work.
 export const twistyPlayerCSS = new CSSSource(`
@@ -6,6 +6,9 @@ export const twistyPlayerCSS = new CSSSource(`
   width: 384px;
   height: 256px;
   display: grid;
+
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 .wrapper {