refactor(ui): Remove DOM id management

We haven't needed `id`s on DOM elements in a long time. It's time to drop all of the supporting code, which makes everything so much more redundant and confusing.

packages/userscript/source/ui/BonfireSettingsUi.ts

@@ -13,43 +13,37 @@ export class BonfireSettingsUi extends SettingsSectionUi {
   private readonly _settings: BonfireSettings;
 
   constructor(host: UserScript, settings: BonfireSettings) {
-    const toggleName = "build";
     const label = ucfirst(host.engine.i18n("ui.build"));
-    const panel = new SettingsPanel(host, toggleName, label, settings);
+    const panel = new SettingsPanel(host, label, settings);
     super(host, panel);
 
     this._settings = settings;
 
     // Create "trigger" button in the item.
-    this._trigger = new TriggerButton(host, toggleName, label, settings);
+    this._trigger = new TriggerButton(host, label, settings);
     panel.element.append(this._trigger.element);
 
     const optionButtons = [
       this._getHeader(this._host.engine.i18n("$buildings.group.food")),
       this._getBuildOption(
-        "field",
         this._settings.items.field,
         this._host.engine.i18n("$buildings.field.label")
       ),
       this._getBuildOption(
-        "pasture",
         this._settings.items.pasture,
         this._host.engine.i18n("$buildings.pasture.label")
       ),
       this._getBuildOption(
-        "solarFarm",
         this._settings.items.solarFarm,
         this._host.engine.i18n("$buildings.solarfarm.label"),
         false,
         true
       ),
       this._getBuildOption(
-        "aqueduct",
         this._settings.items.aqueduct,
         this._host.engine.i18n("$buildings.aqueduct.label")
       ),
       this._getBuildOption(
-        "hydroPlant",
         this._settings.items.hydroPlant,
         this._host.engine.i18n("$buildings.hydroplant.label"),
         true,
@@ -58,210 +52,174 @@ export class BonfireSettingsUi extends SettingsSectionUi {
 
       this._getHeader(this._host.engine.i18n("$buildings.group.population")),
       this._getBuildOption(
-        "hut",
         this._settings.items.hut,
         this._host.engine.i18n("$buildings.hut.label")
       ),
       this._getBuildOption(
-        "logHouse",
         this._settings.items.logHouse,
         this._host.engine.i18n("$buildings.logHouse.label")
       ),
       this._getBuildOption(
-        "mansion",
         this._settings.items.mansion,
         this._host.engine.i18n("$buildings.mansion.label"),
         true
       ),
 
       this._getHeader(this._host.engine.i18n("$buildings.group.science")),
       this._getBuildOption(
-        "library",
         this._settings.items.library,
         this._host.engine.i18n("$buildings.library.label")
       ),
       this._getBuildOption(
-        "dataCenter",
         this._settings.items.dataCenter,
         this._host.engine.i18n("$buildings.dataCenter.label"),
         false,
         true
       ),
       this._getBuildOption(
-        "academy",
         this._settings.items.academy,
         this._host.engine.i18n("$buildings.academy.label")
       ),
       this._getBuildOption(
-        "observatory",
         this._settings.items.observatory,
         this._host.engine.i18n("$buildings.observatory.label")
       ),
       this._getBuildOption(
-        "biolab",
         this._settings.items.biolab,
         this._host.engine.i18n("$buildings.biolab.label"),
         true
       ),
 
       this._getHeader(this._host.engine.i18n("$buildings.group.storage")),
       this._getBuildOption(
-        "barn",
         this._settings.items.barn,
         this._host.engine.i18n("$buildings.barn.label")
       ),
       this._getBuildOption(
-        "harbor",
         this._settings.items.harbor,
         this._host.engine.i18n("$buildings.harbor.label")
       ),
       this._getBuildOption(
-        "warehouse",
         this._settings.items.warehouse,
         this._host.engine.i18n("$buildings.warehouse.label"),
         true
       ),
 
       this._getHeader(this._host.engine.i18n("$buildings.group.resource")),
       this._getBuildOption(
-        "mine",
         this._settings.items.mine,
         this._host.engine.i18n("$buildings.mine.label")
       ),
       this._getBuildOption(
-        "quarry",
         this._settings.items.quarry,
         this._host.engine.i18n("$buildings.quarry.label")
       ),
       this._getBuildOption(
-        "lumberMill",
         this._settings.items.lumberMill,
         this._host.engine.i18n("$buildings.lumberMill.label")
       ),
       this._getBuildOption(
-        "oilWell",
         this._settings.items.oilWell,
         this._host.engine.i18n("$buildings.oilWell.label")
       ),
       this._getBuildOption(
-        "accelerator",
         this._settings.items.accelerator,
         this._host.engine.i18n("$buildings.accelerator.label"),
         true
       ),
 
       this._getHeader(this._host.engine.i18n("$buildings.group.industry")),
       this._getBuildOption(
-        "steamworks",
         this._settings.items.steamworks,
         this._host.engine.i18n("$buildings.steamworks.label")
       ),
       this._getBuildOption(
-        "magneto",
         this._settings.items.magneto,
         this._host.engine.i18n("$buildings.magneto.label")
       ),
       this._getBuildOption(
-        "smelter",
         this._settings.items.smelter,
         this._host.engine.i18n("$buildings.smelter.label")
       ),
       this._getBuildOption(
-        "calciner",
         this._settings.items.calciner,
         this._host.engine.i18n("$buildings.calciner.label")
       ),
       this._getBuildOption(
-        "factory",
         this._settings.items.factory,
         this._host.engine.i18n("$buildings.factory.label")
       ),
       this._getBuildOption(
-        "reactor",
         this._settings.items.reactor,
         this._host.engine.i18n("$buildings.reactor.label"),
         true
       ),
 
       this._getHeader(this._host.engine.i18n("$buildings.group.culture")),
       this._getBuildOption(
-        "amphitheatre",
         this._settings.items.amphitheatre,
         this._host.engine.i18n("$buildings.amphitheatre.label")
       ),
       this._getBuildOption(
-        "broadcastTower",
         this._settings.items.broadcastTower,
         this._host.engine.i18n("$buildings.broadcasttower.label"),
         false,
         true
       ),
       this._getBuildOption(
-        "chapel",
         this._settings.items.chapel,
         this._host.engine.i18n("$buildings.chapel.label")
       ),
       this._getBuildOption(
-        "temple",
         this._settings.items.temple,
         this._host.engine.i18n("$buildings.temple.label"),
         true
       ),
 
       this._getHeader(this._host.engine.i18n("$buildings.group.other")),
       this._getBuildOption(
-        "workshop",
         this._settings.items.workshop,
         this._host.engine.i18n("$buildings.workshop.label")
       ),
       this._getBuildOption(
-        "tradepost",
         this._settings.items.tradepost,
         this._host.engine.i18n("$buildings.tradepost.label")
       ),
       this._getBuildOption(
-        "mint",
         this._settings.items.mint,
         this._host.engine.i18n("$buildings.mint.label")
       ),
       this._getBuildOption(
-        "brewery",
         this._settings.items.brewery,
         this._host.engine.i18n("$buildings.brewery.label"),
         true
       ),
 
       this._getHeader(this._host.engine.i18n("$buildings.group.megastructures")),
       this._getBuildOption(
-        "ziggurat",
         this._settings.items.ziggurat,
         this._host.engine.i18n("$buildings.ziggurat.label")
       ),
       this._getBuildOption(
-        "chronosphere",
         this._settings.items.chronosphere,
         this._host.engine.i18n("$buildings.chronosphere.label")
       ),
       this._getBuildOption(
-        "aiCore",
         this._settings.items.aiCore,
         this._host.engine.i18n("$buildings.aicore.label"),
         true
       ),
 
       this._getHeader(this._host.engine.i18n("$buildings.group.zebraBuildings")),
       this._getBuildOption(
-        "zebraOutpost",
         this._settings.items.zebraOutpost,
         this._host.engine.i18n("$buildings.zebraOutpost.label")
       ),
       this._getBuildOption(
-        "zebraWorkshop",
         this._settings.items.zebraWorkshop,
         this._host.engine.i18n("$buildings.zebraWorkshop.label")
       ),
       this._getBuildOption(
-        "zebraForge",
         this._settings.items.zebraForge,
         this._host.engine.i18n("$buildings.zebraForge.label"),
         true
@@ -278,7 +236,6 @@ export class BonfireSettingsUi extends SettingsSectionUi {
 
     const upgradeBuildingsElement = new SettingsPanel(
       this._host,
-      "buildings",
       this._host.engine.i18n("ui.upgrade.buildings"),
       this._settings.upgradeBuildings
     );
@@ -288,7 +245,6 @@ export class BonfireSettingsUi extends SettingsSectionUi {
       const label = this._host.engine.i18n(`$buildings.${upgradeName}.label`);
       const button = new SettingListItem(
         this._host,
-        `building-${upgradeName}`,
         label,
         upgrade,
         {
@@ -310,7 +266,6 @@ export class BonfireSettingsUi extends SettingsSectionUi {
 
     const nodeTurnOnSteamworks = new SettingListItem(
       this._host,
-      "_steamworks",
       this._host.engine.i18n("option.steamworks"),
       this._settings.turnOnSteamworks,
       {

packages/userscript/source/ui/EngineSettingsUi.ts

@@ -11,12 +11,10 @@ export class EngineSettingsUi {
   constructor(host: UserScript, settings: EngineSettings) {
     this._settings = settings;
 
-    const toggleName = "engine";
-
     const itext = ucfirst(host.engine.i18n("ui.engine"));
 
     // Our main element is a list item.
-    const element = new SettingListItem(host, toggleName, itext, settings, {
+    const element = new SettingListItem(host, itext, settings, {
       onCheck: () => host.engine.start(true),
       onUnCheck: () => host.engine.stop(true),
     });

packages/userscript/source/ui/FilterSettingsUi.ts

@@ -1,4 +1,4 @@
-import { FilterItem, FilterSettings, FilterSettingsItem } from "../options/FilterSettings";
+import { FilterSettings, FilterSettingsItem } from "../options/FilterSettings";
 import { objectEntries } from "../tools/Entries";
 import { ucfirst } from "../tools/Format";
 import { mustExist } from "../tools/Maybe";
@@ -11,9 +11,8 @@ export class FiltersSettingsUi extends SettingsSectionUi {
   private readonly _settings: FilterSettings;
 
   constructor(host: UserScript, settings: FilterSettings) {
-    const toggleName = "filter";
     const label = ucfirst(host.engine.i18n("ui.filter"));
-    const panel = new SettingsPanel(host, toggleName, label, settings);
+    const panel = new SettingsPanel(host, label, settings);
     super(host, panel);
 
     this._settings = settings;
@@ -106,10 +105,9 @@ export class FiltersSettingsUi extends SettingsSectionUi {
       },
     ];
 
-    const makeButton = (name: FilterItem, option: FilterSettingsItem, label: string) =>
+    const makeButton = (option: FilterSettingsItem, label: string) =>
       new SettingListItem(
         this._host,
-        name,
         label,
         option,
         {
@@ -123,7 +121,7 @@ export class FiltersSettingsUi extends SettingsSectionUi {
 
     const optionButtons = buttons
       .sort((a, b) => a.label.localeCompare(b.label))
-      .map(button => makeButton(button.name, button.option, button.label));
+      .map(button => makeButton(button.option, button.label));
 
     panel.list.append(optionButtons);
     panel.list.append(this._getExplainer("Disabled items are hidden from the log."));

packages/userscript/source/ui/OptionsSettingsUi.ts

@@ -13,52 +13,36 @@ export class OptionsSettingsUi extends SettingsSectionUi {
   private readonly _settings: OptionsSettings;
 
   constructor(host: UserScript, settings: OptionsSettings) {
-    const toggleName = "options";
     const label = ucfirst(host.engine.i18n("ui.options"));
-    const panel = new SettingsPanel(host, toggleName, label, settings);
+    const panel = new SettingsPanel(host, label, settings);
     super(host, panel);
 
     this._settings = settings;
 
     const optionButtons = [
       this._getOptionsOption(
-        "observe",
         this._settings.items.observe,
         this._host.engine.i18n("option.observe")
       ),
       this._getOptionsOption(
-        "autofeed",
         this._settings.items.autofeed,
         this._host.engine.i18n("option.autofeed")
       ),
-      this._getOptionsOption(
-        "crypto",
-        this._settings.items.crypto,
-        this._host.engine.i18n("option.crypto")
-      ),
-      this._getOptionsOption(
-        "fixCry",
-        this._settings.items.fixCry,
-        this._host.engine.i18n("option.fix.cry")
-      ),
+      this._getOptionsOption(this._settings.items.crypto, this._host.engine.i18n("option.crypto")),
+      this._getOptionsOption(this._settings.items.fixCry, this._host.engine.i18n("option.fix.cry")),
     ];
 
     panel.list.append(...optionButtons);
   }
 
-  private _getOptionsOption(
-    name: string,
-    option: OptionsSettingsItem,
-    iname: string
-  ): JQuery<HTMLElement> {
+  private _getOptionsOption(option: OptionsSettingsItem, iname: string): JQuery<HTMLElement> {
     const handler = {
       onCheck: () => this._host.engine.imessage("status.sub.enable", [iname]),
       onUnCheck: () => this._host.engine.imessage("status.sub.disable", [iname]),
     };
     return option.trigger
-      ? new SettingTriggerListItem(this._host, name, iname, option as SettingTrigger, handler)
-          .element
-      : new SettingListItem(this._host, name, iname, option, handler).element;
+      ? new SettingTriggerListItem(this._host, iname, option as SettingTrigger, handler).element
+      : new SettingListItem(this._host, iname, option, handler).element;
   }
 
   setState(state: OptionsSettings): void {