cubing 0.24.0-pre2 → 0.24.0

package/dist/esm/twisty/index.js

@@ -1,28 +1,27 @@
 import {
-  Cube3D,
   DEGREES_PER_RADIAN,
   FreshListenerManager,
   HintFaceletProp,
   NO_VALUE,
-  PG3D,
   SimpleTwistyPropSource,
   StaleDropper,
   StickeringProp,
+  THREEJS,
   TwistyPropDerived,
   TwistyPropSource,
-  from
-} from "../chunk-REMJV2GO.js";
+  proxy3D
+} from "../chunk-27MCV5LC.js";
 import {
   countAnimatedLeaves,
   countMoves
-} from "../chunk-4IUYLRHT.js";
+} from "../chunk-U2TSTTDG.js";
 import {
   cube3x3x3,
   cubeAppearance,
   customPGPuzzleLoader,
   puzzles
-} from "../chunk-ZLIK3DZT.js";
-import "../chunk-TNRZDNGH.js";
+} from "../chunk-54HT7B4M.js";
+import "../chunk-B27E6KTE.js";
 import {
   Alg,
   AlgBuilder,
@@ -356,37 +355,6 @@ var ControlPanelProp = class extends SimpleTwistyPropSource {
   }
 };
 
-// src/cubing/twisty/views/ClassListManager.ts
-var _currentClassName;
-var ClassListManager = class {
-  constructor(elem, prefix, validSuffixes) {
-    this.elem = elem;
-    this.prefix = prefix;
-    this.validSuffixes = validSuffixes;
-    __privateAdd(this, _currentClassName, null);
-  }
-  clearValue() {
-    if (__privateGet(this, _currentClassName)) {
-      this.elem.contentWrapper.classList.remove(__privateGet(this, _currentClassName));
-    }
-    __privateSet(this, _currentClassName, null);
-  }
-  setValue(suffix) {
-    if (!this.validSuffixes.includes(suffix)) {
-      throw new Error(`Invalid suffix: ${suffix}`);
-    }
-    const newClassName = `${this.prefix}${suffix}`;
-    const changed = __privateGet(this, _currentClassName) !== newClassName;
-    if (changed) {
-      this.clearValue();
-      this.elem.contentWrapper.classList.add(newClassName);
-      __privateSet(this, _currentClassName, newClassName);
-    }
-    return changed;
-  }
-};
-_currentClassName = new WeakMap();
-
 // src/cubing/twisty/views/node-custom-element-shims.ts
 var HTMLElementStub = class {
 };
