cubing 0.23.0 → 0.24.0-pre1

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

@@ -1,214 +0,0 @@
-import type { Raycaster, Texture as ThreeTexture } from "three";
-import { experimentalCubeAppearance, PuzzleLoader } from "../../../puzzles";
-import type { ExperimentalStickering } from "../../../twisty";
-import { proxy3D } from "../../heavy-code-imports/3d";
-import { Cube3D, PG3D } from "../../heavy-code-imports/dynamic-entries/3d";
-import type { FoundationDisplay } from "../../model/props/puzzle/display/FoundationDisplayProp";
-import type { HintFaceletStyleWithAuto } from "../../model/props/puzzle/display/HintFaceletProp";
-import { FreshListenerManager } from "../../model/props/TwistyProp";
-import type { VisualizationStrategy } from "../../model/props/viewer/VisualizationStrategyProp";
-import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
-import type { PuzzlePosition } from "../../controllers/AnimationTypes";
-import type { Schedulable } from "../../controllers/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.foundationDisplayProp,
-      async (foundationDisplay: FoundationDisplay) => {
-        (
-          (await this.twisty3DPuzzle()) as Cube3D | PG3D
-        ).experimentalUpdateOptions({
-          showFoundation: foundationDisplay !== "none",
-        });
-        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;
-      }
-    })());
-  }
-
-  async raycastMove(
-    raycasterPromise: Promise<Raycaster>,
-    transformations: {
-      invert: boolean;
-      depth?: "secondSlice" | "rotation" | "none";
-    },
-  ): Promise<void> {
-    const puzzle = await this.twisty3DPuzzle();
-    // TODO: check this differently.
-    if (!(puzzle instanceof PG3D)) {
-      console.info("not PG3D! skipping raycast");
-      return;
-    }
-
-    const targets = puzzle.experimentalGetControlTargets(); // TODO: sticker targets
-    const [raycaster] = await Promise.all([raycasterPromise]);
-
-    const intersects = raycaster.intersectObjects(targets);
-    if (intersects.length > 0) {
-      const closestMove = puzzle.getClosestMoveToAxis(
-        intersects[0].point,
-        transformations,
-      );
-      if (closestMove) {
-        this.model.experimentalAddMove(closestMove.move, {
-          coalesce: true,
-          mod: closestMove.order,
-        });
-      } else {
-        console.info("Skipping move!");
-      }
-    }
-  }
-}

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

@@ -1,5 +0,0 @@
-// This should only be implemented by classes with a private `render()` method
-// that draws to the screen.
-export interface Twisty3DRenderTarget {
-  scheduleRender(): void;
-}

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

@@ -1,42 +0,0 @@
-import { Scene as ThreeScene } from "three";
-import type { Twisty3DPuzzle } from "./puzzles/Twisty3DPuzzle";
-import type { Twisty3DRenderTarget } from "./Twisty3DRenderTarget";
-
-export class Twisty3DScene extends ThreeScene implements Twisty3DRenderTarget {
-  private renderTargets: Set<Twisty3DRenderTarget> = new Set();
-  public twisty3Ds: Set<Twisty3DPuzzle> = new Set();
-
-  constructor() {
-    super();
-  }
-
-  addRenderTarget(renderTarget: Twisty3DRenderTarget): void {
-    this.renderTargets.add(renderTarget);
-  }
-
-  scheduleRender(): void {
-    for (const renderTarget of this.renderTargets) {
-      renderTarget.scheduleRender();
-    }
-  }
-
-  addTwisty3DPuzzle(twisty3DPuzzle: Twisty3DPuzzle): void {
-    this.twisty3Ds.add(twisty3DPuzzle);
-    this.add(twisty3DPuzzle);
-    // TODO: scheduleRender?
-  }
-
-  removeTwisty3DPuzzle(twisty3DPuzzle: Twisty3DPuzzle): void {
-    this.twisty3Ds.delete(twisty3DPuzzle);
-    this.remove(twisty3DPuzzle);
-    // TODO: scheduleRender?
-  }
-
-  clearPuzzles(): void {
-    for (const puz of this.twisty3Ds) {
-      this.remove(puz);
-    }
-    this.twisty3Ds.clear();
-    // TODO: scheduleRender?
-  }
-}

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

