cubing 0.20.2 → 0.21.0-pre12

package/src/cubing/twisty/views/2D/Twisty2DPuzzleWrapper.ts

@@ -0,0 +1,52 @@
+import type { PuzzleLoader } from "../../../puzzles";
+import type { ExperimentalStickering } from "../../../twisty";
+import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
+import { FreshListenerManager } from "../../model/props/TwistyProp";
+import type { Schedulable } from "../../old/animation/RenderScheduler";
+import { Twisty2DPuzzle } from "./Twisty2DPuzzle";
+
+export class Twisty2DPuzzleWrapper implements Schedulable {
+  constructor(
+    private model: TwistyPlayerModel,
+    public schedulable: Schedulable,
+    private puzzleLoader: PuzzleLoader,
+    private effectiveVisualization: "2D" | "experimental-2D-LL",
+  ) {
+    this.twisty2DPuzzle(); // Start constructing.
+
+    this.#freshListenerManager.addListener(
+      this.model.stickeringProp,
+      async (stickering: ExperimentalStickering) => {
+        (await this.twisty2DPuzzle()).experimentalSetStickering(stickering);
+      },
+    );
+  }
+
+  #freshListenerManager = new FreshListenerManager();
+  disconnect(): void {
+    this.#freshListenerManager.disconnect();
+  }
+
+  // TODO: Hook this up nicely.
+  scheduleRender(): void {
+    // Nothing
+  }
+
+  #cachedTwisty2DPuzzle: Promise<Twisty2DPuzzle> | null = null;
+  // TODO: Stale dropper?
+  async twisty2DPuzzle(): Promise<Twisty2DPuzzle> {
+    return (this.#cachedTwisty2DPuzzle ??= (async () => {
+      const svgPromise =
+        this.effectiveVisualization === "experimental-2D-LL"
+          ? this.puzzleLoader.llSVG!()
+          : this.puzzleLoader.svg();
+      return new Twisty2DPuzzle(
+        this.model,
+        await this.puzzleLoader.def(),
+        await svgPromise,
+        {},
+        this.puzzleLoader,
+      );
+    })());
+  }
+}

package/src/cubing/twisty/views/2D/Twisty2DSceneWrapper.ts

@@ -0,0 +1,77 @@
+import type { Scene as ThreeScene } from "three";
+import type { PuzzleLoader } from "../../../puzzles";
+import { THREEJS } from "../../heavy-code-imports/3d";
+import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
+import { FreshListenerManager } from "../../model/props/TwistyProp";
+import type { Schedulable } from "../../old/animation/RenderScheduler";
+import { ManagedCustomElement } from "../../old/dom/element/ManagedCustomElement";
+import { customElementsShim } from "../../old/dom/element/node-custom-element-shims";
+import { twistyViewerWrapperCSS } from "../../old/dom/viewers/TwistyViewerWrapper.css";
+import { Twisty2DPuzzleWrapper } from "./Twisty2DPuzzleWrapper";
+
+export class Twisty2DSceneWrapper
+  extends ManagedCustomElement
+  implements Schedulable
+{
+  #freshListenerManager = new FreshListenerManager();
+  disconnect(): void {
+    this.#freshListenerManager.disconnect();
+  }
+
+  constructor(
+    public model?: TwistyPlayerModel,
+    private effectiveVisualization?: "2D" | "experimental-2D-LL",
+  ) {
+    super();
+  }
+
+  async connectedCallback(): Promise<void> {
+    this.addCSS(twistyViewerWrapperCSS);
+    if (this.model) {
+      this.#freshListenerManager.addListener(
+        this.model.puzzleLoaderProp,
+        this.onPuzzleLoader.bind(this),
+      );
+    }
+  }
+
+  #cachedScene: Promise<ThreeScene> | null;
+  async scene(): Promise<ThreeScene> {
+    return (this.#cachedScene ??= (async () => new (await THREEJS).Scene())());
+  }
+
+  scheduleRender(): void {
+    this.#currentTwisty2DPuzzleWrapper?.scheduleRender();
+  }
+
+  #currentTwisty2DPuzzleWrapper: Twisty2DPuzzleWrapper | null = null;
+  currentTwisty2DPuzzleWrapper(): Twisty2DPuzzleWrapper | null {
+    return this.#currentTwisty2DPuzzleWrapper;
+  }
+
+  // #oldTwisty3DPuzzleWrappers: Twisty3DPuzzleWrapper[] = []; // TODO: Animate these out.
+  async setCurrentTwisty2DPuzzleWrapper(
+    twisty2DPuzzleWrapper: Twisty2DPuzzleWrapper,
+  ): Promise<void> {
+    const old = this.#currentTwisty2DPuzzleWrapper;
+    this.#currentTwisty2DPuzzleWrapper = twisty2DPuzzleWrapper;
+    old?.disconnect(); // TODO: Disconnect properly.
+    const twisty2DPuzzlePromise = twisty2DPuzzleWrapper.twisty2DPuzzle();
+    this.contentWrapper.textContent = ""; // Clear existing ones.
+    this.addElement(await twisty2DPuzzlePromise);
+  }
+
+  async onPuzzleLoader(puzzleLoader: PuzzleLoader): Promise<void> {
+    this.#currentTwisty2DPuzzleWrapper?.disconnect();
+    const twisty2DPuzzleWrapper = new Twisty2DPuzzleWrapper(
+      this.model!,
+      this,
+      puzzleLoader,
+      this.effectiveVisualization!,
+    );
+
+    this.setCurrentTwisty2DPuzzleWrapper(twisty2DPuzzleWrapper);
+  }
+}
+
+customElementsShim.define("twisty-2d-scene-wrapper", Twisty2DSceneWrapper);

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

