Add a "scramble-cleared" event to <scramble-table>`.

Author: lgarron

src/dev/main.ts

@@ -9,6 +9,13 @@ declare global {
 const app = document.body.appendChild(new ScrambleTable());
 globalThis.app = app;
 
+app.addEventListener(
+  "scramble-cleared",
+  (e: CustomEvent<{ displayIndex: number }>) => {
+    console.log(`Scramble cleared for display index: ${e.detail.displayIndex}`);
+  },
+);
+
 app.displays[0].setScramble({
   competitorName: "Amelia Multicube",
   competitorCompetitionID: 11,

src/lib/elements/CompetitorScrambleDisplay.ts

@@ -23,7 +23,11 @@ function nextUnassigned(): string {
 }
 
 export class CompetitorScrambleDisplay extends HTMLElement {
-  constructor(private sharedState: SharedState, private displayIndex: number) {
+  constructor(
+    private sharedState: SharedState,
+    private displayIndex: number,
+    private onScrambleCleared: () => void,
+  ) {
     super();
   }
 
@@ -99,6 +103,7 @@ export class CompetitorScrambleDisplay extends HTMLElement {
     this.querySelector<HTMLButtonElement>(".multi .next").disabled = true;
     this.querySelector<HTMLButtonElement>(".multi .all").disabled = true;
     this.#hideAdditionalActions();
+    this.onScrambleCleared();
   }
 
   #info: AttemptScrambleInfo | undefined;

src/lib/elements/ScrambleTable.ts

@@ -37,6 +37,12 @@ const DEFAULT_SET_SCRAMBLER_CALLBACK = async (
   return prompt(`Please enter the name of scrambler ${displayIndex + 1}:`);
 };
 
+/**
+ *
+ * Dispatches the following events:
+ *
+ * - `"scramble-cleared"`
+ */
 export class ScrambleTable
   extends HTMLElement
   implements ScrambleJSONCacheDelegate
@@ -63,6 +69,16 @@ export class ScrambleTable
     this.#initializeSettings();
   }
 
+  #onScrambleCleared(displayIndex: number) {
+    this.dispatchEvent(
+      new CustomEvent("scramble-cleared", {
+        detail: {
+          displayIndex,
+        },
+      }),
+    );
+  }
+
   #initializeSettings() {
     this.querySelector("header .settings-button").addEventListener(
       "click",
@@ -131,7 +147,9 @@ export class ScrambleTable
     const idx = this.displays.length;
     this.displays.push(
       this.querySelector("scramble-table-contents").appendChild(
-        new CompetitorScrambleDisplay(this.sharedState, idx),
+        new CompetitorScrambleDisplay(this.sharedState, idx, () => {
+          this.#onScrambleCleared(idx);
+        }),
       ),
     );
   }