@@ -1,189 +0,0 @@
-import { PerspectiveCamera, Scene as ThreeScene, Vector2 } from "three";
-import type { PuzzleLoader } from "../../../puzzles";
-import { THREEJS } from "../../heavy-code-imports/3d";
-import { StaleDropper } from "../../model/PromiseFreshener";
-import { FreshListenerManager } from "../../model/props/TwistyProp";
-import type {
-  BackViewLayout,
-  BackViewLayoutWithAuto,
-} from "../../model/props/viewer/BackViewProp";
-import type { VisualizationStrategy } from "../../model/props/viewer/VisualizationStrategyProp";
-import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
-import type { Schedulable } from "../../controllers/RenderScheduler";
-import { ClassListManager } from "../ClassListManager";
-import { ManagedCustomElement } from "../ManagedCustomElement";
-import { customElementsShim } from "../node-custom-element-shims";
-import { twistyViewerWrapperCSS } from "../TwistyViewerWrapper.css";
-import type { PressInfo } from "./DragTracker";
-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);
-  }
-
-  async onPress(
-    e: CustomEvent<{
-      pressInfo: PressInfo;
-      cameraPromise: Promise<PerspectiveCamera>;
-    }>,
-  ): Promise<void> {
-    const twisty3DPuzzleWrapper = this.#currentTwisty3DPuzzleWrapper;
-    if (!twisty3DPuzzleWrapper) {
-      console.info("no wrapper; skipping scene wrapper press!");
-      return;
-    }
-
-    const raycasterPromise = (async () => {
-      const [camera, three] = await Promise.all([
-        e.detail.cameraPromise,
-        THREEJS,
-      ]);
-
-      const raycaster = new three.Raycaster();
-      const mouse = new Vector2(
-        e.detail.pressInfo.normalizedX,
-        e.detail.pressInfo.normalizedY,
-      );
-      raycaster.setFromCamera(mouse, camera);
-      return raycaster;
-    })();
-
-    twisty3DPuzzleWrapper.raycastMove(raycasterPromise, {
-      invert: !e.detail.pressInfo.rightClick,
-      depth: e.detail.pressInfo.keys.ctrlOrMetaKey
-        ? "rotation"
-        : e.detail.pressInfo.keys.shiftKey
-        ? "secondSlice"
-        : "none",
-    });
-  }
-
-  #cachedScene: Promise<ThreeScene> | null;
-  async scene(): Promise<ThreeScene> {
-    return (this.#cachedScene ??= (async () => new (await THREEJS).Scene())());
-  }
-
-  #vantages: Set<Twisty3DVantage> = new Set();
-  addVantage(vantage: Twisty3DVantage) {
-    vantage.addEventListener("press", this.onPress.bind(this));
-    this.#vantages.add(vantage);
-    this.contentWrapper.appendChild(vantage);
-  }
-
-  removeVantage(vantage: Twisty3DVantage) {
-    this.#vantages.delete(vantage);
-    vantage.remove();
-    vantage.disconnect();
-    this.#currentTwisty3DPuzzleWrapper?.disconnect();
-  }
-
-  experimentalVantages(): Iterable<Twisty3DVantage> {
-    return this.#vantages.values();
-  }
-
-  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);

package/src/cubing/twisty/views/3D/Twisty3DVantage.css.ts

@@ -1,32 +0,0 @@
-import { CSSSource } from "../ManagedCustomElement";
-
-// The `position` values are a hack for a bug in Safari where the canvas either
-// grows infinitely, or takes up the full `fr` of any encompassing grid (making
-// the contents of that element e.g. over 100% of its height). `contain:
-// content` is a good fix for this, but there is no indication that Safari will
-// support it soon. https://developer.mozilla.org/en-US/docs/Web/CSS/contain
-
-export const twisty3DVantageCSS = new CSSSource(`
-:host {
-  width: 384px;
-  height: 256px;
-  display: grid;
-}
-
-.wrapper {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  overflow: hidden;
-}
-
-/* TODO: This is due to stats hack. Replace with \`canvas\`. */
-.wrapper > canvas {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.wrapper.invisible {
-  opacity: 0;
-}
-`);