[twisty] Add the <twizzle-link> element.

src/cubing/twisty/index.ts

@@ -1,6 +1,7 @@
 export { TwistyPlayer } from "./views/TwistyPlayer";
 export { TwistyAlgViewer } from "./views/TwistyAlgViewer";
 export { TwistyAlgEditor } from "./views/TwistyAlgEditor/TwistyAlgEditor";
+export { TwizzleLink } from "./views/twizzle/TwizzleLink";
 export type { TwistyPlayerConfig } from "./views/TwistyPlayer";
 export { experimentalForceNewRendererSharing } from "./views/3D/Twisty3DVantage";
 

src/cubing/twisty/views/twizzle/TwizzleLink.css.ts

@@ -0,0 +1,28 @@
+import { CSSSource } from "../ManagedCustomElement";
+
+export const 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/TwizzleLink.ts

@@ -0,0 +1,46 @@
+import { TwistyPlayer } from "../..";
+import { Alg } from "../../../alg";
+import { ManagedCustomElement } from "../ManagedCustomElement";
+import { customElementsShim } from "../node-custom-element-shims";
+import { TwistyAlgViewer } from "../TwistyAlgViewer";
+import { twizzleLinkCSS } from "./TwizzleLink.css";
+import { getConfigFromURL } from "./url-params";
+
+export class TwizzleLink extends ManagedCustomElement {
+  twistyPlayer: TwistyPlayer | null = null;
+  a: HTMLAnchorElement | null = null;
+  constructor() {
+    super({ mode: "open" });
+  }
+  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: string): void {
+    const headingDiv = this.addElement(document.createElement("div"));
+    headingDiv.classList.add("heading");
+    headingDiv.textContent = text;
+  }
+}
+
+customElementsShim.define("twizzle-link", TwizzleLink);

src/sites/alpha.twizzle.net/core/url-params.ts → src/cubing/twisty/views/twizzle/url-params.ts

@@ -1,15 +1,15 @@
-import { EXPERIMENTAL_PROP_NO_VALUE } from "../../../cubing/twisty";
+import { EXPERIMENTAL_PROP_NO_VALUE } from "../../../../cubing/twisty";
 import type {
   AlgProp,
   AlgWithIssues,
-} from "../../../cubing/twisty/model/props/puzzle/state/AlgProp";
-import type { TwistyPlayerModel } from "../../../cubing/twisty/model/TwistyPlayerModel";
-import type { TwistyPropSource } from "../../../cubing/twisty/model/props/TwistyProp";
+} from "../../../../cubing/twisty/model/props/puzzle/state/AlgProp";
+import type { TwistyPlayerModel } from "../../../../cubing/twisty/model/TwistyPlayerModel";
+import type { TwistyPropSource } from "../../../../cubing/twisty/model/props/TwistyProp";
 import {
   TwistyPlayerAttribute,
   twistyPlayerAttributeMap,
   TwistyPlayerConfig,
-} from "../../../cubing/twisty/views/TwistyPlayer";
+} from "../../../../cubing/twisty/views/TwistyPlayer";
 
 function updateURL(url: URL): void {
   window.history.replaceState("", "", url.toString());
@@ -93,18 +93,23 @@ export class URLParamUpdater {
   }
 }
 
