cubing 0.22.0 → 0.24.0-pre2

package/src/cubing/twisty/views/control-panel/TwistyButtonsV2.ts

@@ -1,156 +0,0 @@
-import { BoundaryType, Direction } from "../../controllers/AnimationTypes";
-import { buttonCSS, buttonGridCSS } from "./TwistyButtonsV2.css";
-import { ClassListManager } from "../ClassListManager";
-import { ManagedCustomElement } from "../ManagedCustomElement";
-import { customElementsShim } from "../node-custom-element-shims";
-import {
-  ButtonAppearances,
-  ButtonIcon,
-  buttonIcons,
-} from "../../model/props/viewer/ButtonAppearanceProp";
-import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
-import type { TwistyPlayerController } from "../../controllers/TwistyPlayerController";
-import {
-  documentExitFullscreen,
-  documentFullscreenElement,
-  requestFullscreen,
-} from "./webkit-fullscreen";
-
-const buttonCommands = {
-  "fullscreen": true,
-  "jump-to-start": true,
-  "play-step-backwards": true,
-  "play-pause": true,
-  "play-step": true,
-  "jump-to-end": true,
-  "twizzle-link": true,
-};
-
-export type ButtonCommand = keyof typeof buttonCommands;
-
-export class TwistyButtonsV2 extends ManagedCustomElement {
-  buttons: Record<ButtonCommand, TwistyButtonV2> | null = null;
-
-  // TODO: Privacy
-  constructor(
-    public model?: TwistyPlayerModel,
-    public controller?: TwistyPlayerController,
-    private fullscreenElement?: HTMLElement,
-  ) {
-    super();
-  }
-
-  connectedCallback(): void {
-    this.addCSS(buttonGridCSS);
-    const buttons: Partial<Record<ButtonCommand, TwistyButtonV2>> = {};
-    for (const command in buttonCommands) {
-      const button = new TwistyButtonV2();
-      buttons[command as ButtonCommand] = button;
-      // Why does this still fire with the `disabled` attribute?
-      button.addEventListener("click", () =>
-        this.#onCommand(command as ButtonCommand),
-      );
-      this.addElement(button);
-    }
-    this.buttons = buttons as Record<ButtonCommand, TwistyButtonV2>;
-
-    this.model?.buttonAppearanceProp.addFreshListener(this.update.bind(this));
-  }
-
-  #onCommand(command: ButtonCommand) {
-    switch (command) {
-      case "fullscreen":
-        this.onFullscreenButton();
-        break;
-      case "jump-to-start":
-        this.controller?.jumpToStart({ flash: true });
-        break;
-      case "play-step-backwards":
-        this.controller?.animationController.play({
-          direction: Direction.Backwards,
-          untilBoundary: BoundaryType.Move,
-        });
-        break;
-      case "play-pause":
-        this.controller?.togglePlay();
-        break;
-      case "play-step":
-        this.controller?.animationController.play({
-          direction: Direction.Forwards,
-          untilBoundary: BoundaryType.Move,
-        });
-        break;
-      case "jump-to-end":
-        this.controller?.jumpToEnd({ flash: true });
-        break;
-      case "twizzle-link":
-        this.controller?.visitTwizzleLink();
-        break;
-      default:
-        throw new Error("Missing command");
-    }
-  }
-
-  // TODO: Should we have a prop, or a way to query if we're fullscreen?
-  // https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
-  async onFullscreenButton(): Promise<void> {
-    if (!this.fullscreenElement) {
-      throw new Error("Attempted to go fullscreen without an element.");
-    }
-
-    if (documentFullscreenElement() === this.fullscreenElement) {
-      documentExitFullscreen();
-    } else {
-      // TODO: Propagate button info to `ButtonAppearanceProp`.
-      this.buttons?.fullscreen.setIcon("exit-fullscreen");
-
-      requestFullscreen(this.fullscreenElement);
-
-      const onFullscreen = (): void => {
-        if (documentFullscreenElement() !== this.fullscreenElement) {
-          this.buttons?.fullscreen.setIcon("enter-fullscreen");
-          window.removeEventListener("fullscreenchange", onFullscreen);
-        }
-      };
-      window.addEventListener("fullscreenchange", onFullscreen);
-    }
-  }
-
-  async update(buttonAppearances: ButtonAppearances): Promise<void> {
-    // TODO: Check that we have every command?
-    for (const command in buttonCommands) {
-      // TODO: Why doesn't `command` have the type `ButtonCommand`?
-      const button = this.buttons![command as ButtonCommand];
-      // TODO: track individual changes?
-      const info = buttonAppearances[command as ButtonCommand];
-      button.button.disabled = !info.enabled;
-      button.button.title = info.title;
-      button.setIcon(info.icon);
-      button.hidden = !!info.hidden;
-      // button.textContent = info.icon;
-    }
-  }
-}
-
-customElementsShim.define("twisty-buttons-v2", TwistyButtonsV2);
-
-class TwistyButtonV2 extends ManagedCustomElement {
-  button: HTMLButtonElement = document.createElement("button"); // TODO: async?
-
-  connectedCallback() {
-    this.addCSS(buttonCSS);
-    this.addElement(this.button);
-  }
-
-  #iconManager: ClassListManager<ButtonIcon> = new ClassListManager(
-    this,
-    "svg-",
-    buttonIcons,
-  );
-
-  setIcon(iconName: ButtonIcon): void {
-    this.#iconManager.setValue(iconName);
-  }
-}
-
-customElementsShim.define("twisty-button-v2", TwistyButtonV2);