@@ -0,0 +1,53 @@
+// TODO: https://stackoverflow.com/a/40443642
+
+// let shareAllNewRenderers: boolean = false;
+
+// // WARNING: The current shared renderer implementation is not every efficient.
+// // Avoid using for players that are likely to have dimensions approaching 1 megapixel or higher.
+// // TODO: use a dedicated renderer while fullscreen?
+// export function experimentalSetShareAllNewRenderers(share: boolean): void {
+//   shareAllNewRenderers = share;
+// }
+
+// const sharedRenderer: WebGLRenderer | null = null;
+
+import { THREEJS } from "../../heavy-code-imports/3d";
+import type { Camera, Scene, WebGLRenderer } from "three";
+import { pixelRatio } from "../../old/dom/viewers/canvas";
+
+const renderers: Promise<WebGLRenderer>[] = [];
+
+// let haveSet = false;
+export async function renderPooled(
+  width: number,
+  height: number,
+  canvas: HTMLCanvasElement,
+  scene: Scene,
+  camera: Camera,
+): Promise<void> {
+  if (width === 0 || height === 0) {
+    return;
+  }
+  // At most one in the pool for now.
+  if (renderers.length === 0) {
+    renderers.push(newRenderer());
+  }
+  const renderer = await renderers[0];
+  // TODO: scissoring
+  renderer.setSize(width, height); // TODO: is it faster if we cache values and only call this when necessary?
+  renderer.render(scene, camera);
+
+  const context = canvas.getContext("2d")!;
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.drawImage(renderer.domElement, 0, 0);
+}
+
+export async function newRenderer(): Promise<WebGLRenderer> {
+  const rendererConstructor = (await THREEJS).WebGLRenderer;
+  const renderer = new rendererConstructor({
+    antialias: true,
+    alpha: true,
+  });
+  renderer.setPixelRatio(pixelRatio());
+  return renderer;
+}

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

