cubing 0.20.2 → 0.21.0-pre12

package/src/cubing/twisty/model/props/TwistyPropDebugger.ts

@@ -0,0 +1,370 @@
+import type { Alg } from "../../../alg";
+import { countMoves } from "../../../notation";
+import { ClassListManager } from "../../old/dom/element/ClassListManager";
+import {
+  CSSSource,
+  ManagedCustomElement,
+} from "../../old/dom/element/ManagedCustomElement";
+import { customElementsShim } from "../../old/dom/element/node-custom-element-shims";
+import type { TwistyPlayer } from "../../views/TwistyPlayer";
+import type { AlgIssues } from "./puzzle/state/AlgProp";
+import type { TwistyPropParent } from "./TwistyProp";
+
+export function splitFieldName(s: string): string {
+  let out = "";
+  for (const c of s.slice(0, -4)) {
+    if (c.toUpperCase() === c && out.slice(-1)[0] !== "3") {
+      out += " ";
+    }
+    out += c.toLowerCase();
+  }
+  return out;
+}
+
+function truncateAlgForDisplay(alg: Alg): string {
+  let str = alg.toString();
+  if (str.length < 50) {
+    return str;
+  }
+  str = str.slice(0, 50);
+  const lastSpace = str.lastIndexOf(" ");
+  if (lastSpace !== -1) {
+    str = str.slice(0, lastSpace) + "…";
+  }
+  return str;
+}
+
+export class TwistyPropDebugger extends ManagedCustomElement {
+  constructor(private name: string, public twistyProp: TwistyPropParent<any>) {
+    super();
+  }
+
+  valueElem: HTMLElement | null = null;
+
+  connectedCallback(): void {
+    const span = document.createElement("span");
+    span.textContent = this.name;
+    this.contentWrapper.append(span);
+
+    this.valueElem = this.contentWrapper.appendChild(
+      document.createElement("div"),
+    );
+    this.twistyProp.addRawListener(this.onPropRaw.bind(this));
+    this.twistyProp.addFreshListener(this.onProp.bind(this));
+
+    this.addCSS(
+      new CSSSource(`
+
+.wrapper {
+  font-family: Ubuntu, sans-serif;
+  display: grid;
+  grid-template-rows: 1.5em 3.5em;
+  max-width: 20em;
+
+  border: 2px solid #ddd;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  cursor: pointer;
+}
+
+.wrapper > :nth-child(2) {
+  border-top: 1px solid #000;
+  width: 100%;
+  height: 3.5em;
+  overflow-wrap: anywhere;
+  padding: 0.25em;
+}
+
+.wrapper > span {
+  padding: 0.25em;
+  max-width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 1em;
+}
+
+.wrapper.highlight-de-emphasize {
+  opacity: 0.25;
+}
+
+/* .wrapper:hover > span::before { content: "⭐️ "; margin-right: 0.1em; } */
+
+.wrapper.highlight-grandchild-or-further,
+.wrapper.highlight-grandparent-or-further                { background: rgba(0, 0, 0, 0.2); }
+.wrapper.highlight-grandparent-or-further > span::before { content: "⏬ "; margin-right: 0.1em; }
+
+.wrapper.highlight-child,
+.wrapper.highlight-parent                { background: rgba(0, 0, 0, 0.6); color: white; }
+.wrapper.highlight-parent > span::before { content: "🔽 "; margin-right: 0.1em; }
+
+.wrapper.highlight-self                { background: rgba(0, 0, 0, 0.8); color: white; }
+.wrapper.highlight-self > span::before { content: "⭐️ "; margin-right: 0.1em; }
+
+.wrapper.highlight-child > span::before { content: "🔼 "; margin-right: 0.1em; }
+
+.wrapper.highlight-grandchild-or-further > span::before { content: "⏫ "; margin-right: 0.1em; }
+
+.wrapper:hover {
+  border: 2px solid #000;
+  opacity: 1;
+}
+
+.wrapper.highlight-self:hover {
+  /* border: 2px solid #f00; */
+}
+.wrapper.highlight-self:hover > span::before { content: "🌟 "; margin-right: 0.1em; }
+
+    `),
+    );
+  }
+
+  async onPropRaw(): Promise<void> {
+    // TODO: Animate `opacity` on overlapping elements for better perf.
+    this.valueElem?.animate(
+      [
+        // keyframes
+        { background: "rgba(244, 133, 66, 0.4)" },
+        { background: "transparent" },
+      ],
+      {
+        duration: 500,
+      },
+    );
+  }
+
+  async onProp(value: any): Promise<void> {
+    // console.log("onProp", value, this.valueElem, JSON.stringify(value));
+
+    function isAlgIssues(v: any): boolean {
+      try {
+        return v instanceof Object && "alg" in v && "issues" in v;
+      } catch (e) {
+        return false;
+      }
+    }
+
+    let str: string;
+    try {
+      if (typeof value === "undefined") {
+        str = "(undefined)";
+      } else if (isAlgIssues(value)) {
+        const typedAlgIssues = value.issues as AlgIssues;
+        str = `Alg`;
+        if (typedAlgIssues.errors.length > 0) {
+          str += ` 🚨 ${typedAlgIssues.errors[0]}`;
+        } else {
+          const numMoves = countMoves(value.alg);
+          str += ` (${numMoves} moves)`;
+          if (numMoves > 0) {
+            str += `: ${truncateAlgForDisplay(value.alg)}`;
+          }
+        }
+        if (typedAlgIssues.warnings.length > 0) {
+          str += ` ⚠️ ${typedAlgIssues.warnings[0]}`;
+        }
+      } else {
+        const str1 = JSON.stringify(value);
+        if (typeof str1 === "undefined") {
+          if (value.name) {
+            str = `${value.name as string} (constructor)`;
+          } else {
+            str = "(undefined)";
+          }
+        } else {
+          str = str1.slice(0, 100);
+        }
+      }
+    } catch (e) {
+      str = "(can't be serialized)";
+    }
+
+    if (this.valueElem) {
+      this.valueElem.textContent = str;
+    }
+
+    // TODO: Animate `opacity` on overlapping elements for better perf.
+    this.valueElem?.animate(
+      [
+        // keyframes
+        { background: "rgba(90, 160, 253, 0.4)" },
+        { background: "transparent" },
+      ],
+      {
+        duration: 500,
+      },
+    );
+  }
+
+  #highlightClassManager = new ClassListManager(this, "highlight-", [
+    "de-emphasize",
+    "grandparent-or-further",
+    "parent",
+    "self",
+    "child",
+    "grandchild-or-further",
+  ]);
+
+  setHighlight(
+    highlightType:
+      | "de-emphasize"
+      | "grandparent-or-further"
+      | "parent"
+      | "self"
+      | "child"
+      | "grandchild-or-further"
+      | null,
+  ): void {
+    if (highlightType !== null) {
+      this.#highlightClassManager.setValue(highlightType);
+    } else {
+      this.#highlightClassManager.clearValue();
+    }
+  }
+}
+
+customElementsShim.define("twisty-prop-debugger", TwistyPropDebugger);
+
+export class TwistyPlayerDebugger extends ManagedCustomElement {
+  constructor(private player: TwistyPlayer) {
+    super({ mode: "open" });
+  }
+
+  connectedCallback(): void {
+    this.addCSS(
+      new CSSSource(`
+.wrapper {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
+}
+
+twisty-prop-debugger.hidden {
+  /* display: none; */
+}
+
+twisty-prop-debugger.first-in-group,
+twisty-prop-debugger.highlighted {
+  /* grid-column-start: 1; */
+}
+
+twisty-prop-debugger.highlighted {
+  /* grid-column: 1 / -1; */
+  /* margin: 1em 0; */
+}
+`),
+    );
+
+    for (const [key, value] of Object.entries(this.player.experimentalModel)) {
+      if (key.endsWith("Prop")) {
+        const twistyPropDebugger = this.addElement(
+          new TwistyPropDebugger(splitFieldName(key), value),
+        );
+        this.twistyPropDebuggers.set(value, twistyPropDebugger);
+        this.parentPropElems.set(twistyPropDebugger, new Set());
+        this.childPropElems.set(twistyPropDebugger, new Set());
+
+        twistyPropDebugger.addEventListener("click", () => {
+          this.highlightFamilyTree(twistyPropDebugger);
+        });
+      }
+    }
+
+    for (const twistyPropDebuggerParent of this.twistyPropDebuggers.values()) {
+      for (const childProp of twistyPropDebuggerParent.twistyProp.debugGetChildren()) {
+        const childElem = this.twistyPropDebuggers.get(childProp)!;
+        if (!childElem) {
+          throw new Error("inconsistency!");
+        }
+        this.parentPropElems.get(childElem)!.add(twistyPropDebuggerParent);
+        this.childPropElems.get(twistyPropDebuggerParent)!.add(childElem);
+      }
+    }
+  }
+
+  twistyPropDebuggers: Map<TwistyPropParent<any>, TwistyPropDebugger> =
+    new Map();
+
+  parentPropElems: Map<TwistyPropDebugger, Set<TwistyPropDebugger>> = new Map();
+  childPropElems: Map<TwistyPropDebugger, Set<TwistyPropDebugger>> = new Map();
+
+  currentHighlighted: TwistyPropDebugger | null = null;
+  highlightFamilyTree(prop: TwistyPropDebugger) {
+    if (this.currentHighlighted === prop) {
+      for (const propToClear of this.twistyPropDebuggers.values()) {
+        propToClear.setHighlight(null);
+        propToClear.classList.remove("hidden");
+        propToClear.classList.remove("first-in-group");
+        propToClear.classList.remove("highlighted");
+      }
+      this.currentHighlighted = null;
+      return;
+    }
+
+    for (const propToClear of this.twistyPropDebuggers.values()) {
+      propToClear.setHighlight("de-emphasize");
+      propToClear.classList.add("hidden");
+      propToClear.classList.remove("first-in-group");
+      propToClear.classList.remove("highlighted");
+    }
+
+    prop.setHighlight("self");
+    prop.classList.remove("hidden");
+    prop.classList.add("highlighted");
+    this.currentHighlighted = prop;
+
+    const children = this.childPropElems.get(prop)!;
+    let firstInGroup: boolean = true;
+    for (const descendant of this.getDescendants(prop)) {
+      descendant.setHighlight(
+        children.has(descendant) ? "child" : "grandchild-or-further",
+      );
+      descendant.classList.remove("hidden");
+      if (firstInGroup) {
+        descendant.classList.add("first-in-group");
+        firstInGroup = false;
+      }
+    }
+
+    const parents = this.parentPropElems.get(prop)!;
+    firstInGroup = true;
+    for (const ancestor of this.getAncestors(prop)) {
+      ancestor.setHighlight(
+        parents.has(ancestor) ? "parent" : "grandparent-or-further",
+      );
+      ancestor.classList.remove("hidden");
+      if (firstInGroup) {
+        ancestor.classList.add("first-in-group");
+        firstInGroup = false;
+      }
+    }
+  }
+
+  getDescendants(
+    prop: TwistyPropDebugger,
+    accumulator: Set<TwistyPropDebugger> = new Set(),
+  ): Set<TwistyPropDebugger> {
+    for (const child of this.childPropElems.get(prop) ?? []) {
+      if (!accumulator.has(child)) {
+        accumulator.add(child);
+        this.getDescendants(child, accumulator);
+      }
+    }
+    return accumulator;
+  }
+
+  getAncestors(
+    prop: TwistyPropDebugger,
+    accumulator: Set<TwistyPropDebugger> = new Set(),
+  ): Set<TwistyPropDebugger> {
+    for (const child of this.parentPropElems.get(prop) ?? []) {
+      if (!accumulator.has(child)) {
+        accumulator.add(child);
+        this.getAncestors(child, accumulator);
+      }
+    }
+    return accumulator;
+  }
+}
+
+customElementsShim.define("twisty-player-debugger", TwistyPlayerDebugger);

