cubing 0.20.2 → 0.21.0-pre12

package/src/cubing/stream/process/ReorientedStream.ts

@@ -1,6 +1,6 @@
 import { experimentalIs, Move } from "../../alg";
 import { KPuzzle } from "../../kpuzzle";
-import { cube3x3x3KPuzzle } from "../../puzzles/implementations/3x3x3/3x3x3.kpuzzle.json_";
+import { experimentalCube3x3x3KPuzzle as cube3x3x3KPuzzle } from "../../kpuzzle";
 
 export interface PuzzleStreamMoveEventDetail {
   move: Move;

package/src/cubing/stream/twizzle/TwizzleStream.ts

@@ -31,15 +31,18 @@ class TwizzleStream extends EventTarget {
   }
 }
 
+type StreamsField = {
+  streamID: string;
+  senders: { name: string; twizzleUserID: string; wcaID: string | null }[];
+}[];
+
 export class TwizzleStreamServer {
-  async streams(): Promise<
-    {
-      streamID: string;
-      senders: { name: string; twizzleUserID: string; wcaID: string | null }[];
-    }[]
-  > {
-    return (await (await fetch("https://api.twizzle.net/v0/streams")).json())
-      .streams;
+  async streams(): Promise<StreamsField> {
+    return (
+      (await (await fetch("https://api.twizzle.net/v0/streams")).json()) as {
+        streams: StreamsField;
+      }
+    ).streams;
   }
 
   connect(streamID: string): TwizzleStream {

package/src/cubing/stream/websocket-proxy.ts

@@ -40,8 +40,7 @@ export class WebSocketProxySender {
     console.error("WebSocket sender error:", error);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental, @typescript-eslint/no-empty-function
-  protected onmessage(e: MessageEvent): void {}
+  protected onmessage(_e: MessageEvent): void {}
 }
 
 export abstract class WebSocketProxyReceiver {
@@ -70,6 +69,5 @@ export abstract class WebSocketProxyReceiver {
     this.onProxyEvent(JSON.parse(e.data));
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental
   abstract onProxyEvent(e: ProxyEvent): void;
 }

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

@@ -0,0 +1,248 @@
+import type { TimeRange } from "../old/animation/cursor/AlgCursor";
+import {
+  BoundaryType,
+  Direction,
+  directionScalar,
+  MillisecondTimestamp,
+} from "../old/animation/cursor/CursorTypes";
+import { RenderScheduler } from "../old/animation/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 "../old/animation/indexer/AlgIndexer";
+import type { TimestampRequest } from "../model/props/timeline/TimestampRequestProp";
+import { modIntoRange } from "../model/helpers";
+
+// TODO: Figure out a better way for the controller to instruct the player.
+export interface TwistyAnimationControllerDelegate {
+  flash(): void;
+}
+
+// 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 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
+  }
+
+  // TODO: Do we need this?
+  async onPlayingProp(playingInfo: PlayingInfo): Promise<void> {
+    if (playingInfo.playing !== this.playing) {
+      playingInfo.playing ? this.play(playingInfo) : this.pause();
+    }
+  }
+
+  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 === false) {
+      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

@@ -0,0 +1,38 @@
+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/heavy-code-imports/3d.ts

@@ -0,0 +1,18 @@
+import { from } from "../../vendor/p-lazy/p-lazy";
+
+// TODO can we remove the cached proxy?
+
+// In theory we can, but we've run into situations where imports are not properly cached.
+let cachedConstructorProxy: Promise<
+  typeof import("./dynamic-entries/3d")
+> | null = null;
+
+export async function proxy3D(): Promise<
+  typeof import("./dynamic-entries/3d")
+> {
+  return (cachedConstructorProxy ??= import("./dynamic-entries/3d"));
+}
+
+export const THREEJS: Promise<typeof import("three")> = from(
+  async () => (await proxy3D()).T3I,
+);

package/src/cubing/twisty/heavy-code-imports/dynamic-entries/3d.ts

@@ -0,0 +1,41 @@
+import { cube3x3x3, PuzzleLoader } from "../../../puzzles";
+import type { AlgCursor } from "../../old/animation/cursor/AlgCursor";
+import type { HintFaceletStyle } from "../../old/dom/TwistyPlayerConfig";
+import { Cube3D, Cube3DOptions } from "../../views/3D/puzzles/Cube3D";
+import { PG3D } from "../../views/3D/puzzles/PG3D";
+
+// Mangled to avoid autocompleting.
+// This must not be imported directly.
+export * as T3I from "three";
+export { Twisty3DCanvas } from "../../old/dom/viewers/Twisty3DCanvas";
+export { Cube3D } from "../../views/3D/puzzles/Cube3D";
+export { PG3D } from "../../views/3D/puzzles/PG3D";
+export { Twisty3DScene } from "../../views/3D/Twisty3DScene";
+
+export async function cube3DShim(options?: Cube3DOptions): Promise<Cube3D> {
+  const cursorShim = { addPositionListener: () => {} } as any as AlgCursor; // TODO
+  const renderCallbackShim = () => {};
+  return new Cube3D(
+    await cube3x3x3.def(),
+    cursorShim,
+    renderCallbackShim,
+    options,
+  );
+}
+
+// TODO: take loader?
+export async function pg3dShim(
+  puzzleLoader: PuzzleLoader,
+  hintFacelets: HintFaceletStyle,
+): Promise<PG3D> {
+  const cursorShim = { addPositionListener: () => {} } as any as AlgCursor; // TODO
+  const renderCallbackShim = () => {};
+  return new PG3D(
+    cursorShim,
+    renderCallbackShim,
+    await puzzleLoader.def(),
+    (await puzzleLoader.pg!()).get3d(),
+    true,
+    hintFacelets === "floating",
+  );
+}

package/src/cubing/twisty/index.ts

@@ -1,24 +1,31 @@
-export type { Twisty3DPuzzle } from "./3D/puzzles/Twisty3DPuzzle";
+export { TwistyPlayer } from "./views/TwistyPlayer";
+export { TwistyAlgViewer } from "./views/TwistyAlgViewer";
+export { TwistyAlgEditor } from "./views/TwistyAlgEditor/TwistyAlgEditor";
+export type { TwistyPlayerConfig } from "./views/TwistyPlayer";
+export { experimentalSetShareAllNewRenderers } from "./views/3D/Twisty3DVantage";
+
+export { NO_VALUE as EXPERIMENTAL_PROP_NO_VALUE } from "./model/props/TwistyProp";
+
+// Old
+export type { Twisty3DPuzzle } from "./views/3D/puzzles/Twisty3DPuzzle";
 export {
-  experimentalSetShareAllNewRenderers,
   experimentalShowRenderStats,
   Twisty3DCanvas,
-} from "./dom/viewers/Twisty3DCanvas";
-export { TwistyPlayer } from "./dom/TwistyPlayer";
+} from "./old/dom/viewers/Twisty3DCanvas";
+export { TwistyPlayerV1 } from "./old/dom/TwistyPlayer";
 export type {
   TwistyPlayerInitialConfig,
   ExperimentalStickering,
-} from "./dom/TwistyPlayerConfig";
-export { TimestampLocationType } from "./animation/Timeline";
-export type { TimelineActionEvent } from "./animation/Timeline";
-export { TwistyAlgViewer } from "./dom/TwistyAlgViewer";
-export { TwistyAlgEditor } from "./dom/TwistyAlgEditor";
+} from "./old/dom/TwistyPlayerConfig";
+export { TimestampLocationType } from "./old/animation/Timeline";
+export type { TimelineActionEvent } from "./old/animation/Timeline";
+export { TwistyAlgViewerV1 } from "./old/dom/TwistyAlgViewerV1";
 
-// Old
-export { Cube3D } from "./3D/puzzles/Cube3D";
-export { PG3D } from "./3D/puzzles/PG3D";
-export type { AlgIndexer } from "./animation/indexer/AlgIndexer";
-export { SimpleAlgIndexer } from "./animation/indexer/SimpleAlgIndexer";
-export { TreeAlgIndexer } from "./animation/indexer/tree/TreeAlgIndexer";
-export { KPuzzleWrapper as KSolvePuzzle } from "./3D/puzzles/KPuzzleWrapper";
-export type { BackViewLayout } from "./dom/viewers/TwistyViewerWrapper";
+// Older
+export { Cube3D } from "./views/3D/puzzles/Cube3D";
+export { PG3D } from "./views/3D/puzzles/PG3D";
+export type { AlgIndexer } from "./old/animation/indexer/AlgIndexer";
+export { SimpleAlgIndexer } from "./old/animation/indexer/SimpleAlgIndexer";
+export { TreeAlgIndexer } from "./old/animation/indexer/tree/TreeAlgIndexer";
+export { KPuzzleWrapper as KSolvePuzzle } from "./views/3D/puzzles/KPuzzleWrapper";
+export type { BackViewLayout } from "./old/dom/viewers/TwistyViewerWrapper";

package/src/cubing/twisty/model/PromiseFreshener.ts

@@ -0,0 +1,49 @@
+// TODO: Pick a much better name.
+export class PromiseFreshener<T> {
+  #latestAssignedIdx = 0;
+  #latestResolvedIdx = 0;
+
+  // TODO: reject instead? Drop?
+  async queue(
+    p: Promise<T>,
+  ): Promise<{ fresh: false } | { fresh: true; result: T }> {
+    const idx = ++this.#latestAssignedIdx;
+    const result = await p;
+    if (idx > this.#latestResolvedIdx) {
+      this.#latestResolvedIdx = idx;
+      return {
+        fresh: true,
+        result: result,
+      };
+    } else {
+      return { fresh: false };
+    }
+  }
+}
+
+// This will silenty drop a queued Promise (i.e. not resolve it) if a
+// newer queued one already resolved first. This is useful for classes that want
+// to know the "latest" state of something without jumping back to an older
+// value by accident.
+// TODO: Remove this because it's too easy to misuse?
+export class StaleDropper<T> {
+  #latestAssignedIdx = 0;
+  #latestResolvedIdx = 0;
+
+  queue(p: Promise<T>): Promise<T> {
+    // This is a very rare case where we *do* want to drop a Promise sometimes.
+    // eslint-disable-next-line no-async-promise-executor
+    return new Promise(async (resolve, reject) => {
+      try {
+        const idx = ++this.#latestAssignedIdx;
+        const result = await p;
+        if (idx > this.#latestResolvedIdx) {
+          this.#latestResolvedIdx = idx;
+          resolve(result);
+        }
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}