@@ -0,0 +1,168 @@
+import type { Texture as ThreeTexture } from "three";
+import { experimentalCubeAppearance, PuzzleLoader } from "../../../puzzles";
+import type { ExperimentalStickering } from "../../../twisty";
+import { proxy3D } from "../../heavy-code-imports/3d";
+import type { Cube3D, PG3D } from "../../heavy-code-imports/dynamic-entries/3d";
+import type { HintFaceletStyleWithAuto } from "../../model/props/puzzle/display/HintFaceletProp";
+import type { VisualizationStrategy } from "../../model/props/viewer/VisualizationStrategyProp";
+import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
+import { FreshListenerManager } from "../../model/props/TwistyProp";
+import type { PuzzlePosition } from "../../old/animation/cursor/CursorTypes";
+import type { Schedulable } from "../../old/animation/RenderScheduler";
+import type { Twisty3DPuzzle } from "./puzzles/Twisty3DPuzzle";
+
+export class Twisty3DPuzzleWrapper implements Schedulable {
+  constructor(
+    private model: TwistyPlayerModel,
+    public schedulable: Schedulable,
+    private puzzleLoader: PuzzleLoader,
+    private visualizationStrategy: VisualizationStrategy,
+  ) {
+    this.twisty3DPuzzle(); // Start constructing.
+
+    // TODO: Hook up listeners before loading the heavy code in the async constructor, so we get any intermediate updates?
+    // Repro: Switch to 40x40x40 a fraction of a second before animation finishes. When it's loaded the itmeline is at the end, but the 40x40x40 is rendered with an earlier position.
+
+    this.#freshListenerManager.addListener(
+      this.model.puzzleLoaderProp,
+      (puzzleLoader: PuzzleLoader) => {
+        if (this.puzzleLoader.id !== puzzleLoader.id) {
+          this.disconnect();
+        }
+      },
+    );
+    this.#freshListenerManager.addListener(
+      this.model.legacyPositionProp,
+      async (position: PuzzlePosition) => {
+        try {
+          (await this.twisty3DPuzzle()).onPositionChange(position);
+          this.scheduleRender();
+        } catch (e) {
+          // TODO
+          // console.warn(
+          //   "Bad position (this doesn't necessarily mean something is wrong). Pre-emptively disconnecting:",
+          //   this.puzzleLoader.id,
+          //   e,
+          // );
+          this.disconnect();
+        }
+      },
+    );
+
+    this.#freshListenerManager.addListener(
+      this.model.hintFaceletProp,
+      async (hintFaceletStyle: HintFaceletStyleWithAuto) => {
+        (
+          (await this.twisty3DPuzzle()) as Cube3D | PG3D
+        ).experimentalUpdateOptions({
+          hintFacelets:
+            hintFaceletStyle === "auto" ? "floating" : hintFaceletStyle,
+        });
+        this.scheduleRender();
+      },
+    );
+    this.#freshListenerManager.addListener(
+      this.model.stickeringProp,
+      async (stickering: ExperimentalStickering) => {
+        if ("setStickering" in (await this.twisty3DPuzzle())) {
+          ((await this.twisty3DPuzzle()) as Cube3D).setStickering(stickering);
+          this.scheduleRender();
+        } else {
+          if (
+            [
+              "experimental-global-custom-1",
+              "experimental-global-custom-2",
+            ].includes(stickering)
+          ) {
+            const [twisty3D] = await Promise.all([this.twisty3DPuzzle()]);
+            (twisty3D as PG3D).experimentalSetAppearance(
+              await experimentalCubeAppearance(this.puzzleLoader, stickering),
+            );
+            this.scheduleRender();
+            return;
+          }
+
+          // TODO: create a prop to handle this.
+          if ("appearance" in this.puzzleLoader) {
+            const [twisty3D, appearancePromise] = await Promise.all([
+              this.twisty3DPuzzle(),
+              this.puzzleLoader.appearance!(stickering ?? "full"),
+            ]);
+            (twisty3D as PG3D).experimentalSetAppearance(appearancePromise);
+            this.scheduleRender();
+          }
+        }
+      },
+    );
+
+    this.#freshListenerManager.addMultiListener(
+      [this.model.foundationStickerSprite, this.model.hintStickerSprite],
+      async (
+        inputs: [
+          foundationSprite: ThreeTexture | null,
+          hintSprite: ThreeTexture | null,
+        ],
+      ) => {
+        if ("experimentalUpdateTexture" in (await this.twisty3DPuzzle())) {
+          ((await this.twisty3DPuzzle()) as PG3D).experimentalUpdateTexture(
+            true,
+            ...inputs,
+          );
+          this.scheduleRender();
+        }
+      },
+    );
+  }
+
+  #freshListenerManager = new FreshListenerManager();
+  disconnect(): void {
+    this.#freshListenerManager.disconnect();
+  }
+
+  scheduleRender(): void {
+    this.schedulable.scheduleRender();
+  }
+
+  #cachedTwisty3DPuzzle: Promise<Twisty3DPuzzle> | null = null;
+  async twisty3DPuzzle(): Promise<Twisty3DPuzzle> {
+    return (this.#cachedTwisty3DPuzzle ??= (async () => {
+      const proxyPromise = proxy3D();
+      if (
+        this.puzzleLoader.id === "3x3x3" &&
+        this.visualizationStrategy === "Cube3D"
+      ) {
+        // TODO: synchronize
+        const [foundationSprite, hintSprite, experimentalStickering] =
+          await Promise.all([
+            this.model.foundationStickerSprite.get(),
+            this.model.hintStickerSprite.get(),
+            this.model.stickeringProp.get(),
+          ]);
+        return (await proxyPromise).cube3DShim({
+          foundationSprite,
+          hintSprite,
+          experimentalStickering,
+        });
+      } else {
+        const [hintFacelets, foundationSprite, hintSprite] = await Promise.all([
+          this.model.hintFaceletProp.get(),
+          this.model.foundationStickerSprite.get(),
+          this.model.hintStickerSprite.get(),
+        ]);
+        const pg3d = (await proxyPromise).pg3dShim(
+          this.puzzleLoader,
+          hintFacelets === "auto" ? "floating" : hintFacelets,
+        );
+        // TODO: Figure out how to do this in one place using the listener.
+        pg3d.then((p) =>
+          p.experimentalUpdateTexture(
+            true,
+            foundationSprite ?? undefined,
+            hintSprite ?? undefined,
+          ),
+        );
+        return pg3d;
+      }
+    })());
+  }
+}

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

