From 2876b917805c1eaa08d3e3684be24ef157a972e9 Mon Sep 17 00:00:00 2001 From: Kayla Glick <12898988+kayla-glick@users.noreply.github.com> Date: Sun, 14 Apr 2024 14:23:23 -0400 Subject: [PATCH] Update gear picker styles + fix APL tooltips (#4244) * port two SoD updates * fix icon enum tooltips * gear picker style tweaks from sod * fix gem summary tooltips * fix apl tooltips --- ui/core/components/gear_picker.tsx | 396 ++++++------------ .../individual_sim_ui/apl_helpers.ts | 2 + .../individual_sim_ui/gem_summary.ts | 38 +- ui/scss/core/components/_gear_picker.scss | 221 +++++----- 4 files changed, 247 insertions(+), 410 deletions(-) diff --git a/ui/core/components/gear_picker.tsx b/ui/core/components/gear_picker.tsx index f4c10925c6..7674bae0f4 100644 --- a/ui/core/components/gear_picker.tsx +++ b/ui/core/components/gear_picker.tsx @@ -6,12 +6,7 @@ import { setItemQualityCssClass } from '../css_utils'; import { IndividualSimUI } from '../individual_sim_ui.js'; import { Player } from '../player'; import { Class, GemColor, ItemQuality, ItemSlot, ItemSpec, ItemType } from '../proto/common'; -import { - DatabaseFilters, - UIEnchant as Enchant, - UIGem as Gem, - UIItem as Item, -} from '../proto/ui.js'; +import { DatabaseFilters, UIEnchant as Enchant, UIGem as Gem, UIItem as Item } from '../proto/ui.js'; import { ActionId } from '../proto_utils/action_id'; import { getEnchantDescription, getUniqueEnchantString } from '../proto_utils/enchants'; import { EquippedItem } from '../proto_utils/equipped_item'; @@ -123,25 +118,12 @@ export class ItemRenderer extends Component { const sce = ref(); this.rootElem.appendChild( <> - +
- -
- + +
, ); @@ -205,10 +187,7 @@ export class ItemRenderer extends Component { newItem.allSocketColors().forEach((socketColor, gemIdx) => { const gemContainer = createGemContainer(socketColor, newItem.gems[gemIdx]); - if ( - gemIdx == newItem.numPossibleSockets - 1 && - [ItemType.ItemTypeWrist, ItemType.ItemTypeHands].includes(newItem.item.type) - ) { + if (gemIdx == newItem.numPossibleSockets - 1 && [ItemType.ItemTypeWrist, ItemType.ItemTypeHands].includes(newItem.item.type)) { const updateProfession = () => { if (this.player.isBlacksmithing()) { gemContainer.classList.remove('hide'); @@ -290,9 +269,7 @@ export class ItemPicker extends Component { if (newItem != null) { this.itemElem.update(newItem); } else { - this.itemElem.iconElem.style.backgroundImage = `url('${getEmptySlotIconUrl( - this.slot, - )}')`; + this.itemElem.iconElem.style.backgroundImage = `url('${getEmptySlotIconUrl(this.slot)}')`; } this._equippedItem = newItem; @@ -377,9 +354,7 @@ export class IconItemSwapPicker extends Component { this.player.setWowheadData(newItem, this.iconAnchor); newItem.allSocketColors().forEach((socketColor, gemIdx) => { - this.socketsContainerElem.appendChild( - createGemContainer(socketColor, newItem.gems[gemIdx]), - ); + this.socketsContainerElem.appendChild(createGemContainer(socketColor, newItem.gems[gemIdx])); }); } else { this.iconAnchor.classList.remove('active'); @@ -419,12 +394,7 @@ export class SelectorModal extends BaseModal { private readonly tabsElem: HTMLElement; private readonly contentElem: HTMLElement; - constructor( - parent: HTMLElement, - simUI: SimUI, - player: Player, - config: SelectorModalConfig, - ) { + constructor(parent: HTMLElement, simUI: SimUI, player: Player, config: SelectorModalConfig) { super(parent, 'selector-modal'); this.simUI = simUI; @@ -434,17 +404,12 @@ export class SelectorModal extends BaseModal { window.scrollTo({ top: 0 }); - this.header!.insertAdjacentElement( - 'afterbegin', -
    , - ); + this.header!.insertAdjacentElement('afterbegin',
      ); this.body.appendChild(
      ); this.tabsElem = this.rootElem.querySelector('.selector-modal-tabs') as HTMLElement; - this.contentElem = this.rootElem.querySelector( - '.selector-modal-tab-content', - ) as HTMLElement; + this.contentElem = this.rootElem.querySelector('.selector-modal-tab-content') as HTMLElement; this.setData(); @@ -464,13 +429,11 @@ export class SelectorModal extends BaseModal { // Could be 'Items' 'Enchants' or 'Gem1'-'Gem3' openTabName(name: string) { - Array.from(this.tabsElem.getElementsByClassName('selector-modal-item-tab')).forEach( - elem => { - if (elem.getAttribute('data-content-id') == name + '-tab') { - (elem as HTMLElement).click(); - } - }, - ); + Array.from(this.tabsElem.getElementsByClassName('selector-modal-item-tab')).forEach(elem => { + if (elem.getAttribute('data-content-id') == name + '-tab') { + (elem as HTMLElement).click(); + } + }); } openTab(idx: number) { @@ -522,9 +485,7 @@ export class SelectorModal extends BaseModal { return { item: enchant, id: enchant.effectId, - actionId: enchant.spellId - ? ActionId.fromSpellId(enchant.spellId) - : ActionId.fromItemId(enchant.itemId), + actionId: enchant.spellId ? ActionId.fromSpellId(enchant.spellId) : ActionId.fromItemId(enchant.itemId), name: enchant.name, quality: enchant.quality, phase: enchant.phase || 1, @@ -533,8 +494,7 @@ export class SelectorModal extends BaseModal { heroic: false, onEquip: (eventID, enchant: Enchant) => { const equippedItem = gearData.getEquippedItem(); - if (equippedItem) - gearData.equipItem(eventID, equippedItem.withEnchant(enchant)); + if (equippedItem) gearData.equipItem(eventID, equippedItem.withEnchant(enchant)); }, }; }), @@ -566,80 +526,71 @@ export class SelectorModal extends BaseModal { return; } - const socketBonusEP = - this.player.computeStatsEP(new Stats(equippedItem.item.socketBonus)) / - (equippedItem.item.gemSockets.length || 1); - equippedItem - .curSocketColors(this.player.isBlacksmithing()) - .forEach((socketColor, socketIdx) => { - this.addTab( - 'Gem ' + (socketIdx + 1), - this.player.getGems(socketColor).map((gem: Gem) => { - return { - item: gem, - id: gem.id, - actionId: ActionId.fromItemId(gem.id), - name: gem.name, - quality: gem.quality, - phase: gem.phase, - heroic: false, - baseEP: this.player.computeStatsEP(new Stats(gem.stats)), - ignoreEPFilter: true, - onEquip: (eventID, gem: Gem) => { - const equippedItem = gearData.getEquippedItem(); - if (equippedItem) - gearData.equipItem( - eventID, - equippedItem.withGem(gem, socketIdx), - ); - }, - }; - }), - gem => { - let gemEP = this.player.computeGemEP(gem); - if (gemMatchesSocket(gem, socketColor)) { - gemEP += socketBonusEP; - } - return gemEP; - }, - equippedItem => equippedItem?.gems[socketIdx], - socketColor, - eventID => { - const equippedItem = gearData.getEquippedItem(); - if (equippedItem) - gearData.equipItem(eventID, equippedItem.withGem(null, socketIdx)); - }, - tabAnchor => { - const gemContainer = createGemContainer(socketColor, null); - tabAnchor.appendChild(gemContainer); - tabAnchor.classList.add('selector-modal-tab-gem'); + const socketBonusEP = this.player.computeStatsEP(new Stats(equippedItem.item.socketBonus)) / (equippedItem.item.gemSockets.length || 1); + equippedItem.curSocketColors(this.player.isBlacksmithing()).forEach((socketColor, socketIdx) => { + this.addTab( + 'Gem ' + (socketIdx + 1), + this.player.getGems(socketColor).map((gem: Gem) => { + return { + item: gem, + id: gem.id, + actionId: ActionId.fromItemId(gem.id), + name: gem.name, + quality: gem.quality, + phase: gem.phase, + heroic: false, + baseEP: this.player.computeStatsEP(new Stats(gem.stats)), + ignoreEPFilter: true, + onEquip: (eventID, gem: Gem) => { + const equippedItem = gearData.getEquippedItem(); + if (equippedItem) gearData.equipItem(eventID, equippedItem.withGem(gem, socketIdx)); + }, + }; + }), + gem => { + let gemEP = this.player.computeGemEP(gem); + if (gemMatchesSocket(gem, socketColor)) { + gemEP += socketBonusEP; + } + return gemEP; + }, + equippedItem => equippedItem?.gems[socketIdx], + socketColor, + eventID => { + const equippedItem = gearData.getEquippedItem(); + if (equippedItem) gearData.equipItem(eventID, equippedItem.withGem(null, socketIdx)); + }, + tabAnchor => { + const gemContainer = createGemContainer(socketColor, null); + tabAnchor.appendChild(gemContainer); + tabAnchor.classList.add('selector-modal-tab-gem'); - const gemElem = tabAnchor.querySelector('.gem-icon') as HTMLElement; - const emptySocketUrl = getEmptyGemSocketIconUrl(socketColor); + const gemElem = tabAnchor.querySelector('.gem-icon') as HTMLElement; + const emptySocketUrl = getEmptyGemSocketIconUrl(socketColor); - const updateGemIcon = () => { - const equippedItem = gearData.getEquippedItem(); - const gem = equippedItem?.gems[socketIdx]; - - if (gem) { - gemElem.classList.remove('hide'); - ActionId.fromItemId(gem.id) - .fill() - .then(filledId => { - gemElem.setAttribute('src', filledId.iconUrl); - }); - } else { - gemElem.classList.add('hide'); - gemElem.setAttribute('src', emptySocketUrl); - } - }; - - gearData.changeEvent.on(updateGemIcon); - this.addOnDisposeCallback(() => gearData.changeEvent.off(updateGemIcon)); - updateGemIcon(); - }, - ); - }); + const updateGemIcon = () => { + const equippedItem = gearData.getEquippedItem(); + const gem = equippedItem?.gems[socketIdx]; + + if (gem) { + gemElem.classList.remove('hide'); + ActionId.fromItemId(gem.id) + .fill() + .then(filledId => { + gemElem.setAttribute('src', filledId.iconUrl); + }); + } else { + gemElem.classList.add('hide'); + gemElem.setAttribute('src', emptySocketUrl); + } + }; + + gearData.changeEvent.on(updateGemIcon); + this.addOnDisposeCallback(() => gearData.changeEvent.off(updateGemIcon)); + updateGemIcon(); + }, + ); + }); } /** @@ -755,9 +706,7 @@ export class SelectorModal extends BaseModal { .call(this.tabsElem.getElementsByClassName('selector-modal-item-tab')) .filter(tab => tab.dataset.label.includes(labelSubstring)); - const contentElems = tabElems - .map(tabElem => document.getElementById(tabElem.dataset.contentId!)) - .filter(tabElem => Boolean(tabElem)); + const contentElems = tabElems.map(tabElem => document.getElementById(tabElem.dataset.contentId!)).filter(tabElem => Boolean(tabElem)); tabElems.forEach(elem => elem.parentElement.remove()); contentElems.forEach(elem => elem!.remove()); @@ -853,33 +802,17 @@ export class ItemList { const epButton = ref(); this.tabContent = ( -
      +
      - - {label == 'Items' && ( - - )} + + {label == 'Items' && }
      - - + +