cubing 0.22.0 → 0.24.0-pre2

package/src/cubing/twisty/controllers/TwistyAnimationController.ts

@@ -1,325 +0,0 @@
-import {
-  BoundaryType,
-  Direction,
-  directionScalar,
-  MillisecondTimestamp,
-  TimeRange,
-} from "./AnimationTypes";
-import { RenderScheduler } from "./RenderScheduler";
-import type {
-  PlayingInfo,
-  SimpleDirection,
-} from "../model/props/timeline/PlayingInfoProp";
-import type { TwistyPlayerModel } from "../model/TwistyPlayerModel";
-import { StaleDropper } from "../model/PromiseFreshener";
-import type { CurrentMoveInfo } from "./indexer/AlgIndexer";
-import type { TimestampRequest } from "../model/props/timeline/TimestampRequestProp";
-import { modIntoRange } from "../model/helpers";
-import type { CatchUpMove } from "../model/props/puzzle/state/CatchUpMoveProp";
-
-// TODO: Figure out a better way for the controller to instruct the player.
-export interface TwistyAnimationControllerDelegate {
-  flash(): void;
-}
-
-// We use a separate helper to separate the anim frame callbacks (and their cancellations).
-// TODO: fold this into the main controller
-class CatchUpHelper {
-  catchingUp: boolean = false;
-  pendingFrame = false;
-
-  constructor(private model: TwistyPlayerModel) {}
-
-  private scheduler: RenderScheduler = new RenderScheduler(
-    this.animFrame.bind(this),
-  );
-
-  start(): void {
-    if (!this.catchingUp) {
-      this.lastTimestamp = performance.now();
-    }
-    this.catchingUp = true;
-    this.pendingFrame = true;
-    this.scheduler.requestAnimFrame();
-  }
-
-  stop(): void {
-    this.catchingUp = false;
-    this.scheduler.cancelAnimFrame();
-  }
-
-  catchUpMs = 500;
-  lastTimestamp = 0;
-  animFrame(timestamp: MillisecondTimestamp): void {
-    this.scheduler.requestAnimFrame();
-    const delta = (timestamp - this.lastTimestamp) / this.catchUpMs;
-    this.lastTimestamp = timestamp;
-
-    this.model.catchUpMoveProp.set(
-      (async () => {
-        const previousCatchUpMove = await this.model.catchUpMoveProp.get();
-        if (previousCatchUpMove.move === null) {
-          return previousCatchUpMove;
-        }
-
-        const amount = previousCatchUpMove.amount + delta; // TODO: use tempo scale?
-        if (amount >= 1) {
-          this.pendingFrame = true;
-          this.stop();
-          this.model.timestampRequestProp.set("end");
-          return {
-            move: null,
-            amount: 0,
-          };
-        }
-        this.pendingFrame = false;
-        return {
-          move: previousCatchUpMove.move,
-          amount: amount,
-        };
-      })(),
-    );
-  }
-}
-
-// This controls the logic for animation, so that the main controller can focus on the right API abstractions.
-export class TwistyAnimationController {
-  // TODO: #private?
-  private playing: boolean = false;
-  private direction: Direction = Direction.Forwards;
-
-  private catchUpHelper: CatchUpHelper;
-
-  private model: TwistyPlayerModel;
-
-  private lastDatestamp: MillisecondTimestamp = 0;
-  private lastTimestampPromise: Promise<MillisecondTimestamp>;
-
-  private scheduler: RenderScheduler = new RenderScheduler(
-    this.animFrame.bind(this),
-  );
-
-  constructor(
-    model: TwistyPlayerModel,
-    private delegate: TwistyAnimationControllerDelegate,
-  ) {
-    this.model = model;
-    this.lastTimestampPromise = this.#effectiveTimestampMilliseconds();
-
-    this.model.playingInfoProp.addFreshListener(this.onPlayingProp.bind(this)); // TODO
-
-    this.catchUpHelper = new CatchUpHelper(this.model);
-    this.model.catchUpMoveProp.addFreshListener(
-      this.onCatchUpMoveProp.bind(this),
-    ); // TODO
-  }
-
-  // TODO: Do we need this?
-  async onPlayingProp(playingInfo: PlayingInfo): Promise<void> {
-    if (playingInfo.playing !== this.playing) {
-      playingInfo.playing ? this.play(playingInfo) : this.pause();
-    }
-  }
-
-  // TODO: Do we need this?
-  async onCatchUpMoveProp(catchUpMove: CatchUpMove): Promise<void> {
-    const catchingUp = catchUpMove.move !== null;
-    if (catchingUp !== this.catchUpHelper.catchingUp) {
-      catchingUp ? this.catchUpHelper.start() : this.catchUpHelper.stop();
-    }
-    this.scheduler.requestAnimFrame();
-  }
-
-  async #effectiveTimestampMilliseconds(): Promise<MillisecondTimestamp> {
-    return (await this.model.detailedTimelineInfoProp.get()).timestamp;
-  }
-
-  // TODO: Return the animation we've switched to.
-  jumpToStart(options?: { flash: boolean }): void {
-    this.model.timestampRequestProp.set("start");
-    this.pause();
-    if (options?.flash) {
-      this.delegate.flash();
-    }
-  }
-
-  // TODO: Return the animation we've switched to.
-  jumpToEnd(options?: { flash: boolean }): void {
-    this.model.timestampRequestProp.set("end");
-    this.pause();
-    if (options?.flash) {
-      this.delegate.flash();
-    }
-  }
-
-  // TODO: Return the playing info we've switched to.
-  playPause(): void {
-    if (this.playing) {
-      this.pause();
-    } else {
-      this.play(); // TODO: Resume direction and looping behaviour?
-    }
-  }
-
-  // TODO: bundle playing direction, and boundary into `toggle`.
-  async play(options?: {
-    direction?: SimpleDirection;
-    untilBoundary?: BoundaryType;
-    autoSkipToOtherEndIfStartingAtBoundary?: boolean; // TODO What's a good short name that doesn't imply a more general looping concept?
-    loop?: boolean;
-  }): Promise<void> {
-    // TODO: We might need to cache all playing info?
-    // Or maybe we don't have to worry about short-circuiting, since this is idempotent?
-    // if (this.playing) {
-    //   return;
-    // }
-
-    const direction = options?.direction ?? Direction.Forwards;
-
-    const coarseTimelineInfo = await this.model.coarseTimelineInfoProp.get(); // TODO: Why do we need to read this if we don't use it?
-    if (options?.autoSkipToOtherEndIfStartingAtBoundary ?? true) {
-      if (direction === Direction.Forwards && coarseTimelineInfo.atEnd) {
-        this.model.timestampRequestProp.set("start");
-        this.delegate.flash();
-      }
-      if (direction === Direction.Backwards && coarseTimelineInfo.atStart) {
-        this.model.timestampRequestProp.set("end");
-        this.delegate.flash();
-      }
-    }
-    this.model.playingInfoProp.set({
-      playing: true,
-      direction,
-      untilBoundary: options?.untilBoundary ?? BoundaryType.EntireTimeline,
-      loop: options?.loop ?? false,
-    });
-
-    this.playing = true;
-    this.lastDatestamp = performance.now(); // TODO: Take from event.
-    this.lastTimestampPromise = this.#effectiveTimestampMilliseconds();
-
-    // TODO: Save timestamp from model?
-    this.scheduler.requestAnimFrame();
-  }
-
-  pause(): void {
-    this.playing = false;
-    this.scheduler.cancelAnimFrame();
-    this.model.playingInfoProp.set({
-      playing: false,
-      untilBoundary: BoundaryType.EntireTimeline,
-    });
-  }
-
-  #animFrameEffectiveTimestampStaleDropper: StaleDropper<
-    [PlayingInfo, MillisecondTimestamp, TimeRange, number, CurrentMoveInfo]
-  > = new StaleDropper<
-    [PlayingInfo, MillisecondTimestamp, TimeRange, number, CurrentMoveInfo]
-  >();
-
-  async animFrame(frameDatestamp: MillisecondTimestamp): Promise<void> {
-    if (this.playing) {
-      this.scheduler.requestAnimFrame();
-    }
-
-    const lastDatestamp = this.lastDatestamp;
-    const freshenerResult =
-      await this.#animFrameEffectiveTimestampStaleDropper.queue(
-        Promise.all([
-          this.model.playingInfoProp.get(),
-          this.lastTimestampPromise,
-          this.model.timeRangeProp.get(),
-          this.model.tempoScaleProp.get(),
-          this.model.currentLeavesProp.get(),
-        ]),
-      );
-
-    const [playingInfo, lastTimestamp, timeRange, tempoScale, currentMoveInfo] =
-      freshenerResult;
-
-    // TODO: Get this without wasting time on the others?
-    if (!playingInfo.playing) {
-      this.playing = false;
-      // TODO: Ideally we'd cancel the anim frame from the top of this method.
-      // But `this.scheduler.cancelAnimFrame();` might accidentally cancel a
-      // legit freshly scheduled frame. We should modify `RenderScheduler` to
-      // either have individually cancellable requests, or to have something
-      // like a "default" anim frame re-request that can be canceled separately.
-      //
-      // Note that we can't wait until here to call
-      // `this.scheduler.requestAnimFrame();`, because that would slow down the
-      // frame rate.
-      return;
-    }
-
-    let end = currentMoveInfo.earliestEnd; // timeRange.end
-    if (
-      currentMoveInfo.currentMoves.length === 0 ||
-      playingInfo.untilBoundary === BoundaryType.EntireTimeline
-    ) {
-      end = timeRange.end;
-    }
-
-    let start = currentMoveInfo.latestStart; // timeRange.end
-    if (
-      currentMoveInfo.currentMoves.length === 0 ||
-      playingInfo.untilBoundary === BoundaryType.EntireTimeline
-    ) {
-      start = timeRange.start;
-    }
-    // const start = currentMoveInfo.latestStart; // timeRange.start // TODO
-
-    let delta =
-      (frameDatestamp - lastDatestamp) *
-      directionScalar(this.direction) *
-      tempoScale;
-    delta = Math.max(delta, 1); // TODO: This guards against the timestamp going in the wrong direction by accident. Can we avoid it?
-    delta *= playingInfo.direction;
-    let newTimestamp = lastTimestamp + delta; // TODO: Pre-emptively clamp.
-    let newSmartTimestampRequest: Exclude<TimestampRequest, number> | null =
-      null;
-
-    if (newTimestamp >= end) {
-      if (playingInfo.loop) {
-        newTimestamp = modIntoRange(
-          newTimestamp,
-          timeRange.start,
-          timeRange.end,
-        );
-      } else {
-        if (newTimestamp === timeRange.end) {
-          newSmartTimestampRequest = "end";
-        } else {
-          newTimestamp = end;
-        }
-        this.playing = false;
-        this.model.playingInfoProp.set({
-          playing: false,
-        });
-      }
-    } else if (newTimestamp <= start) {
-      if (playingInfo.loop) {
-        newTimestamp = modIntoRange(
-          newTimestamp,
-          timeRange.start,
-          timeRange.end,
-        );
-      } else {
-        if (newTimestamp === timeRange.start) {
-          newSmartTimestampRequest = "start";
-        } else {
-          newTimestamp = start;
-        }
-        this.playing = false;
-        this.model.playingInfoProp.set({
-          playing: false,
-        });
-      }
-    }
-    this.lastDatestamp = frameDatestamp;
-    this.lastTimestampPromise = Promise.resolve(newTimestamp); // TODO: Save this earlier? / Do we need to worry about the effecitve timestamp disagreeing?
-    this.model.timestampRequestProp.set(
-      newSmartTimestampRequest ?? newTimestamp,
-    );
-  }
-}