package/src/cubing/twisty/views/control-panel/TwistyScrubber.css.ts

@@ -1,48 +0,0 @@
-import { CSSSource } from "../ManagedCustomElement";
-
-export const twistyScrubberCSS = new CSSSource(`
-:host {
-  width: 384px;
-  height: 16px;
-  display: grid;
-}
-
-.wrapper {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  overflow: hidden;
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-}
-
-input {
-  margin: 0; width: 100%;
-}
-
-input {
-  background: none;
-}
-
-::-moz-range-track {
-  background: rgba(0, 0, 0, 0.25);
-  height: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-::-webkit-slider-runnable-track {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-::-moz-range-progress {
-  background: #3273F6;
-  height: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-::-ms-fill-lower {
-  background: #3273F6;
-  height: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-`);

package/src/cubing/twisty/views/control-panel/TwistyScrubberV2.ts

@@ -1,145 +0,0 @@
-import { twistyScrubberCSS } from "./TwistyScrubber.css";
-import { ManagedCustomElement } from "../ManagedCustomElement";
-import { customElementsShim } from "../node-custom-element-shims";
-import type { DetailedTimelineInfo } from "../../model/props/timeline/DetailedTimelineInfoProp";
-import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
-import { globalSafeDocument } from "../document";
-
-const SLOW_DOWN_SCRUBBING = false;
-
-let isMouseDown = false;
-
-globalSafeDocument?.addEventListener(
-  "mousedown",
-  function (event) {
-    if (event.which) isMouseDown = true;
-  },
-  true,
-);
-
-globalSafeDocument?.addEventListener(
-  "mouseup",
-  function (event) {
-    if (event.which) isMouseDown = false;
-  },
-  true,
-);
-
-// var x = 0;
-let y = 0;
-let clickNum = 0;
-
-globalSafeDocument?.addEventListener(
-  "mousedown",
-  () => {
-    clickNum++;
-  },
-  false,
-);
-
-globalSafeDocument?.addEventListener("mousemove", onMouseUpdate, false);
-globalSafeDocument?.addEventListener("mouseenter", onMouseUpdate, false);
-
-function onMouseUpdate(e: MouseEvent) {
-  // x = e.pageX;
-  y = e.pageY;
-  // console.log(x, y);
-}
-
-const lastVal = 0;
-let lastPreval = 0;
-let scaling: boolean = false;
-let currentClickNum = 0;
-
-// Values are integers.
-export class TwistyScrubberV2 extends ManagedCustomElement {
-  constructor(public model?: TwistyPlayerModel) {
-    super();
-  }
-
-  async onDetailedTimelineInfo(
-    detailedTimelineInfo: DetailedTimelineInfo,
-  ): Promise<void> {
-    // TODO: is this efficient enough?
-    const inputElem = await this.inputElem();
-    inputElem.min = detailedTimelineInfo.timeRange.start.toString();
-    inputElem.max = detailedTimelineInfo.timeRange.end.toString();
-    inputElem.value = detailedTimelineInfo.timestamp.toString();
-  }
-
-  async connectedCallback(): Promise<void> {
-    this.addCSS(twistyScrubberCSS);
-    this.addElement(await this.inputElem());
-  }
-
-  #inputElem: Promise<HTMLInputElement> | null = null;
-  async inputElem(): Promise<HTMLInputElement> {
-    // console.log("inputElem", this.#inputElem);
-    return (this.#inputElem ??= (async () => {
-      const elem = document.createElement("input");
-      elem.type = "range";
-
-      // console.log("1");
-      this.model?.detailedTimelineInfoProp.addFreshListener(
-        this.onDetailedTimelineInfo.bind(this),
-      );
-      // console.log("3");
-      elem.addEventListener("input", this.onInput.bind(this));
-
-      return elem;
-    })());
-  }
-
-  async onInput(e: Event): Promise<void> {
-    if (scaling) {
-      return; // TODO
-    }
-    const inputElem = await this.inputElem();
-    await this.slowDown(e, inputElem); // TODO
-
-    const value = parseInt(inputElem.value);
-    // console.log("on input", value);
-    this.model?.playingInfoProp.set({ playing: false });
-    this.model?.timestampRequestProp.set(value);
-  }
-
-  async slowDown(e: Event, inputElem: HTMLInputElement): Promise<void> {
-    if (!SLOW_DOWN_SCRUBBING) {
-      return; // TODO
-    }
-
-    if (isMouseDown) {
-      const rect = inputElem.getBoundingClientRect();
-      const sliderY = rect.top + rect.height / 2;
-      console.log(sliderY, e, y, isMouseDown);
-
-      const yDist = Math.abs(sliderY - y);
-      let scale = 1;
-      if (yDist > 64) {
-        scale = Math.max(Math.pow(2, -(yDist - 64) / 64), 1 / 32);
-      }
-      const preVal = parseInt(inputElem.value);
-      console.log("cl", currentClickNum, clickNum, preVal);
-      if (currentClickNum === clickNum) {
-        const delta = (preVal - lastPreval) * scale;
-        console.log("delta", delta, yDist);
-        scaling = true;
-        let newVal = preVal;
-        newVal =
-          lastVal +
-          delta * scale +
-          (preVal - lastVal) *
-            Math.min(1, Math.pow(1 / 2, (yDist * yDist) / 64));
-        inputElem.value = newVal.toString();
-        console.log(scale);
-        scaling = false;
-        this.contentWrapper.style.opacity = scale.toString();
-      } else {
-        currentClickNum = clickNum;
-      }
-      lastPreval = preVal;
-    }
-  }
-}
-
-customElementsShim.define("twisty-scrubber-v2", TwistyScrubberV2);

