feature: show buff tab for muta creatures

apps/web/app/pages/tools/game-modes/game-mode-detail.component.html

@@ -282,6 +282,8 @@ <h2 class="mb-0 font-bold font-caslon tracking-wider uppercase text-nw-descripti
       *ngFor="let item of creaturesBosses$ | async; trackBy: trackByIndex"
       [vital]="item"
       [level]="creatureLevel$ | async"
+      [mutaElement]="mutaElementId$ | async"
+      [mutaDifficulty]="difficultyLevel"
       [enableSections]="true"
     ></nwb-vital-detail>
   </div>
@@ -293,6 +295,8 @@ <h2 class="mb-0 font-bold font-caslon tracking-wider uppercase text-nw-descripti
       *ngFor="let item of creaturesNamed$ | async; trackBy: trackByIndex"
       [vital]="item"
       [level]="creatureLevel$ | async"
+      [mutaElement]="mutaElementId$ | async"
+      [mutaDifficulty]="difficultyLevel"
       [enableSections]="true"
     ></nwb-vital-detail>
   </div>
@@ -303,6 +307,9 @@ <h2 class="mb-0 font-bold font-caslon tracking-wider uppercase text-nw-descripti
     <nwb-vital-detail
       *ngFor="let item of creatures$ | async; trackBy: trackByIndex"
       [vital]="item"
+      [level]="creatureLevel$ | async"
+      [mutaElement]="mutaElementId$ | async"
+      [mutaDifficulty]="difficultyLevel"
       [enableSections]="true"
     ></nwb-vital-detail>
   </div>

apps/web/app/pages/tools/game-modes/game-mode-detail.component.ts

@@ -56,16 +56,16 @@ import { IconsModule } from '~/ui/icons'
 import { svgInfoCircle, svgSquareArrowUpRight } from '~/ui/icons/svg'
 import { LayoutModule } from '~/ui/layout'
 import { PaginationModule } from '~/ui/pagination'
+import { TooltipModule } from '~/ui/tooltip'
 import { HtmlHeadService, observeQueryParam, observeRouteParam, selectStream, shareReplayRefCount } from '~/utils'
 import { PlatformService } from '~/utils/services/platform.service'
 import { ItemDetailModule } from '~/widgets/data/item-detail'
 import { LootModule } from '~/widgets/loot'
 import { VitalsDetailModule } from '~/widgets/vitals-detail'
 import { GameModeDetailStore } from './game-mode-detail.store'
-import { MutaElementTileComponent } from './muta-element-tile.component'
 import { MutaCurseTileComponent } from './muta-curse-tile.component'
+import { MutaElementTileComponent } from './muta-element-tile.component'
 import { MutaPromotionTileComponent } from './muta-promotion-tile.component'