package/src/cubing/twisty/controllers/TwistyPlayerController.ts

@@ -1,38 +0,0 @@
-import type { TwistyPlayerModel } from "../model/TwistyPlayerModel";
-import {
-  TwistyAnimationController,
-  TwistyAnimationControllerDelegate,
-} from "./TwistyAnimationController";
-
-export class TwistyPlayerController {
-  animationController: TwistyAnimationController;
-
-  constructor(
-    private model: TwistyPlayerModel,
-    delegate: TwistyAnimationControllerDelegate,
-  ) {
-    this.animationController = new TwistyAnimationController(model, delegate);
-  }
-
-  jumpToStart(options?: { flash: boolean }): void {
-    this.animationController.jumpToStart(options);
-  }
-
-  jumpToEnd(options?: { flash: boolean }): void {
-    this.animationController.jumpToEnd(options);
-  }
-
-  togglePlay(play?: boolean) {
-    if (typeof play === "undefined") {
-      this.animationController.playPause();
-    }
-    play ? this.animationController.play() : this.animationController.pause();
-  }
-
-  public async visitTwizzleLink(): Promise<void> {
-    const a = document.createElement("a");
-    a.href = await this.model.twizzleLink();
-    a.target = "_blank";
-    a.click();
-  }
-}

package/src/cubing/twisty/controllers/easing.ts

