cubing 0.23.0 → 0.24.0-pre1

package/src/cubing/stream/index.ts

@@ -1,12 +0,0 @@
-export type {
-  ProxyEvent,
-  ProxyMoveEvent,
-  ProxyOrientationEvent,
-  ProxyResetEvent,
-} from "./proxy-event";
-export {
-  WebSocketProxyReceiver,
-  WebSocketProxySender,
-} from "./websocket-proxy";
-
-export { TwizzleStreamServer } from "./twizzle/TwizzleStream";

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

@@ -1,93 +0,0 @@
-import { experimentalIs, Move } from "../../alg";
-import { KPuzzle } from "../../kpuzzle";
-import { experimentalCube3x3x3KPuzzle as cube3x3x3KPuzzle } from "../../kpuzzle";
-
-export interface PuzzleStreamMoveEventDetail {
-  move: Move;
-}
-
-// TODO: CustomEvent<PuzzleStreamMoveEventDetail>
-export interface PuzzleStreamMoveEvent {
-  type: "move";
-  detail: PuzzleStreamMoveEventDetail;
-}
-
-export type PuzzleStreamMoveEventRegisterCompatible =
-  CustomEvent<PuzzleStreamMoveEventDetail>;
-
-function ensurePuzzleStreamMoveEvent(
-  event: CustomEvent,
-): PuzzleStreamMoveEvent {
-  // console.log(event);
-  if (event?.type !== "move") {
-    throw new Error("Received non-move.");
-  }
-  if (!experimentalIs(event?.detail?.move, Move)) {
-    throw new Error("Event detail move was not a `Move`.");
-  }
-  return event as PuzzleStreamMoveEvent; // TODO
-}
-
-const faces = "ULFRBD";
-// TODO: better typ
-const rotationMap: Record<string, [Move, string]> = {
-  U: [new Move("y"), "D"],
-  L: [new Move("x'"), "R"],
-  F: [new Move("z"), "B"],
-  R: [new Move("x"), "L"],
-  B: [new Move("z"), "F"],
-  D: [new Move("y'"), "U"],
-};
-
-class OrientationTracker {
-  kpuzzle = new KPuzzle(cube3x3x3KPuzzle); // TODO: can we do centers only (less data) with little code?
-
-  processMove(move: Move): Move[] {
-    // TODO: validation
-    if ("xyz".includes(move.family)) {
-      this.kpuzzle.applyMove(move);
-      return [move];
-    } else if (move.family.slice(-1) === "w") {
-      const [rotation, family] = rotationMap[move.family.slice(-1)];
-      return this.processMove(rotation).concat(
-        this.processMove(move.modified({ family })),
-      );
-    } else if (move.family === move.family.toLowerCase()) {
-      const [rotation, family] = rotationMap[move.family.toUpperCase()];
-      return this.processMove(rotation).concat(
-        this.processMove(move.modified({ family })),
-      );
-    } else {
-      const faceIdx = faces.indexOf(move.family);
-      const family =
-        faces[this.kpuzzle.state["CENTERS"].permutation.indexOf(faceIdx)];
-      return [move.modified({ family })];
-    }
-  }
-}
-
-export class ReorientedStream extends EventTarget {
-  orientationTracker = new OrientationTracker();
-
-  constructor(target: EventTarget) {
-    super();
-    target.addEventListener("move", (e: CustomEvent) =>
-      this.onMove(ensurePuzzleStreamMoveEvent(e)),
-    );
-  }
-
-  dispatchMove(detail: PuzzleStreamMoveEventDetail): void {
-    this.dispatchEvent(
-      new CustomEvent("move", {
-        detail,
-      }),
-    );
-  }
-
-  onMove(event: PuzzleStreamMoveEvent): void {
-    const moves = this.orientationTracker.processMove(event.detail.move);
-    for (const move of moves) {
-      this.dispatchMove({ move });
-    }
-  }
-}

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

@@ -1,16 +0,0 @@
-import type { MoveEvent, OrientationEvent } from "../bluetooth";
-export interface ProxyMoveEvent {
-  event: "move";
-  data: MoveEvent;
-}
-export interface ProxyOrientationEvent {
-  event: "orientation";
-  data: OrientationEvent;
-}
-export interface ProxyResetEvent {
-  event: "reset";
-}
-export type ProxyEvent =
-  | ProxyMoveEvent
-  | ProxyOrientationEvent
-  | ProxyResetEvent;

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

