From b0e7d48ab384c5dfc8311200d35b45fded999177 Mon Sep 17 00:00:00 2001
From: Lucas Garron <code@garron.net>
Date: Mon, 7 Oct 2024 09:55:19 -0700
Subject: [PATCH] [twizzle/edit] Auto-detect incompatible notation.

---
 src/sites/alpha.twizzle.net/edit/app.ts     | 38 ++++++++++++++++++++-
 src/sites/alpha.twizzle.net/edit/index.html |  6 ++++
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/sites/alpha.twizzle.net/edit/app.ts b/src/sites/alpha.twizzle.net/edit/app.ts
index 0a4ec15b4..5114dfbf0 100644
--- a/src/sites/alpha.twizzle.net/edit/app.ts
+++ b/src/sites/alpha.twizzle.net/edit/app.ts
@@ -118,6 +118,42 @@ export class App {
     initialConfig.viewerLink = "none";
     this.twistyPlayer = new TwistyPlayer(initialConfig);
     this.puzzlePane.appendChild(this.twistyPlayer);
+    (async () => {
+      const [puzzleAlgWithIssue, puzzleSetupAlgWithIssue] = await Promise.all([
+        this.twistyPlayer.experimentalModel.puzzleAlg.get(),
+        this.twistyPlayer.experimentalModel.puzzleSetupAlg.get(),
+      ]);
+      if (
+        puzzleAlgWithIssue.issues.errors.length > 0 ||
+        puzzleSetupAlgWithIssue.issues.errors.length > 0
+      ) {
+        const [algWithIssue, setupAlgWithIssue] = await Promise.all([
+          this.twistyPlayer.experimentalModel.alg.get(),
+          this.twistyPlayer.experimentalModel.setupAlg.get(),
+        ]);
+        for (const puzzleID of ["square1", "clock", "megaminx"]) {
+          const puzzleLoader = puzzles[puzzleID];
+          const kpuzzle = await puzzleLoader.kpuzzle();
+          try {
+            if (
+              algWithIssue.issues.errors.length === 0 &&
+              setupAlgWithIssue.issues.errors.length === 0 &&
+              kpuzzle.defaultPattern().applyAlg(algWithIssue.alg) &&
+              kpuzzle.defaultPattern().applyAlg(setupAlgWithIssue.alg) // TODO: This ignores e.g. bandaging
+            ) {
+              this.element.querySelector(".auto-notation-puzzle")!.textContent =
+                puzzleLoader.fullName;
+              this.element.querySelector<HTMLSpanElement>(
+                ".auto-notation",
+              )!.hidden = false;
+              this.controlPane.puzzleSelect.value = puzzleID;
+              this.controlPane.puzzleSelectChanged();
+              return;
+            }
+          } catch {}
+        }
+      }
+    })();
   }
 
   async solve(): Promise<void> {
@@ -545,7 +581,7 @@ class ControlPane {
     );
   }
 
-  private puzzleSelectChanged(): void {
+  puzzleSelectChanged(): void {
     const option = this.puzzleSelect.selectedOptions[0];
     this.twistyPlayer.puzzle = option.value as PuzzleID;
   }
diff --git a/src/sites/alpha.twizzle.net/edit/index.html b/src/sites/alpha.twizzle.net/edit/index.html
index 3c8ccc984..6cd1a9ca6 100644
--- a/src/sites/alpha.twizzle.net/edit/index.html
+++ b/src/sites/alpha.twizzle.net/edit/index.html
@@ -25,6 +25,12 @@
         <a href="" class="metadata-url video-url"></a>
         <a href="" class="metadata-url competition-url"></a>
       </section>
+      <div class="alg-features">
+        <p class="auto-notation" hidden>
+          The puzzle has been automatically changed to <span class="auto-notation-puzzle"></span> based on the provided
+          notation.
+        </p>
+      </div>
       <expand-button for="setup" expanded="true" exclusive="false">
         <a href="#">
           <h2>