package/src/cubing/twisty/model/props/general/URLProp.ts

@@ -0,0 +1,14 @@
+import { TwistyPropSource } from "../TwistyProp";
+
+export class URLProp extends TwistyPropSource<URL | null, URL | string | null> {
+  getDefaultValue(): URL | null {
+    return null;
+  }
+
+  derive(input: URL | string | null): URL | null {
+    if (typeof input === "string") {
+      return new URL(input, location.href); // TODO
+    }
+    return input;
+  }
+}

package/src/cubing/twisty/model/props/puzzle/display/HintFaceletProp.ts

@@ -0,0 +1,10 @@
+import type { HintFaceletStyle } from "../../../../old/dom/TwistyPlayerConfig";
+import { SimpleTwistyPropSource } from "../../TwistyProp";
+
+export type HintFaceletStyleWithAuto = HintFaceletStyle | "auto";
+
+export class HintFaceletProp extends SimpleTwistyPropSource<HintFaceletStyleWithAuto> {
+  getDefaultValue(): HintFaceletStyleWithAuto {
+    return "auto";
+  }
+}

package/src/cubing/twisty/model/props/puzzle/display/SpriteProp.ts

@@ -0,0 +1,43 @@
+import type { Texture, TextureLoader } from "three";
+import { THREEJS } from "../../../../heavy-code-imports/3d";
+import { TwistyPropDerived } from "../../TwistyProp";
+
+let cachedLoader: TextureLoader | null = null;
+async function loader(): Promise<TextureLoader> {
+  return (cachedLoader ??= new (await THREEJS).TextureLoader());
+}
+
+type SpritePropInputs = {
+  spriteURL: URL | null;
+};
+
+// TODO: Find a way to make the 3D elements own this, instead of the main `TwistyPlayerModel`.
+export class SpriteProp extends TwistyPropDerived<
+  SpritePropInputs,
+  Texture | null
+> {
+  async derive(inputs: SpritePropInputs): Promise<Texture | null> {
+    const { spriteURL: textureURL } = inputs;
+    if (textureURL === null) {
+      return null;
+    }
+    // eslint-disable-next-line no-async-promise-executor
+    return new Promise(async (resolve, _reject) => {
+      const onLoadingError = (): void => {
+        console.warn("Could not load sprite:", textureURL.toString());
+        resolve(null);
+      };
+      // TODO: provide a way to listen for errors?
+      try {
+        (await loader()).load(
+          textureURL.toString(),
+          resolve,
+          onLoadingError,
+          onLoadingError,
+        );
+      } catch (e) {
+        onLoadingError();
+      }
+    });
+  }
+}