@@ -1,53 +0,0 @@
-import { Move, QuantumMove } from "../../alg";
-import type { StreamMessageEvent } from "./stream-types";
-
-class TwizzleStream extends EventTarget {
-  socket: WebSocket;
-  constructor(url: string) {
-    super();
-    this.socket = new WebSocket(url);
-    this.socket.onmessage = this.onMessage.bind(this); // TODO: Can we "add a listener instead"?
-  }
-
-  onMessage(msg: MessageEvent): void {
-    try {
-      const json: StreamMessageEvent = JSON.parse(msg.data);
-      if (json.event === "move") {
-        const move = json.data.latestMove;
-        if (move.type !== "blockMove") {
-          throw new Error("Invalid move!");
-        }
-        this.dispatchEvent(
-          new CustomEvent("move", {
-            detail: {
-              move: new Move(new QuantumMove(move.family), move.amount),
-            },
-          }),
-        );
-      }
-    } catch (e) {
-      console.error("Could not handle message:", e);
-    }
-  }
-}
-
-type StreamsField = {
-  streamID: string;
-  senders: { name: string; twizzleUserID: string; wcaID: string | null }[];
-}[];
-
-export class TwizzleStreamServer {
-  async streams(): Promise<StreamsField> {
-    return (
-      (await (await fetch("https://api.twizzle.net/v0/streams")).json()) as {
-        streams: StreamsField;
-      }
-    ).streams;
-  }
-
-  connect(streamID: string): TwizzleStream {
-    return new TwizzleStream(
-      `wss://api.twizzle.net/v0/streams/${streamID}/socket`,
-    );
-  }
-}

package/src/cubing/stream/twizzle/stream-types.ts

@@ -1,45 +0,0 @@
-// From api.twizzle.net
-
-// TOOD: Reuse https://github.com/cubing/cubing.js/blob/ec71ca736f29bae8ed6104f887a5cbe5fc962e8c/src/cubing/bluetooth/bluetooth-puzzle.ts#L12-L18
-export interface MoveEvent {
-  // deno-lint-ignore no-explicit-any
-  latestMove: any;
-  timeStamp: number;
-  // deno-lint-ignore no-explicit-any
-  state: any; // string
-}
-
-export interface BinaryMoveEvent {
-  // deno-lint-ignore no-explicit-any
-  latestMove: any;
-  timeStamp: number;
-  binaryState: string; // string
-}
-
-// TODO: Reuse https://github.com/cubing/cubing.js/blob/ec71ca736f29bae8ed6104f887a5cbe5fc962e8c/src/cubing/bluetooth/bluetooth-puzzle.ts#L21:L30
-export interface OrientationEvent {
-  quaternion: {
-    x: number;
-    y: number;
-    z: number;
-    w: number;
-  };
-  timeStamp: number;
-  // debug?: Record<string, unknown>;
-}
-
-// TODO: Reuse https://github.com/cubing/cubing.js/blob/ec71ca736f29bae8ed6104f887a5cbe5fc962e8c/src/cubing/bluetooth/bluetooth-puzzle.ts#L21:L30
-export interface ResetEvent {
-  trackingOrientation: boolean;
-}
-
-export type StreamMessageEvent =
-  | { event: "move"; data: MoveEvent }
-  | {
-      event: "orientation";
-      data: OrientationEvent;
-    }
-  | {
-      event: "reset";
-      data: ResetEvent;
-    };

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

