diff --git a/sim/rogue/mutilate.go b/sim/rogue/mutilate.go index d062cd79d0..c0090771ee 100644 --- a/sim/rogue/mutilate.go +++ b/sim/rogue/mutilate.go @@ -57,7 +57,7 @@ func (rogue *Rogue) registerMutilateSpell() { if !rogue.Talents.Mutilate { return } - + rogue.MutilateMH = rogue.newMutilateHitSpell(true) rogue.MutilateOH = rogue.newMutilateHitSpell(false) diff --git a/sim/rogue/talents.go b/sim/rogue/talents.go index 072d2d4d94..10be48934b 100644 --- a/sim/rogue/talents.go +++ b/sim/rogue/talents.go @@ -145,7 +145,7 @@ func (rogue *Rogue) registerHungerForBlood() { rogue.HungerForBlood = rogue.RegisterSpell(core.SpellConfig{ ActionID: actionID, - Flags: core.SpellFlagAPL, + Flags: core.SpellFlagAPL, EnergyCost: core.EnergyCostOptions{ Cost: 15, @@ -489,7 +489,7 @@ func (rogue *Rogue) registerBladeFlurryCD() { cooldownDur := time.Minute * 2 rogue.BladeFlurry = rogue.RegisterSpell(core.SpellConfig{ ActionID: BladeFlurryActionID, - Flags: core.SpellFlagAPL, + Flags: core.SpellFlagAPL, EnergyCost: core.EnergyCostOptions{ Cost: core.TernaryFloat64(rogue.HasMajorGlyph(proto.RogueMajorGlyph_GlyphOfBladeFlurry), 0, 25), diff --git a/ui/core/components/gear_picker.ts b/ui/core/components/gear_picker.ts index b531e61e20..3788c2224e 100644 --- a/ui/core/components/gear_picker.ts +++ b/ui/core/components/gear_picker.ts @@ -41,8 +41,14 @@ import { UIItem as Item, } from '../proto/ui.js'; import { IndividualSimUI } from '../individual_sim_ui.js'; +import { Tooltip } from 'bootstrap'; -declare var tippy: any; +const EP_TOOLTIP = ` + EP (Equivalence Points) is way of comparing items by multiplying the raw stats of an item with your current stat weights. + More EP does not necessarily mean more DPS, as EP doesn't take into account stat caps and non-linear stat calculations. +` + +const HEROIC_LABEL = `[H]` export class GearPicker extends Component { // ItemSlot is used as the index @@ -132,11 +138,9 @@ export class ItemRenderer extends Component { update(newItem: EquippedItem) { this.nameElem.textContent = newItem.item.name; if (newItem.item.heroic) { - var heroic_span = document.createElement('span'); - heroic_span.style.color = "green"; - heroic_span.style.marginLeft = "3px"; - heroic_span.innerText = "[H]"; - this.nameElem.appendChild(heroic_span); + this.nameElem.insertAdjacentHTML('beforeend', HEROIC_LABEL); + } else { + this.nameElem.querySelector('.heroic-label')?.remove(); } setItemQualityCssClass(this.nameElem, newItem.item.quality); @@ -857,9 +861,20 @@ export class ItemList { -
- Item - EP(+/-) +
+ +
@@ -868,8 +883,9 @@ export class ItemList { const tabContent = tabContentFragment.children[0] as HTMLElement; parent.appendChild(tabContent); - // const helpIcon = tabContent.getElementsByClassName("ep-help").item(0); - // tippy(helpIcon, { 'content': 'These values are computed using stat weights which can be edited using the "Stat Weights" button.' }); + const epExplanationElem = tabContent.querySelector('#ep-explanation') as HTMLElement; + new Tooltip(epExplanationElem); + const show1hWeaponsSelector = makeShow1hWeaponsSelector(tabContent.getElementsByClassName('selector-modal-show-1h-weapons')[0] as HTMLElement, player.sim); const show2hWeaponsSelector = makeShow2hWeaponsSelector(tabContent.getElementsByClassName('selector-modal-show-2h-weapons')[0] as HTMLElement, player.sim); if (!(label == 'Items' && (slot == ItemSlot.ItemSlotMainHand || (slot == ItemSlot.ItemSlotOffHand && player.getClass() == Class.ClassWarrior)))) { @@ -904,34 +920,40 @@ export class ItemList { listItemElem.classList.add('selector-modal-list-item'); listItemElem.dataset.idx = String(itemIdx); listItemElem.innerHTML = ` - -
+
+ - -
-
-
-
- -
-
- ${itemEP < 9.95 ? itemEP.toFixed(1) : Math.round(itemEP)} -
-
- -
- + + +
+
+
+
+ +
+
+ ${itemEP < 9.95 ? itemEP.toFixed(1) : Math.round(itemEP)} +
+
+ +
`; if (slot == ItemSlot.ItemSlotTrinket1 || slot == ItemSlot.ItemSlotTrinket2) { - const epElem = listItemElem.getElementsByClassName('selector-modal-list-item-ep')[0] as HTMLElement; + const epElem = listItemElem.querySelector('.selector-modal-list-item-ep') as HTMLElement; epElem.style.display = 'none'; } - const anchorElem = listItemElem.children[0] as HTMLAnchorElement; - const iconElem = listItemElem.getElementsByClassName('selector-modal-list-item-icon')[0] as HTMLImageElement; - const nameElem = listItemElem.getElementsByClassName('selector-modal-list-item-name')[0] as HTMLAnchorElement; - const favoriteElem = listItemElem.getElementsByClassName('selector-modal-list-item-favorite')[0] as HTMLElement; + const anchorElem = listItemElem.querySelector('.selector-modal-list-item-link') as HTMLAnchorElement; + const iconElem = listItemElem.querySelector('.selector-modal-list-item-icon') as HTMLImageElement; + const nameElem = listItemElem.querySelector('.selector-modal-list-item-name') as HTMLAnchorElement; + const favoriteElem = listItemElem.querySelector('.selector-modal-list-item-favorite') as HTMLElement; anchorElem.addEventListener('click', (event: Event) => { event.preventDefault(); @@ -953,7 +975,7 @@ export class ItemList { sourceElem.remove(); } - tippy(favoriteElem, { 'content': 'Add to Favorites' }); + new Tooltip(favoriteElem); const setFavorite = (isFavorite: boolean) => { const filters = player.sim.getFilters(); if (label == 'Items') { @@ -1191,19 +1213,19 @@ export class ItemList { }); this.listElem.replaceChildren(...validItemElems); + this.hideOrShowEPValues() } public hideOrShowEPValues() { + const labels = document.getElementsByClassName("ep-delta-label") const epItems = document.getElementsByClassName("selector-modal-list-item-ep") - const display = this.player.sim.getShowEPValues() ? "block" : "none" + const display = this.player.sim.getShowEPValues() ? "" : "none" for (let i = 0; i < epItems.length; i++) { const epItem = epItems.item(i) as HTMLElement; epItem.style.display = display } - const labels = document.getElementsByClassName("ep-delta-label") - for (let i = 0; i < labels.length; i++) { const label = labels.item(i) as HTMLElement; label.style.display = display @@ -1219,8 +1241,8 @@ export class ItemList { if (source.source.oneofKind == 'crafted') { const src = source.source.crafted; container.innerHTML = ` - ${professionNames[src.profession]} - `; + ${professionNames[src.profession]} + `; } else if (source.source.oneofKind == 'drop') { const src = source.source.drop; const zone = sim.db.getZone(src.zoneId); @@ -1230,37 +1252,37 @@ export class ItemList { } let innerHTML = ` - ${zone.name} (${difficultyNames[src.difficulty]}) - `; + ${zone.name} (${difficultyNames[src.difficulty]}) + `; const category = src.category ? ` - ${src.category}` : ''; if (npc) { innerHTML += ` -
- ${npc.name + category} - `; +
+ ${npc.name + category} + `; } else if (src.otherName) { innerHTML += ` -
- ${src.otherName + category} + `; } else if (category) { innerHTML += ` -
- ${category} + `; } container.innerHTML = innerHTML; } else if (source.source.oneofKind == 'quest') { const src = source.source.quest; container.innerHTML = ` - ${src.name} - `; + ${src.name} + `; } else if (source.source.oneofKind == 'soldBy') { const src = source.source.soldBy; container.innerHTML = ` - ${src.npcName} - `; + ${src.npcName} + `; } } } \ No newline at end of file diff --git a/ui/scss/core/components/_gear_picker.scss b/ui/scss/core/components/_gear_picker.scss index cfec5e4c5f..11eba86645 100644 --- a/ui/scss/core/components/_gear_picker.scss +++ b/ui/scss/core/components/_gear_picker.scss @@ -197,7 +197,19 @@ margin-left: auto; } +.selector-modal-list-labels { + margin-bottom: map-get($spacers, 2); + font-size: 1.125rem; + + .ep-delta-label { + display: flex; + align-items: center; + float: right; + } +} + .selector-modal-list { + width: 100%; max-height: 70vh; overflow-y: scroll; overflow-x: hidden; @@ -205,13 +217,16 @@ } .selector-modal-list-label-cell { - width: 100%; + flex: 1; display: flex; align-items: center; } // TODO: Move all of these to a shared file, as they're used in other places too .selector-modal-list-item { + padding: .5rem; + display: flex; + align-items: center; background-color: #111218; &:nth-child(2n) { @@ -232,12 +247,6 @@ } } - .selector-modal-list-item-link { - padding: .5rem; - display: flex; - align-items: center; - } - .selector-modal-list-item-icon { @include wowhead-background-icon; width: 3rem; @@ -247,7 +256,7 @@ .selector-modal-list-item-name { font-size: 1.125rem; - margin-left: 1rem; + margin-left: map-get($spacers, 3); letter-spacing: normal; font-weight: normal; cursor: pointer; @@ -255,14 +264,12 @@ } .selector-modal-list-item-source-container { - margin-left: 1rem; - width: 300px; - font-size: 11px; + margin-left: map-get($spacers, 3); + width: 12rem; } .selector-modal-list-item-favorite { - margin-left: 1rem; - font-size: 22px; + margin-left: map-get($spacers, 3); color: yellow; } @@ -274,18 +281,22 @@ .selector-modal-list-item-ep { display: flex; - font-size: 16px; + font-size: 1rem; font-weight: 800; } .selector-modal-list-item-ep > span { - display: inline-block; - margin: 5px; + min-width: 3rem; + display: inline-block; color: white; - min-width: 50px; text-align: right; } +.heroic-label { + margin-left: map-get($spacers, 1); + color: $item-quality-uncommon; +} + @include media-breakpoint-down(lg) { .item-picker-icon { width: 3rem; diff --git a/ui/scss/shared/_global_old.scss b/ui/scss/shared/_global_old.scss index 24b3ebedd4..622b25a88c 100644 --- a/ui/scss/shared/_global_old.scss +++ b/ui/scss/shared/_global_old.scss @@ -132,14 +132,14 @@ $sim-transitions: .2s ease-in; } .positive { - color: lawngreen !important; + color: $success !important; } .negative { color: red !important; } .safe { - color: lawngreen; + color: $success; } .warning { color: yellow;