package/src/cubing/twisty/model/props/puzzle/display/StickeringProp.ts

@@ -0,0 +1,8 @@
+import type { ExperimentalStickering } from "../../../..";
+import { SimpleTwistyPropSource } from "../../TwistyProp";
+
+export class StickeringProp extends SimpleTwistyPropSource<ExperimentalStickering> {
+  getDefaultValue(): ExperimentalStickering {
+    return "full"; // TODO: auto
+  }
+}

package/src/cubing/twisty/model/props/puzzle/state/AlgProp.ts

@@ -0,0 +1,91 @@
+import { Alg } from "../../../../../alg";
+import { arrayEquals } from "../../../helpers";
+import { TwistyPropSource } from "../../TwistyProp";
+
+export class AlgIssues {
+  // TODO: (string | Error)[]
+
+  readonly warnings: readonly string[];
+  readonly errors: readonly string[];
+
+  constructor(issues?: { warnings?: string[]; errors?: string[] }) {
+    // TODO: clone inputs?
+    this.warnings = Object.freeze(issues?.warnings ?? []);
+    this.errors = Object.freeze(issues?.errors ?? []);
+    Object.freeze(this);
+  }
+
+  add(issues?: { warnings?: string[]; errors?: string[] }) {
+    return new AlgIssues({
+      warnings: this.warnings.concat(issues?.warnings ?? []),
+      errors: this.errors.concat(issues?.errors ?? []),
+    });
+  }
+
+  /** @deprecated */
+  log() {
+    if (this.errors.length > 0) {
+      console.error(`🚨 ${this.errors[0]}`);
+    } else if (this.warnings.length > 0) {
+      console.warn(`⚠️ ${this.warnings[0]}`);
+    } else {
+      console.info("😎 No issues!");
+    }
+  }
+}
+
+export interface AlgWithIssues {
+  alg: Alg;
+  issues: AlgIssues;
+}
+
+export function algWithIssuesFromString(s: string): AlgWithIssues {
+  try {
+    const alg = Alg.fromString(s); // TODO: is this safe?
+    const warnings = [];
+    if (alg.toString() !== s) {
+      // TODO: Push this check into the parser and return semantic info (so they can be e.g. highlighted).
+      warnings.push(`Alg is non-canonical!`);
+    }
+    return {
+      alg,
+      issues: new AlgIssues({ warnings }),
+    };
+  } catch (e) {
+    return {
+      alg: new Alg(),
+      issues: new AlgIssues({
+        errors: [`Malformed alg: ${(e as Error).toString()}`],
+      }),
+    };
+  }
+}
+
+function algWithIssuesEquals(a1: AlgWithIssues, a2: AlgWithIssues): boolean {
+  return (
+    a1.alg.isIdentical(a2.alg) &&
+    arrayEquals(a1.issues.warnings, a2.issues.warnings) &&
+    arrayEquals(a1.issues.errors, a2.issues.errors)
+  );
+}
+
+export class AlgProp extends TwistyPropSource<AlgWithIssues, Alg | string> {
+  getDefaultValue(): AlgWithIssues {
+    return { alg: new Alg(), issues: new AlgIssues() };
+  }
+
+  canReuseValue(v1: AlgWithIssues, v2: AlgWithIssues) {
+    return algWithIssuesEquals(v1, v2);
+  }
+
+  async derive(newAlg: Alg | string): Promise<AlgWithIssues> {
+    if (typeof newAlg === "string") {
+      return algWithIssuesFromString(newAlg);
+    } else {
+      return {
+        alg: newAlg,
+        issues: new AlgIssues(),
+      };
+    }
+  }
+}