@@ -1,73 +0,0 @@
-import type { MoveEvent, OrientationEvent } from "../bluetooth";
-import type { ProxyEvent } from "./proxy-event";
-
-export class WebSocketProxySender {
-  protected websocket: WebSocket;
-  constructor(url: string) {
-    this.websocket = new WebSocket(url);
-    this.websocket.onopen = this.onopen.bind(this);
-    this.websocket.onerror = this.onerror.bind(this);
-    this.websocket.onmessage = this.onmessage.bind(this);
-  }
-
-  public sendMoveEvent(e: MoveEvent): void {
-    this.sendProxyEvent({
-      event: "move",
-      data: e,
-    });
-  }
-
-  public sendOrientationEvent(e: OrientationEvent): void {
-    this.sendProxyEvent({
-      event: "orientation",
-      data: e,
-    });
-  }
-
-  public sendResetEvent(): void {
-    this.sendProxyEvent({ event: "reset" });
-  }
-
-  protected sendProxyEvent(proxyEvent: ProxyEvent): void {
-    this.websocket.send(JSON.stringify(proxyEvent));
-  }
-
-  protected onopen(): void {
-    console.log("Sending socket is open!");
-  }
-
-  protected onerror(error: Error): void {
-    console.error("WebSocket sender error:", error);
-  }
-
-  protected onmessage(_e: MessageEvent): void {}
-}
-
-export abstract class WebSocketProxyReceiver {
-  protected websocket: WebSocket;
-  constructor(url: string, socketOrigin?: string) {
-    if (!socketOrigin) {
-      console.log("No socket origin specified. Will not attempt to connect.");
-      return;
-    }
-    this.websocket = new WebSocket(url);
-    console.log(this.websocket);
-    this.websocket.onopen = this.onopen.bind(this);
-    this.websocket.onerror = this.onerror.bind(this);
-    this.websocket.onmessage = this.onmessage.bind(this);
-  }
-
-  protected onopen(): void {
-    console.log("Receiving socket is open!");
-  }
-
-  protected onerror(error: Error): void {
-    console.error("WebSocket receiver error:", error);
-  }
-
-  protected onmessage(e: MessageEvent): void {
-    this.onProxyEvent(JSON.parse(e.data));
-  }
-
-  abstract onProxyEvent(e: ProxyEvent): void;
-}

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

@@ -1,50 +0,0 @@
-import type { Move } from "../../alg";
-import type { Transformation as KPuzzleState } from "../../kpuzzle";
-
-export type MillisecondTimestamp = number;
-
-// TODO: unify duration/timstamp types
-export type Duration = MillisecondTimestamp; // Duration in milliseconds
-// TODO: Extend `number`, introduce MoveSequenceTimestamp vs. EpochTimestamp,
-// force Duration to be a difference.
-export type Timestamp = MillisecondTimestamp; // Duration since a particular epoch.
-
-export type Fraction = number; // Value from 0 to 1.
-
-// 1, 0, -1 are used as scalars for `directionScalar` below.
-export enum Direction {
-  Forwards = 1,
-  Paused = 0,
-  Backwards = -1,
-}
-
-export function directionScalar(direction: Direction): MillisecondTimestamp {
-  return direction;
-}
-
-export interface MoveInProgress {
-  move: Move;
-  direction: Direction;
-  fraction: number;
-}
-
-export type PuzzlePosition = {
-  state: KPuzzleState;
-  movesInProgress: MoveInProgress[];
-};
-
-export enum BoundaryType {
-  Move = "move",
-  EntireTimeline = "entire-timeline",
-}
-
-export interface TimeRange {
-  start: MillisecondTimestamp;
-  end: MillisecondTimestamp;
-}
-
-// export type DurationForAmount = (amount: number) => Duration;
-
-export interface PositionListener {
-  onPositionChange(position: PuzzlePosition): void;
-}

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

@@ -1,28 +0,0 @@
-// Debounces `requestAnimationFrame()`.
-export class RenderScheduler {
-  private animFrameID: number | null = null;
-  private animFrame = this.animFrameWrapper.bind(this);
-  constructor(private callback: (timestamp: DOMHighResTimeStamp) => void) {}
-  requestAnimFrame(): void {
-    if (!this.animFrameID) {
-      this.animFrameID = requestAnimationFrame(this.animFrame);
-    }
-  }
-
-  cancelAnimFrame(): void {
-    if (this.animFrameID) {
-      cancelAnimationFrame(this.animFrameID);
-      this.animFrameID = 0;
-    }
-  }
-
-  private animFrameWrapper(timestamp: DOMHighResTimeStamp): void {
-    this.animFrameID = 0;
-    this.callback(timestamp);
-  }
-}
-
-// An interface for classes to use to expose their scheduling.
-export interface Schedulable {
-  scheduleRender(): void;
-}

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,
-    );
-  }
-}