cubing 0.23.0 → 0.24.0-pre1

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

@@ -1,370 +0,0 @@
-import type { Alg } from "../../../alg";
-import { countMoves } from "../../../notation";
-import { ClassListManager } from "../../views/ClassListManager";
-import {
-  CSSSource,
-  ManagedCustomElement,
-} from "../../views/ManagedCustomElement";
-import { customElementsShim } from "../../views/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

@@ -1,14 +0,0 @@
-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/FoundationDisplayProp.ts

@@ -1,9 +0,0 @@
-import { SimpleTwistyPropSource } from "../../TwistyProp";
-
-export type FoundationDisplay = "auto" | "opaque" | "none";
-
-export class FoundationDisplayProp extends SimpleTwistyPropSource<FoundationDisplay> {
-  getDefaultValue(): FoundationDisplay {
-    return "auto";
-  }
-}

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

@@ -1,15 +0,0 @@
-import { SimpleTwistyPropSource } from "../../TwistyProp";
-
-// TODO: turn these maps into lists?
-export const hintFaceletStyles = {
-  floating: true, // default
-  none: true,
-};
-export type HintFaceletStyle = keyof typeof hintFaceletStyles;
-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

@@ -1,43 +0,0 @@
-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

@@ -1,56 +0,0 @@
-import { SimpleTwistyPropSource } from "../../TwistyProp";
-
-// TODO: turn these maps into lists?
-// TODO: alg.cubing.net parity
-export const experimentalStickerings = {
-  "full": true, // default
-  "centers-only": true, // TODO
-  "PLL": true,
-  "CLS": true,
-  "OLL": true,
-  "COLL": true,
-  "OCLL": true,
-  "CLL": true,
-  "ELL": true,
-  "ELS": true,
-  "LL": true,
-  "F2L": true,
-  "ZBLL": true,
-  "ZBLS": true,
-  "WVLS": true,
-  "VLS": true,
-  "LS": true,
-  "EO": true,
-  "EOline": true,
-  "EOcross": true,
-  "CMLL": true,
-  "L6E": true,
-  "L6EO": true,
-  "Daisy": true,
-  "Cross": true,
-  "2x2x2": true,
-  "2x2x3": true,
-  "Void Cube": true,
-  "invisible": true,
-  "picture": true,
-  "experimental-centers-U": true,
-  "experimental-centers-U-D": true,
-  "experimental-centers-U-L-D": true,
-  "experimental-centers-U-L-B-D": true,
-  "experimental-centers": true,
-  "experimental-fto-fc": true,
-  "experimental-fto-f2t": true,
-  "experimental-fto-sc": true,
-  "experimental-fto-l2c": true,
-  "experimental-fto-lbt": true,
-  "experimental-fto-l3t": true,
-  "experimental-global-custom-1": true,
-  "experimental-global-custom-2": true,
-};
-export type ExperimentalStickering = keyof typeof experimentalStickerings;
-
-export class StickeringProp extends SimpleTwistyPropSource<ExperimentalStickering> {
-  getDefaultValue(): ExperimentalStickering {
-    return "full"; // TODO: auto
-  }
-}

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

@@ -1,91 +0,0 @@
-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

@@ -1,28 +0,0 @@
-import type { Alg } from "../../../../../alg";
-import type { KPuzzleDefinition, Transformation } from "../../../../../kpuzzle";
-import { KPuzzleWrapper } from "../../../../views/3D/puzzles/KPuzzleWrapper";
-import { TreeAlgIndexer } from "../../../../controllers/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

@@ -1,44 +0,0 @@
-import {
-  combineTransformations,
-  invertTransformation,
-  KPuzzleDefinition,
-  Transformation,
-} from "../../../../../kpuzzle";
-import type { AlgIndexer } from "../../../../controllers/indexer/AlgIndexer";
-import { TwistyPropDerived } from "../../TwistyProp";
-import type { SetupToLocation } from "./SetupAnchorProp";
-
-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!");
-    }
-  }
-}

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

@@ -1,17 +0,0 @@
-import type { Move } from "../../../../../alg";
-import { SimpleTwistyPropSource } from "../../TwistyProp";
-
-export interface CatchUpMove {
-  move: Move | null;
-  amount: number;
-}
-
-export class CatchUpMoveProp extends SimpleTwistyPropSource<CatchUpMove> {
-  getDefaultValue(): CatchUpMove {
-    return { move: null, amount: 0 };
-  }
-
-  canReuseValue(v1: CatchUpMove, v2: CatchUpMove) {
-    return v1.move === v2.move && v1.amount === v2.amount;
-  }
-}