cubing 0.24.0-pre5 → 0.24.0

package/dist/esm/twisty/index.js

@@ -1656,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) {
@@ -5015,6 +5018,139 @@ 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 {
   NO_VALUE as EXPERIMENTAL_PROP_NO_VALUE,
   KPuzzleSVGWrapper as ExperimentalKPuzzleSVGWrapper,
@@ -5023,6 +5159,7 @@ export {
   TwistyAlgEditor,
   TwistyAlgViewer,
   TwistyPlayer,
+  TwizzleLink,
   backViewLayouts,
   debugShowRenderStats as experimentalDebugShowRenderStats,
   experimentalForceNewRendererSharing