package/src/cubing/twisty/model/props/puzzle/state/AlgTransformationProp.ts

@@ -0,0 +1,28 @@
+import type { Alg } from "../../../../../alg";
+import type { KPuzzleDefinition, Transformation } from "../../../../../kpuzzle";
+import { KPuzzleWrapper } from "../../../../views/3D/puzzles/KPuzzleWrapper";
+import { TreeAlgIndexer } from "../../../../old/animation/indexer/tree/TreeAlgIndexer";
+import type { AlgWithIssues } from "./AlgProp";
+import { TwistyPropDerived } from "../../TwistyProp";
+
+type AlgTransformationPropInputs = {
+  alg: AlgWithIssues;
+  def: KPuzzleDefinition;
+};
+
+export class AlgTransformationProp extends TwistyPropDerived<
+  AlgTransformationPropInputs,
+  Transformation
+> {
+  derive(input: AlgTransformationPropInputs): Transformation {
+    return this.applyAlg(input.def, input.alg.alg);
+  }
+
+  applyAlg(def: KPuzzleDefinition, alg: Alg): Transformation {
+    const kpuzzleWrapper = new KPuzzleWrapper(def); // TODO: Remove this layer.
+    const indexer = new TreeAlgIndexer(kpuzzleWrapper, alg); // TODO: Use a direct efficient traversal in `cubing/kpuzzle` instead of instantiating a whole indexer.
+    return indexer.transformAtIndex(
+      indexer.numAnimatedLeaves(),
+    ) as Transformation;
+  }
+}

