diff --git a/sim/core/item_swaps.go b/sim/core/item_swaps.go index cab1c886b5..9960876d0f 100644 --- a/sim/core/item_swaps.go +++ b/sim/core/item_swaps.go @@ -31,8 +31,9 @@ type ItemSwap struct { } /* - TODO All the extra parameters here and the code in multiple places for handling the Weapon struct is really messy, - we'll need to figure out something cleaner as this will be quite error-prone +TODO All the extra parameters here and the code in multiple places for handling the Weapon struct is really messy, + + we'll need to figure out something cleaner as this will be quite error-prone */ func (character *Character) EnableItemSwap(itemSwap *proto.ItemSwap, mhCritMultiplier float64, ohCritMultiplier float64, rangedCritMultiplier float64) { items := getItems(itemSwap) @@ -55,7 +56,7 @@ func (character *Character) RegisterOnItemSwap(callback OnSwapItem) { character.ItemSwap.onSwapCallbacks = append(character.ItemSwap.onSwapCallbacks, callback) } -//Helper for handling Effects that use PPMManager to toggle the aura on/off +// Helper for handling Effects that use PPMManager to toggle the aura on/off func (swap *ItemSwap) RegisterOnSwapItemForEffectWithPPMManager(effectID int32, ppm float64, ppmm *PPMManager, aura *Aura) { character := swap.character character.RegisterOnItemSwap(func(sim *Simulation) { @@ -74,7 +75,7 @@ func (swap *ItemSwap) RegisterOnSwapItemForEffectWithPPMManager(effectID int32, } -//Helper for handling Effects that use the effectID to toggle the aura on and off +// Helper for handling Effects that use the effectID to toggle the aura on and off func (swap *ItemSwap) ReigsterOnSwapItemForEffect(effectID int32, aura *Aura) { character := swap.character character.RegisterOnItemSwap(func(sim *Simulation) { diff --git a/sim/hunter/pet_abilities.go b/sim/hunter/pet_abilities.go index 46eb0a37cb..86936abd6e 100644 --- a/sim/hunter/pet_abilities.go +++ b/sim/hunter/pet_abilities.go @@ -75,7 +75,7 @@ func (ability *PetAbility) TryCast(sim *core.Simulation, target *core.Unit, hp * return false } - hp.SpendFocus(sim, ability.Cost * hp.PseudoStats.CostMultiplier, ability.ActionID) + hp.SpendFocus(sim, ability.Cost*hp.PseudoStats.CostMultiplier, ability.ActionID) ability.Cast(sim, target) return true } diff --git a/sim/paladin/exorcism.go b/sim/paladin/exorcism.go index 86b25a692b..099f4caec0 100644 --- a/sim/paladin/exorcism.go +++ b/sim/paladin/exorcism.go @@ -52,7 +52,7 @@ func (paladin *Paladin) registerExorcismSpell() { bonusCrit := core.TernaryFloat64( target.MobType == proto.MobType_MobTypeDemon || target.MobType == proto.MobType_MobTypeUndead, - 100 * core.CritRatingPerCritChance, + 100*core.CritRatingPerCritChance, 0) spell.BonusCritRating += bonusCrit diff --git a/sim/shaman/shaman.go b/sim/shaman/shaman.go index 465ff986fc..3863835728 100644 --- a/sim/shaman/shaman.go +++ b/sim/shaman/shaman.go @@ -125,7 +125,7 @@ type Shaman struct { FlameShockDot *core.Dot - MaelstromWeaponAura *core.Aura + MaelstromWeaponAura *core.Aura } // Implemented by each Shaman spec. diff --git a/ui/core/components/base_modal.ts b/ui/core/components/base_modal.ts index 46e8b07e6d..e500a474c2 100644 --- a/ui/core/components/base_modal.ts +++ b/ui/core/components/base_modal.ts @@ -3,41 +3,71 @@ import { Component } from './component'; import { Modal } from 'bootstrap'; +type ModalSize = 'sm' | 'md' | 'lg' | 'xl'; + type BaseModalConfig = { closeButton?: CloseButtonConfig, + // Whether or not to add a modal-footer element + footer?: boolean, + // Whether or not to add a modal-header element header?: boolean, + // Whether or not to allow modal contents to extend past the screen height. + // When true, the modal is fixed to the screen height and body contents will scroll. + scrollContents?: boolean, + // Specify the size of the modal + size?: ModalSize, + // A title for the modal + title?: string | null, }; const DEFAULT_CONFIG = { closeButton: {}, + footer: false, header: true, + scrollContents: false, + size: 'lg' as ModalSize, + title: null, } export class BaseModal extends Component { readonly config: BaseModalConfig; readonly modal: Modal; + readonly dialog: HTMLElement; readonly header: HTMLElement | undefined; readonly body: HTMLElement; + readonly footer: HTMLElement | undefined; - constructor(cssClass: string, config: BaseModalConfig = {}) { - super(document.body, 'modal'); + constructor(parent: HTMLElement, cssClass: string, config: BaseModalConfig = {}) { + super(parent, 'modal'); this.config = {...DEFAULT_CONFIG, ...config}; + const modalSizeKlass = this.config.size && this.config.size != 'md' ? `modal-${this.config.size}` : ''; + this.rootElem.classList.add('fade'); this.rootElem.innerHTML = ` -
+
`; + this.dialog = this.rootElem.querySelector('.modal-dialog') as HTMLElement; + + if (this.config.scrollContents) { + this.dialog.classList.add('modal-overflow-scroll'); + } + const container = this.rootElem.querySelector('.modal-content') as HTMLElement; if (this.config.header) { this.header = document.createElement('div'); this.header.classList.add('modal-header'); container.appendChild(this.header); + + if (this.config.title) { + this.header.insertAdjacentHTML('afterbegin', `
${this.config.title}
`); + } } this.body = document.createElement('div'); @@ -46,6 +76,12 @@ export class BaseModal extends Component { this.addCloseButton(); + if (this.config.footer) { + this.footer = document.createElement('div'); + this.footer.classList.add('modal-footer'); + container.appendChild(this.footer); + } + this.modal = new Modal(this.rootElem); this.open(); @@ -69,7 +105,9 @@ export class BaseModal extends Component { this.rootElem.addEventListener('hide.bs.modal', () => { const modals = this.rootElem.parentElement?.querySelectorAll('.modal') as NodeListOf; const siblingModals = Array.from(modals).filter((e) => e != this.rootElem); - siblingModals[siblingModals.length - 1].style.zIndex = '1055'; + + if (siblingModals.length) + siblingModals[siblingModals.length - 1].style.zIndex = '1055'; }); this.modal.show(); diff --git a/ui/core/components/boolean_picker.ts b/ui/core/components/boolean_picker.ts index ba965e8c6b..f83e806f87 100644 --- a/ui/core/components/boolean_picker.ts +++ b/ui/core/components/boolean_picker.ts @@ -16,10 +16,7 @@ export class BooleanPicker extends Input { constructor(parent: HTMLElement, modObject: ModObject, config: BooleanPickerConfig) { super(parent, 'boolean-picker-root', modObject, config); - this.rootElem.classList.add( - config.cssScheme ? `form-check-${config.cssScheme}` : 'form-check', - 'form-check-reverse' - ); + this.rootElem.classList.add('form-check', 'form-check-reverse'); this.inputElem = document.createElement('input'); this.inputElem.type = 'checkbox'; diff --git a/ui/core/components/detailed_results.ts b/ui/core/components/detailed_results.ts index 0694a36035..5021897555 100644 --- a/ui/core/components/detailed_results.ts +++ b/ui/core/components/detailed_results.ts @@ -211,50 +211,40 @@ export abstract class DetailedResults extends Component { this.simUI?.sim.settingsChangeEmitter.on(async () => await this.updateSettings()); - const computedStyles = window.getComputedStyle(this.rootElem); - - const colorSettings = { - mainTextColor: computedStyles.getPropertyValue('--main-text-color'), - }; - - Chart.defaults.color = colorSettings.mainTextColor; + Chart.defaults.color = 'white'; this.resultsFilter = new ResultsFilter({ parent: this.rootElem.getElementsByClassName('results-filter')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, - colorSettings: colorSettings, }); (Array.from(this.rootElem.getElementsByClassName('topline-results')) as Array).forEach(toplineResultsDiv => { - new ToplineResults({ parent: toplineResultsDiv, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); + new ToplineResults({ parent: toplineResultsDiv, resultsEmitter: this.resultsEmitter }); }); - const castMetrics = new CastMetricsTable({ parent: this.rootElem.getElementsByClassName('cast-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); - const meleeMetrics = new MeleeMetricsTable({ parent: this.rootElem.getElementsByClassName('melee-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); - const spellMetrics = new SpellMetricsTable({ parent: this.rootElem.getElementsByClassName('spell-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); - const healingMetrics = new HealingMetricsTable({ parent: this.rootElem.getElementsByClassName('healing-spell-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); - const resourceMetrics = new ResourceMetricsTable({ parent: this.rootElem.getElementsByClassName('resource-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); - const playerDamageMetrics = new PlayerDamageMetricsTable({ parent: this.rootElem.getElementsByClassName('player-damage-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }, this.resultsFilter); + const castMetrics = new CastMetricsTable({ parent: this.rootElem.getElementsByClassName('cast-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); + const meleeMetrics = new MeleeMetricsTable({ parent: this.rootElem.getElementsByClassName('melee-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); + const spellMetrics = new SpellMetricsTable({ parent: this.rootElem.getElementsByClassName('spell-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); + const healingMetrics = new HealingMetricsTable({ parent: this.rootElem.getElementsByClassName('healing-spell-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); + const resourceMetrics = new ResourceMetricsTable({ parent: this.rootElem.getElementsByClassName('resource-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); + const playerDamageMetrics = new PlayerDamageMetricsTable({ parent: this.rootElem.getElementsByClassName('player-damage-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }, this.resultsFilter); const buffAuraMetrics = new AuraMetricsTable({ parent: this.rootElem.getElementsByClassName('buff-aura-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, - colorSettings: colorSettings, }, false); const debuffAuraMetrics = new AuraMetricsTable({ parent: this.rootElem.getElementsByClassName('debuff-aura-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, - colorSettings: colorSettings, }, true); - const dpsHistogram = new DpsHistogram({ parent: this.rootElem.getElementsByClassName('dps-histogram')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); + const dpsHistogram = new DpsHistogram({ parent: this.rootElem.getElementsByClassName('dps-histogram')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); - const dtpsMeleeMetrics = new DtpsMeleeMetricsTable({ parent: this.rootElem.getElementsByClassName('dtps-melee-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); - const dtpsSpellMetrics = new DtpsSpellMetricsTable({ parent: this.rootElem.getElementsByClassName('dtps-spell-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter, colorSettings: colorSettings }); + const dtpsMeleeMetrics = new DtpsMeleeMetricsTable({ parent: this.rootElem.getElementsByClassName('dtps-melee-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); + const dtpsSpellMetrics = new DtpsSpellMetricsTable({ parent: this.rootElem.getElementsByClassName('dtps-spell-metrics')[0] as HTMLElement, resultsEmitter: this.resultsEmitter }); const timeline = new Timeline({ parent: this.rootElem.getElementsByClassName('timeline')[0] as HTMLElement, cssScheme: cssScheme, resultsEmitter: this.resultsEmitter, - colorSettings: colorSettings, }); document.getElementById('timelineTabTab')?.addEventListener('click', event => timeline.render()); @@ -376,19 +366,15 @@ export class EmbeddedDetailedResults extends DetailedResults { const newTabBtn = document.createElement('div'); newTabBtn.classList.add('detailed-results-controls-div'); - newTabBtn.innerHTML = ``; + newTabBtn.innerHTML = ``; this.rootElem.prepend(newTabBtn); 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('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()); - url.searchParams.append('themeBackgroundOpacity', computedStyles.getPropertyValue('--theme-background-opacity').trim()); + url.searchParams.append('cssClass', simUI.cssClass); + if (simUI.isIndividualSim()) { url.searchParams.append('isIndividualSim', ''); this.rootElem.classList.add('individual-sim'); diff --git a/ui/core/components/detailed_results/color_settings.ts b/ui/core/components/detailed_results/color_settings.ts index 53a479fa96..52c73b504b 100644 --- a/ui/core/components/detailed_results/color_settings.ts +++ b/ui/core/components/detailed_results/color_settings.ts @@ -1,7 +1,3 @@ -export type ColorSettings = { - mainTextColor: string, -}; - export const actionColors: Array = [ '#dd9933', '#67074e', diff --git a/ui/core/components/detailed_results/result_component.ts b/ui/core/components/detailed_results/result_component.ts index 0589468e93..30f4eba8a2 100644 --- a/ui/core/components/detailed_results/result_component.ts +++ b/ui/core/components/detailed_results/result_component.ts @@ -3,8 +3,6 @@ import { SimResult, SimResultFilter } from '../..//proto_utils/sim_result.js'; import { Component } from '../../components/component.js'; import { EventID, TypedEvent } from '../../typed_event.js'; -import { ColorSettings } from './color_settings.js'; - export interface SimResultData { eventID: EventID, result: SimResult, @@ -16,17 +14,13 @@ export interface ResultComponentConfig { rootCssClass?: string, cssScheme?: String | null, resultsEmitter: TypedEvent, - colorSettings: ColorSettings, }; export abstract class ResultComponent extends Component { - private readonly colorSettings: ColorSettings; - private lastSimResult: SimResultData | null; constructor(config: ResultComponentConfig) { super(config.parent, config.rootCssClass || ''); - this.colorSettings = config.colorSettings; this.lastSimResult = null; config.resultsEmitter.on((eventID, resultData) => { diff --git a/ui/core/components/detailed_results/timeline.ts b/ui/core/components/detailed_results/timeline.ts index 756bbf95b7..98ba3d3771 100644 --- a/ui/core/components/detailed_results/timeline.ts +++ b/ui/core/components/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
-
-
- - -
- `; + super(parent, 'exporter', {title: title, footer: true}); - this.addCloseButton(); + this.body.innerHTML = ` + + `; + this.footer!.innerHTML = ` + + ${allowDownload ? ` + + ` : '' + } + `; this.textElem = this.rootElem.getElementsByClassName('exporter-textarea')[0] as HTMLElement; @@ -44,17 +47,21 @@ export abstract class Exporter extends Popup { alert(data); } else { navigator.clipboard.writeText(data); + const originalContent = clipboardButton.innerHTML; + clipboardButton.style.width = `${clipboardButton.getBoundingClientRect().width.toFixed(3)}px`; + clipboardButton.innerHTML = ` Copied`; + setTimeout(() => { + clipboardButton.innerHTML = originalContent; + }, 1500); } }); - const downloadButton = this.rootElem.getElementsByClassName('download-button')[0] as HTMLElement; if (allowDownload) { + const downloadButton = this.rootElem.getElementsByClassName('download-button')[0] as HTMLElement; downloadButton.addEventListener('click', event => { const data = this.textElem.textContent!; downloadString(data, 'wowsims.json'); }); - } else { - downloadButton.remove(); } } diff --git a/ui/core/components/filters_menu.ts b/ui/core/components/filters_menu.ts index 1a61ba1209..90b283694a 100644 --- a/ui/core/components/filters_menu.ts +++ b/ui/core/components/filters_menu.ts @@ -15,33 +15,17 @@ import { } from '../proto_utils/utils.js'; import { Player } from '../player.js'; import { Sim } from '../sim.js'; -import { EventID, TypedEvent } from '../typed_event.js'; +import { EventID } from '../typed_event.js'; import { getEnumValues } from '../utils.js'; import { BooleanPicker } from './boolean_picker.js'; import { NumberPicker } from './number_picker.js'; -import { Popup } from './popup.js'; +import { BaseModal } from './base_modal.js'; import { Input } from './input.js'; -declare var tippy: any; - -export class FiltersMenu extends Popup { - private readonly contentElem: HTMLElement; - +export class FiltersMenu extends BaseModal { constructor(rootElem: HTMLElement, player: Player, slot: ItemSlot) { - super(rootElem); - - this.rootElem.classList.add('filters-menu'); - this.rootElem.innerHTML = ` -
- FILTERS -
-
-
- `; - this.addCloseButton(); - - this.contentElem = this.rootElem.getElementsByClassName('menu-content')[0] as HTMLElement; + super(rootElem, 'filters-menu', {size: 'md', title: 'Filters'}); if (Player.ARMOR_SLOTS.includes(slot)) { const maxArmorType = classToMaxArmorType[player.getClass()]; @@ -74,11 +58,9 @@ export class FiltersMenu extends Popup { const weaponTypeSection = this.newSection('Weapon Type'); weaponTypeSection.classList.add('filters-menu-section-bool-list'); const weaponTypes = classToEligibleWeaponTypes[player.getClass()].map(ewt => ewt.weaponType); - const weaponTypesGroup = Input.newGroupContainer(); - weaponTypeSection.appendChild(weaponTypesGroup); weaponTypes.forEach(weaponType => { - new BooleanPicker(weaponTypesGroup, player.sim, { + new BooleanPicker(weaponTypeSection, player.sim, { label: weaponTypeNames[weaponType], inline: true, changedEvent: (sim: Sim) => sim.filtersChangeEmitter, @@ -158,11 +140,9 @@ export class FiltersMenu extends Popup { } const rangedWeaponTypeSection = this.newSection('Ranged Weapon Type'); rangedWeaponTypeSection.classList.add('filters-menu-section-bool-list'); - const rangedWeaponTypesGroup = Input.newGroupContainer(); - rangedWeaponTypeSection.appendChild(rangedWeaponTypesGroup); rangedWeaponTypes.forEach(rangedWeaponType => { - new BooleanPicker(rangedWeaponTypesGroup, player.sim, { + new BooleanPicker(rangedWeaponTypeSection, player.sim, { label: rangedWeaponTypeNames[rangedWeaponType], inline: true, changedEvent: (sim: Sim) => sim.filtersChangeEmitter, @@ -213,13 +193,12 @@ export class FiltersMenu extends Popup { private newSection(name: string): HTMLElement { const section = document.createElement('div'); section.classList.add('menu-section'); - this.contentElem.appendChild(section); + this.body.appendChild(section); section.innerHTML = `
- ${name} -
-
+
${name}
+
`; return section.getElementsByClassName('menu-section-content')[0] as HTMLElement; } diff --git a/ui/core/components/gear_picker.ts b/ui/core/components/gear_picker.ts index 0dc92e3e41..737ef0e548 100644 --- a/ui/core/components/gear_picker.ts +++ b/ui/core/components/gear_picker.ts @@ -21,7 +21,6 @@ import { import { Component } from './component.js'; import { FiltersMenu } from './filters_menu.js'; -import { Popup } from './popup.js'; import { makePhaseSelector } from './other_inputs.js'; import { makeShow1hWeaponsSelector } from './other_inputs.js'; import { makeShow2hWeaponsSelector } from './other_inputs.js'; @@ -29,8 +28,8 @@ import { makeShowMatchingGemsSelector } from './other_inputs.js'; import { Input, InputConfig } from './input.js'; import {ItemSwapGear } from '../proto_utils/gear.js' import { SimUI } from '../sim_ui.js'; +import { BaseModal } from './base_modal.js'; -declare var $: any; declare var tippy: any; declare var WowSim: any; @@ -401,30 +400,24 @@ interface GearData { changeEvent: TypedEvent, } -class SelectorModal extends Popup { +class SelectorModal extends BaseModal { private readonly simUI: SimUI; private player: Player; private readonly tabsElem: HTMLElement; private readonly contentElem: HTMLElement; constructor(parent: HTMLElement, simUI: SimUI, player: Player, slot: ItemSlot, equippedItem: EquippedItem | null, eligibleItems: Array, eligibleEnchants: Array, gearData: GearData) { - super(parent); + super(parent, 'selector-modal'); this.simUI = simUI; this.player = player; window.scrollTo({top: 0}); - this.rootElem.classList.add('selector-modal'); - this.rootElem.innerHTML = ` -
    -
-
-
- `; + this.header!.insertAdjacentHTML('afterbegin', `
    `); + this.body.innerHTML = `
    ` - this.addCloseButton(); - this.tabsElem = this.rootElem.getElementsByClassName('selector-modal-tabs')[0] as HTMLElement; - this.contentElem = this.rootElem.getElementsByClassName('selector-modal-tab-content')[0] as HTMLElement; + this.tabsElem = this.rootElem.querySelector('.selector-modal-tabs') as HTMLElement; + this.contentElem = this.rootElem.querySelector('.selector-modal-tab-content') as HTMLElement; this.setData(slot, equippedItem, eligibleItems, eligibleEnchants, gearData); } @@ -644,7 +637,7 @@ class SelectorModal extends Popup { >
    - +
    @@ -681,7 +674,7 @@ class SelectorModal extends Popup { const filtersButton = tabContent.getElementsByClassName('selector-modal-filters-button')[0] as HTMLElement; if (FiltersMenu.anyFiltersForSlot(slot)) { - filtersButton.addEventListener('click', () => new FiltersMenu(this.rootElem, this.player, slot)); + filtersButton.addEventListener('click', () => new FiltersMenu(this.simUI.rootElem, this.player, slot)); } else { filtersButton.style.display = 'none'; } diff --git a/ui/core/components/importers.ts b/ui/core/components/importers.ts index 76f3fdaf32..e87da71264 100644 --- a/ui/core/components/importers.ts +++ b/ui/core/components/importers.ts @@ -1,4 +1,3 @@ -import { Popup } from './popup'; import { IndividualSimUI } from '../individual_sim_ui'; import { SimUI } from '../sim_ui'; import { TypedEvent } from '../typed_event'; @@ -17,42 +16,39 @@ 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'; +import { BaseModal } from './base_modal'; import { buf2hex } from '../utils'; -export abstract class Importer extends Popup { +export abstract class Importer extends BaseModal { protected readonly textElem: HTMLTextAreaElement; protected readonly descriptionElem: HTMLElement; protected readonly importButton: HTMLButtonElement; private readonly includeFile: boolean; constructor(parent: HTMLElement, simUI: SimUI, title: string, includeFile: boolean) { - super(parent); + super(parent, 'importer', {title: title, footer: true}); this.includeFile = includeFile; const uploadInputId = 'upload-input-' + title.toLowerCase().replaceAll(' ', '-'); - this.rootElem.classList.add('importer'); - let htmlVal = ` - ${title} -
    -
    -
    - -
    -
    + this.body.innerHTML = ` +
    + `; - if (this.includeFile) { - htmlVal += ` - - ` - } - htmlVal += ` -
    + this.footer!.innerHTML = ` + ${this.includeFile ? ` + + + ` : '' + } + `; - this.rootElem.innerHTML = htmlVal - - this.addCloseButton(); - this.textElem = this.rootElem.getElementsByClassName('importer-textarea')[0] as HTMLTextAreaElement; this.descriptionElem = this.rootElem.getElementsByClassName('import-description')[0] as HTMLElement; @@ -129,12 +125,8 @@ export class IndividualJsonImporter extends Importer { this.simUI = simUI; this.descriptionElem.innerHTML = ` -

    - Import settings from a JSON text file, which can be created using the JSON Export feature of this site. -

    -

    - To import, paste the JSON text below and click, 'Import'. -

    +

    Import settings from a JSON file, which can be created using the JSON Export feature.

    +

    To import, upload the file or paste the text below, then click, 'Import'.

    `; } diff --git a/ui/core/components/item_swap_picker.ts b/ui/core/components/item_swap_picker.ts index fc66b94a7f..6d73a9a437 100644 --- a/ui/core/components/item_swap_picker.ts +++ b/ui/core/components/item_swap_picker.ts @@ -38,11 +38,11 @@ export class ItemSwapPicker extends Component { let swapButtonFragment = document.createElement('fragment'); swapButtonFragment.innerHTML = ` diff --git a/ui/core/components/list_picker.ts b/ui/core/components/list_picker.ts index 45d7935380..501d382115 100644 --- a/ui/core/components/list_picker.ts +++ b/ui/core/components/list_picker.ts @@ -41,7 +41,7 @@ export class ListPicker extends Input${config.title}` : '' }
    - + `; if (this.config.titleTooltip) @@ -105,7 +105,7 @@ export class ListPicker extends Input - ${this.config.itemLabel && !this.config.inlineMenuBar ? `
    ${this.config.itemLabel}
    ` : ''} + ${this.config.itemLabel && !this.config.inlineMenuBar ? `
    ${this.config.itemLabel} ${this.itemPickerPairs.length + 1}
    ` : ''} diff --git a/ui/core/components/log_runner.ts b/ui/core/components/log_runner.ts index 5db3188f68..95d900f756 100644 --- a/ui/core/components/log_runner.ts +++ b/ui/core/components/log_runner.ts @@ -12,7 +12,7 @@ export class LogRunner extends Component { this.rootElem.appendChild(controlBar); const simButton = document.createElement('button'); - simButton.classList.add('log-runner-button', 'btn', `btn-${simUI.cssScheme}`); + simButton.classList.add('log-runner-button', 'btn', 'btn-primary'); simButton.textContent = 'Sim 1 Iteration'; controlBar.appendChild(simButton); diff --git a/ui/core/components/popup.ts b/ui/core/components/popup.ts deleted file mode 100644 index b44789427d..0000000000 --- a/ui/core/components/popup.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { CloseButton } from './close_button.js'; -import { Component } from './component.js'; - -declare var $: any; - -export class Popup extends Component { - - constructor(parent: HTMLElement) { - super(parent, 'popup'); - - const computedStyles = window.getComputedStyle(parent); - this.rootElem.style.setProperty('--main-text-color', computedStyles.getPropertyValue('--main-text-color').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()); - - if (parent.closest('.hide-damage-metrics')) { - this.rootElem.classList.add('hide-damage-metrics'); - } - if (parent.closest('.hide-threat-metrics')) { - this.rootElem.classList.add('hide-threat-metrics'); - } - if (parent.closest('.hide-healing-metrics')) { - this.rootElem.classList.add('hide-healing-metrics'); - } - - $(this.rootElem).bPopup({ - onClose: () => { - this.rootElem.remove(); - this.dispose(); - }, - }); - } - - protected addCloseButton() { - new CloseButton(this.rootElem, () => this.close()); - } - - close() { - $(this.rootElem).bPopup().close(); - this.rootElem.remove(); - this.dispose(); - } -} diff --git a/ui/core/components/saved_data_manager.ts b/ui/core/components/saved_data_manager.ts index 9d49cbd455..dd9e6c00ff 100644 --- a/ui/core/components/saved_data_manager.ts +++ b/ui/core/components/saved_data_manager.ts @@ -92,7 +92,7 @@ export class SavedDataManager extends Component { private makeSavedData(config: SavedDataConfig): SavedData { const dataElemFragment = document.createElement('fragment'); dataElemFragment.innerHTML = ` -
    +
    ${config.name}
    `; @@ -108,7 +108,13 @@ export class SavedDataManager extends Component { if (!config.isPreset) { let deleteFragment = document.createElement('fragment'); deleteFragment.innerHTML = ` - + `; @@ -116,6 +122,8 @@ export class SavedDataManager extends Component { const deleteButton = deleteFragment.children[0] as HTMLElement; dataElem.appendChild(deleteButton); + Tooltip.getOrCreateInstance(deleteButton); + deleteButton.addEventListener('click', event => { event.stopPropagation(); const shouldDelete = confirm(`Delete saved ${this.config.label} '${config.name}'?`); @@ -212,7 +220,7 @@ export class SavedDataManager extends Component {
    - +
    `; diff --git a/ui/core/components/settings_menu.ts b/ui/core/components/settings_menu.ts index 02daaebd4e..219b86d883 100644 --- a/ui/core/components/settings_menu.ts +++ b/ui/core/components/settings_menu.ts @@ -1,69 +1,52 @@ -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 } from '../proto/common.js'; import { SimUI } from '../sim_ui.js'; -import { IndividualSimUI } from '../individual_sim_ui.js'; import { Sim } from '../sim.js'; -import { Player } from '../player.js'; -import { classNames, nameToClass, nameToRace, statNames } from '../proto_utils/names.js'; -import { talentSpellIdsToTalentString } from '../talents/factory.js'; import { EventID, TypedEvent } from '../typed_event.js'; import { wowheadSupportedLanguages } from '../constants/lang.js'; import { BooleanPicker } from '../components/boolean_picker.js'; import { EnumPicker } from '../components/enum_picker.js'; import { NumberPicker } from '../components/number_picker.js'; -import { getEnumValues } from '../utils.js'; +import { BaseModal } from './base_modal.js'; +import { Tooltip } from 'bootstrap'; -import { Popup } from './popup.js'; - -declare var $: any; -declare var tippy: any; - -export class SettingsMenu extends Popup { +export class SettingsMenu extends BaseModal { private readonly simUI: SimUI; constructor(parent: HTMLElement, simUI: SimUI) { - super(parent); - this.rootElem.classList.add('settings-menu'); + super(parent, 'settings-menu', {title: "Options", footer: true}); this.simUI = simUI; - this.rootElem.innerHTML = ` -
    - OPTIONS -
    -
    -
    - + this.body.innerHTML = ` +
    +
    -
    - Last used RNG seed:0 +
    + Last used RNG seed: 0
    -
    -
    -
    -
    -
    +
    +
    +
    `; - this.addCloseButton(); + this.footer!.innerHTML = ` + + ` const restoreDefaultsButton = this.rootElem.getElementsByClassName('restore-defaults-button')[0] as HTMLElement; + Tooltip.getOrCreateInstance(restoreDefaultsButton); restoreDefaultsButton.addEventListener('click', event => { this.simUI.applyDefaults(TypedEvent.nextEventID()); }); - tippy(restoreDefaultsButton, { - 'content': 'Restores all default settings (gear, consumes, buffs, talents, EP weights, etc).', - 'allowHTML': true, - }); const fixedRngSeed = this.rootElem.getElementsByClassName('fixed-rng-seed')[0] as HTMLElement; new NumberPicker(fixedRngSeed, this.simUI.sim, { label: 'Fixed RNG Seed', labelTooltip: 'Seed value for the random number generator used during sims, or 0 to use different randomness each run. Use this to share exact sim results or for debugging.', + extraCssClasses: ['mb-0'], changedEvent: (sim: Sim) => sim.fixedRngSeedChangeEmitter, getValue: (sim: Sim) => sim.getFixedRngSeed(), setValue: (eventID: EventID, sim: Sim, newValue: number) => { @@ -75,30 +58,6 @@ export class SettingsMenu extends Popup { lastUsedRngSeed.textContent = String(this.simUI.sim.getLastUsedRngSeed()); this.simUI.sim.lastUsedRngSeedChangeEmitter.on(() => lastUsedRngSeed.textContent = String(this.simUI.sim.getLastUsedRngSeed())); - const showThreatMetrics = this.rootElem.getElementsByClassName('show-threat-metrics-picker')[0] as HTMLElement; - new BooleanPicker(showThreatMetrics, this.simUI.sim, { - label: 'Show Threat/Tank Options', - labelTooltip: 'Shows all options and metrics relevant to tanks, like TPS/DTPS.', - inline: true, - changedEvent: (sim: Sim) => sim.showThreatMetricsChangeEmitter, - getValue: (sim: Sim) => sim.getShowThreatMetrics(), - setValue: (eventID: EventID, sim: Sim, newValue: boolean) => { - sim.setShowThreatMetrics(eventID, newValue); - }, - }); - - const showExperimental = this.rootElem.getElementsByClassName('show-experimental-picker')[0] as HTMLElement; - new BooleanPicker(showExperimental, this.simUI.sim, { - label: 'Show Experimental', - labelTooltip: 'Shows experimental options, if there are any active experiments.', - inline: true, - changedEvent: (sim: Sim) => sim.showExperimentalChangeEmitter, - getValue: (sim: Sim) => sim.getShowExperimental(), - setValue: (eventID: EventID, sim: Sim, newValue: boolean) => { - sim.setShowExperimental(eventID, newValue); - }, - }); - const language = this.rootElem.getElementsByClassName('language-picker')[0] as HTMLElement; const langs = Object.keys(wowheadSupportedLanguages); const defaultLang = langs.indexOf('en'); @@ -122,5 +81,29 @@ export class SettingsMenu extends Popup { }); // Refresh page after language change, to apply the changes. languagePicker.changeEmitter.on(() => setTimeout(() => location.reload(), 100)); + + const showThreatMetrics = this.rootElem.getElementsByClassName('show-threat-metrics-picker')[0] as HTMLElement; + new BooleanPicker(showThreatMetrics, this.simUI.sim, { + label: 'Show Threat/Tank Options', + labelTooltip: 'Shows all options and metrics relevant to tanks, like TPS/DTPS.', + inline: true, + changedEvent: (sim: Sim) => sim.showThreatMetricsChangeEmitter, + getValue: (sim: Sim) => sim.getShowThreatMetrics(), + setValue: (eventID: EventID, sim: Sim, newValue: boolean) => { + sim.setShowThreatMetrics(eventID, newValue); + }, + }); + + const showExperimental = this.rootElem.getElementsByClassName('show-experimental-picker')[0] as HTMLElement; + new BooleanPicker(showExperimental, this.simUI.sim, { + label: 'Show Experimental', + labelTooltip: 'Shows experimental options, if there are any active experiments.', + inline: true, + changedEvent: (sim: Sim) => sim.showExperimentalChangeEmitter, + getValue: (sim: Sim) => sim.getShowExperimental(), + setValue: (eventID: EventID, sim: Sim, newValue: boolean) => { + sim.setShowExperimental(eventID, newValue); + }, + }); } } diff --git a/ui/core/components/sim_header.ts b/ui/core/components/sim_header.ts index 27f13d04c4..5d654f64be 100644 --- a/ui/core/components/sim_header.ts +++ b/ui/core/components/sim_header.ts @@ -249,7 +249,7 @@ export class SimHeader extends Component { icon: "fas fa-cog fa-lg", tooltip: "Show Sim Options", classes: 'sim-options', - onclick: () => new SettingsMenu(this.rootElem, this.simUI) + onclick: () => new SettingsMenu(this.simUI.rootElem, this.simUI) }) } diff --git a/ui/core/components/stat_weights_action.ts b/ui/core/components/stat_weights_action.ts index 513aaa3a73..8761a5342a 100644 --- a/ui/core/components/stat_weights_action.ts +++ b/ui/core/components/stat_weights_action.ts @@ -1,28 +1,24 @@ -import { StatWeightsRequest, StatWeightsResult, StatWeightValues, ProgressMetrics } from '../proto/api.js'; +import { StatWeightsResult, StatWeightValues, ProgressMetrics } from '../proto/api.js'; import { ItemSlot } from '../proto/common.js'; import { GemColor } from '../proto/common.js'; import { Profession } from '../proto/common.js'; import { Stat, PseudoStat, UnitStats } from '../proto/common.js'; import { Stats, UnitStat } from '../proto_utils/stats.js'; import { Gear } from '../proto_utils/gear.js'; -import { getClassStatName, statOrder, pseudoStatOrder, pseudoStatNames } from '../proto_utils/names.js'; +import { getClassStatName } from '../proto_utils/names.js'; import { IndividualSimUI } from '../individual_sim_ui.js'; import { EventID, TypedEvent } from '../typed_event.js'; import { Player } from '../player.js'; import { stDevToConf90 } from '../utils.js'; import { BooleanPicker } from '../components/boolean_picker.js'; import { NumberPicker } from '../components/number_picker.js'; -import { ResultsViewer } from '../components/results_viewer.js'; -import { combinations, combinationsWithDups, permutations, getEnumValues, maxIndex, sum } from '../utils.js'; -import { - UIGem as Gem, -} from '../proto/ui.js'; +import { combinationsWithDups, permutations, sum } from '../utils.js'; +import { UIGem as Gem } from '../proto/ui.js'; import * as Gems from '../proto_utils/gems.js'; -import { Popup } from './popup.js'; - -declare var tippy: any; +import { BaseModal } from './base_modal.js'; +import { Tooltip } from 'bootstrap'; export function addStatWeightsAction(simUI: IndividualSimUI, epStats: Array, epPseudoStats: Array|undefined, epReferenceStat: Stat) { simUI.addAction('Stat Weights', 'ep-weights-action', () => { @@ -30,49 +26,41 @@ export function addStatWeightsAction(simUI: IndividualSimUI, epStats: Array }); } -class EpWeightsMenu extends Popup { +class EpWeightsMenu extends BaseModal { private readonly simUI: IndividualSimUI; - private readonly tableContainer: HTMLElement; + private readonly table: HTMLElement; private readonly tableBody: HTMLElement; - private readonly tableHeader: HTMLElement; - private readonly resultsViewer: ResultsViewer; private statsType: string; private epStats: Array; private epPseudoStats: Array; private epReferenceStat: Stat; + private showAllStats: boolean = false; constructor(simUI: IndividualSimUI, epStats: Array, epPseudoStats: Array, epReferenceStat: Stat) { - super(simUI.rootElem); + super(simUI.rootElem, 'ep-weights-menu', {footer: true, scrollContents: true}); this.simUI = simUI; this.statsType = 'ep'; this.epStats = epStats; this.epPseudoStats = epPseudoStats; this.epReferenceStat = epReferenceStat; - this.rootElem.classList.add('ep-weights-menu'); - this.rootElem.innerHTML = ` -
    -
    - -
    -
    -
    -
    -
    + this.header?.insertAdjacentHTML('afterbegin', '
    Calculate Stat Weights
    '); + this.body.innerHTML = ` +
    +
    -
    -
    - +
    -

    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 EP' column displays the values currently used by the item pickers to sort items.
    + Use the icon above the EPs to use newly calculated EPs.

    +
    - + + +
    Stat @@ -130,25 +118,41 @@ class EpWeightsMenu extends Popup { e"ap an>
    `; + this.footer!.innerHTML = ` + + + `; - this.tableContainer = this.rootElem.getElementsByClassName('ep-weights-table')[0] as HTMLElement; - this.tableBody = this.rootElem.querySelector('#ep-tbody') as HTMLElement; - this.tableHeader = this.rootElem.querySelector('#ep-tbody > tr') as HTMLElement; - - const resultsViewerElem = this.rootElem.getElementsByClassName('ep-weights-results')[0] as HTMLElement; - this.resultsViewer = new ResultsViewer(resultsViewerElem); + this.table = this.rootElem.querySelector('.results-ep-table') as HTMLElement; + this.tableBody = this.rootElem.querySelector('.results-ep-table tbody') as HTMLElement; const updateType = () => { if (this.statsType == 'ep') { - this.tableContainer.classList.remove('stats-type-weight'); - this.tableContainer.classList.add('stats-type-ep'); + this.table.classList.remove('stats-type-weight'); + this.table.classList.add('stats-type-ep'); } else { - this.tableContainer.classList.add('stats-type-weight'); - this.tableContainer.classList.remove('stats-type-ep'); + this.table.classList.add('stats-type-weight'); + this.table.classList.remove('stats-type-ep'); } }; @@ -160,14 +164,28 @@ class EpWeightsMenu extends Popup { selectElem.value = this.statsType; updateType(); + const optimizeGemsButton = this.rootElem.getElementsByClassName('optimize-gems')[0] as HTMLElement; + Tooltip.getOrCreateInstance(optimizeGemsButton); + optimizeGemsButton.addEventListener('click', async event => { + const previousContents = optimizeGemsButton.innerHTML; + optimizeGemsButton.classList.add('disabled'); + optimizeGemsButton.style.width = `${optimizeGemsButton.getBoundingClientRect().width.toFixed(3)}px`; + optimizeGemsButton.innerHTML = ` Running`; + await this.optimizeGems(TypedEvent.nextEventID()); + optimizeGemsButton.innerHTML = previousContents; + optimizeGemsButton.classList.remove('disabled'); + }); + const calcButton = this.rootElem.getElementsByClassName('calc-weights')[0] as HTMLElement; calcButton.addEventListener('click', async event => { - this.resultsViewer.setPending(); + const previousContents = calcButton.innerHTML; + calcButton.classList.add('disabled'); + calcButton.style.width = `${calcButton.getBoundingClientRect().width.toFixed(3)}px`; + calcButton.innerHTML = ` Running`; const iterations = this.simUI.sim.getIterations(); - const result = await this.simUI.player.computeStatWeights(TypedEvent.nextEventID(), this.epStats, this.epPseudoStats, this.epReferenceStat, (progress: ProgressMetrics) => { - this.setSimProgress(progress); - }); - this.resultsViewer.hideAll(); + const result = await this.simUI.player.computeStatWeights(TypedEvent.nextEventID(), this.epStats, this.epPseudoStats, this.epReferenceStat, (progress: ProgressMetrics) => {}); + calcButton.innerHTML = previousContents; + calcButton.classList.remove('disabled'); this.simUI.prevEpIterations = iterations; this.simUI.prevEpSimResult = result; this.updateTable(iterations, result); @@ -175,14 +193,17 @@ class EpWeightsMenu extends Popup { const colActionButtons = Array.from(this.rootElem.getElementsByClassName('col-action')) as Array; const makeUpdateWeights = (button: HTMLElement, labelTooltip: string, tooltip: string, weightsFunc: () => UnitStats|undefined) => { - tippy(button.previousElementSibling, { - 'content': labelTooltip, - 'allowHTML': true, - }); - tippy(button, { - 'content': tooltip, - 'allowHTML': true, - }); + const label = button.previousElementSibling as HTMLElement; + label!.setAttribute('data-bs-toggle', 'tooltip'); + label!.setAttribute('data-bs-title', labelTooltip); + label!.setAttribute('data-bs-html', 'true'); + button.setAttribute('data-bs-toggle', 'tooltip'); + button.setAttribute('data-bs-title', tooltip); + button.setAttribute('data-bs-html', 'true'); + + Tooltip.getOrCreateInstance(label); + Tooltip.getOrCreateInstance(button); + button.addEventListener('click', event => { this.simUI.player.setEpWeights(TypedEvent.nextEventID(), Stats.fromProto(weightsFunc())); }); @@ -205,66 +226,47 @@ class EpWeightsMenu extends Popup { label: 'Show All Stats', inline: true, changedEvent: () => new TypedEvent(), - getValue: () => this.tableContainer.classList.contains('show-all-stats'), + getValue: () => this.showAllStats, setValue: (eventID: EventID, menu: EpWeightsMenu, newValue: boolean) => { - if (newValue) { - this.tableContainer.classList.add('show-all-stats'); - } else { - this.tableContainer.classList.remove('show-all-stats'); - } - this.applyAlternatingColors(); + this.showAllStats = newValue; + this.updateTable(this.simUI.prevEpIterations || 1, this.getPrevSimResult()); }, }); this.updateTable(this.simUI.prevEpIterations || 1, this.getPrevSimResult()); - - const optimizeGemsButton = this.rootElem.getElementsByClassName('optimize-gems')[0] as HTMLElement; - tippy(optimizeGemsButton, { - 'content': ` -

    WARNING: This feature is experimental, and will not always produce the most optimal gems especially when interacting with soft/hard stat caps.

    -

    Optimizes equipped gems to maximize EP, based on the values in Current EP.

    -

    Does not change the meta gem, but ensures that its condition is met. Uses JC gems if Jewelcrafting is a selected profession.

    - `, - 'allowHTML': true, - }); - optimizeGemsButton.addEventListener('click', event => this.optimizeGems(TypedEvent.nextEventID())); - - this.addCloseButton(); - } - - setSimProgress(progress: ProgressMetrics) { - this.resultsViewer.setContent(` -
    -
    ${progress.completedSims} / ${progress.totalSims}
    simulations complete
    -
    - ${progress.completedIterations} / ${progress.totalIterations}
    iterations complete -
    -
    -`); } private updateTable(iterations: number, result: StatWeightsResult) { - this.tableHeader.remove(); - this.tableBody.innerHTML = ''; - this.tableBody.appendChild(this.tableHeader); + this.tableBody.innerHTML = ``; EpWeightsMenu.epUnitStats.forEach(stat => { - const row = this.makeTableRow(stat, iterations, result); - if ((stat.isStat() && !this.epStats.includes(stat.getStat())) || (stat.isPseudoStat() && !this.epPseudoStats.includes(stat.getPseudoStat()))) { - row.classList.add('non-ep-stat'); + // Don't show extra stats when 'Show all stats' is not selected + if ((!this.showAllStats && ( + stat.isStat() && !this.epStats.includes(stat.getStat())) || + (stat.isPseudoStat() && !this.epPseudoStats.includes(stat.getPseudoStat())) + )) { + return; } + const row = this.makeTableRow(stat, iterations, result); this.tableBody.appendChild(row); }); - - this.applyAlternatingColors(); } - private makeTableRow(stat: UnitStat, iterations: number, result: StatWeightsResult): HTMLElement { const row = document.createElement('tr'); const makeWeightAndEpCellHtml = (statWeights: StatWeightValues, className: string): string => { return ` - ${stat.getProtoValue(statWeights.weights!).toFixed(2)}${stDevToConf90(stat.getProtoValue(statWeights.weightsStdev!), iterations).toFixed(2)} - ${stat.getProtoValue(statWeights.epValues!).toFixed(2)}${stDevToConf90(stat.getProtoValue(statWeights.epValuesStdev!), iterations).toFixed(2)} + + ${stat.getProtoValue(statWeights.weights!).toFixed(2)} + + (${stDevToConf90(stat.getProtoValue(statWeights.weightsStdev!), iterations).toFixed(2)}) + + + + ${stat.getProtoValue(statWeights.epValues!).toFixed(2)} + + (${stDevToConf90(stat.getProtoValue(statWeights.epValuesStdev!), iterations).toFixed(2)}) + + `; }; row.innerHTML = ` @@ -290,18 +292,6 @@ class EpWeightsMenu extends Popup { return row; } - private applyAlternatingColors() { - (Array.from(this.tableBody.childNodes) as Array) - .filter(row => window.getComputedStyle(row).getPropertyValue('display') != 'none') - .forEach((row, i) => { - if (i % 2 == 0) { - row.classList.remove('odd'); - } else { - row.classList.add('odd'); - } - }); - } - private getPrevSimResult(): StatWeightsResult { return this.simUI.prevEpSimResult || StatWeightsResult.create({ dps: { @@ -331,7 +321,7 @@ class EpWeightsMenu extends Popup { }); } - private optimizeGems(eventID: EventID) { + private async optimizeGems(eventID: EventID) { // Replace 0 weights with a very tiny value, so we always prefer to take free stats even if the user gave a 0 weight. let epWeights = this.simUI.player.getEpWeights(); epWeights = new Stats(epWeights.asArray().map(w => w == 0 ? 1e-8 : w)); diff --git a/ui/core/individual_sim_ui.ts b/ui/core/individual_sim_ui.ts index 3b3cb60eb3..30dddbb28c 100644 --- a/ui/core/individual_sim_ui.ts +++ b/ui/core/individual_sim_ui.ts @@ -176,12 +176,13 @@ export abstract class IndividualSimUI extends SimUI { constructor(parentElem: HTMLElement, player: Player, config: IndividualSimUIConfig) { super(parentElem, player.sim, { + cssClass: config.cssClass, cssScheme: config.cssScheme, spec: player.spec, knownIssues: config.knownIssues, launchStatus: simLaunchStatuses[player.spec], }); - this.rootElem.classList.add('individual-sim-ui', config.cssClass); + this.rootElem.classList.add('individual-sim-ui'); this.player = player; this.individualConfig = config; this.raidSimResultsManager = null; @@ -507,16 +508,16 @@ export abstract class IndividualSimUI extends SimUI { } private addTopbarComponents() { - this.simHeader.addImportLink('JSON', parent => new Importers.IndividualJsonImporter(parent, this), true); - this.simHeader.addImportLink('80U', parent => new Importers.Individual80UImporter(parent, this), false); - this.simHeader.addImportLink('WoWHead', parent => new Importers.IndividualWowheadGearPlannerImporter(parent, this), false); - this.simHeader.addImportLink('Addon', parent => new Importers.IndividualAddonImporter(parent, this), false); - - this.simHeader.addExportLink('Link', parent => new Exporters.IndividualLinkExporter(parent, this), false); - this.simHeader.addExportLink('JSON', parent => new Exporters.IndividualJsonExporter(parent, this), true); - this.simHeader.addExportLink('WoWHead', parent => new Exporters.IndividualWowheadGearPlannerExporter(parent, this), false); - this.simHeader.addExportLink('80U EP', parent => new Exporters.Individual80UEPExporter(parent, this), false); - this.simHeader.addExportLink('Pawn EP', parent => new Exporters.IndividualPawnEPExporter(parent, this), false); + this.simHeader.addImportLink('JSON', _parent => new Importers.IndividualJsonImporter(this.rootElem, this), true); + this.simHeader.addImportLink('80U', _parent => new Importers.Individual80UImporter(this.rootElem, this), true); + this.simHeader.addImportLink('WoWHead', _parent => new Importers.IndividualWowheadGearPlannerImporter(this.rootElem, this), false); + this.simHeader.addImportLink('Addon', _parent => new Importers.IndividualAddonImporter(this.rootElem, this), true); + + this.simHeader.addExportLink('Link', _parent => new Exporters.IndividualLinkExporter(this.rootElem, this), false); + this.simHeader.addExportLink('JSON', _parent => new Exporters.IndividualJsonExporter(this.rootElem, this), true); + this.simHeader.addExportLink('WoWHead', _parent => new Exporters.IndividualWowheadGearPlannerExporter(this.rootElem, this), false); + this.simHeader.addExportLink('80U EP', _parent => new Exporters.Individual80UEPExporter(this.rootElem, this), false); + this.simHeader.addExportLink('Pawn EP', _parent => new Exporters.IndividualPawnEPExporter(this.rootElem, this), false); } applyDefaults(eventID: EventID) { diff --git a/ui/core/sim_ui.ts b/ui/core/sim_ui.ts index bf6bb1a433..264eb34cda 100644 --- a/ui/core/sim_ui.ts +++ b/ui/core/sim_ui.ts @@ -29,6 +29,8 @@ export interface SimWarning { export interface SimUIConfig { // Additional css class to add to the root element. + cssClass: string; + // Scheme used for themeing on a per-class Basis or for other sims cssScheme: string; // The spec, if an individual sim, or null if the raid sim. spec: Spec | null, @@ -39,6 +41,7 @@ export interface SimUIConfig { // Shared UI for all individual sims and the raid sim. export abstract class SimUI extends Component { readonly sim: Sim; + readonly cssClass: string; readonly cssScheme: string; readonly isWithinRaidSim: boolean; @@ -54,11 +57,10 @@ export abstract class SimUI extends Component { readonly iterationsPicker: HTMLElement; readonly simTabContentsContainer: HTMLElement; - private warningsTippy: any; - constructor(parentElem: HTMLElement, sim: Sim, config: SimUIConfig) { super(parentElem, 'sim-ui'); this.sim = sim; + this.cssClass = config.cssClass; this.cssScheme = config.cssScheme; this.isWithinRaidSim = this.rootElem.closest('.within-raid-sim') != null; this.rootElem.innerHTML = simHTML; @@ -68,6 +70,8 @@ export abstract class SimUI extends Component { this.simMain.classList.add('sim-main', 'tab-content'); this.simContentContainer.appendChild(this.simMain); + this.rootElem.classList.add(this.cssClass); + if (!this.isWithinRaidSim) { this.rootElem.classList.add('not-within-raid-sim'); } @@ -152,7 +156,7 @@ export abstract class SimUI extends Component { addAction(name: string, cssClass: string, actFn: () => void) { const button = document.createElement('button'); - button.classList.add('btn', `btn-${this.cssScheme}`, 'w-100', cssClass); + button.classList.add('btn', 'btn-primary', 'w-100', cssClass); button.textContent = name; button.addEventListener('click', actFn); this.simActionsContainer.appendChild(button); diff --git a/ui/core/talents/glyphs_picker.ts b/ui/core/talents/glyphs_picker.ts index ba79254b1d..8d4d83df48 100644 --- a/ui/core/talents/glyphs_picker.ts +++ b/ui/core/talents/glyphs_picker.ts @@ -1,18 +1,14 @@ -import { EquippedItem } from '../proto_utils/equipped_item.js'; -import { Stats } from '../proto_utils/stats.js'; import { Glyphs } from '../proto/common.js'; import { ItemQuality } from '../proto/common.js'; import { ActionId } from '../proto_utils/action_id.js'; import { setItemQualityCssClass } from '../css_utils.js'; import { Player } from '../player.js'; import { EventID, TypedEvent } from '../typed_event.js'; -import { formatDeltaTextElem, stringComparator } from '../utils.js'; +import { stringComparator } from '../utils.js'; import { Component } from '../components/component.js'; import { Input } from '../components/input.js'; -import { Popup } from '../components/popup.js'; - -declare var $: any; +import { BaseModal } from '../components/base_modal.js'; export type GlyphConfig = { name: string, @@ -137,20 +133,16 @@ class GlyphPicker extends Input, number> { } } -class GlyphSelectorModal extends Popup { - +class GlyphSelectorModal extends BaseModal { constructor(parent: HTMLElement, glyphPicker: GlyphPicker, glyphOptions: Array) { - super(parent); + super(parent, 'glyph-modal', {title: 'Glyphs'}); - this.rootElem.classList.add('selector-modal'); - this.rootElem.classList.add('glyph-modal'); - this.rootElem.innerHTML = ` -
    - + this.body.innerHTML = ` +
    +
      - `; - this.addCloseButton(); + `; const listElem = this.rootElem.getElementsByClassName('selector-modal-list')[0] as HTMLElement; diff --git a/ui/detailed_results/index.ts b/ui/detailed_results/index.ts index 1b5d3ee7e0..492fbf4a46 100644 --- a/ui/detailed_results/index.ts +++ b/ui/detailed_results/index.ts @@ -4,20 +4,9 @@ import { WindowedDetailedResults } from '../core/components/detailed_results.js' Database.get(); const urlParams = new URLSearchParams(window.location.search); -if (urlParams.has('mainTextColor')) { - document.body.style.setProperty('--main-text-color', urlParams.get('mainTextColor')!); -} -if (urlParams.has('themeColorBackground')) { - document.body.style.setProperty('--theme-color-background', urlParams.get('themeColorBackground')!); -} -if (urlParams.has('themeColorBackgroundRaw')) { - document.body.style.setProperty('--theme-color-background-raw', urlParams.get('themeColorBackgroundRaw')!); -} -if (urlParams.has('themeBackgroundImage')) { - document.body.style.setProperty('--theme-background-image', urlParams.get('themeBackgroundImage')!); -} -if (urlParams.has('themeBackgroundOpacity')) { - document.body.style.setProperty('--theme-background-opacity', urlParams.get('themeBackgroundOpacity')!); + +if (urlParams.has('cssClass')) { + document.body.classList.add(urlParams.get('cssClass')!); } const isIndividualSim = urlParams.has('isIndividualSim'); diff --git a/ui/index.html b/ui/index.html index b78add86cc..9ab4c7034c 100644 --- a/ui/index.html +++ b/ui/index.html @@ -29,13 +29,13 @@

      Wrath of the Lich King

      - +

       

       - +

       

       - + Support our devs diff --git a/ui/index_template.html b/ui/index_template.html index 42112301e2..38d1bcfa31 100644 --- a/ui/index_template.html +++ b/ui/index_template.html @@ -12,7 +12,6 @@ - diff --git a/ui/raid/raid_picker.ts b/ui/raid/raid_picker.ts index 41a324b103..840f0e82e9 100644 --- a/ui/raid/raid_picker.ts +++ b/ui/raid/raid_picker.ts @@ -608,7 +608,7 @@ export class PlayerPicker extends Component { class PlayerEditorModal extends BaseModal { constructor(player: Player) { - super('player-editor-modal', { + super(document.body, 'player-editor-modal', { closeButton: {fixed: true, text: false}, header: false }); diff --git a/ui/raid/raid_sim_ui.ts b/ui/raid/raid_sim_ui.ts index 7d97786ca6..261de5e9b8 100644 --- a/ui/raid/raid_sim_ui.ts +++ b/ui/raid/raid_sim_ui.ts @@ -46,12 +46,12 @@ export class RaidSimUI extends SimUI { constructor(parentElem: HTMLElement, config: RaidSimConfig) { super(parentElem, new Sim(), { + cssClass: 'raid-sim-ui', cssScheme: 'raid', spec: null, launchStatus: raidSimStatus, knownIssues: (config.knownIssues || []).concat(extraKnownIssues), }); - this.rootElem.classList.add('raid-sim-ui'); this.config = config; @@ -107,10 +107,10 @@ export class RaidSimUI extends SimUI { } private addTopbarComponents() { - this.simHeader.addImportLink('JSON', parent => new ImportExport.RaidJsonImporter(parent, this)); - this.simHeader.addImportLink('WCL', parent => new ImportExport.RaidWCLImporter(parent, this)); + this.simHeader.addImportLink('JSON', (parent) => new ImportExport.RaidJsonImporter(this.rootElem, this)); + this.simHeader.addImportLink('WCL', (parent) => new ImportExport.RaidWCLImporter(this.rootElem, this)); - this.simHeader.addExportLink('JSON', parent => new ImportExport.RaidJsonExporter(parent, this)); + this.simHeader.addExportLink('JSON', (parent) => new ImportExport.RaidJsonExporter(this.rootElem, this)); } private addRaidTab() { diff --git a/ui/scss/core/components/_close_button.scss b/ui/scss/core/components/_close_button.scss index 874e1c7b97..ede7852593 100644 --- a/ui/scss/core/components/_close_button.scss +++ b/ui/scss/core/components/_close_button.scss @@ -1,10 +1,18 @@ .close-button { - top: $modal-inner-padding; - right: $modal-inner-padding; white-space: nowrap; z-index: 1; &> i { vertical-align: middle; } + + &.position-absolute { + top: $modal-inner-padding * 1.5; + right: $modal-inner-padding; + } + + &.position-sticky { + top: calc(var(--bs-modal-margin) + 1rem); + right: calc(2.5vw + 1px + 1rem); + } } diff --git a/ui/scss/core/components/_detailed_results.scss b/ui/scss/core/components/_detailed_results.scss index 3861d032e1..b0cf6ed5e2 100644 --- a/ui/scss/core/components/_detailed_results.scss +++ b/ui/scss/core/components/_detailed_results.scss @@ -103,7 +103,6 @@ } .metrics-table { - color: var(--main-text-color); width: 100%; font-size: 16px; } diff --git a/ui/scss/core/components/_exporters.scss b/ui/scss/core/components/_exporters.scss index 639f60c84a..aebae6007b 100644 --- a/ui/scss/core/components/_exporters.scss +++ b/ui/scss/core/components/_exporters.scss @@ -1,27 +1,7 @@ -@import "./popup"; - -// TODO: Clean up - .exporter { - text-align: center; -} - -.exporter-title { - display: block; - font-size: 24px; - font-weight: bold; - margin: 10px; -} - -.exporter-textarea { - width: 100%; - height: 40vh; - resize: none; -} - -.exporter .actions-row { - display: flex; - align-items: center; - justify-content: space-around; - padding: 10px; + .exporter-textarea { + width: 100%; + height: 40vh; + resize: none; + } } diff --git a/ui/scss/core/components/_filters_menu.scss b/ui/scss/core/components/_filters_menu.scss index 45ef92500a..35a15ae7fa 100644 --- a/ui/scss/core/components/_filters_menu.scss +++ b/ui/scss/core/components/_filters_menu.scss @@ -1,45 +1,11 @@ .filters-menu { - .menu-title, .menu-section:not(:last-child) { margin-bottom: map.get($spacers, 3); } -} - -.filters-menu .menu-section { - width: 100%; - border: 1px solid white; - border-radius: 10px; - padding: 5px; -} - -.filters-menu .menu-section-header { - margin-left: 10px; - font-size: 16px; - font-weight: bold; -} - -.filters-menu-section-bool-list { - display: flex; - justify-content: space-evenly; - align-items: center; - flex-wrap: wrap; -} -.filters-menu-section-bool-list > * { - margin: 5px 20px; -} -.filters-menu-section-bool-list .boolean-picker-root { - justify-content: center; -} -.filters-menu-section-bool-list .boolean-picker-input { - margin: 0 5px !important; -} -.filters-menu-section-number-list { - display: flex; - justify-content: space-evenly; - align-items: center; - flex-wrap: wrap; -} -.filters-menu-section-number-list > * { - margin: 5px 20px; + [class*="filters-menu-section-"] { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: $modal-inner-padding; + } } diff --git a/ui/scss/core/components/_gear_picker.scss b/ui/scss/core/components/_gear_picker.scss index 132ef786b2..a97e067479 100644 --- a/ui/scss/core/components/_gear_picker.scss +++ b/ui/scss/core/components/_gear_picker.scss @@ -1,22 +1,6 @@ @use "sass:map"; @import "./filters_menu"; -@import "./popup"; - -.item-swap-picker-root { - .picker-group { - align-items: center; - justify-content: flex-end; - - &> * { - margin-bottom: 0 !important; - } - - &> :last-child { - margin-right: 0; - } - } -} .gear-picker-root { display: flex; @@ -64,8 +48,8 @@ .item-picker-icon { @include wowhead-background-icon; - width: 64px; - height: 64px; + width: 4rem; + height: 4rem; border: 2px solid dimgray; } @@ -107,17 +91,33 @@ cursor: pointer; } -.selector-modal-tab-content { - .selector-modal-tab-pane { - padding: 0; - - .selector-modal-tab-content-header { - margin: map.get($spacers, 3) 0; - display: flex; - align-items: center; +.selector-modal { + .modal-header { + padding-bottom: 0; + border-bottom: none; - &> *:not(:last-child) { - margin-right: map.get($spacers, 2); + .nav-tabs { + width: 100%; + } + } + + .selector-modal-tab-content { + .selector-modal-tab-pane { + padding: 0; + + .selector-modal-tab-content-header { + margin-bottom: map.get($spacers, 3); + display: flex; + + &> *:not(:last-child) { + margin-right: map.get($spacers, 2); + } + + input, select { + padding-top: $btn-padding-y; + padding-bottom: $btn-padding-y; + font-size: $btn-font-size; + } } } } diff --git a/ui/scss/core/components/_icon_picker.scss b/ui/scss/core/components/_icon_picker.scss index 86b2df529e..b0e9d27cc9 100644 --- a/ui/scss/core/components/_icon_picker.scss +++ b/ui/scss/core/components/_icon_picker.scss @@ -69,6 +69,7 @@ .dropdown-menu { min-width: unset; background: grey; + border: none; &.show { display: grid; diff --git a/ui/scss/core/components/_importers.scss b/ui/scss/core/components/_importers.scss index 488f16b98e..f99b7cfdbd 100644 --- a/ui/scss/core/components/_importers.scss +++ b/ui/scss/core/components/_importers.scss @@ -1,49 +1,7 @@ -@import "./popup"; - -// TODO: Clean up - .importer { - text-align: center; -} - -.importer-title { - display: block; - font-size: 24px; - font-weight: bold; - margin: 10px; -} - -.import-description { - text-align: left; - padding: 5px; -} - -.importer-textarea { - width: 100%; - height: 40vh; - resize: none; -} -.importer-textarea.small-textarea { - height: 1rem; -} - -.importer-button { - cursor: pointer; -} - -.importer-button:disabled { - cursor: wait; - background-color: gray; - color: white; -} - -.importer-upload-input { - display: none !important; -} - -.importer .actions-row { - display: flex; - align-items: center; - justify-content: space-around; - padding: 10px; + .importer-textarea { + width: 100%; + height: 40vh; + resize: none; + } } diff --git a/ui/scss/core/components/_item_swap_picker.scss b/ui/scss/core/components/_item_swap_picker.scss index cda3887969..fd0952bc47 100644 --- a/ui/scss/core/components/_item_swap_picker.scss +++ b/ui/scss/core/components/_item_swap_picker.scss @@ -1,7 +1,20 @@ @use "sass:map"; .item-swap-picker-root { + .picker-group { + align-items: center; + justify-content: flex-end; + + &> * { + margin-bottom: 0 !important; + } + + &> :last-child { + margin-right: 0; + } + } + .input-root:not(:last-child) { margin-right: map.get($spacers, 1); } -} \ No newline at end of file +} diff --git a/ui/scss/core/components/_list_picker.scss b/ui/scss/core/components/_list_picker.scss index 303ba0ca26..b873c1af08 100644 --- a/ui/scss/core/components/_list_picker.scss +++ b/ui/scss/core/components/_list_picker.scss @@ -31,7 +31,7 @@ &:not(.inline) { padding: map.get($spacers, 3) map.get($spacers, 3) 0 map.get($spacers, 3); - border: 1px solid $primary; + border: 1px solid $link-color; .list-picker-item-header { .list-picker-item-action:first-of-type { diff --git a/ui/scss/core/components/_popup.scss b/ui/scss/core/components/_popup.scss deleted file mode 100644 index 908802991f..0000000000 --- a/ui/scss/core/components/_popup.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use "sass:map"; - -.popup { - @include vertical-horizontal-center; - min-width: 50%; - max-height: 98vh; - overflow-y: auto; - padding: 1rem; - background-color: #111218; - border: 1px solid $primary; - border-radius: 6px; - max-width: 100%; - color: white; - - .close-button { - position: absolute; - top: map.get($spacers, 3); - right: map.get($spacers, 3); - } -} diff --git a/ui/scss/core/components/_raid_sim_action.scss b/ui/scss/core/components/_raid_sim_action.scss index 5a30c838ad..e61f072a87 100644 --- a/ui/scss/core/components/_raid_sim_action.scss +++ b/ui/scss/core/components/_raid_sim_action.scss @@ -7,6 +7,10 @@ .results-sim { text-align: center; + .results-metric { + text-align: left; + } + .results-sim-dps .topline-result-avg:after { content: " DPS"; } diff --git a/ui/scss/core/components/_saved_data_manager.scss b/ui/scss/core/components/_saved_data_manager.scss index 9e29bf358a..133bb2477f 100644 --- a/ui/scss/core/components/_saved_data_manager.scss +++ b/ui/scss/core/components/_saved_data_manager.scss @@ -26,10 +26,25 @@ padding: 0; margin-bottom: $block-spacer; margin-right: $block-spacer; + border: 1px solid var(--bs-primary); display: flex; font-size: $content-font-size; + font-weight: normal; transition: $btn-transition; + &.active { + background-color: var(--bs-primary); + + .saved-data-set-name, + .saved-data-set-delete { + color: var(--theme-component-text-color); + } + } + + &:hover:not(.active) { + background: var(--bs-primary-dampened); + } + &.disabled { display: none; } @@ -46,25 +61,6 @@ } } -@each $color, $value in $theme-colors { - .saved-data-set-chip-#{$color} { - @extend .saved-data-set-chip; - border: 1px solid $value; - - &.active { - @extend .text-bg-#{$color}; - - .saved-data-set-name, .saved-data-set-delete { - color: color-contrast($value); - } - } - - &:hover:not(.active) { - background: rgba($value, .2); - } - } -} - @include media-breakpoint-down(xxl) { .saved-data-manager-root { .saved-data-create-container { diff --git a/ui/scss/core/components/_settings_menu.scss b/ui/scss/core/components/_settings_menu.scss index d02fc8d930..17b787bd1f 100644 --- a/ui/scss/core/components/_settings_menu.scss +++ b/ui/scss/core/components/_settings_menu.scss @@ -1,43 +1,5 @@ -@use "sass:map"; - -@import "./popup"; - .settings-menu { - .menu-title { - text-align: center; - margin: 20px; - font-size: 24px; - } - - .menu-content { - margin: 20px; - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - overflow-y: auto; - max-height: 80vh; - - .settings-menu-content-left { - margin-right: 2 * map.get($spacers, 3); - flex: 1; - } - - .settings-menu-content-right { - flex: 1; - } - - .restore-defaults-button { - margin-bottom: $block-spacer; - } - - .fixed-rng-seed { - .input-root { - margin-bottom: 0; - } - } - - .last-used-rng-seed-container { - margin-bottom: $block-spacer; - } + .fixed-rng-seed-container { + margin-bottom: $block-spacer; } } diff --git a/ui/scss/core/components/_sim_tab.scss b/ui/scss/core/components/_sim_tab.scss index 9067e94948..1c4da490c4 100644 --- a/ui/scss/core/components/_sim_tab.scss +++ b/ui/scss/core/components/_sim_tab.scss @@ -10,7 +10,7 @@ } .tab-panel-right { - margin-left: $gap-width * 2; + margin-left: var(--container-padding); display: flex; flex-direction: column; flex: 1; diff --git a/ui/scss/core/components/_sim_title_dropdown.scss b/ui/scss/core/components/_sim_title_dropdown.scss index 98fa918603..601539fc38 100644 --- a/ui/scss/core/components/_sim_title_dropdown.scss +++ b/ui/scss/core/components/_sim_title_dropdown.scss @@ -15,6 +15,7 @@ .dropdown-menu { background: $dropdown-bg; + border: none; z-index: 1500; .dropdown-menu { diff --git a/ui/scss/core/components/_stat_weights_action.scss b/ui/scss/core/components/_stat_weights_action.scss index b61d892985..a6af06b9e1 100644 --- a/ui/scss/core/components/_stat_weights_action.scss +++ b/ui/scss/core/components/_stat_weights_action.scss @@ -1,32 +1,55 @@ @use "sass:map"; -.ep-weights-header { - display: flex; -} - -.ep-weights-actions { - display: flex; - flex-direction: column; - justify-content: space-around; - width: 50%; -} -.ep-weights-actions > * { - margin: 10px 20px; -} - -.ep-weights-results { - position: relative; - width: 50%; - min-height: 150px; -} -.ep-weights-results .results-viewer { - @include vertical-horizontal-center; -} +.ep-weights-menu { + .ep-weights-options { + margin-bottom: $block-spacer; + } -.stats-controls-row { - display: flex; - justify-content: space-around; - margin: 10px; + .results-ep-table-container { + .results-ep-table { + width: 100%; + + &.stats-type-ep .type-weight, + &.stats-type-weight .type-ep { + display: none; + } + + th, td { + &[class*="type-"] { + text-align: right; + } + } + + th { + padding-top: map.get($spacers, 2); + padding-bottom: map.get($spacers, 2); + padding-right: map.get($spacers, 2); + text-align: left; + } + + tbody { + tr:nth-child(even) { + background-color: $table-row-even-bg; + } + + tr:nth-child(odd) { + background-color: $table-row-odd-bg; + } + + td { + padding: $table-cell-padding; + } + } + + .input-root { + margin-bottom: 0; + } + + .results-stdev { + font-size: .625rem; + } + } + } } .show-all-stats-container .boolean-picker-root { @@ -37,63 +60,6 @@ } } -.ep-weights-table { - max-height: 50vh; - overflow-y: auto; -} - -.results-ep-table { - margin: auto; - color: white; -} - -.ep-weights-table:not(.show-all-stats) .non-ep-stat { - display: none; -} - .results-ep-table .col-action { margin-left: map.get($spacers, 1); } - -.results-ep-table td, .results-ep-table th { - padding: 2px 20px; - white-space: nowrap; -} - -.results-ep-table td { - text-align: right; - font-size: 14px; -} -.results-ep-table td input { - text-align: right; -} - -.results-ep-table th { - text-align: center; - font-size: 16px; - font-weight: 700; - white-space: nowrap; -} - -.results-ep-table td:nth-child(1) { - text-align: left; - font-size: 16px; - font-weight: 700; -} - -.stdev-cell span:nth-child(2) { - text-align: left; - font-size: 12px; - font-weight: 700; -} -.stdev-cell span:nth-child(2):before { - content: " \00b1"; - padding: 1px; -} - -.stats-type-ep .type-weight { - display: none; -} -.stats-type-weight .type-ep { - display: none; -} diff --git a/ui/scss/core/components/detailed_results/_timeline.scss b/ui/scss/core/components/detailed_results/_timeline.scss index 26ea5c084d..4b2720368c 100644 --- a/ui/scss/core/components/detailed_results/_timeline.scss +++ b/ui/scss/core/components/detailed_results/_timeline.scss @@ -47,10 +47,6 @@ $combo-points-color: #ffa07a; 0 0 10px red; } -.timeline-warning-description { - color: var(--main-text-color); -} - .timeline-run-again-button { margin-left: 10px; display: inline-block; diff --git a/ui/scss/core/individual_sim_ui/_shared.scss b/ui/scss/core/individual_sim_ui/_shared.scss index 004d95ff5b..f1b4ad4d91 100644 --- a/ui/scss/core/individual_sim_ui/_shared.scss +++ b/ui/scss/core/individual_sim_ui/_shared.scss @@ -22,7 +22,7 @@ .left-gear-panel { min-width: calc(550px + 2vw); flex: 3; - margin-right: $gap-width * 2; + margin-right: var(--container-padding); } @include media-breakpoint-down(xl) { @@ -57,129 +57,6 @@ } } -// .settings-tab { -// overflow-y: auto; -// } -// .settings-inputs { -// position: relative; -// } -// .settings-section-container { -// position: absolute; -// } - -// .settings-section { -// border: 2px solid var(--main-text-color); -// padding: 4px; -// margin: 5px; -// display: grid; -// transform: none !important; -// } - -// .settings-section>legend { -// padding: 0 10px; -// margin: 0 3px; -// font-weight: 900; -// color: var(--main-text-color); -// font-size: 18px; -// white-space: nowrap; -// border: none; -// width: auto; -// } - -// .settings-section .icon-enum-picker-root { -// margin: 1px; -// } - -// .settings-section .icon-enum-picker-root a { -// height: 46px; -// width: 46px; -// } - -// .settings-bottom-bar { -// margin: 20px; -// display: flex; -// justify-content: space-around; -// align-items: flex-end; -// } - -// .race-section { -// text-align: center; -// } -// .race-section > legend { -// text-align: left; -// } - -// .race-section > div:not(.settings-section-iconrow), .rotation-section > div:not(.settings-section-iconrow), .other-settings-section > div:not(.settings-section-iconrow) { -// display: flex; -// justify-content: space-between; -// align-items: center; -// } - -// .settings-section-iconrow { -// display: flex; -// grid-template-columns: repeat(5, 1fr); -// justify-content: space-evenly; -// flex-wrap: wrap; -// align-items: center; -// } -// .settings-section-iconrow>div { -// margin: auto !important; -// } - -// .buffs-section>div { -// display: grid; -// } -// .buffs-section { -// grid-template-columns: repeat(3, 1fr); -// } - -// .consumes-section>div { -// display: grid; -// } - -// .consumes-row { -// display: flex; -// align-items: center; -// } -// .consumes-row > span { -// margin: 5px; -// } -// .consumes-row-inputs { -// display: flex; -// align-items: center; -// justify-content: space-around; -// flex-grow: 1; -// } -// .consumes-row-inputs > * { -// margin: 2px; -// } - -// .debuffs-section>div { -// display: grid; -// } -// .debuffs-section { -// grid-template-columns: repeat(3, 1fr); -// } - -// .cooldowns-section-container { -// z-index: 1000; -// } - -// .saved-encounter-manager { -// display: inline-block; -// text-align: left; -// } - -// .saved-rotation-manager { -// display: inline-block; -// text-align: center; -// } - -// .saved-settings-manager { -// display: inline-block; -// text-align: right; -// } - .talents-tab-content { display: flex; flex-wrap: wrap; diff --git a/ui/scss/core/sim_ui/_header.scss b/ui/scss/core/sim_ui/_header.scss index 5319c25d51..f89fb0128b 100644 --- a/ui/scss/core/sim_ui/_header.scss +++ b/ui/scss/core/sim_ui/_header.scss @@ -57,10 +57,6 @@ .warnings { margin-top: math.div($nav-link-padding-y, 2); margin-bottom: math.div($nav-link-padding-y, 2); - text-shadow: - 0 0 10px $danger, - 0 0 10px $danger, - 0 0 10px $danger; } .known-issues { @@ -87,7 +83,6 @@ .dropdown-menu { top: -2px; - border: 1px solid $primary; } } } diff --git a/ui/scss/core/sim_ui/_main.scss b/ui/scss/core/sim_ui/_main.scss index 916a8cb3fe..b6291aacc8 100644 --- a/ui/scss/core/sim_ui/_main.scss +++ b/ui/scss/core/sim_ui/_main.scss @@ -2,9 +2,6 @@ min-width: calc(275px + 1vw); display: flex; flex-flow: column; - background-size: cover; - background-position: center center; - color: var(--main-text-color); .sim-main { height: 80%; diff --git a/ui/scss/core/sim_ui/_shared.scss b/ui/scss/core/sim_ui/_shared.scss index 0337e3da6b..47b56865f6 100644 --- a/ui/scss/core/sim_ui/_shared.scss +++ b/ui/scss/core/sim_ui/_shared.scss @@ -1,6 +1,6 @@ @use "sass:map"; -$sim-header-height: 72px; +$sim-header-height: 4.5rem; td, th { padding: auto; @@ -21,9 +21,11 @@ td, th { width: 100vw; height: 100vh; background-image: - linear-gradient(rgba(var(--theme-color-background-raw), var(--theme-background-opacity)), rgba(var(--theme-color-background-raw), var(--theme-background-opacity))), + linear-gradient( + rgba(var(--theme-background-color), var(--theme-background-opacity)), + rgba(var(--theme-background-color), var(--theme-background-opacity)) + ), var(--theme-background-image); - background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -1; @@ -48,14 +50,14 @@ td, th { border-bottom: 1px solid $border-color; .sim-title-dropdown-root { - height: $sim-header-height - 1px; + height: calc(#{$sim-header-height} - 1px); } } } .sim-content { - padding-left: $gap-width * 2; - padding-right: $gap-width * 2; + padding-left: var(--container-padding); + padding-right: var(--container-padding); flex: 4; z-index: 1; diff --git a/ui/scss/core/sim_ui/_sidebar.scss b/ui/scss/core/sim_ui/_sidebar.scss index 6e50aa5e91..07856317cd 100644 --- a/ui/scss/core/sim_ui/_sidebar.scss +++ b/ui/scss/core/sim_ui/_sidebar.scss @@ -22,8 +22,10 @@ } .sim-sidebar-actions { - padding-left: $gap-width * 2; - padding-right: $gap-width * 2; + padding-left: var(--container-padding); + padding-right: var(--container-padding); + margin-left: $gap-width * -1; + margin-right: $gap-width * -1; display: flex; flex-direction: column; align-items: center; @@ -60,6 +62,7 @@ .sim-sidebar-actions { padding: 0; + margin: 0; } } } diff --git a/ui/scss/core/talents/_glyphs_picker.scss b/ui/scss/core/talents/_glyphs_picker.scss index 6c8e72c7e1..1228f5ccc8 100644 --- a/ui/scss/core/talents/_glyphs_picker.scss +++ b/ui/scss/core/talents/_glyphs_picker.scss @@ -1,5 +1,3 @@ -@import "../components/popup"; - .glyphs-picker-root { display: flex; flex-direction: column; diff --git a/ui/scss/global.scss b/ui/scss/global.scss deleted file mode 100644 index d999aaecc2..0000000000 --- a/ui/scss/global.scss +++ /dev/null @@ -1,65 +0,0 @@ -@use "sass:map"; - -* { - letter-spacing: 1px; -} - -html { - height: 100%; - color-scheme: dark; -} - -body { - height: 100%; - // Bootstrap adds padding-right when Modals open for some reason, causing popping - padding-right: 0 !important; - // Prevent browser scrollbars from adjusting page contents - margin-right: calc(-1 * (100vw - 100%)); - overflow-x: hidden; - opacity: 0; - transition: opacity .25s linear; - - &.ready { - opacity: 1; - } -} - -a { - outline: none; - transition: color .15s ease-in-out; - - &.link-alt { - color: white; - - &:hover, &:focus, &.active { - color: $brand-color; - } - } -} - -label { - font-weight: bold; -} - -hr { - border-top: 1px solid; - border-bottom: 1px solid; -} - -.dragto:not(.dragfrom) { - filter: brightness(.75); -} - -.hide { - display: none !important; -} - -[contenteditable="true"]:active, -[contenteditable="true"]:focus { - border:none; - outline:none; -} - -[draggable="true"] { - cursor: pointer; -} diff --git a/ui/scss/homepage/_homepage.scss b/ui/scss/homepage/_homepage.scss index b71527a1dd..9e3216d793 100644 --- a/ui/scss/homepage/_homepage.scss +++ b/ui/scss/homepage/_homepage.scss @@ -5,7 +5,6 @@ width: 100%; height: 100%; background-image: url("/wotlk/assets/img/wotlk.jpg"); - background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -1; @@ -39,7 +38,7 @@ .wowsims-title { @extend .display-1; @extend .fw-bold; - color: $primary; + color: $brand; margin: 0; } } diff --git a/ui/scss/index.scss b/ui/scss/index.scss index b208614036..99b6f6af76 100644 --- a/ui/scss/index.scss +++ b/ui/scss/index.scss @@ -3,7 +3,7 @@ @import "bootstrap/scss/variables"; // Custom Bootstrap theme overrides -@import "variables"; +@import "shared/variables"; // Bootstrap configuration @import "bootstrap/scss/maps"; @@ -33,12 +33,14 @@ // Bootstrap Utilities API @import "./bootstrap/scss/utilities/api"; -// Custom styles -@import "./global"; -@import "./global_old"; +// Custom shared styles +@import "shared/mixins"; +@import "shared/global"; +@import "shared/global_old"; +@import "shared/modal"; // Custom Bootstrap style overrides -@import "./bootstrap_style_overrides"; +@import "shared/bootstrap_style_overrides"; // Import other plugin styles @import "tippy.js/dist/tippy"; diff --git a/ui/scss/bootstrap_style_overrides.scss b/ui/scss/shared/_bootstrap_style_overrides.scss similarity index 74% rename from ui/scss/bootstrap_style_overrides.scss rename to ui/scss/shared/_bootstrap_style_overrides.scss index 7a77799e71..31cf11b8f5 100644 --- a/ui/scss/bootstrap_style_overrides.scss +++ b/ui/scss/shared/_bootstrap_style_overrides.scss @@ -37,10 +37,24 @@ margin: 0; } } +} + +.form-check-input { + width: $form-check-input-width !important; + height: $form-check-input-width !important; + + &:focus { + box-shadow: 0 0 .25rem var(--bs-primary); + } + + &:checked[type="checkbox"] { + background-color: var(--bs-primary); + background-image: var(--bs-form-check-box-bg-image); + } - .form-check-input { - width: $form-check-input-width !important; - height: $form-check-input-width !important; + &:checked[type="radio"] { + background-color: var(--bs-primary); + background-image: var(--bs-form-check-radio-bg-image); } } @@ -54,13 +68,22 @@ .modal { .modal-dialog { - .modal-header { + .modal-header, + .modal-footer { padding-left: 0; padding-right: 0; - margin-left: $modal-header-padding-x; - margin-right: $modal-header-padding-x; + margin-left: $modal-header-padding; + margin-right: $modal-header-padding; + } + + .modal-header { align-items: flex-start; } + + .modal-body { + display: flex; + flex-direction: column; + } } } @@ -114,31 +137,11 @@ display: none !important; } - @each $color, $value in $class-colors { // Dampened class themes .bg-#{$color}-dampened { background: mix(black, $value, 75); } - - // Class-themed form checks - .form-check-#{$color} { - @extend .form-check; - - .form-check-input:checked[type="checkbox"] { - background-color: $value; - background-image: escape-svg( - url("data:image/svg+xml,") - ); - } - - .form-check-input:checked[type="radio"] { - background-color: $value; - background-image: escape-svg( - url("data:image/svg+xml,") - ); - } - } } @include media-breakpoint-down(xl) { diff --git a/ui/scss/shared/_global.scss b/ui/scss/shared/_global.scss new file mode 100644 index 0000000000..d1d468b005 --- /dev/null +++ b/ui/scss/shared/_global.scss @@ -0,0 +1,113 @@ +@use "sass:map"; + +:root { + --container-padding: 3rem; +} + +@include media-breakpoint-up(xxl) { + :root { + --container-padding: 4rem; + } +} + +@include media-breakpoint-up(1080p) { + :root { + --bs-body-font-size: 16px !important; + } +} + +// // We want to apply only to 1440p monitors, NOT 1080p Ultrawide +// @media (min-width: map.get($grid-breakpoints, 1440p)) and (max-aspect-ratio: 16/9) { +// :root { +// --bs-body-font-size: 20px !important; +// } +// } + +// @include media-breakpoint-up(4k) { +// :root { +// --bs-body-font-size: 32px !important; +// } +// } + +// Use larger padding on 1080p+ ultrawide monitors +@media (min-width: map.get($grid-breakpoints, 1080p)) and (min-aspect-ratio: 17/9) { + :root { + --container-padding: 6rem; + } +} + +* { + letter-spacing: 1px; +} + +html { + height: 100%; + color-scheme: dark; + font-size: var(--bs-body-font-size); +} + +body { + height: 100%; + // Bootstrap adds padding-right when Modals open for some reason, causing popping + padding-right: 0 !important; + // Prevent browser scrollbars from adjusting page contents + margin-right: calc(-1 * (100vw - 100%)); + overflow-x: hidden; + opacity: 0; + transition: opacity .25s linear; + + &.ready { + opacity: 1; + } +} + +a { + outline: none; + transition: color .15s ease-in-out; + + &.link-alt { + color: white; + + &:hover, &:focus, &.active { + color: $brand; + } + } +} + +hr { + border-top: 1px solid; + border-bottom: 1px solid; +} + +label { + font-weight: bold; +} + +p { + margin-bottom: $block-spacer; +} + +.dragto:not(.dragfrom) { + filter: brightness(.75); +} + +.hide { + display: none !important; +} + +.warnings { + text-shadow: + 0 0 10px $danger, + 0 0 10px $danger, + 0 0 10px $danger; +} + +[contenteditable="true"]:active, +[contenteditable="true"]:focus { + border:none; + outline:none; +} + +[draggable="true"] { + cursor: pointer; +} diff --git a/ui/scss/global_old.scss b/ui/scss/shared/_global_old.scss similarity index 94% rename from ui/scss/global_old.scss rename to ui/scss/shared/_global_old.scss index c1e366f089..5bf659aef0 100644 --- a/ui/scss/global_old.scss +++ b/ui/scss/shared/_global_old.scss @@ -1,12 +1,10 @@ :root { --bs-body-font-size: 14px; --bs-gap: 1vw; - --theme-color-background: DarkSlateGrey; - --theme-color-background-raw: 0, 0, 0; + --theme-background-color: DarkSlateGrey; --theme-background-image: linear-gradient(black, black); --theme-background-opacity: 0.9; --main-bg-color: DarkSlateGrey; - --main-text-color: White; --main-secondary-color: Black; --sidebar-text-color: White; --sidebar-highlight-color: Blue; @@ -207,11 +205,3 @@ legend { float: none; width: auto; } - -.dropdown-item { - color: var(--main-text-color); - - &:hover { - color: var(--main-text-color); - } -} diff --git a/ui/scss/shared/_mixins.scss b/ui/scss/shared/_mixins.scss new file mode 100644 index 0000000000..cdbe2e1e94 --- /dev/null +++ b/ui/scss/shared/_mixins.scss @@ -0,0 +1,51 @@ +@mixin theme-color($base-color, $opacity, $background-image-url) { + $background-color-hex: mix(black, $base-color, 90); + $hover-color: shade-color($base-color, $btn-hover-bg-shade-amount); + $interact-color: shade-color($base-color, $btn-active-bg-shade-amount); + $text-color: color-contrast($base-color); + + // Used to style the SimUI background + --theme-background-color: #{red($background-color-hex), green($background-color-hex), blue($background-color-hex)}; + --theme-background-image: url(#{$background-image-url}); + --theme-background-opacity: #{$opacity}; + + // Defines the text color of components using the primary color as a background + --theme-component-text-color: #{color-contrast($base-color)}; + + // Override Bootstrap primary variables + --bs-primary: #{$base-color}; + --bs-primary-rgb: #{to-rgb($base-color)}; + + // Custom variants we use for styling some components + --bs-primary-dampened: #{mix(black, $base-color, 75)}; + + .btn-primary { + --bs-btn-bg: #{$base-color}; + --bs-btn-border-color: #{$base-color}; + --bs-btn-color: #{$text-color}; + + --bs-btn-hover-bg: #{$hover-color}; + --bs-btn-hover-border-color: #{$hover-color}; + --bs-btn-hover-color: #{$text-color}; + + --bs-btn-active-bg: #{$interact-color}; + --bs-btn-active-border-color: #{$interact-color}; + --bs-btn-active-color: #{$text-color}; + + --bs-btn-disabled-bg: #{mix(gray, $base-color, 50)}; + --bs-btn-disabled-border-color: #{mix(gray, $base-color, 50)}; + --bs-btn-disabled-color: #{$text-color}; + } + + .modal { + --bs-modal-border-color: #{$base-color}; + } + + // These are custom variables but parsed SVGs can't use CSS vars so we need to assign them with Sass + --bs-form-check-box-bg-image: #{escape-svg( + url("data:image/svg+xml,") + )}; + --bs-form-check-radio-bg-image: #{escape-svg( + url("data:image/svg+xml,") + )}; +} diff --git a/ui/scss/shared/_modal.scss b/ui/scss/shared/_modal.scss new file mode 100644 index 0000000000..b940a5ab23 --- /dev/null +++ b/ui/scss/shared/_modal.scss @@ -0,0 +1,30 @@ +@use "sass:math"; + +.modal { + .modal-dialog { + &.modal-overflow-scroll { + .modal-content { + max-height: calc(100vh - (2 * var(--bs-modal-margin))); + } + + .modal-body { + overflow: scroll; + } + } + } + + .modal-scroll-table { + flex: 1; + overflow-y: scroll; + padding-left: var(--bs-modal-padding); + padding-right: var(--bs-modal-padding); + margin-left: calc(var(--bs-modal-padding) * -1); + margin-right: calc(var(--bs-modal-padding) * -1); + + th { + position: sticky; + top: 0; + background: $body-bg; + } + } +} diff --git a/ui/scss/shared/_sim_links.scss b/ui/scss/shared/_sim_links.scss index da0e5b191c..b6dc8a8d6b 100644 --- a/ui/scss/shared/_sim_links.scss +++ b/ui/scss/shared/_sim_links.scss @@ -13,8 +13,8 @@ align-items: center; .sim-link-icon { - width: 48px; - height: 48px; + width: 3rem; + height: 3rem; margin-right: map.get($spacers, 2); } diff --git a/ui/scss/variables.scss b/ui/scss/shared/_variables.scss similarity index 88% rename from ui/scss/variables.scss rename to ui/scss/shared/_variables.scss index 5b9ee1b2cf..af6e08783c 100644 --- a/ui/scss/variables.scss +++ b/ui/scss/shared/_variables.scss @@ -5,8 +5,6 @@ // individual component pages in the Bootstrap 5.2 docs for relevant variable usage. // Custom theme color mapping -$brand-color: #e0a335; - $death-knight: rgb(194, 46, 70); $druid: rgb(255, 125, 10); $hunter: rgb(171, 212, 115); @@ -25,7 +23,7 @@ $class-colors: ( "mage": $mage, "paladin": $paladin, "priest": $priest, - "raid": $brand-color, + "raid": $primary, "rogue": $rogue, "shaman": $shaman, "warlock": $warlock, @@ -34,23 +32,14 @@ $class-colors: ( $theme-colors: map-merge($theme-colors, $class-colors); -// Theme variable overrides -@if variable-exists(theme) { - $primary: map.get($class-colors, $theme); -} - -@if not variable-exists(theme) { - $primary: $brand-color; -} - +$brand: #e0a335; $success: #1eff00; $quality-uncommon: $success; $quality-rare: #0070dd; $quality-epic: #a335ee; $custom-colors: ( - "brand": $brand-color, - "primary": $primary, + "brand": $brand, "quality-epic": $quality-epic, "quality-rare": $quality-rare, "quality-uncommon": $quality-uncommon, @@ -59,20 +48,33 @@ $custom-colors: ( $theme-colors: map-merge($theme-colors, $custom-colors); +$custom-breakpoints: ( + xxxl: 1600px, + 1080p: 1900px, + 1440p: 2500px, + 4k: 3800px, +); + +$grid-breakpoints: map-merge($grid-breakpoints, $custom-breakpoints); + // Custom variables $block-spacer: .75rem; +$table-cell-padding: .5rem; $content-font-size: .75rem; $gap-width: 1.5rem; $gap-width-sm: .5rem; $link-danger-color: #ef9eaa; $link-warning-color: #faf07f; +$table-row-even-bg: #202128; +$table-row-odd-bg: #2d2f35; $wrath-blue: #7FCBD8; // Global Bootstrap variable overrides $body-bg: #15171e; $body-color: white; - $border-color: dimgrey; +$font-size-root: 16px; +$grid-gutter-width: .75rem; // This option doesn't seem to be working for some reason. Carets hidden manually instead // $enable-caret: false; @@ -93,6 +95,8 @@ $dropdown-bg: $body-bg; $dropdown-border-width: 0; $dropdown-color: white; $dropdown-link-active-bg: $dropdown-bg; +$dropdown-link-color: white; +$dropdown-link-hover-color: white; $dropdown-link-hover-bg: darken($dropdown-bg, 3); $dropdown-padding-y: 0; @@ -130,7 +134,10 @@ $input-font-size: $content-font-size; $modal-content-bg: $body-bg; $modal-content-border-color: $link-color; +$modal-footer-margin-between: 0px; $modal-header-border-color: $border-color; +$modal-header-padding: 1.25rem; +$modal-inner-padding: 1.25rem; $navbar-dark-color: white; $navbar-dark-hover-color: $primary; @@ -140,6 +147,8 @@ $navbar-padding-y: 0; $nav-link-font-size: .875rem; $nav-link-padding-y: map.get($spacers, 3); $nav-link-transition: $link-transition; + +$nav-tabs-border-color: $border-color; $nav-tabs-link-active-bg: transparent; $nav-tabs-link-active-color: white; diff --git a/ui/scss/sims/balance_druid/_sim.scss b/ui/scss/sims/balance_druid/_sim.scss index 247e1e9d0c..8ba680df13 100644 --- a/ui/scss/sims/balance_druid/_sim.scss +++ b/ui/scss/sims/balance_druid/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'druid'; - // Set color variables which control the site theme. .balance-druid-sim-ui { - --theme-color-background: #1d1510; - --theme-color-background-raw: 29, 21, 16; - --theme-background-image: url('/wotlk/assets/img/balance_druid_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $druid, + .95, + '/wotlk/assets/img/balance_druid_background.jpg' + ); } diff --git a/ui/scss/sims/balance_druid/index.scss b/ui/scss/sims/balance_druid/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/balance_druid/index.scss +++ b/ui/scss/sims/balance_druid/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/deathknight/_sim.scss b/ui/scss/sims/deathknight/_sim.scss index 7d78de23ae..e29af56d84 100644 --- a/ui/scss/sims/deathknight/_sim.scss +++ b/ui/scss/sims/deathknight/_sim.scss @@ -1,10 +1,8 @@ -$theme: "death-knight"; - // Set color variables which control the site theme. .deathknight-sim-ui { - --theme-color-background: #1d1626; - --theme-color-background-raw: 19, 5, 7; - --theme-background-image: url('/wotlk/assets/img/death_knight_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $death-knight, + .95, + '/wotlk/assets/img/death_knight_background.jpg' + ); } diff --git a/ui/scss/sims/deathknight/index.scss b/ui/scss/sims/deathknight/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/deathknight/index.scss +++ b/ui/scss/sims/deathknight/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/detailed_results/index.scss b/ui/scss/sims/detailed_results/index.scss index edab9c471b..547473e093 100644 --- a/ui/scss/sims/detailed_results/index.scss +++ b/ui/scss/sims/detailed_results/index.scss @@ -1,19 +1,25 @@ @import "../../core/sim_ui"; @import "../../core/components/detailed_results"; +@import "../../sims/index"; body { background-color: transparent; overflow: auto; max-height: 100vh; - color: var(--main-text-color); + color: white; } body.new-tab { background-image: - linear-gradient(rgba(var(--theme-color-background-raw), var(--theme-background-opacity)), rgba(var(--theme-color-background-raw), var(--theme-background-opacity))), + linear-gradient( + rgba(var(--theme-background-color), var(--theme-background-opacity)), + rgba(var(--theme-background-color), var(--theme-background-opacity)) + ), var(--theme-background-image); + background-repeat: no-repeat; + background-size: cover; .dr-root { - padding: $gap-width $gap-width * 2; + padding: $gap-width var(--container-padding); } } diff --git a/ui/scss/sims/elemental_shaman/_sim.scss b/ui/scss/sims/elemental_shaman/_sim.scss index fd813b8320..74b9a27916 100644 --- a/ui/scss/sims/elemental_shaman/_sim.scss +++ b/ui/scss/sims/elemental_shaman/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'shaman'; - // Set color variables which control the site theme. .elemental-shaman-sim-ui { - --theme-color-background: #181d2d; - --theme-color-background-raw: 24, 29, 45; - --theme-background-image: url('/wotlk/assets/img/elemental_shaman_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $shaman, + .95, + '/wotlk/assets/img/elemental_shaman_background.jpg' + ); } diff --git a/ui/scss/sims/elemental_shaman/index.scss b/ui/scss/sims/elemental_shaman/index.scss index 930e69663b..ef880c6169 100644 --- a/ui/scss/sims/elemental_shaman/index.scss +++ b/ui/scss/sims/elemental_shaman/index.scss @@ -1,3 +1,3 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; @import "../../core/components/totem_inputs"; +@import "./sim"; diff --git a/ui/scss/sims/enhancement_shaman/_sim.scss b/ui/scss/sims/enhancement_shaman/_sim.scss index 5e0ec7d646..beba1f480f 100644 --- a/ui/scss/sims/enhancement_shaman/_sim.scss +++ b/ui/scss/sims/enhancement_shaman/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'shaman'; - // Set color variables which control the site theme. .enhancement-shaman-sim-ui { - --theme-color-background: #181d2d; - --theme-color-background-raw: 24, 29, 45; - --theme-background-image: url('/wotlk/assets/img/enhancement_shaman_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $shaman, + .95, + '/wotlk/assets/img/enhancement_shaman_background.jpg' + ); } diff --git a/ui/scss/sims/enhancement_shaman/index.scss b/ui/scss/sims/enhancement_shaman/index.scss index 930e69663b..ef880c6169 100644 --- a/ui/scss/sims/enhancement_shaman/index.scss +++ b/ui/scss/sims/enhancement_shaman/index.scss @@ -1,3 +1,3 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; @import "../../core/components/totem_inputs"; +@import "./sim"; diff --git a/ui/scss/sims/feral_druid/_sim.scss b/ui/scss/sims/feral_druid/_sim.scss index bb48328f77..79096fe366 100644 --- a/ui/scss/sims/feral_druid/_sim.scss +++ b/ui/scss/sims/feral_druid/_sim.scss @@ -1,9 +1,8 @@ -$theme: 'druid'; - // Set color variables which control the site theme. .feral-druid-sim-ui { - --theme-color-background: #1d1510; - --theme-color-background-raw: 29, 21, 16; - --theme-background-image: url('/wotlk/assets/img/feral_druid_background.jpg'); - --main-text-color: White; + @include theme-color( + $druid, + .95, + '/wotlk/assets/img/feral_druid_background.jpg' + ); } diff --git a/ui/scss/sims/feral_druid/index.scss b/ui/scss/sims/feral_druid/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/feral_druid/index.scss +++ b/ui/scss/sims/feral_druid/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/feral_tank_druid/_sim.scss b/ui/scss/sims/feral_tank_druid/_sim.scss index 46bdcbc092..f78792decc 100644 --- a/ui/scss/sims/feral_tank_druid/_sim.scss +++ b/ui/scss/sims/feral_tank_druid/_sim.scss @@ -1,9 +1,8 @@ -$theme: 'druid'; - // Set color variables which control the site theme. .feral-tank-druid-sim-ui { - --theme-color-background: #1d1510; - --theme-color-background-raw: 29, 21, 16; - --theme-background-image: url('/wotlk/assets/img/feral_druid_tank_background.jpg'); - --main-text-color: White; + @include theme-color( + $druid, + .95, + '/wotlk/assets/img/feral_druid_tank_background.jpg' + ); } diff --git a/ui/scss/sims/feral_tank_druid/index.scss b/ui/scss/sims/feral_tank_druid/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/feral_tank_druid/index.scss +++ b/ui/scss/sims/feral_tank_druid/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/healing_priest/_sim.scss b/ui/scss/sims/healing_priest/_sim.scss index 37020e2892..4667b75b9a 100644 --- a/ui/scss/sims/healing_priest/_sim.scss +++ b/ui/scss/sims/healing_priest/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'priest'; - // Set color variables which control the site theme. .healing-priest-sim-ui { - --theme-color-background: #1c1812; - --theme-color-background-raw: 28, 24, 18; - --theme-background-image: url('/wotlk/assets/img/healing_priest_background.jpg'); - --theme-background-opacity: 0.9; - --main-text-color: White; + @include theme-color( + $priest, + .9, + '/wotlk/assets/img/healing_priest_background.jpg' + ); } diff --git a/ui/scss/sims/healing_priest/index.scss b/ui/scss/sims/healing_priest/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/healing_priest/index.scss +++ b/ui/scss/sims/healing_priest/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/holy_paladin/_sim.scss b/ui/scss/sims/holy_paladin/_sim.scss index 05398ac174..2c140ae748 100644 --- a/ui/scss/sims/holy_paladin/_sim.scss +++ b/ui/scss/sims/holy_paladin/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'paladin'; - // Set color variables which control the site theme. .holy-paladin-sim-ui { - --theme-color-background: rgb(20, 13, 18); - --theme-color-background-raw: 20, 13, 18; - --theme-background-image: url('/wotlk/assets/img/holy_paladin_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $paladin, + .95, + '/wotlk/assets/img/holy_paladin_background.jpg' + ); } diff --git a/ui/scss/sims/holy_paladin/index.scss b/ui/scss/sims/holy_paladin/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/holy_paladin/index.scss +++ b/ui/scss/sims/holy_paladin/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/hunter/_sim.scss b/ui/scss/sims/hunter/_sim.scss index 13f2f72a3e..3e375cbca5 100644 --- a/ui/scss/sims/hunter/_sim.scss +++ b/ui/scss/sims/hunter/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'hunter'; - // Set color variables which control the site theme. .hunter-sim-ui { - --theme-color-background: #0c190f; - --theme-color-background-raw: 12, 25, 15; - --theme-background-image: url('/wotlk/assets/img/hunter_background.jpg'); - --theme-background-opacity: 0.9; - --main-text-color: White; + @include theme-color( + $hunter, + .9, + '/wotlk/assets/img/hunter_background.jpg' + ); } diff --git a/ui/scss/sims/hunter/index.scss b/ui/scss/sims/hunter/index.scss index 930e69663b..ef880c6169 100644 --- a/ui/scss/sims/hunter/index.scss +++ b/ui/scss/sims/hunter/index.scss @@ -1,3 +1,3 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; @import "../../core/components/totem_inputs"; +@import "./sim"; diff --git a/ui/scss/sims/index.scss b/ui/scss/sims/index.scss new file mode 100644 index 0000000000..2ce3bf0b90 --- /dev/null +++ b/ui/scss/sims/index.scss @@ -0,0 +1,23 @@ +// TODO: Could we use a glob import module to avoid hardcoding these? +@import 'balance_druid/sim'; +@import 'deathknight/sim'; +@import 'elemental_shaman/sim'; +@import 'enhancement_shaman/sim'; +@import 'feral_druid/sim'; +@import 'feral_tank_druid/sim'; +@import 'healing_priest/sim'; +@import 'holy_paladin/sim'; +@import 'hunter/sim'; +@import 'mage/sim'; +@import 'protection_paladin/sim'; +@import 'protection_warrior/sim'; +@import 'raid/sim'; +@import 'restoration_druid/sim'; +@import 'restoration_shaman/sim'; +@import 'retribution_paladin/sim'; +@import 'rogue/sim'; +@import 'shadow_priest/sim'; +@import 'smite_priest/sim'; +@import 'tank_deathknight/sim'; +@import 'warlock/sim'; +@import 'warrior/sim'; diff --git a/ui/scss/sims/mage/_sim.scss b/ui/scss/sims/mage/_sim.scss index aa90c71b8d..bbcd358c01 100644 --- a/ui/scss/sims/mage/_sim.scss +++ b/ui/scss/sims/mage/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'mage'; - // Set color variables which control the site theme. .mage-sim-ui { - --theme-color-background: #101a20; - --theme-color-background-raw: 16, 26, 32; - --theme-background-image: url('/wotlk/assets/img/mage_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $mage, + .95, + '/wotlk/assets/img/mage_background.jpg' + ); } diff --git a/ui/scss/sims/mage/index.scss b/ui/scss/sims/mage/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/mage/index.scss +++ b/ui/scss/sims/mage/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/protection_paladin/_sim.scss b/ui/scss/sims/protection_paladin/_sim.scss index ec57380742..83a5829528 100644 --- a/ui/scss/sims/protection_paladin/_sim.scss +++ b/ui/scss/sims/protection_paladin/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'paladin'; - // Set color variables which control the site theme. .protection-paladin-sim-ui { - --theme-color-background: rgb(20, 13, 18); - --theme-color-background-raw: 20, 13, 18; - --theme-background-image: url('/wotlk/assets/img/prot_paladin.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $paladin, + .95, + '/wotlk/assets/img/prot_paladin.jpg' + ); } diff --git a/ui/scss/sims/protection_paladin/index.scss b/ui/scss/sims/protection_paladin/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/protection_paladin/index.scss +++ b/ui/scss/sims/protection_paladin/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/protection_warrior/_sim.scss b/ui/scss/sims/protection_warrior/_sim.scss index 0d6e5db198..2d2dad26a7 100644 --- a/ui/scss/sims/protection_warrior/_sim.scss +++ b/ui/scss/sims/protection_warrior/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'warrior'; - // Set color variables which control the site theme. .protection-warrior-sim-ui { - --theme-color-background: #1c1408; - --theme-color-background-raw: 28, 20, 8; - --theme-background-image: url('/wotlk/assets/img/protection_warrior_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $warrior, + .95, + '/wotlk/assets/img/protection_warrior_background.jpg' + ); } diff --git a/ui/scss/sims/protection_warrior/index.scss b/ui/scss/sims/protection_warrior/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/protection_warrior/index.scss +++ b/ui/scss/sims/protection_warrior/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/raid/_sim.scss b/ui/scss/sims/raid/_sim.scss index a7a55e7669..f5dccc0446 100644 --- a/ui/scss/sims/raid/_sim.scss +++ b/ui/scss/sims/raid/_sim.scss @@ -1,8 +1,8 @@ // Set color variables which control the site theme. .raid-sim-ui { - --theme-color-background: #000000; - --theme-color-background-raw: 0, 0, 0; - --theme-background-image: url('/wotlk/assets/img/ulduar.jpg'); - --theme-background-opacity: .8; - --main-text-color: White; + @include theme-color( + $primary, + .9, + '/wotlk/assets/img/ulduar.jpg' + ); } diff --git a/ui/scss/sims/raid/index.scss b/ui/scss/sims/raid/index.scss index c8d5185327..22c0ce6354 100644 --- a/ui/scss/sims/raid/index.scss +++ b/ui/scss/sims/raid/index.scss @@ -1,4 +1,5 @@ @import "../../core/individual_sim_ui/index"; +@import "./sim"; @import "../balance_druid/sim"; @import "../elemental_shaman/sim"; @@ -17,4 +18,3 @@ @import "../warrior/sim"; @import "./raid_sim_ui"; -@import "./sim"; \ No newline at end of file diff --git a/ui/scss/sims/restoration_druid/_sim.scss b/ui/scss/sims/restoration_druid/_sim.scss index aff9ce4a39..6352b09657 100644 --- a/ui/scss/sims/restoration_druid/_sim.scss +++ b/ui/scss/sims/restoration_druid/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'druid'; - // Set color variables which control the site theme. .restoration-druid-sim-ui { - --theme-color-background: #1d1510; - --theme-color-background-raw: 29, 21, 16; - --theme-background-image: url('/wotlk/assets/img/resto_druid_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $druid, + .95, + '/wotlk/assets/img/resto_druid_background.jpg' + ); } diff --git a/ui/scss/sims/restoration_druid/index.scss b/ui/scss/sims/restoration_druid/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/restoration_druid/index.scss +++ b/ui/scss/sims/restoration_druid/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/restoration_shaman/_sim.scss b/ui/scss/sims/restoration_shaman/_sim.scss index 8d1c139921..cf1b91a38a 100644 --- a/ui/scss/sims/restoration_shaman/_sim.scss +++ b/ui/scss/sims/restoration_shaman/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'shaman'; - // Set color variables which control the site theme. .restoration-shaman-sim-ui { - --theme-color-background: #181d2d; - --theme-color-background-raw: 24, 29, 45; - --theme-background-image: url('/wotlk/assets/img/resto_shaman_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $shaman, + .95, + '/wotlk/assets/img/resto_shaman_background.jpg' + ); } diff --git a/ui/scss/sims/restoration_shaman/index.scss b/ui/scss/sims/restoration_shaman/index.scss index 930e69663b..ef880c6169 100644 --- a/ui/scss/sims/restoration_shaman/index.scss +++ b/ui/scss/sims/restoration_shaman/index.scss @@ -1,3 +1,3 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; @import "../../core/components/totem_inputs"; +@import "./sim"; diff --git a/ui/scss/sims/retribution_paladin/_sim.scss b/ui/scss/sims/retribution_paladin/_sim.scss index 8c49378b2b..b0fb0ddc94 100644 --- a/ui/scss/sims/retribution_paladin/_sim.scss +++ b/ui/scss/sims/retribution_paladin/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'paladin'; - // Set color variables which control the site theme. .retribution-paladin-sim-ui { - --theme-color-background: rgb(20, 13, 18); - --theme-color-background-raw: 20, 13, 18; - --theme-background-image: url('/wotlk/assets/img/retribution_paladin.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $paladin, + .95, + '/wotlk/assets/img/retribution_paladin.jpg' + ); } diff --git a/ui/scss/sims/retribution_paladin/index.scss b/ui/scss/sims/retribution_paladin/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/retribution_paladin/index.scss +++ b/ui/scss/sims/retribution_paladin/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/rogue/_sim.scss b/ui/scss/sims/rogue/_sim.scss index 82098fd2f1..85df396bcd 100644 --- a/ui/scss/sims/rogue/_sim.scss +++ b/ui/scss/sims/rogue/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'rogue'; - // Set color variables which control the site theme. .rogue-sim-ui { - --theme-color-background: #19190c; - --theme-color-background-raw: 25, 25, 12; - --theme-background-image: url('/wotlk/assets/img/rogue_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $rogue, + .95, + '/wotlk/assets/img/rogue_background.jpg' + ); } diff --git a/ui/scss/sims/rogue/index.scss b/ui/scss/sims/rogue/index.scss index 930e69663b..ef880c6169 100644 --- a/ui/scss/sims/rogue/index.scss +++ b/ui/scss/sims/rogue/index.scss @@ -1,3 +1,3 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; @import "../../core/components/totem_inputs"; +@import "./sim"; diff --git a/ui/scss/sims/shadow_priest/_sim.scss b/ui/scss/sims/shadow_priest/_sim.scss index 3dec324be7..fb31f1eaa5 100644 --- a/ui/scss/sims/shadow_priest/_sim.scss +++ b/ui/scss/sims/shadow_priest/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'priest'; - // Set color variables which control the site theme. .shadow-priest-sim-ui { - --theme-color-background: #1d1726; - --theme-color-background-raw: 29, 23, 38; - --theme-background-image: url('/wotlk/assets/img/shadow_priest_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $priest, + .95, + '/wotlk/assets/img/shadow_priest_background.jpg' + ); } diff --git a/ui/scss/sims/shadow_priest/index.scss b/ui/scss/sims/shadow_priest/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/shadow_priest/index.scss +++ b/ui/scss/sims/shadow_priest/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/smite_priest/_sim.scss b/ui/scss/sims/smite_priest/_sim.scss index 4db00b0cc4..e2cf406f23 100644 --- a/ui/scss/sims/smite_priest/_sim.scss +++ b/ui/scss/sims/smite_priest/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'priest'; - // Set color variables which control the site theme. .smite-priest-sim-ui { - --theme-color-background: #1d1726; - --theme-color-background-raw: 29, 23, 38; - --theme-background-image: url('/wotlk/assets/img/smite_priest_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $priest, + .95, + '/wotlk/assets/img/smite_priest_background.jpg' + ); } diff --git a/ui/scss/sims/smite_priest/index.scss b/ui/scss/sims/smite_priest/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/smite_priest/index.scss +++ b/ui/scss/sims/smite_priest/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/tank_deathknight/_sim.scss b/ui/scss/sims/tank_deathknight/_sim.scss index 1c8104b117..08a66cdd71 100644 --- a/ui/scss/sims/tank_deathknight/_sim.scss +++ b/ui/scss/sims/tank_deathknight/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'death-knight'; - // Set color variables which control the site theme. .tank-deathknight-sim-ui { - --theme-color-background: #1d1626; - --theme-color-background-raw: 19, 5, 7; - --theme-background-image: url('/wotlk/assets/img/death_knight_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $death-knight, + .95, + '/wotlk/assets/img/death_knight_background.jpg' + ); } diff --git a/ui/scss/sims/tank_deathknight/index.scss b/ui/scss/sims/tank_deathknight/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/tank_deathknight/index.scss +++ b/ui/scss/sims/tank_deathknight/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/warlock/_sim.scss b/ui/scss/sims/warlock/_sim.scss index 492cbd6b69..0de08f3d3f 100644 --- a/ui/scss/sims/warlock/_sim.scss +++ b/ui/scss/sims/warlock/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'warlock'; - // Set color variables which control the site theme. .warlock-sim-ui { - --theme-color-background: rgb(24, 18, 27); - --theme-color-background-raw: 24, 18, 27; - --theme-background-image: url('/wotlk/assets/img/warlock_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $warlock, + .95, + '/wotlk/assets/img/warlock_background.jpg' + ); } diff --git a/ui/scss/sims/warlock/index.scss b/ui/scss/sims/warlock/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/warlock/index.scss +++ b/ui/scss/sims/warlock/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim"; diff --git a/ui/scss/sims/warrior/_sim.scss b/ui/scss/sims/warrior/_sim.scss index fcfff86859..081d616cc6 100644 --- a/ui/scss/sims/warrior/_sim.scss +++ b/ui/scss/sims/warrior/_sim.scss @@ -1,10 +1,8 @@ -$theme: 'warrior'; - // Set color variables which control the site theme. .warrior-sim-ui { - --theme-color-background: #1e0f0c; - --theme-color-background-raw: 29, 21, 16; - --theme-background-image: url('/wotlk/assets/img/warrior_background.jpg'); - --theme-background-opacity: 0.95; - --main-text-color: White; + @include theme-color( + $warrior, + .95, + '/wotlk/assets/img/warrior_background.jpg' + ); } diff --git a/ui/scss/sims/warrior/index.scss b/ui/scss/sims/warrior/index.scss index 39a87856c6..5532e835dc 100644 --- a/ui/scss/sims/warrior/index.scss +++ b/ui/scss/sims/warrior/index.scss @@ -1,2 +1,2 @@ -@import "./sim"; @import "../../core/individual_sim_ui/index"; +@import "./sim";