Add a way to clear an individual scramble through an "Additional acti…

…ons…" modal.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cubing/scramble-table",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "publishConfig": {
     "access": "public"

src/lib/elements/CompetitorScrambleDisplay.css

@@ -99,3 +99,28 @@ competitor-scramble-display:not(.show-multi) .multi {
 competitor-scramble-display.show-multi-grid>twisty-player {
   display: none;
 }
+
+
+scramble-table .additional-actions {
+  border: 1px solid var(--scramble-table-border-color);
+  padding: 2em;
+  line-height: 1.5em;
+  color: var(--scramble-table-main-color);
+  backdrop-filter: blur(0.25em);
+  background: color-mix(in oklab, var(--scramble-table-background) 90%, transparent);
+}
+
+scramble-table .additional-actions h1 {
+  margin-top: 0;
+}
+
+scramble-table .additional-actions .close {
+  float: right;
+  position: relative
+}
+
+scramble-table dialog::backdrop {
+  background-color: #444;
+  opacity: 0.75;
+  z-index: 1;
+}

src/lib/elements/CompetitorScrambleDisplay.template.html

@@ -1,8 +1,9 @@
 <template>
   <div class="info">
-    <div class="split scrambler"><span class="scrambler-name">Scrambler</span><button class="set-scrambler"
-        data-original-text="Set scrambler">Set
-        scrambler</button></div>
+    <div class="split scrambler"><span class="scrambler-name">Scrambler</span><span><button class="set-scrambler"
+          data-original-text="Set scrambler">Set
+          scrambler</button>&nbsp;<button class="additional-actions-button"
+          title="Additional actions…">…</button></span></div>
     <div class="competitor"></div>
     <div class="split">
       <div class="event"></div>
@@ -23,4 +24,14 @@
     <button class="next">Next ➡️</button>
     <button class="all">Show All</button>
   </div>
+  <dialog class="additional-actions">
+    <button class="close">Close</button>
+    <br>
+    <br>
+    <h1>Additional&nbsp;actions</h1>
+    <h2>Scrambler: <span class="scrambler-name">Scrambler</span></h2>
+    <hr>
+    <br>
+    <span><button class="clear-scramble">Clear scramble</button></span>
+  </dialog>
 </template>

src/lib/elements/CompetitorScrambleDisplay.ts

@@ -11,6 +11,7 @@ import templateHTML from "./CompetitorScrambleDisplay.template.html";
 import type { SharedState } from "./SharedState";
 import { addCSS, parseHTML } from "./html";
 
+import { Alg } from "cubing/alg";
 import "./MultiBlindGridDisplay";
 
 const template = parseHTML<HTMLTemplateElement>(templateHTML);
@@ -40,12 +41,53 @@ export class CompetitorScrambleDisplay extends HTMLElement {
       "click",
       () => this.#toggleShowAllSubScrambles(),
     );
+    this.querySelector(".clear-scramble")!.addEventListener("click", () =>
+      this.#clearScramble(),
+    );
     this.querySelector("multi-blind-grid-display")!.addEventListener(
       "scramble-clicked",
       (e: CustomEvent<{ idx: number }>) => {
         this.#currentSubScrambleSetIndex(e.detail.idx);
       },
     );
+    this.#initializeAdditionalActions();
+  }
+
+  // TODO: unify dialog code with main settings
+  #initializeAdditionalActions() {
+    this.querySelector(".additional-actions-button").addEventListener(
+      "click",
+      () => {
+        this.#showAdditionalActions();
+      },
+    );
+
+    this.querySelector(".additional-actions button.close").addEventListener(
+      "click",
+      () => {
+        this.#hideAdditionalActions();
+      },
+    );
+  }
+
+  #showAdditionalActions() {
+    this.querySelector<HTMLDialogElement>(".additional-actions").showModal();
+  }
+
+  #hideAdditionalActions() {
+    this.querySelector<HTMLDialogElement>(".additional-actions").close();
+  }
+
+  #clearScramble() {
+    this.classList.remove("scramble-signed");
+    this.#toggleShowAllSubScrambles(false);
+    this.#setField("competitor", "");
+    this.#setField("event", "");
+    this.#setField("round", "");
+    this.#setField("scramble-set", "");
+    this.#setField("attempt", "");
+    this.querySelector("twisty-player").alg = new Alg();
+    this.#hideAdditionalActions();
   }
 
   #info: AttemptScrambleInfo | undefined;
@@ -141,7 +183,9 @@ export class CompetitorScrambleDisplay extends HTMLElement {
   }
 
   #setField(field: string, text: string): void {
-    this.getElementsByClassName(field)[0].textContent = text;
+    for (const elem of this.getElementsByClassName(field)) {
+      elem.textContent = text;
+    }
   }
 
   async #onSetScrambler() {

src/lib/elements/ScrambleTable.ts

@@ -64,9 +64,12 @@ export class ScrambleTable
   }
 
   #initializeSettings() {
-    this.querySelector("header button").addEventListener("click", () => {
-      this.#showSettings();
-    });
+    this.querySelector("header .settings-button").addEventListener(
+      "click",
+      () => {
+        this.#showSettings();
+      },
+    );
 
     this.querySelector(
       ".scramble-table-settings button.close",