package/src/cubing/twisty/model/props/puzzle/state/AnchoredStartProp.ts

@@ -0,0 +1,44 @@
+import {
+  combineTransformations,
+  invertTransformation,
+  KPuzzleDefinition,
+  Transformation,
+} from "../../../../../kpuzzle";
+import type { AlgIndexer } from "../../../../old/animation/indexer/AlgIndexer";
+import type { SetupToLocation } from "../../../../old/dom/TwistyPlayerConfig";
+import { TwistyPropDerived } from "../../TwistyProp";
+
+interface AnchoredStartPropInputs {
+  setupAnchor: SetupToLocation;
+  setupTransformation: Transformation;
+  indexer: AlgIndexer<any>;
+  def: KPuzzleDefinition;
+}
+
+export class AnchoredStartProp extends TwistyPropDerived<
+  AnchoredStartPropInputs,
+  Transformation
+> {
+  derive(inputs: AnchoredStartPropInputs): Transformation {
+    switch (inputs.setupAnchor) {
+      case "start":
+        return inputs.setupTransformation;
+      case "end": {
+        const algTransformation = inputs.indexer.transformAtIndex(
+          inputs.indexer.numAnimatedLeaves(),
+        ) as Transformation;
+        const inverseAlgTransformation = invertTransformation(
+          inputs.def,
+          algTransformation,
+        );
+        return combineTransformations(
+          inputs.def,
+          inputs.setupTransformation,
+          inverseAlgTransformation,
+        );
+      }
+      default:
+        throw new Error("Unimplemented!");
+    }
+  }
+}