@@ -0,0 +1,144 @@
+import type { Scene as ThreeScene } from "three";
+import type { PuzzleLoader } from "../../../puzzles";
+import { THREEJS } from "../../heavy-code-imports/3d";
+import type { BackViewLayoutWithAuto } from "../../model/props/viewer/BackViewProp";
+import type { VisualizationStrategy } from "../../model/props/viewer/VisualizationStrategyProp";
+import { StaleDropper } from "../../model/PromiseFreshener";
+import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
+import { FreshListenerManager } from "../../model/props/TwistyProp";
+import type { Schedulable } from "../../old/animation/RenderScheduler";
+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 type { BackViewLayout } from "../../old/dom/viewers/TwistyViewerWrapper";
+import { twistyViewerWrapperCSS } from "../../old/dom/viewers/TwistyViewerWrapper.css";
+import { Twisty3DPuzzleWrapper } from "./Twisty3DPuzzleWrapper";
+import { Twisty3DVantage } from "./Twisty3DVantage";
+
+export class Twisty3DSceneWrapper
+  extends ManagedCustomElement
+  implements Schedulable
+{
+  #backViewClassListManager: ClassListManager<BackViewLayoutWithAuto> =
+    new ClassListManager(this, "back-view-", [
+      "auto",
+      "none",
+      "side-by-side",
+      "top-right",
+    ]);
+
+  #freshListenerManager = new FreshListenerManager();
+  disconnect(): void {
+    this.#freshListenerManager.disconnect();
+  }
+
+  constructor(public model?: TwistyPlayerModel) {
+    super();
+  }
+
+  async connectedCallback(): Promise<void> {
+    this.addCSS(twistyViewerWrapperCSS);
+    const vantage = new Twisty3DVantage(this.model, this);
+    this.addVantage(vantage);
+    if (this.model) {
+      this.#freshListenerManager.addMultiListener(
+        [this.model.puzzleLoaderProp, this.model.visualizationStrategyProp],
+        this.onPuzzle.bind(this),
+      );
+      this.#freshListenerManager.addListener(
+        this.model.backViewProp,
+        this.onBackView.bind(this),
+      );
+    }
+    this.scheduleRender();
+  }
+
+  #backViewVantage: Twisty3DVantage | null = null;
+  setBackView(backView: BackViewLayout): void {
+    const shouldHaveBackView = ["side-by-side", "top-right"].includes(backView);
+    const hasBackView = this.#backViewVantage !== null;
+
+    this.#backViewClassListManager.setValue(backView);
+    if (shouldHaveBackView) {
+      if (!hasBackView) {
+        this.#backViewVantage = new Twisty3DVantage(this.model, this, {
+          backView: true,
+        });
+        this.addVantage(this.#backViewVantage);
+        this.scheduleRender();
+      }
+    } else {
+      if (this.#backViewVantage) {
+        this.removeVantage(this.#backViewVantage);
+        this.#backViewVantage = null;
+      }
+    }
+  }
+
+  onBackView(backView: BackViewLayout): void {
+    this.setBackView(backView);
+  }
+
+  #cachedScene: Promise<ThreeScene> | null;
+  async scene(): Promise<ThreeScene> {
+    return (this.#cachedScene ??= (async () => new (await THREEJS).Scene())());
+  }
+
+  #vantages: Set<Twisty3DVantage> = new Set();
+  addVantage(vantage: Twisty3DVantage) {
+    this.#vantages.add(vantage);
+    this.contentWrapper.appendChild(vantage);
+  }
+
+  removeVantage(vantage: Twisty3DVantage) {
+    this.#vantages.delete(vantage);
+    vantage.remove();
+    vantage.disconnect();
+    this.#currentTwisty3DPuzzleWrapper?.disconnect();
+  }
+
+  scheduleRender(): void {
+    for (const vantage of this.#vantages) {
+      vantage.scheduleRender();
+    }
+  }
+
+  #currentTwisty3DPuzzleWrapper: Twisty3DPuzzleWrapper | null = null;
+  // #oldTwisty3DPuzzleWrappers: Twisty3DPuzzleWrapper[] = []; // TODO: Animate these out.
+  async setCurrentTwisty3DPuzzleWrapper(
+    scene: ThreeScene,
+    twisty3DPuzzleWrapper: Twisty3DPuzzleWrapper,
+  ): Promise<void> {
+    const old = this.#currentTwisty3DPuzzleWrapper;
+    this.#currentTwisty3DPuzzleWrapper = twisty3DPuzzleWrapper;
+    old?.disconnect();
+    scene.add(await twisty3DPuzzleWrapper.twisty3DPuzzle());
+    if (old) {
+      // We wait for the new puzzle to be in place before removing the old one.
+      scene.remove(await old.twisty3DPuzzle());
+    }
+  }
+
+  #twisty3DStaleDropper: StaleDropper<[ThreeScene, Twisty3DPuzzleWrapper]> =
+    new StaleDropper<[ThreeScene, Twisty3DPuzzleWrapper]>();
+
+  async onPuzzle(
+    inputs: [
+      puzzleLoader: PuzzleLoader,
+      visualizationStrategy: VisualizationStrategy,
+    ],
+  ): Promise<void> {
+    this.#currentTwisty3DPuzzleWrapper?.disconnect();
+    const [scene, twisty3DPuzzleWrapper] =
+      await this.#twisty3DStaleDropper.queue(
+        Promise.all([
+          this.scene(),
+          new Twisty3DPuzzleWrapper(this.model!, this, inputs[0], inputs[1]), // TODO
+        ]),
+      );
+
+    this.setCurrentTwisty3DPuzzleWrapper(scene, twisty3DPuzzleWrapper);
+  }
+}
+
+customElementsShim.define("twisty-3d-scene-wrapper", Twisty3DSceneWrapper);