Handle unassigned scramblers better.

Author: lgarron

src/lib/elements/CompetitorScrambleDisplay.template.html

@@ -1,6 +1,7 @@
 <template>
   <div class="info">
-    <div class="split scrambler"><span class="scrambler-name">Scrambler</span><span><button class="set-scrambler"
+    <div class="split scrambler"><span>Scrambler:&nbsp;<span
+          class="scrambler-name">(unassigned)</span></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>
@@ -29,7 +30,7 @@
     <br>
     <br>
     <h1>Additional&nbsp;actions</h1>
-    <h2>Scrambler: <span class="scrambler-name">Scrambler</span></h2>
+    <h2>Scrambler:&nbsp;<span class="scrambler-name">(unassigned)</span></h2>
     <hr>
     <br>
     <span><button class="clear-scramble">Clear scramble</button></span>

src/lib/elements/CompetitorScrambleDisplay.ts

@@ -17,13 +17,19 @@ import "./MultiBlindGridDisplay";
 const template = parseHTML<HTMLTemplateElement>(templateHTML);
 addCSS(css);
 
+let unassignedCounter = 0;
+function nextUnassigned(): string {
+  return `(unassigned #${++unassignedCounter})`;
+}
+
 export class CompetitorScrambleDisplay extends HTMLElement {
   constructor(private sharedState: SharedState, private displayIndex: number) {
     super();
   }
 
   connectedCallback() {
     this.append(template.content.cloneNode(true));
+    this.#setField("scrambler-name", nextUnassigned());
     this.querySelector(".set-scrambler")!.addEventListener("click", () =>
       this.#onSetScrambler(),
     );
@@ -195,12 +201,10 @@ export class CompetitorScrambleDisplay extends HTMLElement {
   async #onSetScrambler() {
     const setScramblerButton = this.querySelector(".set-scrambler");
     setScramblerButton.textContent = "Please identify this scrambler…";
-    const name = await this.sharedState.setScramblerCallback(this.displayIndex);
-    if (name === null) {
-      this.#setField("scrambler-name", "Scrambler: (unassigned)");
-    } else {
-      this.#setField("scrambler-name", `Scrambler: ${name}`);
-    }
+    const name =
+      (await this.sharedState.setScramblerCallback(this.displayIndex)) ??
+      nextUnassigned();
+    this.#setField("scrambler-name", name);
     setScramblerButton.textContent =
       setScramblerButton.getAttribute("data-original-text");
   }