@@ -1,3 +0,0 @@
-export function smootherStep(x: number): number {
-  return x * x * x * (10 - x * (15 - 6 * x));
-}

package/src/cubing/twisty/controllers/indexer/AlgDuration.ts

@@ -1,94 +0,0 @@
-import {
-  Alg,
-  Grouping,
-  LineComment,
-  Commutator,
-  Conjugate,
-  Move,
-  Newline,
-  Pause,
-  TraversalUp,
-} from "../../../alg";
-import type { Duration } from "../AnimationTypes";
-
-export function constantDurationForAmount(_amount: number): Duration {
-  return 1000;
-}
-
-export function defaultDurationForAmount(amount: number): Duration {
-  switch (Math.abs(amount)) {
-    case 0:
-      return 0;
-    case 1:
-      return 1000;
-    case 2:
-      return 1500;
-    default:
-      return 2000;
-  }
-}
-// eslint-disable-next-line no-inner-declarations
-export function ExperimentalScaledDefaultDurationForAmount(
-  scale: number,
-  amount: number,
-): Duration {
-  switch (Math.abs(amount)) {
-    case 0:
-      return 0;
-    case 1:
-      return scale * 1000;
-    case 2:
-      return scale * 1500;
-    default:
-      return scale * 2000;
-  }
-}
-
-export class AlgDuration extends TraversalUp<Duration> {
-  // TODO: Pass durationForAmount as Down type instead?
-  constructor(
-    public durationForAmount: (
-      amount: number,
-    ) => Duration = defaultDurationForAmount,
-  ) {
-    super();
-  }
-
-  public traverseAlg(alg: Alg): Duration {
-    let total = 0;
-    for (const unit of alg.units()) {
-      total += this.traverseUnit(unit);
-    }
-    return total;
-  }
-
-  public traverseGrouping(grouping: Grouping): Duration {
-    return grouping.amount * this.traverseAlg(grouping.alg);
-  }
-
-  public traverseMove(move: Move): Duration {
-    return this.durationForAmount(move.amount);
-  }
-
-  public traverseCommutator(commutator: Commutator): Duration {
-    return (
-      2 * (this.traverseAlg(commutator.A) + this.traverseAlg(commutator.B))
-    );
-  }
-
-  public traverseConjugate(conjugate: Conjugate): Duration {
-    return 2 * this.traverseAlg(conjugate.A) + this.traverseAlg(conjugate.B);
-  }
-
-  public traversePause(_pause: Pause): Duration {
-    return this.durationForAmount(1);
-  }
-
-  public traverseNewline(_newline: Newline): Duration {
-    return this.durationForAmount(1);
-  }
-
-  public traverseLineComment(_comment: LineComment): Duration {
-    return this.durationForAmount(0);
-  }
-}

