cleaning up styles and code

ui/balance_druid/sim.ts

@@ -14,6 +14,7 @@ export class BalanceDruidSimUI extends IndividualSimUI<Spec.SpecBalanceDruid> {
  constructor(parentElem: HTMLElement, player: Player<Spec.SpecBalanceDruid>) {
  super(parentElem, player, {
  cssClass: 'balance-druid-sim-ui',
+ cssScheme: 'druid',
  // List any known bugs / issues here and they'll be shown on the site.
  knownIssues: [
  ],

ui/core/components/detailed_results.ts

@@ -24,8 +24,8 @@ export class DetailedResults extends Component {
  const computedStyles = window.getComputedStyle(this.rootElem);
 
  const url = new URL(`${window.location.protocol}//${window.location.host}/${REPO_NAME}/detailed_results/index.html`);
+ url.searchParams.append('cssScheme', simUI.cssScheme);
  url.searchParams.append('mainTextColor', computedStyles.getPropertyValue('--main-text-color').trim());
- url.searchParams.append('themeColorPrimary', computedStyles.getPropertyValue('--theme-color-primary').trim());
  url.searchParams.append('themeColorBackground', computedStyles.getPropertyValue('--theme-color-background').trim());
  url.searchParams.append('themeColorBackgroundRaw', computedStyles.getPropertyValue('--theme-color-background-raw').trim());
  url.searchParams.append('themeBackgroundImage', computedStyles.getPropertyValue('--theme-background-image').trim());
@@ -36,7 +36,7 @@ export class DetailedResults extends Component {
 
  this.rootElem.innerHTML = `
  <div class="detailed-results-controls-div">
- <button class="detailed-results-new-tab-button sim-button">VIEW IN SEPARATE TAB</button>
+ <button class="detailed-results-new-tab-button btn btn-${this.simUI.cssScheme}">View in Separate Tab</button>
  </div>
  <iframe class="detailed-results-iframe" src="${url.href}" allowtransparency="true"></iframe>
  `;

ui/core/components/encounter_picker.ts

@@ -121,9 +121,9 @@ export class EncounterPicker extends Component {
  }
 
  const advancedButton = document.createElement('button');
- advancedButton.classList.add('advanced-button', 'btn', 'btn-primary');
+ advancedButton.classList.add('advanced-button', 'btn', `btn-${simUI.cssScheme}`);
  advancedButton.textContent = 'Advanced';
- advancedButton.addEventListener('click', () => new AdvancedEncounterModal(this.rootElem, modEncounter, simUI));
+ advancedButton.addEventListener('click', () => new AdvancedEncounterModal(this.rootElem, simUI, modEncounter));
  this.rootElem.appendChild(advancedButton);
  });
  }
@@ -132,7 +132,7 @@ export class EncounterPicker extends Component {
 class AdvancedEncounterModal extends BaseModal {
  private readonly encounter: Encounter;
 
- constructor(parent: HTMLElement, encounter: Encounter, simUI: SimUI) {
+ constructor(parent: HTMLElement, simUI: SimUI, encounter: Encounter) {
  super('advanced-encounter-picker-modal');
 
  this.encounter = encounter;
@@ -160,7 +160,7 @@ class AdvancedEncounterModal extends BaseModal {
  },
  });
  }
- new ListPicker<Encounter, Target, TargetPicker>(targetsElem, this.encounter, {
+ new ListPicker<Encounter, Target, TargetPicker>(targetsElem, simUI, this.encounter, {
  extraCssClasses: ['targets-picker', 'mb-0'],
  itemLabel: 'Target',
  changedEvent: (encounter: Encounter) => encounter.targetsChangeEmitter,

ui/core/components/exporters.ts

@@ -1,29 +1,21 @@
-import { Class } from '../proto/common.js';
-import { EquipmentSpec } from '../proto/common.js';
-import { ItemSpec } from '../proto/common.js';
-import { Race } from '../proto/common.js';
-import { Spec } from '../proto/common.js';
-import { Stat, PseudoStat } from '../proto/common.js';
-import { IndividualSimSettings } from '../proto/ui.js';
-import { IndividualSimUI } from '../individual_sim_ui.js';
-import { Player } from '../player.js';
-import { UnitStat } from '../proto_utils/stats.js';
-import { classNames, nameToClass, nameToRace } from '../proto_utils/names.js';
-import { specNames } from '../proto_utils/utils.js';
-import { talentSpellIdsToTalentString } from '../talents/factory.js';
-import { EventID, TypedEvent } from '../typed_event.js';
-import { downloadString, getEnumValues } from '../utils.js';
-
-import { Popup } from './popup.js';
-
-declare var $: any;
-declare var tippy: any;
-declare var pako: any;
+import { Popup } from './popup';
+import { IndividualSimUI } from '../individual_sim_ui';
+import { SimUI } from '../sim_ui';
+import {
+ PseudoStat,
+ Spec,
+ Stat
+} from '../proto/common';
+import { IndividualSimSettings } from '../proto/ui';
+import { classNames } from '../proto_utils/names';
+import { UnitStat } from '../proto_utils/stats';
+import { specNames } from '../proto_utils/utils';
+import { downloadString } from '../utils';
 
 export abstract class Exporter extends Popup {
  private readonly textElem: HTMLElement;
 
- constructor(parent: HTMLElement, title: string, allowDownload: boolean) {
+ constructor(parent: HTMLElement, simUI: SimUI, title: string, allowDownload: boolean) {
  super(parent);
 
  this.rootElem.classList.add('exporter');
@@ -33,8 +25,8 @@ export abstract class Exporter extends Popup {
  <textarea class="exporter-textarea form-control" readonly></textarea>
  </div>
  <div class="actions-row">
- <button class="exporter-button btn btn-primary clipboard-button">COPY TO CLIPBOARD</button>
- <button class="exporter-button btn btn-primary download-button">DOWNLOAD</button>
+ <button class="exporter-button btn btn-${simUI.cssScheme} clipboard-button">COPY TO CLIPBOARD</button>
+ <button class="exporter-button btn btn-${simUI.cssScheme} download-button">DOWNLOAD</button>
  </div>
  `;
 
@@ -74,7 +66,7 @@ export class IndividualLinkExporter<SpecType extends Spec> extends Exporter {
  private readonly simUI: IndividualSimUI<SpecType>;
 
  constructor(parent: HTMLElement, simUI: IndividualSimUI<SpecType>) {
- super(parent, 'Sharable Link', false);
+ super(parent, simUI, 'Sharable Link', false);
  this.simUI = simUI;
  this.init();
  }
@@ -88,7 +80,7 @@ export class IndividualJsonExporter<SpecType extends Spec> extends Exporter {
  private readonly simUI: IndividualSimUI<SpecType>;
 
  constructor(parent: HTMLElement, simUI: IndividualSimUI<SpecType>) {
- super(parent, 'JSON Export', true);
+ super(parent, simUI, 'JSON Export', true);
  this.simUI = simUI;
  this.init();
  }
@@ -102,7 +94,7 @@ export class Individual80UEPExporter<SpecType extends Spec> extends Exporter {
  private readonly simUI: IndividualSimUI<SpecType>;
 
  constructor(parent: HTMLElement, simUI: IndividualSimUI<SpecType>) {
- super(parent, '80Upgrades EP Export', true);
+ super(parent, simUI, '80Upgrades EP Export', true);
  this.simUI = simUI;
  this.init();
  }
@@ -189,7 +181,7 @@ export class IndividualPawnEPExporter<SpecType extends Spec> extends Exporter {
  private readonly simUI: IndividualSimUI<SpecType>;
 
  constructor(parent: HTMLElement, simUI: IndividualSimUI<SpecType>) {
- super(parent, 'Pawn EP Export', true);
+ super(parent, simUI, 'Pawn EP Export', true);
  this.simUI = simUI;
  this.init();
  }

ui/core/components/gear_picker.ts

@@ -32,7 +32,7 @@ import { makeShow1hWeaponsSelector } from './other_inputs.js';
 import { makeShow2hWeaponsSelector } from './other_inputs.js';
 import { makeShowMatchingGemsSelector } from './other_inputs.js';
 import { Input, InputConfig } from './input.js';
-import { getEnvironmentData } from 'worker_threads';
+import { SimUI } from '../sim_ui.js';
 
 declare var $: any;
 declare var tippy: any;
@@ -42,7 +42,7 @@ export class GearPicker extends Component {
  // ItemSlot is used as the index
  readonly itemPickers: Array<ItemPicker>;
 
- constructor(parent: HTMLElement, player: Player<any>) {
+ constructor(parent: HTMLElement, simUI: SimUI, player: Player<any>) {
  super(parent, 'gear-picker-root');
 
  const leftSide = document.createElement('div');
@@ -63,7 +63,7 @@ export class GearPicker extends Component {
  ItemSlot.ItemSlotMainHand,
  ItemSlot.ItemSlotOffHand,
  ItemSlot.ItemSlotRanged,
- ].map(slot => new ItemPicker(leftSide, player, slot));
+ ].map(slot => new ItemPicker(leftSide, simUI, player, slot));
 
  const rightItemPickers = [
  ItemSlot.ItemSlotHands,
@@ -74,7 +74,7 @@ export class GearPicker extends Component {
  ItemSlot.ItemSlotFinger2,
  ItemSlot.ItemSlotTrinket1,
  ItemSlot.ItemSlotTrinket2,
- ].map(slot => new ItemPicker(rightSide, player, slot));
+ ].map(slot => new ItemPicker(rightSide, simUI, player, slot));
 
  this.itemPickers = leftItemPickers.concat(rightItemPickers).sort((a, b) => a.slot - b.slot);
  }
@@ -83,6 +83,7 @@ export class GearPicker extends Component {
 class ItemPicker extends Component {
  readonly slot: ItemSlot;
 
+ private readonly simUI: SimUI;
  private readonly player: Player<any>;
  private readonly iconElem: HTMLAnchorElement;
  private readonly nameElem: HTMLAnchorElement;
@@ -94,10 +95,10 @@ class ItemPicker extends Component {
 
  private _equippedItem: EquippedItem | null = null;
 
-
- constructor(parent: HTMLElement, player: Player<any>, slot: ItemSlot) {
+ constructor(parent: HTMLElement, simUI: SimUI, player: Player<any>, slot: ItemSlot) {
  super(parent, 'item-picker-root');
  this.slot = slot;
+ this.simUI = simUI;
  this.player = player;
 
  this.rootElem.innerHTML = `
@@ -132,7 +133,7 @@ class ItemPicker extends Component {
 
  const onClickStart = (event: Event) => {
  event.preventDefault();
- const selectorModal = new SelectorModal(this.rootElem.closest('.individual-sim-ui')!, this.player, this.slot, this._equippedItem, this._items, this._enchants, gearData);
+ const selectorModal = new SelectorModal(this.simUI.rootElem, this.simUI, this.player, this.slot, this._equippedItem, this._items, this._enchants, gearData);
  };
  const onClickEnd = (event: Event) => {
  event.preventDefault();
@@ -147,12 +148,12 @@ class ItemPicker extends Component {
  // Make enchant name open enchant tab.
  this.enchantElem.addEventListener('click', (ev: Event) => {
  ev.preventDefault();
- const selectorModal = new SelectorModal(this.rootElem.closest('.individual-sim-ui')!, this.player, this.slot, this._equippedItem, this._items, this._enchants, gearData);
+ const selectorModal = new SelectorModal(this.simUI.rootElem, this.simUI, this.player, this.slot, this._equippedItem, this._items, this._enchants, gearData);
  selectorModal.openTab(1);
  });
  this.enchantElem.addEventListener('touchstart', (ev: Event) => {
  ev.preventDefault();
- const selectorModal = new SelectorModal(this.rootElem.closest('.individual-sim-ui')!, this.player, this.slot, this._equippedItem, this._items, this._enchants, gearData);
+ const selectorModal = new SelectorModal(this.simUI.rootElem, this.simUI, this.player, this.slot, this._equippedItem, this._items, this._enchants, gearData);
  selectorModal.openTab(1);
  });
  this.enchantElem.addEventListener('touchend', onClickEnd);
@@ -265,7 +266,7 @@ export class IconItemSwapPicker<SpecType extends Spec, ValueType> extends Input<
  private _items: Array<Item> = [];
  private _enchants: Array<Enchant> = [];
 
- constructor(parent: HTMLElement, player: Player<SpecType>, slot: ItemSlot, gear: ItemSwapGear, config: InputConfig<Player<SpecType>, ValueType>) {
+ constructor(parent: HTMLElement, simUI: SimUI, player: Player<SpecType>, slot: ItemSlot, gear: ItemSwapGear, config: InputConfig<Player<SpecType>, ValueType>) {
  super(parent, 'icon-picker-root', player, config)
  this.rootElem.classList.add('icon-picker');
  this.player = player;
@@ -298,7 +299,8 @@ export class IconItemSwapPicker<SpecType extends Spec, ValueType> extends Input<
  const onClickStart = (event: Event) => {
  event.preventDefault();
  new SelectorModal(
- this.rootElem.closest('.individual-sim-ui')!,
+ simUI.rootElem,
+ simUI,
  this.player,
  this.slot,
  this.gear.getEquippedItem(slot),
@@ -396,12 +398,14 @@ interface GearData {
 }
 
 class SelectorModal extends Popup {
+ private readonly simUI: SimUI;
  private player: Player<any>;
  private readonly tabsElem: HTMLElement;
  private readonly contentElem: HTMLElement;
 
- constructor(parent: HTMLElement, player: Player<any>, slot: ItemSlot, equippedItem: EquippedItem | null, eligibleItems: Array<Item>, eligibleEnchants: Array<Enchant>, gearData: GearData) {
+ constructor(parent: HTMLElement, simUI: SimUI, player: Player<any>, slot: ItemSlot, equippedItem: EquippedItem | null, eligibleItems: Array<Item>, eligibleEnchants: Array<Enchant>, gearData: GearData) {
  super(parent);
+ this.simUI = simUI;
  this.player = player;
 
  window.scrollTo({top: 0});
@@ -636,7 +640,7 @@ class SelectorModal extends Popup {
  >
  <div class="selector-modal-tab-content-header">
  <input class="selector-modal-search form-control" type="text" placeholder="Search...">
- <button class="selector-modal-filters-button btn btn-primary">Filters</button>
+ <button class="selector-modal-filters-button btn btn-${this.simUI.cssScheme}">Filters</button>
  <div class="sim-input selector-modal-boolean-option selector-modal-show-1h-weapons"></div>
  <div class="sim-input selector-modal-boolean-option selector-modal-show-2h-weapons"></div>
  <div class="sim-input selector-modal-boolean-option selector-modal-show-matching-gems"></div>

ui/core/components/importers.ts

@@ -1,31 +1,29 @@
-import { Class } from '../proto/common.js';
-import { EquipmentSpec } from '../proto/common.js';
-import { ItemSpec } from '../proto/common.js';
-import { Glyphs } from '../proto/common.js';
-import { Profession } from '../proto/common.js';
-import { Race } from '../proto/common.js';
-import { Spec } from '../proto/common.js';
-import { IndividualSimSettings } from '../proto/ui.js';
-import { IndividualSimUI } from '../individual_sim_ui.js';
-import { Player } from '../player.js';
-import { Database } from '../proto_utils/database.js';
-import { classNames, nameToClass, nameToRace, nameToProfession } from '../proto_utils/names.js';
-import { classGlyphsConfig, talentSpellIdsToTalentString } from '../talents/factory.js';
-import { GlyphConfig } from '../talents/glyphs_picker.js';
-import { EventID, TypedEvent } from '../typed_event.js';
-
-import { Popup } from './popup.js';
-
-declare var $: any;
-declare var tippy: any;
+import { Popup } from './popup';
+import { IndividualSimUI } from '../individual_sim_ui';
+import { SimUI } from '../sim_ui';
+import { TypedEvent } from '../typed_event';
+import {
+ Class,
+ EquipmentSpec,
+ Glyphs,
+ ItemSpec,
+ Profession,
+ Race,
+ Spec,
+} from '../proto/common';
+import { IndividualSimSettings } from '../proto/ui';
+import { Database } from '../proto_utils/database';
+import { classNames, nameToClass, nameToRace, nameToProfession } from '../proto_utils/names';
+import { classGlyphsConfig, talentSpellIdsToTalentString } from '../talents/factory';
+import { GlyphConfig } from '../talents/glyphs_picker';
 
 export abstract class Importer extends Popup {
  private readonly textElem: HTMLTextAreaElement;
  protected readonly descriptionElem: HTMLElement;
  protected readonly importButton: HTMLButtonElement;
  private readonly includeFile: boolean;
 
- constructor(parent: HTMLElement, title: string, includeFile: boolean) {
+ constructor(parent: HTMLElement, simUI: SimUI, title: string, includeFile: boolean) {
  super(parent);
  this.includeFile = includeFile;
  const uploadInputId = 'upload-input-' + title.toLowerCase().replaceAll(' ', '-');
@@ -41,11 +39,11 @@ export abstract class Importer extends Popup {
  <div class="actions-row">
  `;
  if (this.includeFile) {
- htmlVal += `<label for="${uploadInputId}" class="importer-button btn btn-primary upload-button">UPLOAD FROM FILE</label>
+ htmlVal += `<label for="${uploadInputId}" class="importer-button btn btn-${simUI.cssScheme} upload-button">UPLOAD FROM FILE</label>
  <input type="file" id="${uploadInputId}" class="importer-upload-input" hidden>
  `
  }
- htmlVal += `<button class="importer-button btn btn-primary import-button">IMPORT</button>
+ htmlVal += `<button class="importer-button btn btn-${simUI.cssScheme} import-button">IMPORT</button>
  </div>
  `;
 
@@ -125,7 +123,7 @@ export abstract class Importer extends Popup {
 export class IndividualJsonImporter<SpecType extends Spec> extends Importer {
  private readonly simUI: IndividualSimUI<SpecType>;
  constructor(parent: HTMLElement, simUI: IndividualSimUI<SpecType>) {
- super(parent, 'JSON Import', true);
+ super(parent, simUI, 'JSON Import', true);
  this.simUI = simUI;
 
  this.descriptionElem.innerHTML = `
@@ -157,7 +155,7 @@ export class IndividualJsonImporter<SpecType extends Spec> extends Importer {
 export class Individual80UImporter<SpecType extends Spec> extends Importer {
  private readonly simUI: IndividualSimUI<SpecType>;
  constructor(parent: HTMLElement, simUI: IndividualSimUI<SpecType>) {
- super(parent, '80 Upgrades Import', true);
+ super(parent, simUI, '80 Upgrades Import', true);
  this.simUI = simUI;
 
  this.descriptionElem.innerHTML = `
@@ -215,7 +213,7 @@ export class Individual80UImporter<SpecType extends Spec> extends Importer {
 export class IndividualAddonImporter<SpecType extends Spec> extends Importer {
  private readonly simUI: IndividualSimUI<SpecType>;
  constructor(parent: HTMLElement, simUI: IndividualSimUI<SpecType>) {
- super(parent, 'Addon Import', true);
+ super(parent, simUI, 'Addon Import', true);
  this.simUI = simUI;
 
  this.descriptionElem.innerHTML = `

ui/core/components/individual_sim_ui/custom_rotation_picker.ts

@@ -9,6 +9,7 @@ import { NumberPicker } from '../number_picker.js';
 import { getEnumValues } from '../../utils.js';
 
 import { Component } from '../component.js';
+import { SimUI } from 'ui/core/sim_ui.js';
 
 export interface CustomRotationPickerConfig<SpecType extends Spec, T> {
  getValue: (player: Player<SpecType>) => CustomRotation,
@@ -23,13 +24,13 @@ export interface CustomRotationPickerConfig<SpecType extends Spec, T> {
 }
 
 export class CustomRotationPicker<SpecType extends Spec, T> extends Component {
- constructor(parent: HTMLElement, modPlayer: Player<SpecType>, config: CustomRotationPickerConfig<SpecType, T>) {
+ constructor(parent: HTMLElement, simUI: SimUI, modPlayer: Player<SpecType>, config: CustomRotationPickerConfig<SpecType, T>) {
  super(parent, 'custom-rotation-picker-root');
 
  if (config.extraCssClasses)
  this.rootElem.classList.add(...config.extraCssClasses);
 
- new ListPicker<Player<SpecType>, CustomSpell, CustomSpellPicker<SpecType, T>>(this.rootElem, modPlayer, {
+ new ListPicker<Player<SpecType>, CustomSpell, CustomSpellPicker<SpecType, T>>(this.rootElem, simUI, modPlayer, {
  extraCssClasses: ['custom-spells-picker'],
  title: 'Spell Priority',
  titleTooltip: 'Spells at the top of the list are prioritized first. Safely ignores untalented options.',