package/src/cubing/twisty/views/control-panel/webkit-fullscreen.ts

@@ -1,44 +0,0 @@
-// Ponyfills for prefixing in Safari.
-
-import { globalSafeDocument } from "../document";
-
-declare global {
-  interface Document {
-    webkitFullscreenEnabled?: boolean;
-    webkitExitFullscreen?: () => Promise<void>;
-    webkitFullscreenElement?: Element | null;
-  }
-
-  interface Element {
-    webkitRequestFullscreen: () => Promise<void>;
-  }
-}
-
-// TODO: Can `webkitFullscreenEnabled` change after it's cached at page load?
-export const fullscreenEnabled: boolean =
-  globalSafeDocument?.fullscreenEnabled ||
-  !!globalSafeDocument?.webkitFullscreenEnabled;
-
-export function documentExitFullscreen(): Promise<void> {
-  if (document.exitFullscreen) {
-    return document.exitFullscreen();
-  } else {
-    return document.webkitExitFullscreen!(); // YOLO
-  }
-}
-
-export function documentFullscreenElement(): Element | null {
-  if (document.fullscreenElement) {
-    return document.fullscreenElement;
-  } else {
-    return document.webkitFullscreenElement ?? null;
-  }
-}
-
-export function requestFullscreen(element: Element): Promise<void> {
-  if (element.requestFullscreen) {
-    return element.requestFullscreen();
-  } else {
-    return element.webkitRequestFullscreen();
-  }
-}

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

@@ -1,4 +0,0 @@
-// Use like this:
-// const enabled = globalSafeDocument?.fullscreenEnabled;
-export const globalSafeDocument: Document | null =
-  typeof document === "undefined" ? null : document;

package/src/cubing/twisty/views/node-custom-element-shims.ts

@@ -1,30 +0,0 @@
-// Workarounds for `node`.
-// TODO: figure out how to remove this.
-
-// This stub does not need to be callable, just constructable to satisfy the `node` loader.
-class HTMLElementStub {}
-
-let HTMLElementShim: typeof HTMLElement;
-if (typeof HTMLElement !== "undefined") {
-  HTMLElementShim = HTMLElement;
-} else {
-  HTMLElementShim = HTMLElementStub as any;
-}
-
-export { HTMLElementShim };
-
-class CustomElementsStub {
-  define(): void {
-    // nothing
-  }
-}
-
-let customElementsShim: typeof customElements;
-
-if (typeof customElements !== "undefined") {
-  customElementsShim = customElements;
-} else {
-  customElementsShim = new CustomElementsStub() as any;
-}
-
-export { customElementsShim };

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