package/src/cubing/twisty/controllers/indexer/AlgIndexer.ts

@@ -1,87 +0,0 @@
-import type { Move } from "../../../alg/units";
-import { arrayEqualsCompare } from "../../model/helpers";
-import type {
-  PuzzleWrapper,
-  State,
-} from "../../views/3D/puzzles/KPuzzleWrapper";
-import type {
-  Direction,
-  Duration,
-  MillisecondTimestamp,
-  PuzzlePosition,
-  Timestamp,
-} from "../AnimationTypes";
-import type { AnimatedLeafUnit } from "./simultaneous-moves/simul-moves";
-
-export interface CurrentMove {
-  move: Move;
-  direction: Direction; // TODO: `animationDirection`?
-  fraction: number; // TODO: Figure out how to separate this field to make this whole object easier to cache?
-  startTimestamp: MillisecondTimestamp;
-  endTimestamp: MillisecondTimestamp;
-}
-
-export function currentMoveEquals(cm1: CurrentMove, cm2: CurrentMove): boolean {
-  return (
-    cm1 === cm2 ||
-    (cm1.move.isIdentical(cm2.move) &&
-      cm1.direction === cm2.direction &&
-      cm1.fraction === cm2.fraction &&
-      cm1.startTimestamp === cm2.startTimestamp &&
-      cm1.endTimestamp === cm2.endTimestamp)
-  );
-}
-
-export function currentMoveArrayEquals(
-  cma1: CurrentMove[],
-  cma2: CurrentMove[],
-): boolean {
-  return arrayEqualsCompare(cma1, cma2, currentMoveEquals);
-}
-
-export interface CurrentMoveInfo {
-  stateIndex: number;
-  // Note: some moves may not be part of the alg!
-  currentMoves: CurrentMove[];
-  // Moves that are reaching a fraction of 1 at this exact timestamp.
-  movesFinishing: CurrentMove[];
-  // Moves that are reached a fraction of 1 in the past, but are needed to
-  // handle simultaneous move animation (e.g. because a move that started
-  // earlier is still not done).
-  movesFinished: CurrentMove[];
-  movesStarting: CurrentMove[];
-  latestStart: number;
-  earliestEnd: number;
-}
-
-// TODO: Write tests fore this before using.
-export function currentMoveInfoEquals(
-  c1: CurrentMoveInfo,
-  c2: CurrentMoveInfo,
-): boolean {
-  const eq =
-    c1 === c2 ||
-    (c1.stateIndex === c2.stateIndex &&
-      currentMoveArrayEquals(c1.currentMoves, c2.currentMoves) &&
-      currentMoveArrayEquals(c1.movesFinishing, c2.movesFinishing) &&
-      currentMoveArrayEquals(c1.movesStarting, c2.movesStarting) &&
-      c1.latestStart === c2.latestStart &&
-      c2.earliestEnd === c2.earliestEnd);
-  return eq;
-}
-
-export interface AlgIndexer<P extends PuzzleWrapper> {
-  getAnimLeaf(index: number): AnimatedLeafUnit | null;
-  indexToMoveStartTimestamp(index: number): Timestamp;
-  stateAtIndex(index: number, startTransformation?: State<P>): State<P>;
-  transformAtIndex(index: number): State<P>;
-  numAnimatedLeaves(): number;
-  timestampToIndex(timestamp: Timestamp): number;
-  algDuration(): Duration;
-  moveDuration(index: number): number;
-  timestampToPosition?: (
-    timestamp: Timestamp,
-    startTransformation?: State<P>,
-  ) => PuzzlePosition;
-  currentMoveInfo?: (timestamp: Timestamp) => CurrentMoveInfo;
-}