@@ -456,85 +424,6 @@ var ManagedCustomElement = class extends HTMLElementShim {
 _cssSourceMap = new WeakMap();
 customElementsShim.define("twisty-managed-custom-element", ManagedCustomElement);
 
-// src/cubing/twisty/views/TwistyPlayer.css.ts
-var twistyPlayerCSS = new CSSSource(`
-:host {
-  width: 384px;
-  height: 256px;
-  display: grid;
-
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.wrapper {
-  display: grid;
-  overflow: hidden;
-  grid-template-rows: 7fr 1em 1fr;
-}
-
-.wrapper > * {
-  width: inherit;
-  height: inherit;
-  overflow: hidden;
-}
-
-.wrapper.controls-none {
-  grid-template-rows: 7fr;
-}
-
-.wrapper.controls-none twisty-scrubber,
-.wrapper.controls-none twisty-control-button-panel ,
-.wrapper.controls-none twisty-scrubber-v2,
-.wrapper.controls-none twisty-buttons-v2 {
-  display: none;
-}
-
-twisty-scrubber {
-  background: rgba(196, 196, 196, 0.5);
-}
-
-.wrapper.checkered {
-  background-color: #EAEAEA;
-  background-image: linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD),
-    linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD);
-  background-size: 32px 32px;
-  background-position: 0 0, 16px 16px;
-}
-
-.visualization-wrapper > * {
-  width: 100%;
-  height: 100%;
-}
-
-.error-elem {
-  width: 100%;
-  height: 100%;
-  display: none;
-  place-content: center;
-  font-family: sans-serif;
-  box-shadow: inset 0 0 2em rgb(255, 0, 0);
-  color: red;
-  text-shadow: 0 0 0.2em white;
-  background: rgba(255, 255, 255, 0.25);
-}
-
-.wrapper.error .visualization-wrapper {
-  display: none;
-}
-
-.wrapper.error .error-elem {
-  display: grid;
-}
-`);
-
-// src/cubing/twisty/heavy-code-imports/3d.ts
-var cachedConstructorProxy = null;
-async function proxy3D() {
-  return cachedConstructorProxy ?? (cachedConstructorProxy = import("../3d-NFF7OGTI.js"));
-}
-var THREEJS = from(async () => (await proxy3D()).T3I);
-
 // src/cubing/twisty/views/TwistyViewerWrapper.css.ts
 var twistyViewerWrapperCSS = new CSSSource(`
 :host {
@@ -668,7 +557,7 @@ var KPuzzleSVGWrapper = class {
     for (const orbitName in kpuzzle.definition.orbits) {
       const orbitDefinition = kpuzzle.definition.orbits[orbitName];
       for (let idx = 0; idx < orbitDefinition.numPieces; idx++) {
-        for (let orientation = 0; orientation < orbitDefinition.orientations; orientation++) {
+        for (let orientation = 0; orientation < orbitDefinition.numOrientations; orientation++) {
           const id = this.elementID(orbitName, idx, orientation);
           const elem = this.elementByID(id);
           let originalColor = elem.style.fill;
@@ -721,12 +610,12 @@ var KPuzzleSVGWrapper = class {
       const curTransformationOrbit = transformation.transformationData[orbitName];
       const nextTransformationOrbit = nextTransformation ? nextTransformation.transformationData[orbitName] : null;
       for (let idx = 0; idx < orbitDefinition.numPieces; idx++) {
-        for (let orientation = 0; orientation < orbitDefinition.orientations; orientation++) {
+        for (let orientation = 0; orientation < orbitDefinition.numOrientations; orientation++) {
           const id = this.elementID(orbitName, idx, orientation);
-          const fromCur = this.elementID(orbitName, curTransformationOrbit.permutation[idx], (orbitDefinition.orientations - curTransformationOrbit.orientation[idx] + orientation) % orbitDefinition.orientations);
+          const fromCur = this.elementID(orbitName, curTransformationOrbit.permutation[idx], (orbitDefinition.numOrientations - curTransformationOrbit.orientation[idx] + orientation) % orbitDefinition.numOrientations);
           let singleColor = false;
           if (nextTransformationOrbit) {
-            const fromNext = this.elementID(orbitName, nextTransformationOrbit.permutation[idx], (orbitDefinition.orientations - nextTransformationOrbit.orientation[idx] + orientation) % orbitDefinition.orientations);
+            const fromNext = this.elementID(orbitName, nextTransformationOrbit.permutation[idx], (orbitDefinition.numOrientations - nextTransformationOrbit.orientation[idx] + orientation) % orbitDefinition.numOrientations);
             if (fromCur === fromNext) {
               singleColor = true;
             }
@@ -941,8 +830,36 @@ _cachedScene = new WeakMap();
 _currentTwisty2DPuzzleWrapper = new WeakMap();
 customElementsShim.define("twisty-2d-scene-wrapper", Twisty2DSceneWrapper);
 
-// src/cubing/twisty/views/3D/Twisty3DSceneWrapper.ts
-import { Vector2 } from "three";
+// src/cubing/twisty/views/ClassListManager.ts
+var _currentClassName;
+var ClassListManager = class {
+  constructor(elem, prefix, validSuffixes) {
+    this.elem = elem;
+    this.prefix = prefix;
+    this.validSuffixes = validSuffixes;
+    __privateAdd(this, _currentClassName, null);
+  }
+  clearValue() {
+    if (__privateGet(this, _currentClassName)) {
+      this.elem.contentWrapper.classList.remove(__privateGet(this, _currentClassName));
+    }
+    __privateSet(this, _currentClassName, null);
+  }
+  setValue(suffix) {
+    if (!this.validSuffixes.includes(suffix)) {
+      throw new Error(`Invalid suffix: ${suffix}`);
+    }
+    const newClassName = `${this.prefix}${suffix}`;
+    const changed = __privateGet(this, _currentClassName) !== newClassName;
+    if (changed) {
+      this.clearValue();
+      this.elem.contentWrapper.classList.add(newClassName);
+      __privateSet(this, _currentClassName, newClassName);
+    }
+    return changed;
+  }
+};
+_currentClassName = new WeakMap();
 
 // src/cubing/twisty/views/3D/Twisty3DPuzzleWrapper.ts
 var _freshListenerManager4, _cachedTwisty3DPuzzle;
@@ -1045,7 +962,7 @@ var Twisty3DPuzzleWrapper = class {
   }
   async raycastMove(raycasterPromise, transformations) {
     const puzzle = await this.twisty3DPuzzle();
-    if (!(puzzle instanceof PG3D)) {
+    if (!("experimentalGetControlTargets" in puzzle)) {
       console.info("not PG3D! skipping raycast");
       return;
     }
@@ -1345,7 +1262,6 @@ async function newRenderer() {
 }
 
 // src/cubing/twisty/views/3D/TwistyOrbitControls.ts
-import { Spherical } from "three";
 var INERTIA_DEFAULT = true;
 var INERTIA_DURATION_MS = 500;
 var INERTIA_TIMEOUT_MS = 50;
@@ -1707,7 +1623,7 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
         THREEJS
       ]);
       const raycaster = new three.Raycaster();
-      const mouse = new Vector2(e.detail.pressInfo.normalizedX, e.detail.pressInfo.normalizedY);
+      const mouse = new (await THREEJS).Vector2(e.detail.pressInfo.normalizedX, e.detail.pressInfo.normalizedY);
       raycaster.setFromCamera(mouse, camera);
       return raycaster;
     })();
@@ -1740,11 +1656,14 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
   }
   async setCurrentTwisty3DPuzzleWrapper(scene, twisty3DPuzzleWrapper) {
     const old = __privateGet(this, _currentTwisty3DPuzzleWrapper);
-    __privateSet(this, _currentTwisty3DPuzzleWrapper, twisty3DPuzzleWrapper);
-    old?.disconnect();
-    scene.add(await twisty3DPuzzleWrapper.twisty3DPuzzle());
-    if (old) {
-      scene.remove(await old.twisty3DPuzzle());
+    try {
+      __privateSet(this, _currentTwisty3DPuzzleWrapper, twisty3DPuzzleWrapper);
+      old?.disconnect();
+      scene.add(await twisty3DPuzzleWrapper.twisty3DPuzzle());
+    } finally {
+      if (old) {
+        scene.remove(await old.twisty3DPuzzle());
+      }
     }
   }
   async onPuzzle(inputs) {
@@ -2135,12 +2054,14 @@ input {
 var SLOW_DOWN_SCRUBBING = false;
 var isMouseDown = false;
 globalSafeDocument?.addEventListener("mousedown", function(event) {
-  if (event.which)
+  if (event.which) {
     isMouseDown = true;
+  }
 }, true);
 globalSafeDocument?.addEventListener("mouseup", function(event) {
-  if (event.which)
+  if (event.which) {
     isMouseDown = false;
+  }
 }, true);
 var y = 0;
 var clickNum = 0;
@@ -2230,7 +2151,6 @@ _inputElem = new WeakMap();
 customElementsShim.define("twisty-scrubber-v2", TwistyScrubberV2);
 
 // src/cubing/twisty/views/screenshot.ts
-import { WebGLRenderer } from "three";
 var cachedCamera = null;
 async function screenshot(model, options) {
   const width = options?.width ?? 2048;
@@ -2248,7 +2168,7 @@ async function screenshot(model, options) {
   scene.add(await twisty3DWrapper.twisty3DPuzzle());
   const orbitCoordinates = await model.orbitCoordinatesProp.get();
   await setCameraFromOrbitCoordinates(camera, orbitCoordinates);
-  const renderer = new WebGLRenderer({
+  const renderer = new (await THREEJS).WebGLRenderer({
     antialias: true,
     alpha: true
   });
@@ -2277,6 +2197,78 @@ function downloadURL(url, name, extension = "png") {
   a.click();
 }
 
+// src/cubing/twisty/views/TwistyPlayer.css.ts
+var twistyPlayerCSS = new CSSSource(`
+:host {
+  width: 384px;
+  height: 256px;
+  display: grid;
+
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.wrapper {
+  display: grid;
+  overflow: hidden;
+  grid-template-rows: 7fr 1em 1fr;
+}
+
+.wrapper > * {
+  width: inherit;
+  height: inherit;
+  overflow: hidden;
+}
+
+.wrapper.controls-none {
+  grid-template-rows: 7fr;
+}
+
+.wrapper.controls-none twisty-scrubber,
+.wrapper.controls-none twisty-control-button-panel ,
+.wrapper.controls-none twisty-scrubber-v2,
+.wrapper.controls-none twisty-buttons-v2 {
+  display: none;
+}
+
+twisty-scrubber {
+  background: rgba(196, 196, 196, 0.5);
+}
+
+.wrapper.checkered {
+  background-color: #EAEAEA;
+  background-image: linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD),
+    linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD);
+  background-size: 32px 32px;
+  background-position: 0 0, 16px 16px;
+}
+
+.visualization-wrapper > * {
+  width: 100%;
+  height: 100%;
+}
+
+.error-elem {
+  width: 100%;
+  height: 100%;
+  display: none;
+  place-content: center;
+  font-family: sans-serif;
+  box-shadow: inset 0 0 2em rgb(255, 0, 0);
+  color: red;
+  text-shadow: 0 0 0.2em white;
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.wrapper.error .visualization-wrapper {
+  display: none;
+}
+
+.wrapper.error .error-elem {
+  display: grid;
+}
+`);
+
 // src/cubing/twisty/model/props/puzzle/state/AlgProp.ts
 var AlgIssues = class {
   constructor(issues) {
@@ -2789,8 +2781,9 @@ var LocalSimulMoves = class extends TraversalUp {
       return [];
     }
     for (const unit of alg.units()) {
-      if (!unit.is(Move))
+      if (!unit.is(Move)) {
         return this.traverseAlg(alg);
+      }
     }
     const moves = Array.from(alg.units());
     let maxSimulDur = defaultDurationForAmount(moves[0].amount);
@@ -3446,10 +3439,13 @@ var IndexerConstructorProp = class extends TwistyPropDerived {
 };
 
 // src/cubing/twisty/model/props/puzzle/state/PuzzleAlgProp.ts
+var validate = true;
 var PuzzleAlgProp = class extends TwistyPropDerived {
   async derive(inputs) {
     try {
-      inputs.kpuzzle.algToTransformation(inputs.algWithIssues.alg);
+      if (validate) {
+        inputs.kpuzzle.algToTransformation(inputs.algWithIssues.alg);
+      }
       return inputs.algWithIssues;
     } catch (e) {
       return {
@@ -5022,16 +5018,148 @@ padSuffix_fn = function(s) {
 };
 _highlightedLeaf = new WeakMap();
 customElementsShim.define("twisty-alg-editor", TwistyAlgEditor);
+
+// src/cubing/twisty/views/twizzle/TwizzleLink.css.ts
+var twizzleLinkCSS = new CSSSource(`
+.wrapper {
+  background: rgb(255, 245, 235);
+  display: grid;
+  grid-template-columns: 1fr;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+}
+
+.setup-alg, twisty-alg-viewer {
+  padding: 0.5em 1em;
+}
+
+.heading {
+  background: rgba(255, 230, 210, 1);
+  font-weight: bold;
+  padding: 0.25em 0.5em;
+}
+
+twisty-player {
+  width: 100%;
+}
+
+twisty-player + .heading {
+  padding-top: 0.5em;
+}
+`);
+
+// src/cubing/twisty/views/twizzle/url-params.ts
+function updateURL(url) {
+  window.history.replaceState("", "", url.toString());
+}
+var _prefix;
+var URLParamUpdater = class {
+  constructor(model, options) {
+    __privateAdd(this, _prefix, void 0);
+    __privateSet(this, _prefix, options?.prefix ?? "");
+    this.listenToAlgProp(model.algProp, "alg");
+    this.listenToAlgProp(model.setupProp, "setup-alg");
+    this.listenToStringSourceProp(model.stickeringProp, "stickering");
+    this.listenToStringSourceProp(model.setupAnchorProp, "setup-anchor");
+    this.listenToStringOrNoValueProp(model.puzzleIDRequestProp, "puzzle", NO_VALUE);
+    this.listenToStringOrNoValueProp(model.puzzleDescriptionRequestProp, "puzzle-description", NO_VALUE);
+  }
+  setURLParam(unprefixedKey, value, defaultString) {
+    const prefixedKey = __privateGet(this, _prefix) + unprefixedKey;
+    const url = new URL(location.href);
+    if (value === defaultString) {
+      url.searchParams.delete(prefixedKey);
+    } else {
+      url.searchParams.set(prefixedKey, value);
+    }
+    updateURL(url);
+  }
+  async listenToStringSourceProp(prop, key, defaultString) {
+    const actualDefaultString = defaultString ?? await prop.getDefaultValue();
+    prop.addFreshListener((s) => {
+      this.setURLParam(key, s, actualDefaultString);
+    });
+  }
+  async listenToStringOrNoValueProp(prop, key, defaultString) {
+    prop.addFreshListener((s) => {
+      if (s === NO_VALUE) {
+        s = defaultString;
+      }
+      if (s === NO_VALUE) {
+        this.setURLParam(key, "", "");
+      } else {
+        this.setURLParam(key, s, "");
+      }
+    });
+  }
+  listenToAlgProp(prop, key) {
+    prop.addFreshListener((algWithIssues) => {
+      this.setURLParam(key, algWithIssues.alg.toString(), "");
+    });
+  }
+};
+_prefix = new WeakMap();
+function getConfigFromURL(prefix = "", url = location.href) {
+  const paramMapping = {
+    "alg": "alg",
+    "setup-alg": "experimental-setup-alg",
+    "setup-anchor": "experimental-setup-anchor",
+    "puzzle": "puzzle",
+    "stickering": "experimental-stickering",
+    "puzzle-description": "experimental-puzzle-description"
+  };
+  const params = new URL(url).searchParams;
+  const config = {};
+  console.log(paramMapping);
+  for (const [ourParam, twistyPlayerParam] of Object.entries(paramMapping)) {
+    const paramValue = params.get(prefix + ourParam);
+    if (paramValue !== null) {
+      const configKey = twistyPlayerAttributeMap[twistyPlayerParam];
+      config[configKey] = paramValue;
+    }
+  }
+  return config;
+}
+
+// src/cubing/twisty/views/twizzle/TwizzleLink.ts
+var TwizzleLink = class extends ManagedCustomElement {
+  constructor() {
+    super({ mode: "open" });
+    this.twistyPlayer = null;
+    this.a = null;
+  }
+  connectedCallback() {
+    this.addCSS(twizzleLinkCSS);
+    this.a = this.querySelector("a");
+    if (this.a) {
+      const config = getConfigFromURL("", this.a.href);
+      this.twistyPlayer = this.addElement(new TwistyPlayer(config));
+      if (config.experimentalSetupAlg) {
+        this.addHeading("Setup");
+        const setupAlgDiv = this.addElement(document.createElement("div"));
+        setupAlgDiv.classList.add("setup-alg");
+        setupAlgDiv.textContent = new Alg(config.experimentalSetupAlg).toString();
+      }
+      this.addHeading("Moves");
+      const twistyAlgViewer = this.addElement(new TwistyAlgViewer({ twistyPlayer: this.twistyPlayer }));
+      twistyAlgViewer.part.add("twisty-alg-viewer");
+    }
+  }
+  addHeading(text) {
+    const headingDiv = this.addElement(document.createElement("div"));
+    headingDiv.classList.add("heading");
+    headingDiv.textContent = text;
+  }
+};
+customElementsShim.define("twizzle-link", TwizzleLink);
 export {
-  Cube3D,
   NO_VALUE as EXPERIMENTAL_PROP_NO_VALUE,
   KPuzzleSVGWrapper as ExperimentalKPuzzleSVGWrapper,
-  PG3D,
   SimpleAlgIndexer,
   TreeAlgIndexer,
   TwistyAlgEditor,
   TwistyAlgViewer,
   TwistyPlayer,
+  TwizzleLink,
   backViewLayouts,
   debugShowRenderStats as experimentalDebugShowRenderStats,
   experimentalForceNewRendererSharing