improved gearset perks warnings

apps/web/app/widgets/data/item-detail/item-detail-perks.component.html

@@ -30,12 +30,31 @@
  <span *ngIf="isSlotEditable(item)" class="absolute top-1 -left-3 opacity-50 screenshot-hidden">
  <nwb-icon [icon]="iconEdit" class="w-3 h-3" />
  </span>
- <span
- *ngIf="item.isInvalid"
- class="absolute top-1 -right-3 opacity-50 screenshot-hidden text-error cursor-help"
- [tooltip]="'Invalid perk combination'"
- [tooltipClass]="'bg-error-content text-error'"
- >
- <nwb-icon [icon]="iconWarn" class="w-3 h-3" />
- </span>
+ @if (editable$() && (item.violatesExclusivity || item.violatesItemClass || item.activationCooldown)) {
+ <span class="absolute top-0 -right-3 screenshot-hidden flex flex-col gap-1 leading-none">
+ @if(item.violatesExclusivity || item.violatesItemClass) {
+ <span class="text-error cursor-help opacity-50" [tooltip]="tip" [tooltipClass]="'bg-error-content text-error'">
+ <nwb-icon [icon]="iconWarn" class="w-3 h-3" />
+ <ng-template #tip>
+ <ul class="px-2 py-1">
+ @if (item.violatesExclusivity) {
+ <li>Exclusive Label Violation</li>
+ }
+ @if (item.violatesItemClass) {
+ <li>Item Class Violation</li>
+ }
+ </ul>
+ </ng-template>
+ </span>
+ }
+ @if(item.activationCooldown) {
+ <span class="text-warning cursor-help opacity-50" [tooltip]="tip" [tooltipClass]="'bg-warning-content text-warning'">
+ <nwb-icon [icon]="iconWarn" class="w-3 h-3" />
+ <ng-template #tip>
+ <div class="px-2 py-1">Activation cooldown: {{item.activationCooldown | number}}s</div>
+ </ng-template>
+ </span>
+ }
+ </span>
+ }
 </div>

apps/web/app/widgets/data/item-detail/selectors.ts

@@ -12,6 +12,7 @@ import {
  getPerkBucketPerks,
  getPerkTypeWeight,
  hasItemGearScore,
+ isPerkApplicableToItem,
  isPerkGem,
  isPerkInherent,
  isPerkItemIngredient,
@@ -35,7 +36,9 @@ export interface PerkSlot {
  bucket?: PerkBucket
  editable?: boolean
  explain: PerkExplanation[]
- isInvalid: boolean
+ activationCooldown: number
+ violatesItemClass: boolean
+ violatesExclusivity: boolean
 }
 
 export function selectItemGearscore(item: ItemDefinitionMaster, gsOverride?: number) {
@@ -109,7 +112,9 @@ export function selectPerkSlots({
  editable: false,
  perkId: perk?.PerkID,
  perk: perk,
- isInvalid: false,
+ activationCooldown: null,
+ violatesExclusivity: false,
+ violatesItemClass: false,
  explain: explainPerk({
  perk: perk,
  affix: affixes.get(perk?.Affix),
@@ -128,18 +133,22 @@ export function selectPerkSlots({
  const perkIdOverride = perkOverride?.[key]
  const perk = perks.get(perkIdOverride || perkId)
  const bucket = buckets.get(slot.bucketId)
+ const equippedAbilities = perk?.EquipAbility?.map((it) => abilities.get(it))
+ const activationCooldown = equippedAbilities?.find((it) => it?.ActivationCooldown)?.ActivationCooldown
  result.push({
  key: key,
  perkId: perkIdOverride || perkId,
  perk: perk,
  bucketId: slot.bucketId,
  bucket: bucket,
  editable: !!bucket || (item.CanReplaceGem && isPerkGem(perk)),
- isInvalid: false,
+ violatesExclusivity: false,
+ violatesItemClass: !!perk && !isPerkApplicableToItem(perk, item),
+ activationCooldown: activationCooldown,
  explain: explainPerk({
  perk: perk,
  affix: affixes.get(perk?.Affix),
- abilities: perk?.EquipAbility?.map((it) => abilities.get(it)),
+ abilities: equippedAbilities,
  gearScore: itemGS + (getItemGsBonus(perk, item) || 0),
  }),
  })
@@ -161,7 +170,7 @@ export function selectPerkSlots({
  continue
  }
  if (labels.some((it) => otherLabels.includes(it))) {
- slot.isInvalid = true
+ slot.violatesExclusivity = true
  break
  }
  }

apps/web/app/widgets/data/perk-table/perk-grid-cell.component.ts

@@ -38,7 +38,7 @@ import { PerkTableRecord } from './perk-table-cols'
  </nwb-item-header-content>
  </nwb-item-header>
  <ng-template #tplTip>
- <div class="flex flex-col gap-1">
+ <div class="flex flex-col gap-1 px-2 py-1">
  <ng-container *ngIf="store.mods$ | async; let parts">
  <div>
  <ng-container *ngFor="let part of parts; trackBy: trackByIndex">
@@ -140,6 +140,7 @@ export class PerkGridCellComponent implements VirtualGridCellComponent<PerkTable
 
  public ngOnInit() {
  this.tip.tooltip = this.tplTip
+ this.tip.tooltipDelay = 0
  }
 }
 

apps/web/app/widgets/data/status-effect-table/status-effect-cell.component.ts

@@ -26,7 +26,7 @@ import { TooltipDirective } from '~/ui/tooltip/tooltip.directive'
  ></nwb-item-header-content>
  </nwb-item-header>
  <ng-template #tplTip>
- <div [nwHtml]="description | nwText | nwTextBreak"></div>
+ <div [nwHtml]="description | nwText | nwTextBreak" class="px-2 py-1"></div>
  </ng-template>
  `,
  imports: [CommonModule, ItemFrameModule, NwModule, TooltipModule, ItemDetailModule],

package.json

@@ -97,6 +97,7 @@
  "@ngrx/component": "17.0.0",
  "@ngrx/component-store": "17.0.0",
  "@ngrx/effects": "17.0.0",
+ "@ngrx/signals": "17.0.1",
  "@ngrx/store": "17.0.0",
  "@ngrx/store-devtools": "17.0.0",
  "@ngx-translate/core": "15.0.0",