@@ -1,90 +0,0 @@
-import { PerspectiveCamera, WebGLRenderer } from "three";
-import { THREEJS } from "../heavy-code-imports/3d";
-import type { TwistyPlayerModel } from "../model/TwistyPlayerModel";
-import { Twisty3DPuzzleWrapper } from "./3D/Twisty3DPuzzleWrapper";
-import { setCameraFromOrbitCoordinates } from "./3D/Twisty3DVantage";
-
-export interface TwistyPlayerScreenshot {
-  dataURL: string;
-  download: (filename?: string) => Promise<void>;
-}
-
-// TODO: cache
-let cachedCamera: PerspectiveCamera | null = null;
-export async function screenshot(
-  model: TwistyPlayerModel,
-  options?: { width: number; height: number },
-): Promise<TwistyPlayerScreenshot> {
-  // TODO: improve async caching
-
-  const width = options?.width ?? 2048;
-  const height = options?.height ?? 2048;
-  const aspectRatio = width / height;
-  const camera = (cachedCamera ??= await (async () => {
-    return new (await THREEJS).PerspectiveCamera(20, aspectRatio, 0.1, 20);
-  })());
-
-  const scene = new (await THREEJS).Scene();
-
-  const twisty3DWrapper = new Twisty3DPuzzleWrapper(
-    model,
-    { scheduleRender: () => {} },
-    await model.puzzleLoaderProp.get(),
-    await model.visualizationStrategyProp.get(),
-  );
-
-  // TODO: Pass the stickering to the constructor so we don't have to wait..
-  await model.stickeringProp.get();
-  await new Promise((resolve) => setTimeout(resolve, 1000));
-
-  // TODO: Find a more robust way to do this.
-  await model.legacyPositionProp.get(); // Force the 3D puzzle listeners for the state to fire.
-
-  scene.add(await twisty3DWrapper.twisty3DPuzzle());
-
-  const orbitCoordinates = await model.orbitCoordinatesProp.get();
-  await setCameraFromOrbitCoordinates(camera, orbitCoordinates);
-
-  const renderer = new WebGLRenderer({
-    antialias: true,
-    alpha: true,
-  });
-  renderer.setSize(width, height);
-
-  renderer.render(scene, camera);
-  const dataURL = renderer.domElement.toDataURL();
-
-  const defaultFilename = await getDefaultFilename(model);
-
-  return {
-    dataURL,
-    download: async (filename?: string) => {
-      downloadURL(dataURL, filename ?? defaultFilename);
-    },
-  };
-}
-
-export async function getDefaultFilename(
-  model: TwistyPlayerModel,
-): Promise<string> {
-  const [puzzleID, algWithIssues] = await Promise.all([
-    model.puzzleIDProp.get(),
-    model.algProp.get(),
-  ]);
-  return `[${puzzleID}]${
-    algWithIssues.alg.experimentalNumUnits() === 0
-      ? ""
-      : " " + algWithIssues.alg.toString()
-  }`;
-}
-
-export function downloadURL(
-  url: string,
-  name: string,
-  extension: string = "png",
-): void {
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = `${name}.${extension}`;
-  a.click();
-}

package/src/cubing/twisty/views/stream/TwistyStreamSource.css.ts

@@ -1,17 +0,0 @@
-import { CSSSource } from "../ManagedCustomElement";
-
-export const twistyStreamSourceCSS = new CSSSource(`
-:host {
-  width: 384px;
-  height: 256px;
-  display: grid;
-
-  font-family: "Ubuntu", sans-serif;
-}
-
-.wrapper {
-  display: grid;
-  place-content: center;
-  gap: 0.5em;
-}
-`);

package/src/cubing/twisty/views/stream/TwistyStreamSource.ts