package/src/cubing/twisty/controllers/indexer/SimpleAlgIndexer.ts

@@ -1,76 +0,0 @@
-import { Alg, Move, TraversalUp } from "../../../alg";
-import { countAnimatedLeaves } from "../../../notation";
-import type {
-  PuzzleWrapper,
-  State,
-} from "../../views/3D/puzzles/KPuzzleWrapper";
-import type { Duration, Timestamp } from "../AnimationTypes";
-import { AlgDuration, defaultDurationForAmount } from "./AlgDuration";
-import type { AlgIndexer } from "./AlgIndexer";
-
-export class SimpleAlgIndexer<P extends PuzzleWrapper>
-  implements AlgIndexer<P>
-{
-  private moves: Alg;
-  // TODO: Allow custom `durationFn`.
-  private durationFn: TraversalUp<Duration> = new AlgDuration(
-    defaultDurationForAmount,
-  );
-
-  constructor(private puzzle: P, alg: Alg) {
-    // TODO: Avoid assuming all base moves are block moves.
-    this.moves = new Alg(alg.experimentalExpand());
-  }
-
-  public getAnimLeaf(index: number): Move {
-    return Array.from(this.moves.units())[index] as Move; // TODO: perf
-  }
-
-  public indexToMoveStartTimestamp(index: number): Timestamp {
-    const alg = new Alg(Array.from(this.moves.units()).slice(0, index)); // TODO
-    return this.durationFn.traverseAlg(alg);
-  }
-
-  public timestampToIndex(timestamp: Timestamp): number {
-    let cumulativeTime = 0;
-    let i;
-    for (i = 0; i < this.numAnimatedLeaves(); i++) {
-      cumulativeTime += this.durationFn.traverseMove(this.getAnimLeaf(i));
-      if (cumulativeTime >= timestamp) {
-        return i;
-      }
-    }
-    return i;
-  }
-
-  public stateAtIndex(index: number): State<P> {
-    return this.puzzle.combine(
-      this.puzzle.startState(),
-      this.transformAtIndex(index),
-    );
-  }
-
-  public transformAtIndex(index: number): State<P> {
-    let state = this.puzzle.identity();
-    for (const move of Array.from(this.moves.units()).slice(0, index)) {
-      state = this.puzzle.combine(
-        state,
-        this.puzzle.stateFromMove(move as Move),
-      );
-    }
-    return state;
-  }
-
-  public algDuration(): Duration {
-    return this.durationFn.traverseAlg(this.moves);
-  }
-
-  public numAnimatedLeaves(): number {
-    // TODO: Cache internally once performance matters.
-    return countAnimatedLeaves(this.moves);
-  }
-
-  public moveDuration(index: number): number {
-    return this.durationFn.traverseMove(this.getAnimLeaf(index));
-  }
-}