-const paramMapping: Record<string, TwistyPlayerAttribute> = {
-  "alg": "alg",
-  "setup-alg": "experimental-setup-alg",
-  "setup-anchor": "experimental-setup-anchor",
-  "puzzle": "puzzle",
-  "stickering": "experimental-stickering",
-  "puzzle-description": "experimental-puzzle-description",
-};
+export function getConfigFromURL(
+  prefix = "",
+  url: string = location.href,
+): TwistyPlayerConfig {
+  // TODO: Why does `Object.entries(paramMapping)` crash if this is defined elswhere?
+  const paramMapping: Record<string, TwistyPlayerAttribute> = {
+    "alg": "alg",
+    "setup-alg": "experimental-setup-alg",
+    "setup-anchor": "experimental-setup-anchor",
+    "puzzle": "puzzle",
+    "stickering": "experimental-stickering",
+    "puzzle-description": "experimental-puzzle-description",
+  };
 
-export function getConfigFromURL(prefix = ""): TwistyPlayerConfig {
-  const params = new URL(location.href).searchParams;
+  const params = new URL(url).searchParams;
   const config: TwistyPlayerConfig = {};
+  console.log(paramMapping);
   for (const [ourParam, twistyPlayerParam] of Object.entries(paramMapping)) {
     const paramValue = params.get(prefix + ourParam);
     if (paramValue !== null) {

src/sites/alpha.twizzle.net/edit/app.ts

@@ -21,12 +21,12 @@ import { customElementsShim } from "../../../cubing/twisty/views/node-custom-ele
 import "../../../cubing/twisty/views/stream/TwistyStreamSource";
 import type { TwistyStreamSource } from "../../../cubing/twisty/views/stream/TwistyStreamSource";
 import type { TwistyAlgEditor } from "../../../cubing/twisty/views/TwistyAlgEditor/TwistyAlgEditor";
-import { URLParamUpdater } from "../core/url-params";
 import { findOrCreateChild, findOrCreateChildWithClass } from "./dom";
 import { examples } from "./examples";
 import { APP_TITLE } from "./strings";
 import { puzzleGroups, supportedPuzzles } from "./supported-puzzles";
 import type { SetupToLocation } from "../../../cubing/twisty/model/props/puzzle/state/SetupAnchorProp";
+import { URLParamUpdater } from "../../../cubing/twisty/views/twizzle/url-params";
 // import { setURLParams } from "./url-params";
 
 function algAppend(oldAlg: Alg, comment: string, newAlg: Alg): Alg {

src/sites/alpha.twizzle.net/edit/main.ts

@@ -1,6 +1,9 @@
 import "../../../cubing/twisty";
 import { experimentalDebugShowRenderStats } from "../../../cubing/twisty";
-import { getConfigFromURL, remapLegacyURLParams } from "../core/url-params";
+import {
+  getConfigFromURL,
+  remapLegacyURLParams,
+} from "../../../cubing/twisty/views/twizzle/url-params";
 import { App } from "./app";
 import { getURLParam } from "./url-params";
 

src/sites/alpha.twizzle.net/explore/twisty-player.ts

@@ -9,7 +9,7 @@ import {
 } from "../../../cubing/twisty";
 import type { OrbitCoordinates } from "../../../cubing/twisty/model/props/viewer/OrbitCoordinatesRequestProp";
 import { positionToOrbitCoordinates } from "../../../cubing/twisty/views/3D/TwistyOrbitControls";
-import { getConfigFromURL } from "../core/url-params";
+import { getConfigFromURL } from "../../../cubing/twisty/views/twizzle/url-params";
 import { setupPropInputs } from "./prop-inputs";
 import { getURLParam, setAlgParam } from "./url-params";
 

src/sites/experiments.cubing.net/cubing.js/index.html

@@ -117,6 +117,7 @@ <h2><code>cubing.js</code><br />Dev Apps</h2>
         🔄
         <a href="./twisty/twisty-alg-editor/">twisty/twisty-alg-editor</a>
       </div>
+      <div>🔗 <a href="./twisty/twizzle-link.html">twisty/twizzle-link</a></div>
       <div>
         🚨
         <a href="./twisty/error-puzzle.html">twisty/error-puzzle</a>

src/sites/experiments.cubing.net/cubing.js/twisty/twisty.ts

@@ -0,0 +1 @@
+import "../../../../cubing/twisty";

src/sites/experiments.cubing.net/cubing.js/twisty/twizzle-link.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf8" />
+    <title>Twizzle Link | twisty.js</title>
+    <link href="./inline.css" rel="stylesheet" type="text/css" />
+    <script src="./twisty.js" href="./twisty.ts" type="module"></script>
+    <style>
+      twizzle-link {
+        margin: 1em;
+        font-family: Ubuntu;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="content">
+      <twizzle-link>
+        <a
+          href="https://alpha.twizzle.net/edit/?alg=R+U+R%27+U%27+R%27+F+R2+U%27+R%27+U%27+R+U+R%27+F%27&stickering=PLL"
+          >https://alpha.twizzle.net/edit/?alg=R+U+R%27+U%27+R%27+F+R2+U%27+R%27+U%27+R+U+R%27+F%27&stickering=PLL</a
+        >
+      </twizzle-link>
+      <twizzle-link>
+        <a
+          href="https://alpha.twizzle.net/edit/?alg=y+x%27+%2F%2F+inspection%0AU+R2+U%27+F%27+L+F%27+U%27+L%27+%2F%2F+XX-Cross+%2B+EO%0AU%27+R+U+R%27+%2F%2F+3rd+slot%0AR%27+U+R+U2%27+R%27+U+R+%2F%2F+4th+slot%0AU+R%27+U%27+R+U%27+R%27+U2+R+%2F%2F+OLL+%2F+ZBLL%0AU+%2F%2F+AUF%0A%0A%2F%2F+from+http%3A%2F%2Fcubesolv.es%2Fsolve%2F5757&setup-alg=F+U2+L2+B2+F%27+U+L2+U+R2+D2+L%27+B+L2+B%27+R2+U2"
+        ></a>
+      </twizzle-link>
+    </div>
+  </body>
+</html>