[twizzle/edit] Update to v2 elems!

This was the minimum to get things to pass the type system again. It almost certainly doesn't work.
cubing · Aug 28, 2021 · 53e4c8f · 53e4c8f
1 parent fc0f853
commit 53e4c8f
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 64 deletions.
diff --git a/src/cubing/twisty/index.ts b/src/cubing/twisty/index.ts
@@ -1,6 +1,8 @@
 export { TwistyPlayerV2 } from "./views/TwistyPlayerV2";
 export type { TwistyPlayerV2Config } from "./views/TwistyPlayerV2";
 
+export { TwistyAlgEditorV2 } from "./views/TwistyAlgEditor/TwistyAlgEditorV2";
+
 // Old
 export type { Twisty3DPuzzle } from "./views/3D/puzzles/Twisty3DPuzzle";
 export {

diff --git a/src/sites/alpha.twizzle.net/edit/app.ts b/src/sites/alpha.twizzle.net/edit/app.ts
@@ -1,34 +1,34 @@
-import { KPuzzle } from "../../../cubing/kpuzzle";
 import { Alg, AlgBuilder, LineComment, Newline } from "../../../cubing/alg";
+import { experimentalEnsureAlg } from "../../../cubing/alg/Alg";
+import { KPuzzle } from "../../../cubing/kpuzzle";
 import { puzzles } from "../../../cubing/puzzles";
-import "../../../cubing/twisty"; // For `<twisty-alg-editor>` custom elem registration.
-import type { Twisty3DCanvas, TwistyAlgEditor } from "../../../cubing/twisty";
-import {
-  ExperimentalStickering,
-  TwistyPlayer,
-  TwistyPlayerInitialConfig,
-} from "../../../cubing/twisty";
-import { findOrCreateChild, findOrCreateChildWithClass } from "./dom";
-import { APP_TITLE } from "./strings";
-import { puzzleGroups, supportedPuzzles } from "./supported-puzzles";
-import { getURLParam, setURLParams } from "./url-params";
+import { cube2x2x2KPuzzle } from "../../../cubing/puzzles/implementations/2x2x2/2x2x2.kpuzzle.json_";
 import { cube3x3x3KPuzzle } from "../../../cubing/puzzles/implementations/3x3x3/3x3x3.kpuzzle.json_";
+import { randomScrambleForEvent } from "../../../cubing/scramble";
 import {
   experimentalSolve2x2x2,
   experimentalSolve3x3x3IgnoringCenters,
   solveMegaminx,
   solvePyraminx,
   solveSkewb,
 } from "../../../cubing/search";
-import { cube2x2x2KPuzzle } from "../../../cubing/puzzles/implementations/2x2x2/2x2x2.kpuzzle.json_";
-import { randomScrambleForEvent } from "../../../cubing/scramble";
+import type { PuzzleStreamMoveEventRegisterCompatible } from "../../../cubing/stream/process/ReorientedStream";
+import "../../../cubing/twisty"; // For `<twisty-alg-editor>` custom elem registration.
+import {
+  ExperimentalStickering,
+  TwistyPlayerV2,
+  TwistyPlayerV2Config,
+} from "../../../cubing/twisty";
 import { customElementsShim } from "../../../cubing/twisty/old/dom/element/node-custom-element-shims";
-import { examples } from "./examples";
-import { experimentalEnsureAlg } from "../../../cubing/alg/Alg";
 import "../../../cubing/twisty/old/dom/stream/TwistyStreamSource";
 import type { TwistyStreamSource } from "../../../cubing/twisty/old/dom/stream/TwistyStreamSource";
-import type { PuzzleStreamMoveEventRegisterCompatible } from "../../../cubing/stream/process/ReorientedStream";
 import type { PuzzleID } from "../../../cubing/twisty/old/dom/TwistyPlayerConfig";
+import type { TwistyAlgEditorV2 } from "../../../cubing/twisty/views/TwistyAlgEditor/TwistyAlgEditorV2";
+import { findOrCreateChild, findOrCreateChildWithClass } from "./dom";
+import { examples } from "./examples";
+import { APP_TITLE } from "./strings";
+import { puzzleGroups, supportedPuzzles } from "./supported-puzzles";
+import { setURLParams } from "./url-params";
 
 export interface AppData {
   puzzleName: string;
@@ -68,7 +68,7 @@ const SCRAMBLE_EVENTS: Partial<Record<PuzzleID, string>> = {
 };
 
 export class App {
-  public twistyPlayer: TwistyPlayer;
+  public twistyPlayer: TwistyPlayerV2;
   private puzzlePane: HTMLElement;
   private cachedSetupAnchor: "start" | "end";
   private controlPane: ControlPane;
@@ -113,7 +113,7 @@ export class App {
   }
 
   private initializeTwisty(initialData: AppData): void {
-    const twistyConfig: TwistyPlayerInitialConfig = {
+    const twistyConfig: TwistyPlayerV2Config = {
       alg: new Alg(),
       viewerLink: "none",
     };
@@ -122,10 +122,7 @@ export class App {
     twistyConfig.visualization = displayablePuzzle.viz;
     twistyConfig.experimentalSetupAnchor = initialData.experimentalSetupAnchor;
     twistyConfig.experimentalStickering = initialData.experimentalStickering;
-    this.twistyPlayer = new TwistyPlayer(twistyConfig);
-    if (getURLParam("debug-simultaneous")) {
-      this.twistyPlayer.experimentalSetCursorIndexer("simultaneous");
-    }
+    this.twistyPlayer = new TwistyPlayerV2(twistyConfig);
     this.setExperimentalSetupAlg(initialData.experimentalSetupAlg);
     this.setAlg(initialData.alg);
     this.puzzlePane.appendChild(this.twistyPlayer);
@@ -135,7 +132,7 @@ export class App {
   private setExperimentalSetupAlg(experimentalSetupAlg: Alg): boolean {
     try {
       this.twistyPlayer.experimentalSetupAlg = experimentalSetupAlg;
-      this.twistyPlayer.timeline.jumpToStart();
+      this.twistyPlayer.jumpToStart();
       setURLParams({ "experimental-setup-alg": experimentalSetupAlg });
       return true;
     } catch (e) {
@@ -149,9 +146,9 @@ export class App {
     try {
       this.twistyPlayer.alg = alg;
       if (this.cachedSetupAnchor === "start") {
-        this.twistyPlayer.timeline.jumpToEnd();
+        this.twistyPlayer.jumpToEnd();
       } else {
-        this.twistyPlayer.timeline.jumpToStart();
+        this.twistyPlayer.jumpToStart();
       }
       setURLParams({ alg });
       return true;
@@ -279,8 +276,8 @@ class ButtonGrid extends HTMLElement {
 customElementsShim.define("button-grid", ButtonGrid);
 
 class ControlPane {
-  public experimentalSetupAlgInput: TwistyAlgEditor;
-  public algInput: TwistyAlgEditor;
+  public experimentalSetupAlgInput: TwistyAlgEditorV2;
+  public algInput: TwistyAlgEditorV2;
   public puzzleSelect: HTMLSelectElement;
   public setupAnchorSelect: HTMLSelectElement;
   public stickeringSelect: HTMLSelectElement;
@@ -303,16 +300,16 @@ class ControlPane {
     ) => boolean,
     private solve: () => void,
     private scramble: () => void,
-    private twistyPlayer: TwistyPlayer,
+    private twistyPlayer: TwistyPlayerV2,
   ) {
     const appTitleElem = findOrCreateChildWithClass(this.element, "title");
     appTitleElem.textContent = APP_TITLE;
 
     this.experimentalSetupAlgInput = findOrCreateChildWithClass(
       this.element,
       "experimental-setup-alg",
-      "twisty-alg-editor",
-    ) as TwistyAlgEditor;
+      "twisty-alg-editor-v2",
+    ) as TwistyAlgEditorV2;
     this.experimentalSetupAlgInput.twistyPlayer = twistyPlayer;
     this.experimentalSetupAlgInput.algString =
       initialData.experimentalSetupAlg.toString();
@@ -321,8 +318,8 @@ class ControlPane {
     this.algInput = findOrCreateChildWithClass(
       this.element,
       "alg",
-      "twisty-alg-editor",
-    ) as TwistyAlgEditor;
+      "twisty-alg-editor-v2",
+    ) as TwistyAlgEditorV2;
     this.algInput, { twistyPlayer };
     this.algInput.twistyPlayer = twistyPlayer;
     this.algInput.algString = initialData.alg.toString();
@@ -414,12 +411,12 @@ class ControlPane {
     const move = e.detail.move;
     let alg = this.twistyPlayer.alg;
     try {
-      this.twistyPlayer.experimentalAddMove(move, true);
+      this.twistyPlayer.experimentalAddMove(move); // TODO
       alg = this.twistyPlayer.alg;
     } catch (e) {
       console.info("Ignoring move:", move.toString());
     }
-    this.algInput.algString = alg.toString();
+    // this.algInput.algString = alg;
     setURLParams({ alg });
   }
 
@@ -489,7 +486,7 @@ class ControlPane {
 
   private onTempoInput(): void {
     const tempoScale = parseFloat(this.tempoInput.value);
-    this.twistyPlayer.timeline.tempoScale = tempoScale;
+    this.twistyPlayer.tempoScale = tempoScale;
     this.tempoDisplay.textContent = `${tempoScale}×`;
   }
 
@@ -499,20 +496,24 @@ class ControlPane {
       : "none";
   }
 
-  private onToolAction(e: CustomEvent<{ action: string }>): void {
+  private async onToolAction(
+    e: CustomEvent<{ action: string }>,
+  ): Promise<void> {
     switch (e.detail.action) {
       case "expand":
-        this.setAlg(this.twistyPlayer.alg.expand());
+        this.setAlg((await this.twistyPlayer.model.algProp.get()).alg.expand());
         break;
       case "simplify":
-        this.setAlg(this.twistyPlayer.alg.simplify());
+        this.setAlg(
+          (await this.twistyPlayer.model.algProp.get()).alg.simplify(),
+        );
         break;
       case "clear":
         this.setAlg(new Alg());
         this.setExperimentalSetupAlg(new Alg());
         break;
       case "invert":
-        this.setAlg(this.twistyPlayer.alg.invert());
+        this.setAlg((await this.twistyPlayer.model.algProp.get()).alg.invert());
         break;
       case "solve":
         this.solve();
@@ -532,22 +533,7 @@ class ControlPane {
   }
 
   private screenshot(): void {
-    const elem = this.app.twistyPlayer.viewerElems[0] as
-      | Twisty3DCanvas
-      | undefined;
-    if (elem) {
-      const url = elem.renderToDataURL({
-        squareCrop: true,
-        minWidth: 2048,
-        minHeight: 2048,
-      });
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `[${
-        this.app.twistyPlayer.puzzle
-      }] ${this.app.twistyPlayer.alg.toString()}.png`;
-      a.click();
-    }
+    this.app.twistyPlayer.experimentalDownloadScreenshot();
   }
 
   private connectInput(): void {

diff --git a/src/sites/alpha.twizzle.net/edit/control-pane.css b/src/sites/alpha.twizzle.net/edit/control-pane.css
@@ -38,19 +38,19 @@ control-pane h2 {
   border-top: 1px solid rgba(0, 0, 0, 0.5);
 }
 
-control-pane twisty-alg-editor {
+control-pane twisty-alg-editor-v2 {
   width: 100%;
   --border-color: rgba(0, 0, 0, 0);
   --font-family: "Ubuntu", Verdana, Tahoma, sans-serif;
   --font-size: 1.5em;
   --padding: 0.75em;
 }
 
-control-pane twisty-alg-editor:focus-within {
+control-pane twisty-alg-editor-v2:focus-within {
   --background: rgb(255, 253, 251);
 }
 
-control-pane twisty-alg-editor:hover {
+control-pane twisty-alg-editor-v2:hover {
   background: white;
 }
 

diff --git a/src/sites/alpha.twizzle.net/edit/index.css b/src/sites/alpha.twizzle.net/edit/index.css
@@ -36,7 +36,7 @@ puzzle-pane.loading {
   place-content: center;
 }
 
-puzzle-pane twisty-player {
+puzzle-pane twisty-player-v2 {
   width: 100%;
   height: 100%;
   overflow: hidden;

diff --git a/src/sites/alpha.twizzle.net/edit/index.html b/src/sites/alpha.twizzle.net/edit/index.html
@@ -34,11 +34,11 @@ <h2>
           </a>
         </expand-button>
         <section id="setup" class="unpadded">
-          <twisty-alg-editor
+          <twisty-alg-editor-v2
             class="experimental-setup-alg"
             placeholder="[Click here to add anchor setup alg.]"
             twisty-player-prop="experimentalSetupAlg"
-          ></twisty-alg-editor>
+          ></twisty-alg-editor-v2>
         </section>
         <div id="moves-sticky-wrapper">
           <expand-button for="moves" expanded="true" exclusive="false">
@@ -50,10 +50,10 @@ <h2>
             </a>
           </expand-button>
           <section id="moves" class="unpadded">
-            <twisty-alg-editor
+            <twisty-alg-editor-v2
               class="alg"
               placeholder="[Click here to add alg.]"
-            ></twisty-alg-editor>
+            ></twisty-alg-editor-v2>
           </section>
         </div>
         <expand-button for="puzzle-settings" expanded="true">

diff --git a/src/sites/alpha.twizzle.net/index.css b/src/sites/alpha.twizzle.net/index.css
@@ -0,0 +1,43 @@
+@font-face {
+  font-family: "Ubuntu";
+  src: url("../vendor/fonts/ubuntu/Ubuntu-Regular.ttf");
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+app {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  background: rgb(255, 245, 235);
+}
+
+puzzle-pane {
+  grid-area: "puzzle";
+
+  background-size: 32px 32px;
+  background-position: 0 0, 16px 16px;
+
+  display: grid;
+
+  overflow: hidden;
+}
+
+puzzle-pane.loading {
+  place-content: center;
+}
+
+puzzle-pane twisty-player {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}