@@ -1,155 +0,0 @@
-import type { KeyboardPuzzle } from "../../../bluetooth/keyboard";
-import type {
-  BluetoothPuzzle,
-  MoveEvent,
-} from "../../../bluetooth/smart-puzzle/bluetooth-puzzle";
-import type { TwizzleStreamServer } from "../../../stream";
-import type { PuzzleStreamMoveEventRegisterCompatible } from "../../../stream/process/ReorientedStream";
-import { ManagedCustomElement } from "../ManagedCustomElement";
-import { customElementsShim } from "../node-custom-element-shims";
-import { twistyStreamSourceCSS } from "./TwistyStreamSource.css";
-
-interface StreamSource extends EventTarget {
-  disconnect?: () => void;
-}
-
-class BluetoothStreamSource extends EventTarget {
-  private constructor(private puzzle: BluetoothPuzzle) {
-    super();
-    puzzle.addMoveListener((e: MoveEvent) => {
-      this.dispatchEvent(
-        new CustomEvent("move", {
-          detail: {
-            move: e.latestMove,
-          },
-        }),
-      );
-    });
-  }
-
-  static async connect(): Promise<BluetoothStreamSource> {
-    const bluetooth = await import("../../../bluetooth");
-    const puzzle = await bluetooth.connectSmartPuzzle();
-    return new BluetoothStreamSource(puzzle);
-  }
-
-  disconnect(): void {
-    this.puzzle.disconnect();
-  }
-}
-
-class KeyboardStreamSource extends EventTarget {
-  private constructor(private puzzle: KeyboardPuzzle) {
-    super();
-    puzzle.addMoveListener((e: MoveEvent) => {
-      this.dispatchEvent(
-        new CustomEvent("move", {
-          detail: {
-            move: e.latestMove,
-          },
-        }),
-      );
-    });
-  }
-
-  static async connect(): Promise<KeyboardStreamSource> {
-    const bluetooth = await import("../../../bluetooth");
-    const puzzle = await bluetooth.debugKeyboardConnect();
-    return new KeyboardStreamSource(puzzle);
-  }
-
-  disconnect(): void {
-    this.puzzle.disconnect();
-  }
-}
-
-export class TwistyStreamSource extends ManagedCustomElement {
-  constructor() {
-    super();
-    this.addCSS(twistyStreamSourceCSS);
-
-    this.addElement(document.createElement("span")).textContent =
-      "Connect a stream source:";
-
-    const bluetoothButton = this.addSource(
-      "📡 Bluetooth",
-      BluetoothStreamSource,
-    );
-    this.addSource("⌨️ Keyboard", KeyboardStreamSource);
-    this.addStreamSource();
-
-    if (!navigator?.bluetooth) {
-      bluetoothButton.disabled = true;
-    }
-  }
-
-  addSource(
-    label: string,
-    sourceClass: { connect: () => Promise<StreamSource> },
-  ): HTMLButtonElement {
-    const button = this.addElement(document.createElement("button"));
-    button.textContent = label;
-    button.addEventListener("click", async () => {
-      const source = await sourceClass.connect();
-      button.disabled = true;
-      button.textContent += " ✅";
-      source.addEventListener(
-        "move",
-        (e: PuzzleStreamMoveEventRegisterCompatible) => {
-          this.dispatchEvent(new CustomEvent("move", e));
-        },
-      );
-      // TODO: Hook up UI for disconnection.
-    });
-    return button;
-  }
-
-  addStreamSource(): void {
-    const SENTINEL_VALUE = "SENTINEL";
-    const button = this.addElement(document.createElement("button"));
-    button.textContent = "🔴 Get Twizzle streams";
-
-    const select = this.addElement(document.createElement("select"));
-    select.appendChild(document.createElement("option")).textContent =
-      "Streams";
-    select.disabled = true;
-
-    let streamServer: TwizzleStreamServer | null = null;
-    button.addEventListener("click", async () => {
-      const TwizzleStreamServer = (await import("../../../stream"))
-        .TwizzleStreamServer;
-      streamServer ||= new TwizzleStreamServer();
-      const streams = await streamServer.streams();
-      select.textContent = "";
-      select.disabled = false;
-      const info = select.appendChild(document.createElement("option"));
-      info.textContent = `Select a stream (${streams.length} available)`;
-      info.value = SENTINEL_VALUE;
-      for (const stream of streams) {
-        const firstSender = stream.senders[0];
-        const option = select.appendChild(document.createElement("option"));
-        option.value = stream.streamID;
-        option.textContent = `${firstSender.name} (${stream.streamID.slice(
-          -2,
-        )})`;
-      }
-    });
-
-    select.addEventListener("change", () => {
-      const streamID = select.value;
-      if (streamID === SENTINEL_VALUE) {
-        return;
-      }
-      const stream = streamServer!.connect(streamID);
-      stream.addEventListener(
-        "move",
-        (moveEvent: PuzzleStreamMoveEventRegisterCompatible) => {
-          console.log(moveEvent);
-          this.dispatchEvent(new CustomEvent("move", moveEvent));
-        },
-      );
-    });
-  }
-}
-
-customElementsShim.define("twisty-stream-source", TwistyStreamSource);