From 4e0202760aaae3b79a109012e40f68e9add6f587 Mon Sep 17 00:00:00 2001 From: Kayla Glick Date: Sun, 18 Dec 2022 13:23:00 -0500 Subject: [PATCH] cleaning up styles and code --- ui/balance_druid/sim.ts | 1 + ui/core/components/detailed_results.ts | 4 +- ui/core/components/encounter_picker.ts | 8 +- ui/core/components/exporters.ts | 48 ++-- ui/core/components/gear_picker.ts | 30 +- ui/core/components/importers.ts | 50 ++-- .../custom_rotation_picker.ts | 5 +- .../individual_sim_ui/settings_tab.ts | 8 +- ui/core/components/item_swap.ts | 12 +- ui/core/components/list_picker.ts | 5 +- ui/core/components/log_runner.ts | 4 +- ui/core/components/popup.ts | 1 - ui/core/components/raid_sim_action.ts | 2 +- ui/core/components/saved_data_manager.ts | 7 +- ui/core/components/settings_menu.ts | 2 +- ui/core/components/stat_weights_action.ts | 69 ++++- ui/core/individual_sim_ui.ts | 262 ++++++++---------- ui/core/sim_ui.ts | 6 +- ui/core/talents/hunter_pet.ts | 7 +- ui/deathknight/sim.ts | 1 + ui/detailed_results/index.ts | 9 +- ui/detailed_results/result_component.ts | 1 + ui/detailed_results/timeline.ts | 2 +- ui/elemental_shaman/sim.ts | 1 + ui/enhancement_shaman/sim.ts | 1 + ui/feral_druid/sim.ts | 1 + ui/feral_tank_druid/sim.ts | 1 + ui/healing_priest/sim.ts | 1 + ui/hunter/sim.ts | 1 + ui/mage/sim.ts | 1 + ui/protection_paladin/sim.ts | 1 + ui/protection_warrior/sim.ts | 1 + ui/raid/import_export.ts | 36 +-- ui/raid/raid_sim_ui.ts | 77 ++--- ui/retribution_paladin/sim.ts | 1 + ui/rogue/sim.ts | 1 + ui/scss/core/components/_popup.scss | 2 +- .../core/components/_stat_weights_action.scss | 12 +- ui/scss/global.scss | 2 +- ui/scss/global_old.scss | 9 - ui/scss/sims/balance_druid/_sim.scss | 11 - ui/scss/sims/deathknight/_sim.scss | 6 - ui/scss/sims/elemental_shaman/_sim.scss | 6 - ui/scss/sims/enhancement_shaman/_sim.scss | 11 - ui/scss/sims/feral_druid/_sim.scss | 14 - ui/scss/sims/feral_tank_druid/_sim.scss | 14 - ui/scss/sims/healing_priest/_sim.scss | 1 - ui/scss/sims/hunter/_sim.scss | 14 - ui/scss/sims/mage/_sim.scss | 6 - ui/scss/sims/protection_paladin/_sim.scss | 10 - ui/scss/sims/protection_warrior/_sim.scss | 11 - ui/scss/sims/raid/_sim.scss | 1 - ui/scss/sims/retribution_paladin/_sim.scss | 10 - ui/scss/sims/rogue/_sim.scss | 11 - ui/scss/sims/shadow_priest/_sim.scss | 11 - ui/scss/sims/smite_priest/_sim.scss | 11 - ui/scss/sims/tank_deathknight/_sim.scss | 6 - ui/scss/sims/warlock/_sim.scss | 1 - ui/scss/sims/warrior/_sim.scss | 6 - ui/shadow_priest/sim.ts | 1 + ui/smite_priest/sim.ts | 1 + ui/tank_deathknight/sim.ts | 1 + ui/warlock/sim.ts | 1 + ui/warrior/sim.ts | 1 + 64 files changed, 371 insertions(+), 488 deletions(-) diff --git a/ui/balance_druid/sim.ts b/ui/balance_druid/sim.ts index 1324880a0a..59dcf540df 100644 --- a/ui/balance_druid/sim.ts +++ b/ui/balance_druid/sim.ts @@ -14,6 +14,7 @@ export class BalanceDruidSimUI extends IndividualSimUI { constructor(parentElem: HTMLElement, player: Player) { 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: [ ], diff --git a/ui/core/components/detailed_results.ts b/ui/core/components/detailed_results.ts index 3421507618..0ee1f78742 100644 --- a/ui/core/components/detailed_results.ts +++ b/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 = `
- +
`; diff --git a/ui/core/components/encounter_picker.ts b/ui/core/components/encounter_picker.ts index 292f20b144..7535960be2 100644 --- a/ui/core/components/encounter_picker.ts +++ b/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(targetsElem, this.encounter, { + new ListPicker(targetsElem, simUI, this.encounter, { extraCssClasses: ['targets-picker', 'mb-0'], itemLabel: 'Target', changedEvent: (encounter: Encounter) => encounter.targetsChangeEmitter, diff --git a/ui/core/components/exporters.ts b/ui/core/components/exporters.ts index 4e6c66e3b2..1112b6da87 100644 --- a/ui/core/components/exporters.ts +++ b/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 {
- - + +
`; @@ -74,7 +66,7 @@ export class IndividualLinkExporter extends Exporter { private readonly simUI: IndividualSimUI; constructor(parent: HTMLElement, simUI: IndividualSimUI) { - super(parent, 'Sharable Link', false); + super(parent, simUI, 'Sharable Link', false); this.simUI = simUI; this.init(); } @@ -88,7 +80,7 @@ export class IndividualJsonExporter extends Exporter { private readonly simUI: IndividualSimUI; constructor(parent: HTMLElement, simUI: IndividualSimUI) { - super(parent, 'JSON Export', true); + super(parent, simUI, 'JSON Export', true); this.simUI = simUI; this.init(); } @@ -102,7 +94,7 @@ export class Individual80UEPExporter extends Exporter { private readonly simUI: IndividualSimUI; constructor(parent: HTMLElement, simUI: IndividualSimUI) { - 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 extends Exporter { private readonly simUI: IndividualSimUI; constructor(parent: HTMLElement, simUI: IndividualSimUI) { - super(parent, 'Pawn EP Export', true); + super(parent, simUI, 'Pawn EP Export', true); this.simUI = simUI; this.init(); } diff --git a/ui/core/components/gear_picker.ts b/ui/core/components/gear_picker.ts index 5dfe1954c6..414145b1f0 100644 --- a/ui/core/components/gear_picker.ts +++ b/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; - constructor(parent: HTMLElement, player: Player) { + constructor(parent: HTMLElement, simUI: SimUI, player: Player) { 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; 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, slot: ItemSlot) { + constructor(parent: HTMLElement, simUI: SimUI, player: Player, 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 extends Input< private _items: Array = []; private _enchants: Array = []; - constructor(parent: HTMLElement, player: Player, slot: ItemSlot, gear: ItemSwapGear, config: InputConfig, ValueType>) { + constructor(parent: HTMLElement, simUI: SimUI, player: Player, slot: ItemSlot, gear: ItemSwapGear, config: InputConfig, ValueType>) { super(parent, 'icon-picker-root', player, config) this.rootElem.classList.add('icon-picker'); this.player = player; @@ -298,7 +299,8 @@ export class IconItemSwapPicker 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; private readonly tabsElem: HTMLElement; private readonly contentElem: HTMLElement; - constructor(parent: HTMLElement, player: Player, slot: ItemSlot, equippedItem: EquippedItem | null, eligibleItems: Array, eligibleEnchants: Array, gearData: GearData) { + constructor(parent: HTMLElement, simUI: SimUI, player: Player, slot: ItemSlot, equippedItem: EquippedItem | null, eligibleItems: Array, eligibleEnchants: Array, gearData: GearData) { super(parent); + this.simUI = simUI; this.player = player; window.scrollTo({top: 0}); @@ -636,7 +640,7 @@ class SelectorModal extends Popup { >
- +
diff --git a/ui/core/components/importers.ts b/ui/core/components/importers.ts index c7b379c84d..aef287f650 100644 --- a/ui/core/components/importers.ts +++ b/ui/core/components/importers.ts @@ -1,23 +1,21 @@ -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; @@ -25,7 +23,7 @@ export abstract class Importer extends Popup { 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 {
`; if (this.includeFile) { - htmlVal += ` + htmlVal += ` ` } - htmlVal += ` + htmlVal += `
`; @@ -125,7 +123,7 @@ export abstract class Importer extends Popup { export class IndividualJsonImporter extends Importer { private readonly simUI: IndividualSimUI; constructor(parent: HTMLElement, simUI: IndividualSimUI) { - super(parent, 'JSON Import', true); + super(parent, simUI, 'JSON Import', true); this.simUI = simUI; this.descriptionElem.innerHTML = ` @@ -157,7 +155,7 @@ export class IndividualJsonImporter extends Importer { export class Individual80UImporter extends Importer { private readonly simUI: IndividualSimUI; constructor(parent: HTMLElement, simUI: IndividualSimUI) { - 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 extends Importer { export class IndividualAddonImporter extends Importer { private readonly simUI: IndividualSimUI; constructor(parent: HTMLElement, simUI: IndividualSimUI) { - super(parent, 'Addon Import', true); + super(parent, simUI, 'Addon Import', true); this.simUI = simUI; this.descriptionElem.innerHTML = ` diff --git a/ui/core/components/individual_sim_ui/custom_rotation_picker.ts b/ui/core/components/individual_sim_ui/custom_rotation_picker.ts index aedc734fd3..4d4f75f520 100644 --- a/ui/core/components/individual_sim_ui/custom_rotation_picker.ts +++ b/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 { getValue: (player: Player) => CustomRotation, @@ -23,13 +24,13 @@ export interface CustomRotationPickerConfig { } export class CustomRotationPicker extends Component { - constructor(parent: HTMLElement, modPlayer: Player, config: CustomRotationPickerConfig) { + constructor(parent: HTMLElement, simUI: SimUI, modPlayer: Player, config: CustomRotationPickerConfig) { super(parent, 'custom-rotation-picker-root'); if (config.extraCssClasses) this.rootElem.classList.add(...config.extraCssClasses); - new ListPicker, CustomSpell, CustomSpellPicker>(this.rootElem, modPlayer, { + new ListPicker, CustomSpell, CustomSpellPicker>(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.', diff --git a/ui/core/components/individual_sim_ui/settings_tab.ts b/ui/core/components/individual_sim_ui/settings_tab.ts index ae255bda83..f020ede198 100644 --- a/ui/core/components/individual_sim_ui/settings_tab.ts +++ b/ui/core/components/individual_sim_ui/settings_tab.ts @@ -349,7 +349,7 @@ export class SettingsTab extends SimTab { } private buildSavedDataPickers() { - const savedEncounterManager = new SavedDataManager(this.rightPanel, this.simUI.sim.encounter, { + const savedEncounterManager = new SavedDataManager(this.rightPanel, this.simUI, this.simUI.sim.encounter, { label: 'Encounter', header: {title: 'Saved Encounters'}, storageKey: this.simUI.getSavedEncounterStorageKey(), @@ -361,7 +361,7 @@ export class SettingsTab extends SimTab { fromJson: (obj: any) => SavedEncounter.fromJson(obj), }); - const savedSettingsManager = new SavedDataManager, SavedSettings>(this.rightPanel, this.simUI, { + const savedSettingsManager = new SavedDataManager, SavedSettings>(this.rightPanel, this.simUI, this.simUI, { label: 'Settings', header: {title: 'Saved Settings'}, storageKey: this.simUI.getSavedSettingsStorageKey(), @@ -425,9 +425,9 @@ export class SettingsTab extends SimTab { } else if (inputConfig.type == 'enum') { new EnumPicker(sectionElem, this.simUI.player, inputConfig); } else if (inputConfig.type == 'customRotation') { - new CustomRotationPicker(sectionElem, this.simUI.player, inputConfig); + new CustomRotationPicker(sectionElem, this.simUI, this.simUI.player, inputConfig); } else if (inputConfig.type == 'itemSwap'){ - new ItemSwapPicker(sectionElem, this.simUI.player, inputConfig) + new ItemSwapPicker(sectionElem, this.simUI, this.simUI.player, inputConfig) } }); }; diff --git a/ui/core/components/item_swap.ts b/ui/core/components/item_swap.ts index 63af026149..365cb4ce15 100644 --- a/ui/core/components/item_swap.ts +++ b/ui/core/components/item_swap.ts @@ -6,6 +6,7 @@ import { IconItemSwapPicker } from './gear_picker.js' import { Input } from './input.js' import { ItemSwapGear } from '../proto_utils/item_swap_gear.js'; import { EquippedItem } from '../proto_utils/equipped_item.js'; +import { SimUI } from '../sim_ui.js'; export interface ItemSwapPickerConfig { getValue: (player: Player) => ItemSwap, @@ -20,8 +21,7 @@ export interface ItemSwapIconInputConfig { } export class ItemSwapPicker extends Component { - - constructor(parentElem: HTMLElement, player: Player, config: ItemSwapPickerConfig) { + constructor(parentElem: HTMLElement, simUI: SimUI, player: Player, config: ItemSwapPickerConfig) { super(parentElem, 'item-swap-picker-root'); this.rootElem.classList.add('input-root', 'input-inline') @@ -31,9 +31,9 @@ export class ItemSwapPicker extends Component { label.textContent = "Item Swap" this.rootElem.appendChild(label); - let itemSwapContianer = Input.newGroupContainer(); - itemSwapContianer.classList.add('icon-group'); - this.rootElem.appendChild(itemSwapContianer); + let itemSwapContainer = Input.newGroupContainer(); + itemSwapContainer.classList.add('icon-group'); + this.rootElem.appendChild(itemSwapContainer); const gear = new ItemSwapGear(); config.values.forEach(value => { @@ -41,7 +41,7 @@ export class ItemSwapPicker extends Component { if (!fieldName) return - new IconItemSwapPicker(itemSwapContianer, player, value.itemSlot, gear, { + new IconItemSwapPicker(itemSwapContainer, simUI, player, value.itemSlot, gear, { changedEvent: (player: Player) => player.specOptionsChangeEmitter, getValue: (player: Player) => { const itemSwap = config.getValue(player) as unknown as ItemSwap diff --git a/ui/core/components/list_picker.ts b/ui/core/components/list_picker.ts index dfc18331fc..45d7935380 100644 --- a/ui/core/components/list_picker.ts +++ b/ui/core/components/list_picker.ts @@ -1,4 +1,5 @@ import { Tooltip } from 'bootstrap'; +import { SimUI } from '../sim_ui.js'; import { EventID, TypedEvent } from '../typed_event.js'; import { arrayEquals, swap } from '../utils.js'; @@ -26,7 +27,7 @@ export class ListPicker extends Input>; - constructor(parent: HTMLElement, modObject: ModObject, config: ListPickerConfig) { + constructor(parent: HTMLElement, simUI: SimUI, modObject: ModObject, config: ListPickerConfig) { super(parent, 'list-picker-root', modObject, config); this.config = config; this.itemPickerPairs = []; @@ -40,7 +41,7 @@ export class ListPicker extends Input${config.title}` : '' }
- + `; if (this.config.titleTooltip) diff --git a/ui/core/components/log_runner.ts b/ui/core/components/log_runner.ts index b1625df2b3..5db3188f68 100644 --- a/ui/core/components/log_runner.ts +++ b/ui/core/components/log_runner.ts @@ -12,8 +12,8 @@ export class LogRunner extends Component { this.rootElem.appendChild(controlBar); const simButton = document.createElement('button'); - simButton.classList.add('log-runner-button', 'sim-button'); - simButton.textContent = 'SIM 1 ITERATION'; + simButton.classList.add('log-runner-button', 'btn', `btn-${simUI.cssScheme}`); + simButton.textContent = 'Sim 1 Iteration'; controlBar.appendChild(simButton); const logsDiv = document.createElement('div'); diff --git a/ui/core/components/popup.ts b/ui/core/components/popup.ts index 104570f1c0..b44789427d 100644 --- a/ui/core/components/popup.ts +++ b/ui/core/components/popup.ts @@ -10,7 +10,6 @@ export class Popup extends Component { const computedStyles = window.getComputedStyle(parent); this.rootElem.style.setProperty('--main-text-color', computedStyles.getPropertyValue('--main-text-color').trim()); - this.rootElem.style.setProperty('--theme-color-primary', computedStyles.getPropertyValue('--theme-color-primary').trim()); this.rootElem.style.setProperty('--theme-color-background', computedStyles.getPropertyValue('--theme-color-background').trim()); this.rootElem.style.setProperty('--theme-color-background-raw', computedStyles.getPropertyValue('--theme-color-background-raw').trim()); diff --git a/ui/core/components/raid_sim_action.ts b/ui/core/components/raid_sim_action.ts index 91f0086441..db67a6aa98 100644 --- a/ui/core/components/raid_sim_action.ts +++ b/ui/core/components/raid_sim_action.ts @@ -158,7 +158,7 @@ export class RaidSimResultsManager { data-bs-toggle="tooltip" data-bs-title="Use as reference" > - Save as Reference + Save as Reference
diff --git a/ui/core/components/saved_data_manager.ts b/ui/core/components/saved_data_manager.ts index 88d0ca0b4d..2122f7f55d 100644 --- a/ui/core/components/saved_data_manager.ts +++ b/ui/core/components/saved_data_manager.ts @@ -4,6 +4,7 @@ import { ContentBlock, ContentBlockHeaderConfig } from './content_block'; import { Component } from '../components/component.js'; import { Tooltip } from 'bootstrap'; import { json } from 'stream/consumers'; +import { SimUI } from '../sim_ui.js'; export type SavedDataManagerConfig = { label: string; @@ -36,6 +37,7 @@ type SavedData = { }; export class SavedDataManager extends Component { + private readonly simUI: SimUI; private readonly modObject: ModObject; private readonly config: SavedDataManagerConfig; @@ -46,8 +48,9 @@ export class SavedDataManager extends Component { private readonly saveInput?: HTMLInputElement; private frozen: boolean; - constructor(parent: HTMLElement, modObject: ModObject, config: SavedDataManagerConfig) { + constructor(parent: HTMLElement, simUI: SimUI, modObject: ModObject, config: SavedDataManagerConfig) { super(parent, 'saved-data-manager-root'); + this.simUI = simUI; this.modObject = modObject; this.config = config; @@ -210,7 +213,7 @@ export class SavedDataManager extends Component {
- +
`; diff --git a/ui/core/components/settings_menu.ts b/ui/core/components/settings_menu.ts index d4bdd7800b..02daaebd4e 100644 --- a/ui/core/components/settings_menu.ts +++ b/ui/core/components/settings_menu.ts @@ -36,7 +36,7 @@ export class SettingsMenu extends Popup {
- +
Last used RNG seed:0 diff --git a/ui/core/components/stat_weights_action.ts b/ui/core/components/stat_weights_action.ts index f3cc7336e5..8a87484e68 100644 --- a/ui/core/components/stat_weights_action.ts +++ b/ui/core/components/stat_weights_action.ts @@ -54,7 +54,7 @@ class EpWeightsMenu extends Popup { this.rootElem.innerHTML = `
- +
@@ -67,23 +67,68 @@ class EpWeightsMenu extends Popup {
- +
-

The 'Current EPs' column displays the values currently used by the item pickers to sort items. Use icon above the EPs to use newly calculated EPs.

+

The 'Current EPs' column displays the values currently used by the item pickers to sort items. Use icon above the EPs to use newly calculated EPs.

- - - - - - - - - + + + + + + + + +
StatDPS WeightDPS EPHPS WeightHPS EPTPS WeightTPS EPDTPS WeightDTPS EPCurrent EP + DPS Weight + + + + + DPS EP + + + + + HPS Weight + + + + + HPS EP + + + + + TPS Weight + + + + + TPS EP + + + + + DTPS Weight + + + + + DTPS EP + + + + + Current EP + +
diff --git a/ui/core/individual_sim_ui.ts b/ui/core/individual_sim_ui.ts index 46b311c458..87c933fd67 100644 --- a/ui/core/individual_sim_ui.ts +++ b/ui/core/individual_sim_ui.ts @@ -1,96 +1,69 @@ -import { ActionId } from './proto_utils/action_id.js'; -import { BattleElixir, HandType } from './proto/common.js'; -import { BooleanPicker, BooleanPickerConfig } from './components/boolean_picker.js'; -import { CharacterStats, StatMods } from './components/character_stats.js'; -import { Class } from './proto/common.js'; -import { Conjured } from './proto/common.js'; -import { Consumes } from './proto/common.js'; -import { Cooldowns } from './proto/common.js'; -import { CooldownsPicker } from './components/individual_sim_ui/cooldowns_picker.js'; -import { Debuffs } from './proto/common.js'; -import { DetailedResults } from './components/detailed_results.js'; - -import { CustomRotationPicker } from './components/individual_sim_ui/custom_rotation_picker.js'; -import { Encounter as EncounterProto } from './proto/common.js'; -import { Encounter } from './encounter.js'; -import { EncounterPicker, EncounterPickerConfig } from './components/encounter_picker.js'; -import { EnumPicker, EnumPickerConfig } from './components/enum_picker.js'; -import { EquipmentSpec } from './proto/common.js'; -import { EventID, TypedEvent } from './typed_event.js'; -import { Flask } from './proto/common.js'; -import { Food } from './proto/common.js'; -import { Gear } from './proto_utils/gear.js'; -import { GearPicker } from './components/gear_picker.js'; -import { Glyphs } from './proto/common.js'; -import { GuardianElixir } from './proto/common.js'; -import { HealingModel } from './proto/common.js'; -import { HunterPetTalentsPicker } from './talents/hunter_pet.js'; -import { IconEnumPicker, IconEnumPickerConfig } from './components/icon_enum_picker.js'; -import { IconPicker, IconPickerConfig } from './components/icon_picker.js'; -import { ItemSlot } from './proto/common.js'; -import { IndividualBuffs } from './proto/common.js'; -import { IndividualSimSettings } from './proto/ui.js'; -import { Input } from './components/input.js'; -import { LogRunner } from './components/log_runner.js'; -import { MobType } from './proto/common.js'; -import { NumberPicker, NumberPickerConfig } from './components/number_picker.js'; -import { Party } from './party.js'; -import { PartyBuffs } from './proto/common.js'; -import { PetFood } from './proto/common.js'; -import { Player as PlayerProto } from './proto/api.js'; -import { Player } from './player.js'; -import { Potions } from './proto/common.js'; -import { Profession } from './proto/common.js'; -import { Race } from './proto/common.js'; -import { Raid } from './raid.js'; -import { RaidBuffs } from './proto/common.js'; -import { SavedDataConfig, SavedDataManager } from './components/saved_data_manager.js'; -import { SavedEncounter } from './proto/ui.js'; -import { SavedGearSet } from './proto/ui.js'; -import { SavedSettings } from './proto/ui.js'; -import { SavedTalents } from './proto/ui.js'; -import { SettingsMenu } from './components/settings_menu.js'; -import { Sim } from './sim.js'; -import { SimOptions } from './proto/api.js'; -import { SimSettings as SimSettingsProto } from './proto/ui.js'; -import { SimUI, SimWarning } from './sim_ui.js'; -import { Spec } from './proto/common.js'; -import { SpecOptions } from './proto_utils/utils.js'; -import { SpecRotation } from './proto_utils/utils.js'; -import { Stat, PseudoStat } from './proto/common.js'; -import { StatWeightsRequest, StatWeightsResult } from './proto/api.js'; -import { Stats } from './proto_utils/stats.js'; -import { Target } from './target.js'; -import { Target as TargetProto } from './proto/common.js'; -import { UnitStats } from './proto/common.js'; -import { addRaidSimAction, RaidSimResultsManager } from './components/raid_sim_action.js'; -import { addStatWeightsAction } from './components/stat_weights_action.js'; -import { equalsOrBothNull, getEnumValues } from './utils.js'; -import { getMetaGemConditionDescription } from './proto_utils/gems.js'; -import { getTalentPoints } from './proto_utils/utils.js'; -import { isDualWieldSpec } from './proto_utils/utils.js'; -import { simLaunchStatuses } from './launched_sims.js'; -import { makePetTypeInputConfig } from './talents/hunter_pet.js'; -import { newGlyphsPicker } from './talents/factory.js'; -import { newTalentsPicker } from './talents/factory.js'; -import { professionNames, raceNames } from './proto_utils/names.js'; -import { isHealingSpec, isTankSpec } from './proto_utils/utils.js'; -import { specToEligibleRaces } from './proto_utils/utils.js'; -import { specToLocalStorageKey } from './proto_utils/utils.js'; - -import { Tooltip } from 'bootstrap'; - -import * as Exporters from './components/exporters.js'; -import * as Importers from './components/importers.js'; -import * as IconInputs from './components/icon_inputs.js'; -import * as InputHelpers from './components/input_helpers.js'; -import * as Mechanics from './constants/mechanics.js'; -import * as OtherConstants from './constants/other.js'; -import * as Tooltips from './constants/tooltips.js'; -import { SettingsTab } from './components/individual_sim_ui/settings_tab.js'; -import { ContentBlock } from './components/content_block.js'; - -declare var tippy: any; +import { simLaunchStatuses } from './launched_sims'; +import { Player } from './player'; +import { SimUI, SimWarning } from './sim_ui'; +import { EventID, TypedEvent } from './typed_event'; + +import { CharacterStats, StatMods } from './components/character_stats'; +import { ContentBlock } from './components/content_block'; +import { DetailedResults } from './components/detailed_results'; +import { EncounterPickerConfig } from './components/encounter_picker'; +import { EnumPicker } from './components/enum_picker'; +import { GearPicker } from './components/gear_picker'; +import { IconEnumPicker } from './components/icon_enum_picker'; +import { LogRunner } from './components/log_runner'; +import { addRaidSimAction, RaidSimResultsManager } from './components/raid_sim_action'; +import { SavedDataConfig, SavedDataManager } from './components/saved_data_manager'; +import { addStatWeightsAction } from './components/stat_weights_action'; + +import { SettingsTab } from './components/individual_sim_ui/settings_tab'; + +import { + Class, + Consumes, + Debuffs, + Encounter as EncounterProto, + EquipmentSpec, + Glyphs, + HandType, + IndividualBuffs, + ItemSlot, + PartyBuffs, + Profession, + PseudoStat, + Race, + RaidBuffs, + Spec, + Stat, + UnitStats, +} from './proto/common'; + +import { IndividualSimSettings, SavedGearSet, SavedTalents } from './proto/ui'; +import { StatWeightsResult } from './proto/api'; + +import { Gear } from './proto_utils/gear'; +import { getMetaGemConditionDescription } from './proto_utils/gems'; +import { professionNames } from './proto_utils/names'; +import { Stats } from './proto_utils/stats'; +import { + getTalentPoints, + isHealingSpec, + isTankSpec, + SpecOptions, + SpecRotation, + specToEligibleRaces, + specToLocalStorageKey, +} from './proto_utils/utils'; + +import { HunterPetTalentsPicker, makePetTypeInputConfig } from './talents/hunter_pet'; +import { newGlyphsPicker, newTalentsPicker } from './talents/factory'; + +import * as Exporters from './components/exporters'; +import * as Importers from './components/importers'; +import * as IconInputs from './components/icon_inputs'; +import * as InputHelpers from './components/input_helpers'; +import * as Mechanics from './constants/mechanics'; +import * as Tooltips from './constants/tooltips'; + declare var pako: any; const SAVED_GEAR_STORAGE_KEY = '__savedGear__'; @@ -120,6 +93,8 @@ export interface OtherDefaults { export interface IndividualSimUIConfig { // Additional css class to add to the root element. cssClass: string, + // Used to generate schemed components. E.g. 'shaman', 'druid', 'raid' + cssScheme: string, knownIssues?: Array; warnings?: Array<(simUI: IndividualSimUI) => SimWarning>, @@ -201,6 +176,7 @@ export abstract class IndividualSimUI extends SimUI { constructor(parentElem: HTMLElement, player: Player, config: IndividualSimUIConfig) { super(parentElem, player.sim, { + cssScheme: config.cssScheme, spec: player.spec, knownIssues: config.knownIssues, launchStatus: simLaunchStatuses[player.spec], @@ -375,33 +351,35 @@ export abstract class IndividualSimUI extends SimUI {
`); - const gearPicker = new GearPicker(this.rootElem.getElementsByClassName('gear-picker')[0] as HTMLElement, this.player); - - const savedGearManager = new SavedDataManager, SavedGearSet>(this.rootElem.getElementsByClassName('saved-gear-manager')[0] as HTMLElement, this.player, { - header: {title: "Gear Sets"}, - label: 'Gear Set', - storageKey: this.getSavedGearStorageKey(), - getData: (player: Player) => { - return SavedGearSet.create({ - gear: player.getGear().asSpec(), - bonusStatsStats: player.getBonusStats().toProto(), - }); - }, - setData: (eventID: EventID, player: Player, newSavedGear: SavedGearSet) => { - TypedEvent.freezeAllAndDo(() => { - player.setGear(eventID, this.sim.db.lookupEquipmentSpec(newSavedGear.gear || EquipmentSpec.create())); - if (newSavedGear.bonusStats && newSavedGear.bonusStats.some(s => s != 0)) { - player.setBonusStats(eventID, new Stats(newSavedGear.bonusStats)); - } else { - player.setBonusStats(eventID, Stats.fromProto(newSavedGear.bonusStatsStats || UnitStats.create())); - } - }); - }, - changeEmitters: [this.player.changeEmitter], - equals: (a: SavedGearSet, b: SavedGearSet) => SavedGearSet.equals(a, b), - toJson: (a: SavedGearSet) => SavedGearSet.toJson(a), - fromJson: (obj: any) => SavedGearSet.fromJson(obj), - }); + const gearPicker = new GearPicker(this.rootElem.getElementsByClassName('gear-picker')[0] as HTMLElement, this, this.player); + + const savedGearManager = new SavedDataManager, SavedGearSet>( + this.rootElem.getElementsByClassName('saved-gear-manager')[0] as HTMLElement, this, this.player, { + header: {title: "Gear Sets"}, + label: 'Gear Set', + storageKey: this.getSavedGearStorageKey(), + getData: (player: Player) => { + return SavedGearSet.create({ + gear: player.getGear().asSpec(), + bonusStatsStats: player.getBonusStats().toProto(), + }); + }, + setData: (eventID: EventID, player: Player, newSavedGear: SavedGearSet) => { + TypedEvent.freezeAllAndDo(() => { + player.setGear(eventID, this.sim.db.lookupEquipmentSpec(newSavedGear.gear || EquipmentSpec.create())); + if (newSavedGear.bonusStats && newSavedGear.bonusStats.some(s => s != 0)) { + player.setBonusStats(eventID, new Stats(newSavedGear.bonusStats)); + } else { + player.setBonusStats(eventID, Stats.fromProto(newSavedGear.bonusStatsStats || UnitStats.create())); + } + }); + }, + changeEmitters: [this.player.changeEmitter], + equals: (a: SavedGearSet, b: SavedGearSet) => SavedGearSet.equals(a, b), + toJson: (a: SavedGearSet) => SavedGearSet.toJson(a), + fromJson: (obj: any) => SavedGearSet.fromJson(obj), + } + ); this.sim.waitForInit().then(() => { savedGearManager.loadUserData(); @@ -446,25 +424,27 @@ export abstract class IndividualSimUI extends SimUI { this.rootElem.querySelector('#talents-tab-tab')?.classList.add('sim-tab'); - const savedTalentsManager = new SavedDataManager, SavedTalents>(this.rootElem.getElementsByClassName('saved-talents-manager')[0] as HTMLElement, this.player, { - label: 'Talents', - header: {title: 'Saved Talents'}, - storageKey: this.getSavedTalentsStorageKey(), - getData: (player: Player) => SavedTalents.create({ - talentsString: player.getTalentsString(), - glyphs: player.getGlyphs(), - }), - setData: (eventID: EventID, player: Player, newTalents: SavedTalents) => { - TypedEvent.freezeAllAndDo(() => { - player.setTalentsString(eventID, newTalents.talentsString); - player.setGlyphs(eventID, newTalents.glyphs || Glyphs.create()); - }); - }, - changeEmitters: [this.player.talentsChangeEmitter, this.player.glyphsChangeEmitter], - equals: (a: SavedTalents, b: SavedTalents) => SavedTalents.equals(a, b), - toJson: (a: SavedTalents) => SavedTalents.toJson(a), - fromJson: (obj: any) => SavedTalents.fromJson(obj), - }); + const savedTalentsManager = new SavedDataManager, SavedTalents>( + this.rootElem.getElementsByClassName('saved-talents-manager')[0] as HTMLElement, this, this.player, { + label: 'Talents', + header: {title: 'Saved Talents'}, + storageKey: this.getSavedTalentsStorageKey(), + getData: (player: Player) => SavedTalents.create({ + talentsString: player.getTalentsString(), + glyphs: player.getGlyphs(), + }), + setData: (eventID: EventID, player: Player, newTalents: SavedTalents) => { + TypedEvent.freezeAllAndDo(() => { + player.setTalentsString(eventID, newTalents.talentsString); + player.setGlyphs(eventID, newTalents.glyphs || Glyphs.create()); + }); + }, + changeEmitters: [this.player.talentsChangeEmitter, this.player.glyphsChangeEmitter], + equals: (a: SavedTalents, b: SavedTalents) => SavedTalents.equals(a, b), + toJson: (a: SavedTalents) => SavedTalents.toJson(a), + fromJson: (obj: any) => SavedTalents.fromJson(obj), + } + ); this.sim.waitForInit().then(() => { savedTalentsManager.loadUserData(); @@ -478,7 +458,9 @@ export abstract class IndividualSimUI extends SimUI { }); if (this.player.getClass() == Class.ClassHunter) { - const petTalentsPicker = new HunterPetTalentsPicker(this.rootElem.getElementsByClassName('pet-talents-picker')[0] as HTMLElement, this.player as Player); + const petTalentsPicker = new HunterPetTalentsPicker( + this.rootElem.getElementsByClassName('pet-talents-picker')[0] as HTMLElement, this, this.player as Player + ); let curShown = 0; const updateToggle = () => { diff --git a/ui/core/sim_ui.ts b/ui/core/sim_ui.ts index e804dd51ee..f4acd8b7ae 100644 --- a/ui/core/sim_ui.ts +++ b/ui/core/sim_ui.ts @@ -28,6 +28,8 @@ export interface SimWarning { } export interface SimUIConfig { + // Additional css class to add to the root element. + cssScheme: string; // The spec, if an individual sim, or null if the raid sim. spec: Spec | null, launchStatus: LaunchStatus, @@ -37,6 +39,7 @@ export interface SimUIConfig { // Shared UI for all individual sims and the raid sim. export abstract class SimUI extends Component { readonly sim: Sim; + readonly cssScheme: string; readonly isWithinRaidSim: boolean; // Emits when anything from the sim, raid, or encounter changes. @@ -56,6 +59,7 @@ export abstract class SimUI extends Component { constructor(parentElem: HTMLElement, sim: Sim, config: SimUIConfig) { super(parentElem, 'sim-ui'); this.sim = sim; + this.cssScheme = config.cssScheme; this.rootElem.innerHTML = simHTML; this.simContentContainer = this.rootElem.querySelector('.sim-content') as HTMLElement; this.simHeader = new SimHeader(this.simContentContainer, this); @@ -148,7 +152,7 @@ export abstract class SimUI extends Component { addAction(name: string, cssClass: string, actFn: () => void) { const button = document.createElement('button'); - button.classList.add('btn', 'btn-primary', 'w-100', cssClass); + button.classList.add('btn', `btn-${this.cssScheme}`, 'w-100', cssClass); button.textContent = name; button.addEventListener('click', actFn); this.simActionsContainer.appendChild(button); diff --git a/ui/core/talents/hunter_pet.ts b/ui/core/talents/hunter_pet.ts index e0f3a2c8a2..555f22dcca 100644 --- a/ui/core/talents/hunter_pet.ts +++ b/ui/core/talents/hunter_pet.ts @@ -11,6 +11,7 @@ import { TalentsConfig, TalentsPicker, newTalentsConfig } from './talents_picker import { protoToTalentString, talentStringToProto } from './factory.js'; import * as InputHelpers from '../components/input_helpers.js'; +import { SimUI } from '../sim_ui.js'; export function makePetTypeInputConfig(includeLabel: boolean): InputHelpers.TypedIconEnumPickerConfig, PetType> { return InputHelpers.makeSpecOptionsEnumIconInput({ @@ -101,6 +102,7 @@ const categoryOrder = [PetCategory.Cunning, PetCategory.Ferocity, PetCategory.Te const categoryClasses = ['cunning', 'ferocity', 'tenacity']; export class HunterPetTalentsPicker extends Component { + private readonly simUI: SimUI; private readonly player: Player; private curCategory: PetCategory | null; private curTalents: HunterPetTalents; @@ -108,8 +110,9 @@ export class HunterPetTalentsPicker extends Component { // Not saved to storage, just holds last-used values for this session. private savedSets: Array; - constructor(parent: HTMLElement, player: Player) { + constructor(parent: HTMLElement, simUI: SimUI, player: Player) { super(parent, 'hunter-pet-talents-picker'); + this.simUI = simUI; this.player = player; this.rootElem.innerHTML = ` @@ -147,7 +150,7 @@ export class HunterPetTalentsPicker extends Component { maxPoints: 16, }); - const savedTalentsManager = new SavedDataManager, string>(pickerContainer, this.player, { + const savedTalentsManager = new SavedDataManager, string>(pickerContainer, this.simUI, this.player, { presetsOnly: true, label: 'Pet Talents', storageKey: '__NEVER_USED__', diff --git a/ui/deathknight/sim.ts b/ui/deathknight/sim.ts index a53e228f66..e50a13b7b9 100644 --- a/ui/deathknight/sim.ts +++ b/ui/deathknight/sim.ts @@ -27,6 +27,7 @@ export class DeathknightSimUI extends IndividualSimUI { constructor(parentElem: HTMLElement, player: Player) { super(parentElem, player, { cssClass: 'deathknight-sim-ui', + cssScheme: 'death-knight', // List any known bugs / issues here and they'll be shown on the site. knownIssues: [ "Blood dps is not implemented.", diff --git a/ui/detailed_results/index.ts b/ui/detailed_results/index.ts index d58aa7f0a4..82b39f87a1 100644 --- a/ui/detailed_results/index.ts +++ b/ui/detailed_results/index.ts @@ -22,13 +22,15 @@ declare var Chart: any; Database.get(); +let cssScheme; + const urlParams = new URLSearchParams(window.location.search); +if (urlParams.has('cssScheme')) { + cssScheme = urlParams.get('cssScheme'); +} if (urlParams.has('mainTextColor')) { document.body.style.setProperty('--main-text-color', urlParams.get('mainTextColor')!); } -if (urlParams.has('themeColorPrimary')) { - document.body.style.setProperty('--theme-color-primary', urlParams.get('themeColorPrimary')!); -} if (urlParams.has('themeColorBackground')) { document.body.style.setProperty('--theme-color-background', urlParams.get('themeColorBackground')!); } @@ -270,6 +272,7 @@ const dtpsMeleeMetrics = new DtpsMeleeMetricsTable({ parent: document.body.getEl const timeline = new Timeline({ parent: document.body.getElementsByClassName('timeline')[0] as HTMLElement, + cssScheme: cssScheme, resultsEmitter: resultsEmitter, colorSettings: colorSettings, }); diff --git a/ui/detailed_results/result_component.ts b/ui/detailed_results/result_component.ts index 9f36c5b620..f3281a1037 100644 --- a/ui/detailed_results/result_component.ts +++ b/ui/detailed_results/result_component.ts @@ -14,6 +14,7 @@ export interface SimResultData { export interface ResultComponentConfig { parent: HTMLElement, rootCssClass?: string, + cssScheme?: String | null, resultsEmitter: TypedEvent, colorSettings: ColorSettings, }; diff --git a/ui/detailed_results/timeline.ts b/ui/detailed_results/timeline.ts index 69f0c184ff..31e8a885e8 100644 --- a/ui/detailed_results/timeline.ts +++ b/ui/detailed_results/timeline.ts @@ -58,7 +58,7 @@ export class Timeline extends ResultComponent {
Timeline data visualizes only 1 sim iteration. -
SIM 1 ITERATION
+
Sim 1 Iteration