-import { TooltipModule } from '~/ui/tooltip'
 
 const DIFFICULTY_TIER_NAME = {
   1: 'Normal',
@@ -158,6 +158,7 @@ export class GameModeDetailComponent implements OnInit {
   public creaturesNamed$ = this.store.creaturesNamed$
   public creatures$ = this.store.dingeonCommonCreatures$
   public creatureLevel$ = this.store.enemyLevelOverride$
+  public mutaElementId$ = this.store.mutaElement$.pipe(map((it) => it?.ElementalMutationId))
 
   public difficulties$ = this.store.difficulties$
   public difficulty$ = this.store.mutaDifficulty$

apps/web/app/pages/tools/game-modes/game-mode-detail.store.ts

@@ -77,7 +77,7 @@ export class GameModeDetailStore extends ComponentStore<GameModeDetailState> {
         return null
       }
       return values
-        .filter((it) => it.ElementalDifficultyTier === difficulty.DifficultyTier)
+        .filter((it) => it.ElementalDifficultyTier === difficulty?.DifficultyTier)
         .map((it) => {
           return {
             label: it.Name,
@@ -86,6 +86,9 @@ export class GameModeDetailStore extends ComponentStore<GameModeDetailState> {
             object: it,
           }
         })
+    },
+    {
+      debounce: true,
     }
   )
   public readonly mutaElement$ = this.select(
@@ -95,7 +98,7 @@ export class GameModeDetailStore extends ComponentStore<GameModeDetailState> {
       ref: this.mutaElementId$,
     }),
     ({ available, options, ref }) => {
-      if (!available) {
+      if (!available || !options?.length) {
         return null
       }
       return options.find((it) => it.value === ref)?.object || options[0].object

apps/web/app/widgets/vitals-detail/vital-damage-table.component.ts

@@ -1,6 +1,15 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core'
-import { Affixstats, Damagetable, Statuseffect, Vitals, Vitalsleveldata, Vitalsmodifierdata } from '@nw-data/generated'
+import { RouterModule } from '@angular/router'
+import {
+  Affixstats,
+  Damagetable,
+  Mutationdifficulty,
+  Statuseffect,
+  Vitals,
+  Vitalsleveldata,
+  Vitalsmodifierdata,
+} from '@nw-data/generated'
 import { combineLatest, map } from 'rxjs'
 import { NwDbService, NwModule } from '~/nw'
 import { damageTypeIcon } from '~/nw/weapon-types'
@@ -12,7 +21,6 @@ import { TooltipModule } from '~/ui/tooltip'
 import { humanize, selectStream, shareReplayRefCount } from '~/utils'
 import { ScreenshotModule } from '../screenshot'
 import { VitalDetailStore } from './vital-detail.store'
-import { RouterModule } from '@angular/router'
 
 @Component({
   standalone: true,
@@ -47,6 +55,16 @@ export class VitalDamageTableComponent {
     this.store.patchState({ level: level })
   }
 
+  @Input()
+  public set mutaElementId(value: string) {
+    //this.store.patchState({ level: level })
+  }
+
+  @Input()
+  public set mutaDifficulty(value: number) {
+    this.store.patchState({ mutaDifficulty: value })
+  }
+
   protected iconInfo = svgInfo
 
   protected tables$ = selectStream(
@@ -55,13 +73,14 @@ export class VitalDamageTableComponent {
       vitalLevel: this.store.vitalLevel$,
       vitalCategories: this.store.categories$,
       vitalMod: this.store.vitalModifier$,
+      difficulty: this.store.mutaDifficulty$,
       tables: this.store.damageTables$,
       affixMap: this.db.affixstatsMap,
       effectMap: this.db.statusEffectsMap,
     })
   )
     .pipe(
-      map(({ vital, vitalMod, vitalLevel, vitalCategories, tables, affixMap, effectMap }) => {
+      map(({ vital, vitalMod, vitalLevel, vitalCategories, difficulty, tables, affixMap, effectMap }) => {
         return tables.map((table) => {
           return {
             name: table.file.replace(/\.xml$/, '').replace(/^.*javelindata_damagetable/, ''),
@@ -74,6 +93,7 @@ export class VitalDamageTableComponent {
                   damageTable: row,
                   affixMap,
                   effectMap,
+                  difficulty,
                 })
               })
               .filter((it) => !!it.Damage)
@@ -94,13 +114,15 @@ function selectDamageInfo({
   vitalLevel,
   vitalMod,
   damageTable,
+  difficulty,
   affixMap,
   effectMap,
 }: {
   vital: Vitals
   vitalLevel: Vitalsleveldata
   vitalMod: Vitalsmodifierdata
   damageTable: Damagetable
+  difficulty: Mutationdifficulty
   affixMap: Map<string, Affixstats>
   effectMap: Map<string, Statuseffect>
 }) {
@@ -111,9 +133,12 @@ function selectDamageInfo({
   const categoryDamageMod = vitalMod?.CategoryDamageMod || 1
   const addDmg = damageTable.AddDmg || 0
 
+  //const dmgIncMod = effectMap.get(difficulty?.DamageIncreaseMod)?.['DMG' + damageTable.DamageType] || 0
+  //const dmgPotency = 1 + (difficulty?.[`DamagePotency_${vital.CreatureType}`] || 0) / 100
+
+  const totalDamage = baseDamage * dmgCoef * dmgMod * categoryDamageMod + addDmg
+
   // VitalsLevel.BaseDamage * (1 + AIAbilityTable.BaseDamage - AbilityTable.BaseDamageReduction + (Empower)) * DamageTable.DmgCoef * Vitals.DamageMod * VitalsLevel.CategoryDamageMod + DamageTable.AddDmg
-  // TODO: add ability multiplier
-  const totalDamage = baseDamage * (1 + 0 - 0 + 0) * dmgCoef * dmgMod * categoryDamageMod + addDmg
   const affix = affixMap.get(damageTable.Affixes)
 
   return {

apps/web/app/widgets/vitals-detail/vital-detail-buffs.component.ts

@@ -0,0 +1,86 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NW_FALLBACK_ICON } from '@nw-data/common'
+import { map } from 'rxjs'
+import { NwModule } from '~/nw'
+import { VitalDetailStore } from './vital-detail.store'
+import { TooltipModule } from '~/ui/tooltip'
+import { StatusEffectDetailModule } from '../data/status-effect-detail'
+import { AbilityDetailModule } from '../data/ability-detail'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-vital-detail-buffs',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule, RouterModule, TooltipModule, StatusEffectDetailModule, AbilityDetailModule],
+  styles: [],
+  host: {
+    class: 'flex flex-col gap-2 p-3',
+  },
+  template: `
+    <a
+      *ngFor="let item of effects$ | async"
+      class="flex flex-row gap-2 link-hover text-sky-600"
+      [routerLink]="['/status-effects/table', item.id]"
+      [tooltip]="tplEffectTip"
+      [tooltipClass]="'p-0 w-full max-w-sm'"
+    >
+      <picture class="flex-none">
+        <img [nwImage]="item.icon" class="w-6 h-6" />
+      </picture>
+      <div>
+        <b>{{ item.label | nwText }}: </b>
+        {{ item.text | nwText }}
+      </div>
+      <ng-template #tplEffectTip>
+        <nwb-status-effect-detail [effectId]="item.id"></nwb-status-effect-detail>
+      </ng-template>
+    </a>
+
+    <a
+      *ngFor="let item of abilities$ | async"
+      class="flex flex-row gap-2 link-hover text-sky-600"
+      [routerLink]="['/abilities/table', item.id]"
+      [tooltip]="tplAbilityTip"
+      [tooltipClass]="'p-0 w-full max-w-sm'"
+    >
+      <picture class="flex-none">
+        <img [nwImage]="item.icon" class="w-6 h-6" />
+      </picture>
+      <div>
+        <code>{{ item.label | nwText }} </code>
+      </div>
+      <ng-template #tplAbilityTip>
+        <nwb-ability-detail [abilityId]="item.id"></nwb-ability-detail>
+      </ng-template>
+    </a>
+  `,
+})
+export class VitalDetailBuffsComponent {
+  private store = inject(VitalDetailStore)
+  protected effects$ = this.store.mutaBuffs$.pipe(
+    map((list) => {
+      return list?.effects?.map((it) => {
+        return {
+          id: it.StatusID,
+          icon: it.PlaceholderIcon || NW_FALLBACK_ICON,
+          label: it.DisplayName || it.StatusID,
+          text: it.Description || (it.DisplayName ? `${it.StatusID}_Tooltip` : ''),
+        }
+      })
+    })
+  )
+
+  protected abilities$ = this.store.mutaBuffs$.pipe(
+    map((list) => {
+      return list?.abilities?.map((it) => {
+        return {
+          id: it.AbilityID,
+          icon: it.Icon || NW_FALLBACK_ICON,
+          label: it.DisplayName || it.AbilityID,
+        }
+      })
+    })
+  )
+}

apps/web/app/widgets/vitals-detail/vital-detail.component.ts

@@ -12,8 +12,9 @@ import { VitalDetailHeaderComponent } from './vital-detail-header.component'
 import { VitalDetailInfosComponent } from './vital-detail-infos.component'
 import { VitalDetailWeaknessComponent } from './vital-detail-weakness.component'
 import { VitalDetailStore } from './vital-detail.store'
+import { VitalDetailBuffsComponent } from './vital-detail-buffs.component'
 
-export type VitalSection = 'weakness' | 'damage' | 'model'
+export type VitalSection = 'weakness' | 'damage' | 'buffs' | 'model'
 export interface VitalTab {
   id: VitalSection
   label: string
@@ -29,6 +30,7 @@ export interface VitalTab {
     VitalDetailHeaderComponent,
     VitalDetailInfosComponent,
     VitalDamageTableComponent,
+    VitalDetailBuffsComponent,
     ModelViewerModule,
   ],
   providers: [VitalDetailStore],
@@ -59,7 +61,15 @@ export interface VitalTab {
         class="w-full bg-transparent"
       ></nwb-vital-detail-weakness>
 
-      <nwb-vital-damage-table [vitalId]="vm.id" [level]="store.level$ | async" *ngIf="vm.isSectionDamage"></nwb-vital-damage-table>
+      <nwb-vital-damage-table
+        [vitalId]="vm.id"
+        [level]="store.level$ | async"
+        [mutaDifficulty]="store.mutaDifficultyId$ | async"
+        [mutaElementId]="store.mutaElementId$ | async"
+        *ngIf="vm.isSectionDamage"
+      ></nwb-vital-damage-table>
+
+      <nwb-vital-detail-buffs *ngIf="vm.isSectionBuffs"></nwb-vital-detail-buffs>
 
       <nwb-model-viewer [models]="vm.models" *ngIf="vm.isSectionModel" class="aspect-square"></nwb-model-viewer>
     </ng-container>
@@ -85,6 +95,16 @@ export class VitalDetailComponent extends ComponentStore<{
     this.store.patchState({ level: value })
   }
 
+  @Input()
+  public set mutaElement(value: string) {
+    this.store.patchState({ mutaElementId: value })
+  }
+
+  @Input()
+  public set mutaDifficulty(value: number) {
+    this.store.patchState({ mutaDifficulty: value })
+  }
+
   @Input()
   public set enableSections(value: boolean) {
     this.patchState({ enableSections: value })
@@ -97,7 +117,13 @@ export class VitalDetailComponent extends ComponentStore<{
   public dungeons: Gamemodes[]
 
   protected sectionsEnabled$ = this.select(({ enableSections }) => enableSections)
-  protected tabs$ = this.select(this.sectionsEnabled$, this.store.hasDamageTable$, this.store.modelFiles$, selectTabs)
+  protected tabs$ = this.select(
+    this.sectionsEnabled$,
+    this.store.hasDamageTable$,
+    this.store.modelFiles$,
+    this.store.mutaBuffs$.pipe(map((it) => !!it)),
+    selectTabs
+  )
 
   protected vm$ = selectStream(
     {
@@ -118,6 +144,7 @@ export class VitalDetailComponent extends ComponentStore<{
         isSectionWeakness: data.selectedTab === 'weakness',
         isSectionDamage: data.selectedTab === 'damage',
         isSectionModel: data.selectedTab === 'model',
+        isSectionBuffs: data.selectedTab === 'buffs',
       }
     }
   )
@@ -139,7 +166,7 @@ export class VitalDetailComponent extends ComponentStore<{
   }
 }
 
-function selectTabs(sectionsEnabled: boolean, hasDamageTable: boolean, modelFiles: ItemModelInfo[]) {
+function selectTabs(sectionsEnabled: boolean, hasDamageTable: boolean, modelFiles: ItemModelInfo[], hasBuffs: boolean) {
   const tabs: VitalTab[] = []
   if (!sectionsEnabled) {
     return tabs
@@ -154,6 +181,12 @@ function selectTabs(sectionsEnabled: boolean, hasDamageTable: boolean, modelFile
       label: 'Damage',
     })
   }
+  if (hasBuffs) {
+    tabs.push({
+      id: 'buffs',
+      label: 'Buffs',
+    })
+  }
   if (modelFiles?.length > 0) {
     tabs.push({
       id: 'model',