- {RaidSimResultsManager.makeToplineResultsContent(simResult)}
+ {RaidSimResultsManager.makeToplineResultsContent(simResult, undefined, { asList: true })}
Save as Reference
@@ -263,21 +267,28 @@ export class RaidSimResultsManager {
if (this.simUI.isIndividualSim()) {
this.formatToplineResult(`.${RaidSimResultsManager.resultMetricClasses['hps']} .results-reference-diff`, res => res.raidMetrics.hps, 2);
this.formatToplineResult(`.${RaidSimResultsManager.resultMetricClasses['dpasp']} .results-reference-diff`, res => res.getPlayers()[0]!.dpasp, 2);
- this.formatToplineResult(`.${RaidSimResultsManager.resultMetricClasses['tto']} .results-reference-diff`, res => res.getPlayers()[0]!.tto, 2);
- this.formatToplineResult(`.${RaidSimResultsManager.resultMetricClasses['tps']} .results-reference-diff`, res => res.getPlayers()[0]!.tps, 2);
+ this.formatToplineResult(`.${RaidSimResultsManager.resultMetricClasses['tto']} .results-reference-diff`, res => res.getFirstPlayer()!.tto, 2);
+ this.formatToplineResult(`.${RaidSimResultsManager.resultMetricClasses['tps']} .results-reference-diff`, res => res.getFirstPlayer()!.tps, 2);
this.formatToplineResult(
`.${RaidSimResultsManager.resultMetricClasses['dtps']} .results-reference-diff`,
- res => res.getPlayers()[0]!.dtps,
+ res => res.getFirstPlayer()!.dtps,
2,
true,
);
- this.formatToplineResult(`.${RaidSimResultsManager.resultMetricClasses['tmi']} .results-reference-diff`, res => res.getPlayers()[0]!.tmi, 2, true);
+ this.formatToplineResult(`.${RaidSimResultsManager.resultMetricClasses['tmi']} .results-reference-diff`, res => res.getFirstPlayer()!.tmi, 2, true);
this.formatToplineResult(
`.${RaidSimResultsManager.resultMetricClasses['cod']} .results-reference-diff`,
- res => res.getPlayers()[0]!.chanceOfDeath,
+ res => res.getFirstPlayer()!.chanceOfDeath,
1,
true,
);
+ } else {
+ this.formatToplineResult(
+ `.${RaidSimResultsManager.resultMetricClasses['dtps']} .results-reference-diff`,
+ res => sum(res.getPlayers()!.map(player => player.dtps.avg)) / res.getPlayers().length,
+ 2,
+ true,
+ );
}
}
@@ -369,82 +380,75 @@ export class RaidSimResultsManager {
};
}
- static makeToplineResultsContent(simResult: SimResult, filter?: SimResultFilter): HTMLElement {
+ static makeToplineResultsContent(simResult: SimResult, filter?: SimResultFilter, options: ToplineResultOptions = {}) {
+ const { showOutOfMana = false } = options;
+
const players = simResult.getRaidIndexedPlayers(filter);
- const content = (<>) as HTMLElement;
+
+ const resultColumns: ResultMetric[] = [];
if (players.length === 1) {
const playerMetrics = players[0];
if (playerMetrics.getTargetIndex(filter) === null) {
- const dpsMetrics = playerMetrics.dps;
- const dpaspMetrics = playerMetrics.dpasp;
- const tpsMetrics = playerMetrics.tps;
- const dtpsMetrics = playerMetrics.dtps;
- const tmiMetrics = playerMetrics.tmi;
- content.appendChild(
- this.buildResultsLine({
- average: dpsMetrics.avg,
- stdev: dpsMetrics.stdev,
- classes: this.getResultsLineClasses('dps'),
- }),
- );
-
- // Hide dpasp if it's zero.
- const dpaspContent = this.buildResultsLine({
- average: dpaspMetrics.avg,
- stdev: dpaspMetrics.stdev,
- classes: this.getResultsLineClasses('dpasp'),
+ const { chanceOfDeath, dps: dpsMetrics, dpasp: dpaspMetrics, tps: tpsMetrics, dtps: dtpsMetrics, tmi: tmiMetrics } = playerMetrics;
+
+ resultColumns.push({
+ name: 'DPS',
+ average: dpsMetrics.avg,
+ stdev: dpsMetrics.stdev,
+ classes: this.getResultsLineClasses('dps'),
});
- if (dpaspMetrics.avg === 0) {
- dpaspContent.classList.add('hide');
+
+ if (dpaspMetrics.avg) {
+ resultColumns.push({
+ name: 'DPASP',
+ average: dpaspMetrics.avg,
+ stdev: dpaspMetrics.stdev,
+ classes: this.getResultsLineClasses('dpasp'),
+ });
}
- content.appendChild(dpaspContent);
- content.appendChild(
- this.buildResultsLine({
- average: tpsMetrics.avg,
- stdev: tpsMetrics.stdev,
- classes: this.getResultsLineClasses('tps'),
- }),
- );
- content.appendChild(
- this.buildResultsLine({
- average: dtpsMetrics.avg,
- stdev: dtpsMetrics.stdev,
- classes: this.getResultsLineClasses('dtps'),
- }),
- );
-
- content.appendChild(
- this.buildResultsLine({
- average: tmiMetrics.avg,
- stdev: tmiMetrics.stdev,
- classes: this.getResultsLineClasses('tmi'),
- }),
- );
-
- content.appendChild(
- this.buildResultsLine({
- average: playerMetrics.chanceOfDeath,
- classes: this.getResultsLineClasses('cod'),
- }),
- );
+ resultColumns.push({
+ name: 'TPS',
+ average: tpsMetrics.avg,
+ stdev: tpsMetrics.stdev,
+ classes: this.getResultsLineClasses('tps'),
+ });
+ resultColumns.push({
+ name: 'DTPS',
+ average: dtpsMetrics.avg,
+ stdev: dtpsMetrics.stdev,
+ classes: this.getResultsLineClasses('dtps'),
+ });
+
+ resultColumns.push({
+ name: 'HPS',
+ average: tmiMetrics.avg,
+ stdev: tmiMetrics.stdev,
+ classes: this.getResultsLineClasses('tmi'),
+ });
+
+ resultColumns.push({
+ name: 'COD',
+ average: chanceOfDeath,
+ classes: this.getResultsLineClasses('cod'),
+ unit: 'percentage',
+ });
} else {
const actions = simResult.getRaidIndexedActionMetrics(filter);
if (!!actions.length) {
- const mergedActions = ActionMetrics.merge(actions);
- content.appendChild(
- this.buildResultsLine({
- average: mergedActions.dps,
- classes: this.getResultsLineClasses('dps'),
- }),
- );
- content.appendChild(
- this.buildResultsLine({
- average: mergedActions.tps,
- classes: this.getResultsLineClasses('tps'),
- }),
- );
+ const { dps, tps } = ActionMetrics.merge(actions);
+ resultColumns.push({
+ name: 'DPS',
+ average: dps,
+ classes: this.getResultsLineClasses('dps'),
+ });
+
+ resultColumns.push({
+ name: 'TPS',
+ average: tps,
+ classes: this.getResultsLineClasses('tps'),
+ });
}
const targetActions = simResult
@@ -453,24 +457,24 @@ export class RaidSimResultsManager {
.flat()
.map(action => action.forTarget({ player: playerMetrics.unitIndex }));
if (!!targetActions.length) {
- const mergedTargetActions = ActionMetrics.merge(targetActions);
- content.appendChild(
- this.buildResultsLine({
- average: mergedTargetActions.dps,
- classes: this.getResultsLineClasses('dtps'),
- }),
- );
+ const { dps: dtps } = ActionMetrics.merge(targetActions);
+
+ resultColumns.push({
+ name: 'DTPS',
+ average: dtps,
+ classes: this.getResultsLineClasses('dtps'),
+ });
}
}
} else {
const dpsMetrics = simResult.raidMetrics.dps;
- content.appendChild(
- this.buildResultsLine({
- average: dpsMetrics.avg,
- stdev: dpsMetrics.stdev,
- classes: this.getResultsLineClasses('dps'),
- }),
- );
+
+ resultColumns.push({
+ name: 'DPS',
+ average: dpsMetrics.avg,
+ stdev: dpsMetrics.stdev,
+ classes: this.getResultsLineClasses('dps'),
+ });
const targetActions = simResult
.getTargets(filter)
@@ -479,34 +483,47 @@ export class RaidSimResultsManager {
.map(action => action.forTarget(filter));
if (!!targetActions.length) {
const mergedTargetActions = ActionMetrics.merge(targetActions);
- content.appendChild(
- this.buildResultsLine({
- average: mergedTargetActions.dps,
- classes: this.getResultsLineClasses('dtps'),
- }),
- );
+ resultColumns.push({
+ name: 'DTPS',
+ average: mergedTargetActions.dps,
+ classes: this.getResultsLineClasses('dtps'),
+ });
}
const hpsMetrics = simResult.raidMetrics.hps;
- content.appendChild(
- this.buildResultsLine({
- average: hpsMetrics.avg,
- stdev: hpsMetrics.stdev,
- classes: this.getResultsLineClasses('hps'),
- }),
- );
+ resultColumns.push({
+ name: 'HPS',
+ average: hpsMetrics.avg,
+ stdev: hpsMetrics.stdev,
+ classes: this.getResultsLineClasses('hps'),
+ });
}
if (simResult.request.encounter?.useHealth) {
- content.appendChild(
- this.buildResultsLine({
- average: simResult.result.avgIterationDuration,
- classes: this.getResultsLineClasses('dur'),
- }),
- );
+ resultColumns.push({
+ name: 'DUR',
+ average: simResult.result.avgIterationDuration,
+ classes: this.getResultsLineClasses('dur'),
+ unit: 'seconds',
+ });
}
- return content;
+ if (showOutOfMana) {
+ const player = players[0];
+ const secondsOOM = player.secondsOomAvg;
+ const percentOOM = secondsOOM / simResult.encounterMetrics.durationSeconds;
+ const dangerLevel = percentOOM < 0.01 ? 'safe' : percentOOM < 0.05 ? 'warning' : 'danger';
+
+ resultColumns.push({
+ name: 'OOM',
+ average: secondsOOM,
+ classes: [this.getResultsLineClasses('oom'), dangerLevel].join(' '),
+ unit: 'seconds',
+ });
+ }
+
+ if (options.asList) return this.buildResultsList(resultColumns);
+ return this.buildResultsTable(resultColumns);
}
private static getResultsLineClasses(metric: keyof ResultMetrics): string {
@@ -516,20 +533,91 @@ export class RaidSimResultsManager {
return classes.join(' ');
}
- private static buildResultsLine(args: ResultsLineArgs): Element {
+ private static buildResultsTable(data: ResultMetric[]): Element {
return (
-
-
{args.average.toFixed(2)}
- {args.stdev && (
-
- (
- {args.stdev.toFixed()})
-
- )}
-
- vs reference
-
-
+
+
+ {data.map(({ name, classes }) => {
+ const cell = | {name} | ;
+
+ tippy(cell, {
+ content: TOOLTIP_METRIC_LABELS[name],
+ ignoreAttributes: true,
+ });
+
+ return cell;
+ })}
+
+
+
+
+ {data.map(({ average, stdev, classes, unit }) => {
+ let value = '';
+ switch (unit) {
+ case 'percentage':
+ value = formatToPercent(average);
+ break;
+ case 'seconds':
+ value = formatToNumber(average, { style: 'unit', unit: 'second', unitDisplay: 'narrow' });
+ break;
+ default:
+ value = formatToNumber(average);
+ break;
+ }
+ return (
+ |
+ {value}
+ {stdev ? (
+
+ {formatToNumber(stdev, { maximumFractionDigits: 0 })}
+
+ ) : undefined}
+
+ vs reference
+
+ |
+ );
+ })}
+
+
+
+
+ );
+ }
+
+ private static buildResultsList(data: ResultMetric[]): Element {
+ return (
+ <>
+ {data.map(column => (
+
+
{column.average.toFixed(2)}
+ {column.stdev && (
+
+ (
+ {column.stdev.toFixed()})
+
+ )}
+
+ vs reference
+
+
+ ))}
+
);
}
}
+
+type ToplineResultOptions = {
+ showOutOfMana?: boolean;
+ asList?: boolean;
+};
+
+type ResultMetric = {
+ name: keyof typeof TOOLTIP_METRIC_LABELS;
+ average: number;
+ stdev?: number;
+ classes?: string;
+ unit?: 'percentage' | 'number' | 'seconds' | undefined;
+};
diff --git a/ui/core/constants/tooltips.ts b/ui/core/constants/tooltips.ts
index 343caf99e9..66eb8ad671 100644
--- a/ui/core/constants/tooltips.ts
+++ b/ui/core/constants/tooltips.ts
@@ -22,3 +22,48 @@ export const TOO_MANY_TALENT_POINTS_WARNING = 'More talent points spent than cur
export const TITANS_GRIP_WARNING = "Dual wielding two-handed weapon(s) without Titan's Grip spec.";
export const GEAR_MIN_LEVEL_WARNING = (playerLevel: number) => `Wearing gear with a minumum level requirement above level ${playerLevel}.`;
+
+export const TOOLTIP_METRIC_LABELS = {
+ // Damage metrics
+ Damage: 'Total Damage done',
+ DPS: 'Damage / Encounter Duration',
+ DPASP: 'Dark Pact Average Spellpower',
+ TPS: 'Threat / Encounter Duration',
+ DPET: 'Damage / Avg Cast Time',
+ 'Damage Avg Cast': 'Damage / Casts and/or Damage / Ticks',
+ 'Avg Hit': 'Damage / (Hits + Crits + Glances + Blocks) and/or Damage / (Ticks + Critical Ticks)',
+ // Healing metrics
+ Healing: 'Total Healing done',
+ 'Healing Avg Cast': 'Healing / Casts',
+ 'Healing Avg Hit': 'Healing / Hits and/or Healing / (Ticks + Critical Ticks)',
+ 'Healing Hits': 'Healing / (Hits + Crits + Glances + Blocks) and/or Healing / Ticks + Critical Ticks',
+ HPM: 'Healing / Mana',
+ HPET: 'Healing / Avg Cast Time',
+ HPS: 'Healing / Encounter Duration',
+ // Damage taken metrics
+ 'Damage Taken': 'Total Damage taken',
+ DTPS: 'Damage Taken / Encounter Duration',
+ COD: 'Chance of Death',
+ // Cast metrics
+ Casts: 'Casts',
+ CPM: 'Casts / (Encounter Duration / 60 Seconds)',
+ 'Cast Time': 'Average cast time in seconds',
+ // Hit metrics
+ Hits: 'Hits + Crits + Glances + Blocks and/or Ticks + Critical Ticks',
+ 'Crit %': 'Crits / Hits',
+ 'Hit Miss %': 'Misses / (Hits + Crits + Glances + Blocks)',
+ 'Cast Miss %': 'Misses / Casts',
+ // Encounter
+ DUR: 'Encounter Duration',
+ OOM: 'Spent Out of Mana',
+ TTO: 'Time to Out of Mana in seconds',
+ // Aura metrcis
+ Procs: 'Procs',
+ PPM: 'Procs Per Minute',
+ Uptime: 'Uptime / Encounter Duration',
+ // Resource Metrics
+ Gain: 'Gain',
+ 'Gain / s': 'Gain / Second',
+ 'Avg Gain': 'Gain / Event',
+ 'Wasted Gain': 'Gain that was wasted because of resource cap.',
+} as const;
diff --git a/ui/core/proto_utils/action_id.ts b/ui/core/proto_utils/action_id.ts
index 4f682888d7..ab1833516d 100644
--- a/ui/core/proto_utils/action_id.ts
+++ b/ui/core/proto_utils/action_id.ts
@@ -25,6 +25,7 @@ export class ActionId {
readonly baseName: string; // The name without any tag additions.
readonly name: string;
readonly iconUrl: string;
+ readonly spellIdTooltipOverride: number | null;
private constructor(
itemId: number,
@@ -135,6 +136,7 @@ export class ActionId {
this.baseName = baseName;
this.name = name || baseName;
this.iconUrl = iconUrl;
+ this.spellIdTooltipOverride = this.spellTooltipOverride?.spellId || null;
if (this.name) this.name += rank ? ` (Rank ${rank})` : '';
}
@@ -195,12 +197,15 @@ export class ActionId {
if (this.itemId) {
elem.href = ActionId.makeItemUrl(this.itemId, this.randomSuffixId);
} else if (this.spellId) {
- elem.href = ActionId.makeSpellUrl(this.spellId);
+ elem.href = ActionId.makeSpellUrl(this.spellIdTooltipOverride || this.spellId);
}
}
async setWowheadDataset(elem: HTMLElement, params?: Omit
| Omit) {
- (this.itemId ? ActionId.makeItemTooltipData(this.itemId, params) : ActionId.makeSpellTooltipData(this.spellId, params)).then(url => {
+ (this.itemId
+ ? ActionId.makeItemTooltipData(this.itemId, params)
+ : ActionId.makeSpellTooltipData(this.spellIdTooltipOverride || this.spellId, params)
+ ).then(url => {
if (elem) elem.dataset.wowhead = url;
});
}
@@ -342,7 +347,7 @@ export class ActionId {
case 'Lesser Healing Wave':
case 'Chain Heal':
if (this.tag === 6) {
- name = `${name} (Overload)`;
+ name = `${name} OL`;
} else if (this.tag) {
name = `${name} (${this.tag} MSW)`;
}
@@ -463,8 +468,7 @@ export class ActionId {
break;
}
- const idString = this.toProtoString();
- let iconOverrideId = idOverrides[idString] || null;
+ let iconOverrideId = this.spellIconOverride;
// Icon Overrides based on tags
switch (this.spellId) {
@@ -482,7 +486,7 @@ export class ActionId {
iconUrl = ActionId.makeIconUrl(overrideTooltipData['icon']);
}
- return new ActionId(this.itemId, this.spellId, this.otherId, this.tag, baseName, name, iconUrl, this.rank || tooltipData['rank'], this.randomSuffixId);
+ return new ActionId(this.itemId, this.spellId, this.otherId, this.tag, baseName, name, iconUrl, this.rank || tooltipData.rank, this.randomSuffixId);
}
toString(): string {
@@ -636,13 +640,29 @@ export class ActionId {
return await Database.getSpellIconData(actionId.spellId);
}
}
+ get spellIconOverride(): ActionId | null {
+ const override = spellIdIconOverrides.get(JSON.stringify({ spellId: this.spellId }));
+ if (!override) return null;
+ return override.itemId ? ActionId.fromItemId(override.itemId) : ActionId.fromItemId(override.spellId!);
+ }
+
+ get spellTooltipOverride(): ActionId | null {
+ const override = spellIdTooltipOverrides.get(JSON.stringify({ spellId: this.spellId, tag: this.tag }));
+ if (!override) return null;
+ return override.itemId ? ActionId.fromItemId(override.itemId) : ActionId.fromSpellId(override.spellId!);
+ }
}
+type ActionIdOverride = { itemId?: number; spellId?: number };
+
// Some items/spells have weird icons, so use this to show a different icon instead.
-const idOverrides: Record = {};
-idOverrides[ActionId.fromSpellId(449288).toProtoString()] = ActionId.fromItemId(221309); // Darkmoon Card: Sandstorm
-idOverrides[ActionId.fromSpellId(455864).toProtoString()] = ActionId.fromSpellId(9907); // Tier 1 Balance Druid "Improved Faerie Fire"
-idOverrides[ActionId.fromSpellId(457544).toProtoString()] = ActionId.fromSpellId(10408); // Tier 1 Shaman Tank "Improved Stoneskin / Windwall Totem"
+const spellIdIconOverrides: Map = new Map([
+ [JSON.stringify({ spellId: 449288 }), { itemId: 221309 }], // Darkmoon Card: Sandstorm
+ [JSON.stringify({ spellId: 455864 }), { spellId: 9907 }], // Tier 1 Balance Druid "Improved Faerie Fire"
+ [JSON.stringify({ spellId: 457544 }), { spellId: 10408 }], // Tier 1 Shaman Tank "Improved Stoneskin / Windwall Totem"
+]);
+
+const spellIdTooltipOverrides: Map = new Map([]);
const spellIDsToShowBuffs = new Set([
702, // https://www.wowhead.com/classic/spell=702/curse-of-weakness
diff --git a/ui/core/proto_utils/names.ts b/ui/core/proto_utils/names.ts
index 304c1d2c5b..a3b0935ddc 100644
--- a/ui/core/proto_utils/names.ts
+++ b/ui/core/proto_utils/names.ts
@@ -219,6 +219,35 @@ export function getClassStatName(stat: Stat, playerClass: Class): string {
}
}
+// TODO: Make sure BE exports the spell schools properly
+export enum SpellSchool {
+ None = 0,
+ Physical = 1 << 1,
+ Arcane = 1 << 2,
+ Fire = 1 << 3,
+ Frost = 1 << 4,
+ Holy = 1 << 5,
+ Nature = 1 << 6,
+ Shadow = 1 << 7,
+}
+
+export const spellSchoolNames: Map = new Map([
+ [SpellSchool.Physical, 'Physical'],
+ [SpellSchool.Arcane, 'Arcane'],
+ [SpellSchool.Fire, 'Fire'],
+ [SpellSchool.Frost, 'Frost'],
+ [SpellSchool.Holy, 'Holy'],
+ [SpellSchool.Nature, 'Nature'],
+ [SpellSchool.Shadow, 'Shadow'],
+ [SpellSchool.Nature + SpellSchool.Arcane, 'Astral'],
+ [SpellSchool.Shadow + SpellSchool.Fire, 'Shadowflame'],
+ [SpellSchool.Fire + SpellSchool.Arcane, 'Spellfire'],
+ [SpellSchool.Arcane + SpellSchool.Frost, 'Spellfrost'],
+ [SpellSchool.Frost + SpellSchool.Fire, 'Frostfire'],
+ [SpellSchool.Shadow + SpellSchool.Frost, 'Shadowfrost'],
+ [SpellSchool.Arcane + SpellSchool.Fire + SpellSchool.Frost, 'Chimeric'],
+]);
+
export const itemTypeNames: Map = new Map([
[ItemType.ItemTypeHead, 'Helm'],
[ItemType.ItemTypeNeck, 'Neck'],
diff --git a/ui/core/proto_utils/sim_result.ts b/ui/core/proto_utils/sim_result.ts
index 399cb3562d..bf7c426871 100644
--- a/ui/core/proto_utils/sim_result.ts
+++ b/ui/core/proto_utils/sim_result.ts
@@ -15,7 +15,7 @@ import {
TargetedActionMetrics as TargetedActionMetricsProto,
UnitMetrics as UnitMetricsProto,
} from '../proto/api.js';
-import { Class, Encounter as EncounterProto, Spec, Target as TargetProto } from '../proto/common.js';
+import { Class, Encounter as EncounterProto, Spec, SpellSchool, Target as TargetProto } from '../proto/common.js';
import { SimRun } from '../proto/ui.js';
import { ActionId, defaultTargetIcon } from '../proto_utils/action_id.js';
import { bucket, sum } from '../utils.js';
@@ -30,7 +30,7 @@ import {
SimLog,
ThreatLogGroup,
} from './logs_parser.js';
-import { cssClassForClass, getTalentTreeIcon, playerToSpec, specToClass } from './utils.js';
+import { cssClassForClass, getTalentTreeIcon, playerToSpec, specToClass } from './utils';
export interface SimResultFilter {
// Raid index of the player to display, or null for all players.
@@ -217,7 +217,6 @@ export class SimResult {
static async makeNew(request: RaidSimRequest, result: RaidSimResult): Promise {
const resultData = new SimResultData(request, result);
const logs = await SimLog.parseAll(result);
-
const raidPromise = RaidMetrics.makeNew(resultData, request.raid!, result.raidMetrics!, logs);
const encounterPromise = EncounterMetrics.makeNew(resultData, request.encounter!, result.encounterMetrics!, logs);
@@ -467,10 +466,22 @@ export class UnitMetrics {
return this.getActionsForDisplay().filter(e => e.isMeleeAction);
}
+ getMeleeDamageActions(): Array {
+ return this.getMeleeActions().filter(e => e.dps !== 0 && e.hps === 0);
+ }
+
getSpellActions(): Array {
return this.getActionsForDisplay().filter(e => !e.isMeleeAction);
}
+ getSpellDamageActions(): Array {
+ return this.getSpellActions().filter(e => e.dps !== 0 && e.hps === 0);
+ }
+
+ getDamageActions(): Array {
+ return this.getActionsForDisplay().filter(e => e.dps !== 0 && e.hps === 0);
+ }
+
getHealingActions(): Array {
return this.getActionsForDisplay();
}
@@ -605,7 +616,7 @@ export class AuraMetrics {
}
// Merges an array of metrics into a single metrics.
- static merge(auras: Array, removeTag?: boolean, actionIdOverride?: ActionId): AuraMetrics {
+ static merge(auras: Array, { removeTag, actionIdOverride }: { removeTag?: boolean; actionIdOverride?: ActionId } = {}): AuraMetrics {
const firstAura = auras[0];
const unit = auras.every(aura => aura.unit == firstAura.unit) ? firstAura.unit : null;
let actionId = actionIdOverride || firstAura.actionId;
@@ -637,7 +648,6 @@ export class AuraMetrics {
return AuraMetrics.groupById(auras, useTag).map(aurasToJoin => AuraMetrics.merge(aurasToJoin));
}
}
-
export class ResourceMetrics {
unit: UnitMetrics | null;
readonly actionId: ActionId;
@@ -692,7 +702,10 @@ export class ResourceMetrics {
}
// Merges an array of metrics into a single metrics.
- static merge(resources: Array, removeTag?: boolean, actionIdOverride?: ActionId): ResourceMetrics {
+ static merge(
+ resources: Array,
+ { removeTag, actionIdOverride }: { removeTag?: boolean; actionIdOverride?: ActionId } = {},
+ ): ResourceMetrics {
const firstResource = resources[0];
const unit = resources.every(resource => resource.unit == firstResource.unit) ? firstResource.unit : null;
let actionId = actionIdOverride || firstResource.actionId;
@@ -733,6 +746,7 @@ export class ActionMetrics {
readonly actionId: ActionId;
readonly name: string;
readonly iconUrl: string;
+ readonly spellSchool: SpellSchool | null;
readonly targets: Array;
private readonly resultData: SimResultData;
private readonly iterations: number;
@@ -750,7 +764,14 @@ export class ActionMetrics {
this.iterations = resultData.iterations;
this.duration = resultData.duration;
this.data = data;
- this.targets = data.targets.map(tam => new TargetedActionMetrics(this.iterations, this.duration, tam));
+ this.spellSchool = data.spellSchool;
+ this.targets = data.targets.map(
+ tam =>
+ new TargetedActionMetrics(tam, {
+ iterations: this.iterations,
+ duration: this.duration,
+ }),
+ );
this.combinedMetrics = TargetedActionMetrics.merge(this.targets);
this.resources = [];
}
@@ -759,14 +780,143 @@ export class ActionMetrics {
return this.data.isMelee;
}
+ get isPassiveAction() {
+ return this.data.isPassive;
+ }
+
+ get totalDamagePercent() {
+ const totalAvgDps = this.resultData.result.raidMetrics?.dps?.avg;
+ if (!totalAvgDps) return undefined;
+
+ return (this.avgDamage / (totalAvgDps * this.duration)) * 100;
+ }
+
get damage() {
return this.combinedMetrics.damage;
}
+ get avgDamage() {
+ return this.combinedMetrics.avgDamage;
+ }
+
+ get avgHitDamage() {
+ return (
+ this.avgDamage -
+ this.avgTickDamage -
+ this.avgCritDamage +
+ this.avgCritTickDamage -
+ this.avgGlanceDamage -
+ this.avgBlockDamage -
+ this.avgCritBlockDamage
+ );
+ }
+
+ get resistedDamage() {
+ return this.combinedMetrics.resistedDamage;
+ }
+
+ get avgResistedDamage() {
+ return this.combinedMetrics.avgResistedDamage;
+ }
+
+ get critDamage() {
+ return this.combinedMetrics.critDamage;
+ }
+
+ get avgCritDamage() {
+ return this.combinedMetrics.avgCritDamage;
+ }
+
+ get resistedCritDamage() {
+ return this.combinedMetrics.resistedCritDamage;
+ }
+
+ get avgResistedCritDamage() {
+ return this.combinedMetrics.avgResistedCritDamage;
+ }
+
+ get tickDamage() {
+ return this.combinedMetrics.tickDamage;
+ }
+
+ get avgTickDamage() {
+ return this.combinedMetrics.avgTickDamage;
+ }
+
+ get resistedTickDamage() {
+ return this.combinedMetrics.resistedTickDamage;
+ }
+
+ get avgResistedTickDamage() {
+ return this.combinedMetrics.avgResistedTickDamage;
+ }
+
+ get critTickDamage() {
+ return this.combinedMetrics.critTickDamage;
+ }
+
+ get avgCritTickDamage() {
+ return this.combinedMetrics.avgCritTickDamage;
+ }
+ get resistedCritTickDamage() {
+ return this.combinedMetrics.resistedCritTickDamage;
+ }
+
+ get avgResistedCritTickDamage() {
+ return this.combinedMetrics.avgResistedCritTickDamage;
+ }
+
+ get glanceDamage() {
+ return this.combinedMetrics.glanceDamage;
+ }
+
+ get avgGlanceDamage() {
+ return this.combinedMetrics.avgGlanceDamage;
+ }
+
+ get blockDamage() {
+ return this.combinedMetrics.blockDamage;
+ }
+
+ get avgBlockDamage() {
+ return this.combinedMetrics.avgBlockDamage;
+ }
+
+ get critBlockDamage() {
+ return this.combinedMetrics.critBlockDamage;
+ }
+
+ get avgCritBlockDamage() {
+ return this.combinedMetrics.avgCritBlockDamage;
+ }
+
get dps() {
return this.combinedMetrics.dps;
}
+ get totalHealingPercent() {
+ const totalAvgHps = this.resultData.result.raidMetrics?.hps?.avg;
+ if (!totalAvgHps) return undefined;
+
+ return (this.avgHealing / (totalAvgHps * this.duration)) * 100;
+ }
+
+ get healing() {
+ return this.combinedMetrics.healing;
+ }
+
+ get avgHealing() {
+ return this.combinedMetrics.healing / this.iterations;
+ }
+
+ get critHealing() {
+ return this.combinedMetrics.critHealing;
+ }
+
+ get avgCritHealing() {
+ return this.combinedMetrics.critHealing / this.iterations;
+ }
+
get hps() {
return this.combinedMetrics.hps;
}
@@ -776,14 +926,17 @@ export class ActionMetrics {
}
get casts() {
+ if (this.isPassiveAction) return 0;
return this.combinedMetrics.casts;
}
get castsPerMinute() {
+ if (this.isPassiveAction) return 0;
return this.combinedMetrics.castsPerMinute;
}
get avgCastTimeMs() {
+ if (this.isPassiveAction) return 0;
return this.combinedMetrics.avgCastTimeMs;
}
@@ -797,19 +950,40 @@ export class ActionMetrics {
return 0;
}
+ get damageThroughput() {
+ if (this.unit?.isPet && !this.actionId.spellId) return 0;
+ return this.combinedMetrics.damageThroughput;
+ }
+
get healingThroughput() {
return this.combinedMetrics.healingThroughput;
}
+ get shielding() {
+ return this.combinedMetrics.shielding;
+ }
+
get avgCast() {
+ if (this.isPassiveAction) return 0;
return this.combinedMetrics.avgCast;
}
+ get avgCastHit() {
+ if (!this.combinedMetrics.avgCast) return 0;
+ return this.combinedMetrics.avgCast - this.avgCastTick;
+ }
+
+ get avgCastTick() {
+ return this.combinedMetrics.avgCastTick;
+ }
+
get avgCastHealing() {
+ if (this.isPassiveAction) return 0;
return this.combinedMetrics.avgCastHealing;
}
get avgCastThreat() {
+ if (this.isPassiveAction) return 0;
return this.combinedMetrics.avgCastThreat;
}
@@ -817,6 +991,10 @@ export class ActionMetrics {
return this.combinedMetrics.landedHits;
}
+ get landedTicks() {
+ return this.combinedMetrics.landedTicks;
+ }
+
get hitAttempts() {
return this.combinedMetrics.hitAttempts;
}
@@ -825,12 +1003,24 @@ export class ActionMetrics {
return this.combinedMetrics.avgHit;
}
+ get avgTick() {
+ return this.combinedMetrics.avgTick;
+ }
+
+ get avgHitHealing() {
+ return this.combinedMetrics.avgHitHealing;
+ }
+
get avgHitThreat() {
return this.combinedMetrics.avgHitThreat;
}
- get critPercent() {
- return this.combinedMetrics.critPercent;
+ get totalMisses() {
+ return this.misses + this.dodges + this.parries;
+ }
+
+ get totalMissesPercent() {
+ return this.missPercent + this.dodgePercent + this.parryPercent;
}
get misses() {
@@ -857,6 +1047,50 @@ export class ActionMetrics {
return this.combinedMetrics.parryPercent;
}
+ get hits() {
+ return this.combinedMetrics.hits;
+ }
+
+ get resistedHits() {
+ return this.combinedMetrics.resistedHits;
+ }
+
+ get hitPercent() {
+ return this.combinedMetrics.hitPercent;
+ }
+
+ get resistedHitPercent() {
+ return this.combinedMetrics.resistedHitPercent;
+ }
+
+ get ticks() {
+ return this.combinedMetrics.ticks;
+ }
+
+ get resistedTicks() {
+ return this.combinedMetrics.resistedTicks;
+ }
+
+ get resistedTickPercent() {
+ return this.combinedMetrics.resistedTickPercent;
+ }
+
+ get critTicks() {
+ return this.combinedMetrics.critTicks;
+ }
+
+ get critTickPercent() {
+ return this.combinedMetrics.critTickPercent;
+ }
+
+ get resistedCritTicks() {
+ return this.combinedMetrics.resistedCritTicks;
+ }
+
+ get resistedCritTickPercent() {
+ return this.combinedMetrics.resistedCritTickPercent;
+ }
+
get blocks() {
return this.combinedMetrics.blocks;
}
@@ -865,6 +1099,14 @@ export class ActionMetrics {
return this.combinedMetrics.blockPercent;
}
+ get critBlocks() {
+ return this.combinedMetrics.critBlocks;
+ }
+
+ get critBlockPercent() {
+ return this.combinedMetrics.critBlockPercent;
+ }
+
get glances() {
return this.combinedMetrics.glances;
}
@@ -873,6 +1115,102 @@ export class ActionMetrics {
return this.combinedMetrics.glancePercent;
}
+ get crits() {
+ return this.combinedMetrics.crits;
+ }
+
+ get critPercent() {
+ return this.combinedMetrics.critPercent;
+ }
+
+ get resistedCrits() {
+ return this.combinedMetrics.resistedCrits;
+ }
+
+ get resistedCritPercent() {
+ return this.combinedMetrics.resistedCritPercent;
+ }
+
+ get healingPercent() {
+ return this.combinedMetrics.healingPercent;
+ }
+
+ get healingCritPercent() {
+ return this.combinedMetrics.healingCritPercent;
+ }
+
+ get damageDone() {
+ const normalHitAvgDamage =
+ this.avgDamage -
+ this.avgTickDamage -
+ this.avgCritDamage +
+ this.avgCritTickDamage -
+ this.avgGlanceDamage -
+ this.avgBlockDamage -
+ this.avgCritBlockDamage;
+
+ const normalTickAvgDamage = this.avgTickDamage - this.avgResistedTickDamage - this.avgCritTickDamage - this.avgResistedCritTickDamage;
+ const critHitAvgDamage = this.avgCritDamage - this.avgResistedCritDamage - this.avgCritTickDamage;
+
+ return {
+ hit: {
+ value: normalHitAvgDamage,
+ percentage: (normalHitAvgDamage / this.avgDamage) * 100,
+ average: normalHitAvgDamage / this.hits,
+ },
+ resistedHit: {
+ value: this.avgResistedDamage,
+ percentage: (this.avgResistedDamage / this.avgDamage) * 100,
+ average: this.avgResistedDamage / this.hits,
+ },
+ critHit: {
+ value: critHitAvgDamage,
+ percentage: (critHitAvgDamage / this.avgDamage) * 100,
+ average: critHitAvgDamage / this.crits,
+ },
+ resistedCritHit: {
+ value: this.avgResistedCritDamage,
+ percentage: (this.avgResistedCritDamage / this.avgDamage) * 100,
+ average: this.avgResistedCritDamage / this.crits,
+ },
+ tick: {
+ value: normalTickAvgDamage,
+ percentage: (normalTickAvgDamage / this.avgDamage) * 100,
+ average: normalTickAvgDamage / this.ticks,
+ },
+ resistedTick: {
+ value: this.avgResistedTickDamage,
+ percentage: (this.avgResistedTickDamage / this.avgDamage) * 100,
+ average: this.avgResistedTickDamage / this.ticks,
+ },
+ critTick: {
+ value: this.avgCritTickDamage,
+ percentage: (this.avgCritTickDamage / this.avgDamage) * 100,
+ average: this.avgCritTickDamage / this.critTicks,
+ },
+ resistedCritTick: {
+ value: this.avgResistedCritTickDamage,
+ percentage: (this.avgResistedCritTickDamage / this.avgDamage) * 100,
+ average: this.avgResistedCritTickDamage / this.critTicks,
+ },
+ glance: {
+ value: this.avgGlanceDamage,
+ percentage: (this.avgGlanceDamage / this.avgDamage) * 100,
+ average: this.avgGlanceDamage / this.hits,
+ },
+ block: {
+ value: this.avgBlockDamage,
+ percentage: (this.avgBlockDamage / this.avgDamage) * 100,
+ average: this.avgBlockDamage / this.hits,
+ },
+ critBlock: {
+ value: this.avgCritBlockDamage,
+ percentage: (this.avgCritBlockDamage / this.avgDamage) * 100,
+ average: this.avgCritBlockDamage / this.crits,
+ },
+ };
+ }
+
forTarget(filter?: SimResultFilter): ActionMetrics {
const unitIndex = this.unit!.getTargetIndex(filter);
if (unitIndex == null) {
@@ -895,7 +1233,7 @@ export class ActionMetrics {
}
// Merges an array of metrics into a single metric.
- static merge(actions: Array, removeTag?: boolean, actionIdOverride?: ActionId): ActionMetrics {
+ static merge(actions: Array, { removeTag, actionIdOverride }: { removeTag?: boolean; actionIdOverride?: ActionId } = {}): ActionMetrics {
const firstAction = actions[0];
const unit = firstAction.unit;
let actionId = actionIdOverride || firstAction.actionId;
@@ -905,13 +1243,16 @@ export class ActionMetrics {
const maxTargets = Math.max(...actions.map(action => action.targets.length));
const mergedTargets = [...Array(maxTargets).keys()].map(i => TargetedActionMetrics.merge(actions.map(action => action.targets[i])));
+ const isAllPassiveSpells = actions.every(action => action.isPassiveAction);
return new ActionMetrics(
unit,
actionId,
ActionMetricsProto.create({
isMelee: firstAction.isMeleeAction,
+ isPassive: isAllPassiveSpells,
targets: mergedTargets.map(t => t.data),
+ spellSchool: firstAction.spellSchool || undefined,
}),
firstAction.resultData,
);
@@ -933,6 +1274,11 @@ export class ActionMetrics {
}
}
+type TargetedActionMetricsOptions = {
+ iterations: number;
+ duration: number;
+};
+
// Manages the metrics for a single action applied to a specific target.
export class TargetedActionMetrics {
private readonly iterations: number;
@@ -940,26 +1286,140 @@ export class TargetedActionMetrics {
readonly data: TargetedActionMetricsProto;
readonly landedHitsRaw: number;
+ readonly landedTicksRaw: number;
readonly hitAttempts: number;
- constructor(iterations: number, duration: number, data: TargetedActionMetricsProto) {
+ constructor(data: TargetedActionMetricsProto, { iterations, duration }: TargetedActionMetricsOptions) {
this.iterations = iterations;
this.duration = duration;
this.data = data;
- this.landedHitsRaw = this.data.hits + this.data.crits + this.data.blocks + this.data.glances;
+ this.landedHitsRaw = this.data.hits + this.data.crits + this.data.blocks + this.data.critBlocks + this.data.glances;
+ this.landedTicksRaw = this.data.ticks + this.data.critTicks;
- this.hitAttempts = this.data.misses + this.data.dodges + this.data.parries + this.data.blocks + this.data.glances + this.data.crits + this.data.hits;
+ this.hitAttempts =
+ this.data.misses +
+ this.data.dodges +
+ this.data.parries +
+ this.data.critBlocks +
+ this.data.blocks +
+ this.data.glances +
+ this.data.crits +
+ (this.data.hits || this.data.casts);
}
get damage() {
return this.data.damage;
}
+ get avgDamage() {
+ return this.data.damage / this.iterations;
+ }
+
+ get resistedDamage() {
+ return this.data.resistedDamage;
+ }
+
+ get avgResistedDamage() {
+ return this.data.resistedDamage / this.iterations;
+ }
+
+ get critDamage() {
+ return this.data.critDamage;
+ }
+
+ get avgCritDamage() {
+ return this.data.critDamage / this.iterations;
+ }
+
+ get resistedCritDamage() {
+ return this.data.resistedCritDamage;
+ }
+
+ get avgResistedCritDamage() {
+ return this.data.resistedCritDamage / this.iterations;
+ }
+
+ get tickDamage() {
+ return this.data.tickDamage;
+ }
+
+ get avgTickDamage() {
+ return this.data.tickDamage / this.iterations;
+ }
+
+ get resistedTickDamage() {
+ return this.data.resistedTickDamage;
+ }
+
+ get avgResistedTickDamage() {
+ return this.data.resistedTickDamage / this.iterations;
+ }
+
+ get critTickDamage() {
+ return this.data.critTickDamage;
+ }
+
+ get avgCritTickDamage() {
+ return this.data.critTickDamage / this.iterations;
+ }
+
+ get resistedCritTickDamage() {
+ return this.data.resistedCritTickDamage;
+ }
+
+ get avgResistedCritTickDamage() {
+ return this.data.resistedCritTickDamage / this.iterations;
+ }
+
+ get glanceDamage() {
+ return this.data.glanceDamage;
+ }
+
+ get avgGlanceDamage() {
+ return this.data.glanceDamage / this.iterations;
+ }
+
+ get blockDamage() {
+ return this.data.blockDamage;
+ }
+
+ get avgBlockDamage() {
+ return this.data.blockDamage / this.iterations;
+ }
+
+ get critBlockDamage() {
+ return this.data.critBlockDamage;
+ }
+
+ get avgCritBlockDamage() {
+ return this.data.critBlockDamage / this.iterations;
+ }
+
get dps() {
return this.data.damage / this.iterations / this.duration;
}
+ get healing() {
+ return this.data.healing + this.data.shielding;
+ }
+
+ get avgHealing() {
+ return (this.data.healing + this.data.shielding) / this.iterations;
+ }
+
+ get critHealing() {
+ return this.data.critHealing;
+ }
+
+ get avgCritHealing() {
+ return this.data.critHealing / this.iterations;
+ }
+
+ get shielding() {
+ return this.data.shielding;
+ }
+
get hps() {
return (this.data.healing + this.data.shielding) / this.iterations / this.duration;
}
@@ -969,7 +1429,7 @@ export class TargetedActionMetrics {
}
get casts() {
- return (this.data.casts || this.hitAttempts) / this.iterations;
+ return this.data.casts / this.iterations;
}
get castsPerMinute() {
@@ -980,6 +1440,14 @@ export class TargetedActionMetrics {
return this.data.castTimeMs / this.iterations / this.casts;
}
+ get damageThroughput() {
+ if (this.avgCastTimeMs) {
+ return this.avgCast / (this.avgCastTimeMs / 1000);
+ } else {
+ return 0;
+ }
+ }
+
get healingThroughput() {
if (this.avgCastTimeMs) {
return this.hps / (this.avgCastTimeMs / 1000);
@@ -993,9 +1461,14 @@ export class TargetedActionMetrics {
}
get avgCast() {
+ if (!this.casts) return 0;
return this.data.damage / this.iterations / (this.casts || 1);
}
+ get avgCastTick() {
+ return this.data.tickDamage / this.iterations / (this.casts || 1);
+ }
+
get avgCastHealing() {
return (this.data.healing + this.data.shielding) / this.iterations / (this.casts || 1);
}
@@ -1008,9 +1481,22 @@ export class TargetedActionMetrics {
return this.landedHitsRaw / this.iterations;
}
+ get landedTicks() {
+ return this.landedTicksRaw / this.iterations;
+ }
+
get avgHit() {
const lhr = this.landedHitsRaw;
- return lhr == 0 ? 0 : this.data.damage / lhr;
+ return lhr == 0 ? 0 : (this.data.damage - this.data.tickDamage) / lhr;
+ }
+
+ get avgTick() {
+ const ltr = this.landedTicksRaw;
+ return ltr == 0 ? 0 : this.data.tickDamage / ltr;
+ }
+
+ get avgHitHealing() {
+ return (this.data.healing + this.data.shielding) / this.iterations / this.landedHits;
}
get avgHitThreat() {
@@ -1018,8 +1504,12 @@ export class TargetedActionMetrics {
return lhr == 0 ? 0 : this.data.threat / lhr;
}
- get critPercent() {
- return (this.data.crits / (this.hitAttempts || 1)) * 100;
+ get totalMisses() {
+ return this.misses + this.dodges + this.parries;
+ }
+
+ get totalMissesPercent() {
+ return this.missPercent + this.dodgePercent + this.parryPercent;
}
get misses() {
@@ -1027,7 +1517,7 @@ export class TargetedActionMetrics {
}
get missPercent() {
- return (this.data.misses / (this.data.casts || 1)) * 100;
+ return (this.data.misses / this.hitAttempts) * 100;
}
get dodges() {
@@ -1035,7 +1525,7 @@ export class TargetedActionMetrics {
}
get dodgePercent() {
- return (this.data.dodges / (this.hitAttempts || 1)) * 100;
+ return (this.data.dodges / this.hitAttempts) * 100;
}
get parries() {
@@ -1043,7 +1533,51 @@ export class TargetedActionMetrics {
}
get parryPercent() {
- return (this.data.parries / (this.hitAttempts || 1)) * 100;
+ return (this.data.parries / this.hitAttempts) * 100;
+ }
+
+ get hits() {
+ return this.data.hits / this.iterations;
+ }
+
+ get hitPercent() {
+ return (this.data.hits / this.hitAttempts) * 100;
+ }
+
+ get resistedHits() {
+ return this.data.resistedHits / this.iterations;
+ }
+
+ get resistedHitPercent() {
+ return (this.data.resistedHits / this.hitAttempts) * 100;
+ }
+
+ get ticks() {
+ return this.data.ticks / this.iterations;
+ }
+
+ get resistedTicks() {
+ return this.data.resistedTicks / this.iterations;
+ }
+
+ get resistedTickPercent() {
+ return (this.data.resistedTicks / (this.data.ticks + this.data.critTicks)) * 100;
+ }
+
+ get critTicks() {
+ return this.data.critTicks / this.iterations;
+ }
+
+ get critTickPercent() {
+ return (this.data.critTicks / (this.data.ticks + this.data.critTicks)) * 100;
+ }
+
+ get resistedCritTicks() {
+ return this.data.resistedCritTicks / this.iterations;
+ }
+
+ get resistedCritTickPercent() {
+ return (this.data.resistedCritTicks / (this.data.ticks + this.data.critTicks)) * 100;
}
get blocks() {
@@ -1051,7 +1585,15 @@ export class TargetedActionMetrics {
}
get blockPercent() {
- return (this.data.blocks / (this.hitAttempts || 1)) * 100;
+ return (this.data.blocks / this.hitAttempts) * 100;
+ }
+
+ get critBlocks() {
+ return this.data.critBlocks / this.iterations;
+ }
+
+ get critBlockPercent() {
+ return (this.data.critBlocks / this.hitAttempts) * 100;
}
get glances() {
@@ -1059,29 +1601,75 @@ export class TargetedActionMetrics {
}
get glancePercent() {
- return (this.data.glances / (this.hitAttempts || 1)) * 100;
+ return (this.data.glances / this.hitAttempts) * 100;
+ }
+
+ get crits() {
+ return this.data.crits / this.iterations;
+ }
+
+ get critPercent() {
+ return (this.data.crits / this.hitAttempts) * 100;
+ }
+
+ get resistedCrits() {
+ return this.data.resistedCrits / this.iterations;
+ }
+
+ get resistedCritPercent() {
+ return (this.data.resistedCrits / this.hitAttempts) * 100;
+ }
+
+ get healingPercent() {
+ return ((this.healing - this.critHealing) / this.healing) * 100;
+ }
+
+ get healingCritPercent() {
+ return (this.data.critHealing / this.healing) * 100;
}
// Merges an array of metrics into a single metric.
static merge(actions: Array): TargetedActionMetrics {
+ const { iterations = 1, duration = 1 } = actions[0];
+
return new TargetedActionMetrics(
- actions[0]?.iterations || 1,
- actions[0]?.duration || 1,
TargetedActionMetricsProto.create({
casts: sum(actions.map(a => a.data.casts)),
hits: sum(actions.map(a => a.data.hits)),
+ resistedHits: sum(actions.map(a => a.data.resistedHits)),
crits: sum(actions.map(a => a.data.crits)),
+ resistedCrits: sum(actions.map(a => a.data.resistedCrits)),
+ ticks: sum(actions.map(a => a.data.ticks)),
+ resistedTicks: sum(actions.map(a => a.data.resistedTicks)),
+ critTicks: sum(actions.map(a => a.data.critTicks)),
+ resistedCritTicks: sum(actions.map(a => a.data.resistedCritTicks)),
misses: sum(actions.map(a => a.data.misses)),
dodges: sum(actions.map(a => a.data.dodges)),
parries: sum(actions.map(a => a.data.parries)),
blocks: sum(actions.map(a => a.data.blocks)),
+ critBlocks: sum(actions.map(a => a.data.critBlocks)),
glances: sum(actions.map(a => a.data.glances)),
damage: sum(actions.map(a => a.data.damage)),
+ resistedDamage: sum(actions.map(a => a.data.resistedDamage)),
+ critDamage: sum(actions.map(a => a.data.critDamage)),
+ resistedCritDamage: sum(actions.map(a => a.data.resistedCritDamage)),
+ tickDamage: sum(actions.map(a => a.data.tickDamage)),
+ resistedTickDamage: sum(actions.map(a => a.data.resistedTickDamage)),
+ critTickDamage: sum(actions.map(a => a.data.critTickDamage)),
+ resistedCritTickDamage: sum(actions.map(a => a.data.resistedCritTickDamage)),
+ glanceDamage: sum(actions.map(a => a.data.glanceDamage)),
+ blockDamage: sum(actions.map(a => a.data.blockDamage)),
+ critBlockDamage: sum(actions.map(a => a.data.critBlockDamage)),
threat: sum(actions.map(a => a.data.threat)),
healing: sum(actions.map(a => a.data.healing)),
+ critHealing: sum(actions.map(a => a.data.critHealing)),
shielding: sum(actions.map(a => a.data.shielding)),
castTimeMs: sum(actions.map(a => a.data.castTimeMs)),
}),
+ {
+ iterations,
+ duration,
+ },
);
}
}
diff --git a/ui/core/utils.ts b/ui/core/utils.ts
index 57d1089778..3d9d93752f 100644
--- a/ui/core/utils.ts
+++ b/ui/core/utils.ts
@@ -315,6 +315,15 @@ export const mod = (n: number, m: number): number => {
return ((n % m) + m) % m;
};
+export const formatToCompactNumber: typeof formatToNumber = (number, options) => formatToNumber(number, { notation: 'compact', ...options });
+
+export const formatToPercent: typeof formatToNumber = (number, options) => formatToNumber(number / 100, { style: 'percent', ...options });
+
+export const formatToNumber = (number: number, options?: Intl.NumberFormatOptions & { fallbackString?: string }) => {
+ if (!number && options?.fallbackString) return options.fallbackString;
+ return new Intl.NumberFormat('en-US', { maximumFractionDigits: 2, ...options }).format(number);
+};
+
type Environments = 'local' | 'external';
const hostname = window.location.hostname;
@@ -325,3 +334,6 @@ export const getEnvironment = (): Environments => {
export const isLocal = () => getEnvironment() === 'local';
export const isExternal = () => getEnvironment() === 'external';
+export const isDevMode = () => {
+ return import.meta.env.DEV;
+};
diff --git a/ui/index.ts b/ui/index.ts
index 36e87eec79..da9ab6e71b 100644
--- a/ui/index.ts
+++ b/ui/index.ts
@@ -1,3 +1,4 @@
+///
import './shared/bootstrap_overrides';
import * as Popper from '@popperjs/core';
diff --git a/ui/scss/core/components/_character_stats.scss b/ui/scss/core/components/_character_stats.scss
index b427bb6b6d..735fc202cd 100644
--- a/ui/scss/core/components/_character_stats.scss
+++ b/ui/scss/core/components/_character_stats.scss
@@ -4,7 +4,7 @@
width: 100%;
.character-stats-label {
- margin-bottom: map.get($spacers, 2);
+ margin-bottom: var(--spacer-2);
display: flex;
}
@@ -17,17 +17,17 @@
.character-stats-table-label,
.character-stats-table-value {
- padding-top: map.get($spacers, 2);
- padding-bottom: map.get($spacers, 2);
+ padding-top: var(--spacer-2);
+ padding-bottom: var(--spacer-2);
}
.character-stats-table-label {
- padding-right: map.get($spacers, 2);
+ padding-right: var(--spacer-2);
text-align: left;
}
.character-stats-table-value {
- padding-left: map.get($spacers, 2);
+ padding-left: var(--spacer-2);
font-weight: bold;
text-align: right;
@@ -57,6 +57,6 @@
justify-content: space-between;
span:first-child {
- margin-right: map.get($spacers, 2);
+ margin-right: var(--spacer-2);
}
}
diff --git a/ui/scss/core/components/_content_block.scss b/ui/scss/core/components/_content_block.scss
index d78a1339b9..616ea7a387 100644
--- a/ui/scss/core/components/_content_block.scss
+++ b/ui/scss/core/components/_content_block.scss
@@ -5,7 +5,7 @@
flex-direction: column;
&:not(:last-child) {
- margin-bottom: 2 * map.get($spacers, 3);
+ margin-bottom: calc(2 * var(--spacer-3));
}
.content-block-header {
diff --git a/ui/scss/core/components/_detailed_results.scss b/ui/scss/core/components/_detailed_results.scss
index 21294fa35f..29aadf7125 100644
--- a/ui/scss/core/components/_detailed_results.scss
+++ b/ui/scss/core/components/_detailed_results.scss
@@ -39,10 +39,6 @@
display: none;
}
-.dr-row {
- padding-right: 10px;
-}
-
.dr-root {
display: flex;
flex-direction: column;
@@ -61,7 +57,7 @@
> {
.tab-content {
- padding-top: 1rem;
+ padding-top: var(--gap-width);
}
.tab-content > .tab-pane.dr-tab-content {
@@ -93,7 +89,7 @@
height: 1px;
margin-left: auto;
margin-right: auto;
- background-color: $border-color;
+ background-color: var(--bs-border-color);
transition: width 0.15s ease-in-out;
}
@@ -122,7 +118,7 @@
display: flex;
justify-content: center;
align-items: center;
- padding: calc(map-get($spacers, 3) * 2);
+ padding: var(--gap-width);
font-size: 1rem;
}
@@ -145,47 +141,109 @@
}
.metrics-table {
+ table-layout: auto;
+
+ td,
+ th {
+ width: 0;
+ }
+
+ th {
+ white-space: nowrap;
+ }
+ td {
+ @include media-breakpoint-up(1080p) {
+ white-space: nowrap;
+ }
+ }
+
+ .metrics-table-cell--primary-metric {
+ width: 400px;
+ }
+}
+
+.damage-content .metrics-table,
+.threat-content .metrics-table,
+.healing-content .metrics-table,
+.tippy-box[data-theme='metrics-table'] {
+ font-size: 12px;
+}
+
+.tippy-box[data-theme='metrics-table'],
+.metrics-table {
+ --bs-border-default: rgba(var(--bs-white-rgb), 0.2);
width: 100%;
+
+ th,
+ td {
+ border-left: 1px solid var(--bs-border-default);
+ border-right: 1px solid var(--bs-border-default);
+ &:first-child {
+ border-left: 0;
+ }
+ &:last-child {
+ border-right: 0;
+ }
+ }
}
.metrics-table-header-row {
- border-bottom: 2px solid white;
+ border-bottom: 2px solid rgba(var(--bs-white-rgb), 0.8);
+}
+
+.metrics-table-footer-row {
+ border-top: 2px solid rgba(var(--bs-white-rgb), 0.8);
}
.metrics-table-header-cell {
- padding: 0.25rem;
+ padding: var(--spacer-1) var(--spacer-2);
cursor: pointer;
+ text-align: center;
}
.metrics-table-body tr {
- border-bottom: $border-default;
+ border-bottom: 1px solid var(--bs-border-default);
- td:first-child {
- width: 50%;
+ &:nth-child(even) {
+ background-color: rgba(var(--bs-white-rgb), 0.05);
}
}
.metrics-table-body tr:hover {
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: var(--bs-black-alpha-50);
}
-.metrics-table-body td {
- padding: 0.25rem;
+.metrics-table-body,
+.metrics-table-footer {
+ td {
+ padding: var(--spacer-1) var(--spacer-2);
+ }
}
-.metrics-table-header-cell:first-child,
-.metrics-table-body td:first-child {
+.metrics-table-body td:first-child,
+.metrics-table-footer td:first-child {
text-align: left;
}
-.metrics-table-header-cell:not(:first-child),
-.metrics-table-body td:not(:first-child) {
+.metrics-table-body td:not(:first-child),
+.metrics-table-footer td:not(:first-child) {
text-align: right;
}
+.metrics-action {
+ display: flex;
+ align-items: center;
+ gap: var(--spacer-2);
+ white-space: initial;
+
+ .expand-toggle {
+ margin-left: auto;
+ }
+}
+
.metrics-action-icon {
@include wowhead-background-icon;
- height: 30px;
- width: 30px;
+ height: 24px;
+ width: 24px;
vertical-align: middle;
margin-right: 4px;
}
@@ -197,16 +255,70 @@
padding-left: 20px;
}
-.expand-toggle {
- margin-left: var(--spacer-1);
-}
-
tr:not(.parent-metric) .expand-toggle {
display: none;
}
-.parent-metric.expand .fa-caret-down {
+.parent-metric.expand .fa-caret-right,
+.parent-metric:not(.expand) .fa-caret-down {
display: none;
}
-.parent-metric:not(.expand) .fa-caret-right {
- display: none;
+
+.metrics-total {
+ --total-percentage-width: 7ch;
+ --total-amount-width: 7ch;
+ --total-bar-min-width: 50px;
+ min-width: calc(var(--total-percentage-width) + var(--total-amount-width) + var(--total-bar-min-width));
+}
+
+.metrics-total-percentage,
+.metrics-total-damage {
+ flex-shrink: 0;
+}
+.metrics-total-percentage {
+ width: var(--total-percentage-width);
+}
+
+.metrics-total-amount {
+ width: var(--total-amount-width);
+}
+
+.metrics-total-bar {
+ position: absolute;
+ left: var(--total-percentage-width);
+ right: var(--total-amount-width);
+ height: 100%;
+ flex-shrink: 1;
+ flex-grow: 1;
+ background-color: color-mix(in srgb, var(--bs-white) 5%, transparent);
+}
+
+.metrics-total-bar-fill {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: var(--percentage);
+ height: 100%;
+ background-color: currentColor;
+}
+
+.tippy-box[data-theme='metrics-table'] {
+ @include media-breakpoint-down(sm) {
+ max-width: 300px;
+ }
+
+ thead {
+ th {
+ padding-top: 0;
+ text-align: center;
+ }
+ }
+
+ tfoot {
+ tr:last-child {
+ td {
+ font-weight: var(--font-weight-medium);
+ padding-bottom: 0;
+ }
+ }
+ }
}
diff --git a/ui/scss/core/components/_icon_picker.scss b/ui/scss/core/components/_icon_picker.scss
index d1a390cf93..f993a10d9c 100644
--- a/ui/scss/core/components/_icon_picker.scss
+++ b/ui/scss/core/components/_icon_picker.scss
@@ -63,7 +63,7 @@
}
label {
- margin-left: map.get($spacers, 2);
+ margin-left: var(--spacer-2);
margin-bottom: 0;
}
diff --git a/ui/scss/core/components/_input.scss b/ui/scss/core/components/_input.scss
index db8fedae34..dec7980d15 100644
--- a/ui/scss/core/components/_input.scss
+++ b/ui/scss/core/components/_input.scss
@@ -24,7 +24,7 @@
align-items: center;
label {
- margin-right: map.get($spacers, 2);
+ margin-right: var(--spacer-2);
}
input:not(.form-check-input),
@@ -41,7 +41,7 @@
flex: 1;
&:not(:last-child) {
- margin-right: map.get($spacers, 3);
+ margin-right: var(--spacer-3);
}
}
}
diff --git a/ui/scss/core/components/_item_swap_picker.scss b/ui/scss/core/components/_item_swap_picker.scss
index a14af32e48..63f537a74e 100644
--- a/ui/scss/core/components/_item_swap_picker.scss
+++ b/ui/scss/core/components/_item_swap_picker.scss
@@ -16,7 +16,7 @@
margin-right: 0 !important;
&:not(:first-child) {
- margin-left: map-get($spacers, 1);
+ margin-left: var(--spacer-1);
}
}
}
diff --git a/ui/scss/core/components/_list_picker.scss b/ui/scss/core/components/_list_picker.scss
index 8eb74ef5b9..9522f2cef8 100644
--- a/ui/scss/core/components/_list_picker.scss
+++ b/ui/scss/core/components/_list_picker.scss
@@ -5,12 +5,12 @@
align-items: center;
&:not(:last-child) {
- margin-bottom: 2 * map.get($spacers, 3);
+ margin-bottom: calc(2 * var(--spacer-3));
}
.list-picker-title {
width: 100%;
- padding-bottom: map-get($spacers, 2);
+ padding-bottom: var(--spacer-2);
border-bottom: $border-default;
margin-bottom: var(--block-spacer);
font-size: 1rem;
@@ -21,7 +21,7 @@
width: 100%;
.list-picker-item-container {
- margin-bottom: map.get($spacers, 3);
+ margin-bottom: var(--spacer-3);
&.inline {
border: 0;
@@ -36,7 +36,7 @@
}
&:not(.inline) {
- padding: map.get($spacers, 3) map.get($spacers, 3) 0 map.get($spacers, 3);
+ padding: var(--spacer-3) var(--spacer-3) 0 var(--spacer-3);
border: 1px solid $link-color;
.list-picker-item-header {
@@ -59,7 +59,7 @@
}
.list-picker-item-action {
- margin-left: map.get($spacers, 2);
+ margin-left: var(--spacer-2);
}
}
}
diff --git a/ui/scss/core/components/_raid_sim_action.scss b/ui/scss/core/components/_raid_sim_action.scss
index 96ba2ed2b1..a5c6b11d90 100644
--- a/ui/scss/core/components/_raid_sim_action.scss
+++ b/ui/scss/core/components/_raid_sim_action.scss
@@ -1,5 +1,3 @@
-@use 'sass:map';
-
.results-pending .loader {
margin: auto;
}
@@ -10,34 +8,35 @@
.results-metric {
text-align: left;
}
+ .sim-sidebar & {
+ .results-sim-dps .topline-result-avg:after {
+ content: ' DPS';
+ }
+ .results-sim-tto .topline-result-avg:after {
+ content: ' TTO';
+ }
+ .results-sim-hps .topline-result-avg:after {
+ content: ' HPS';
+ }
+ .results-sim-tps .topline-result-avg:after {
+ content: ' TPS';
+ }
+ .results-sim-dtps .topline-result-avg:after {
+ content: ' DTPS';
+ }
+ .results-sim-tmi .topline-result-avg:after {
+ content: '% TMI';
+ }
+ .results-sim-cod .topline-result-avg:after {
+ content: '% Chance of Death';
+ }
+ .results-sim-dur .topline-result-avg:after {
+ content: ' Duration';
+ }
- .results-sim-dps .topline-result-avg:after {
- content: ' DPS';
- }
- .results-sim-dpasp .topline-result-avg:after {
- content: 'DPASP';
- }
- .results-sim-tto .topline-result-avg:after {
- content: ' TTO';
- }
- .results-sim-hps .topline-result-avg:after {
- content: ' HPS';
- }
- .results-sim-tps .topline-result-avg:after {
- content: ' TPS';
- }
- .results-sim-dtps .topline-result-avg:after {
- content: ' DTPS';
- }
- .results-sim-tmi .topline-result-avg:after {
- content: '% TMI';
- }
- .results-sim-cod .topline-result-avg:after {
- content: '% Chance of Death';
- }
-
- .results-sim-percent-oom .topline-result-avg:after {
- content: ' spent OOM';
+ .results-sim-percent-oom .topline-result-avg:after {
+ content: ' spent OOM';
+ }
}
[class^='results-sim-'],
@@ -59,7 +58,7 @@
}
.results-reference {
- margin-bottom: map.get($spacers, 2);
+ margin-bottom: var(--spacer-2);
font-weight: normal;
.results-reference-diff {
@@ -69,7 +68,7 @@
}
.results-sim-reference {
- margin-top: map.get($spacers, 2);
+ margin-top: var(--spacer-2);
font-weight: normal;
&.has-reference {
diff --git a/ui/scss/core/components/_saved_data_manager.scss b/ui/scss/core/components/_saved_data_manager.scss
index c7f9b2f14f..82eb1e2bff 100644
--- a/ui/scss/core/components/_saved_data_manager.scss
+++ b/ui/scss/core/components/_saved_data_manager.scss
@@ -59,13 +59,13 @@
}
.saved-data-set-name {
- padding: map.get($spacers, 2);
+ padding: var(--spacer-2);
color: $body-color;
}
.saved-data-set-delete {
- padding: map.get($spacers, 2) 0;
- margin-right: map.get($spacers, 2);
+ padding: var(--spacer-2) 0;
+ margin-right: var(--spacer-2);
color: $body-color;
}
}
diff --git a/ui/scss/core/components/_unit_picker.scss b/ui/scss/core/components/_unit_picker.scss
index dfd7f1e95d..9f7ea953bc 100644
--- a/ui/scss/core/components/_unit_picker.scss
+++ b/ui/scss/core/components/_unit_picker.scss
@@ -6,7 +6,7 @@
.unit-picker-item-icon {
width: var(--icon-size-sm);
height: var(--icon-size-sm);
- margin-right: map-get($spacers, 1);
+ margin-right: var(--spacer-1);
display: flex;
justify-content: center;
align-items: center;
diff --git a/ui/scss/core/components/detailed_results/_log_runner.scss b/ui/scss/core/components/detailed_results/_log_runner.scss
index a1bcec89f7..387f801003 100644
--- a/ui/scss/core/components/detailed_results/_log_runner.scss
+++ b/ui/scss/core/components/detailed_results/_log_runner.scss
@@ -38,11 +38,11 @@
vertical-align: bottom;
&:first-child {
- width: 6.5rem;
+ width: 10ch;
}
&:not(:first-child) {
- padding-left: 0;
+ width: auto;
}
}
.log-runner-logs {
@@ -56,6 +56,7 @@
td {
padding-top: var(--spacer-2);
padding-bottom: var(--spacer-2);
+ padding-left: var(--spacer-2);
}
.log-timestamp {
diff --git a/ui/scss/core/components/detailed_results/_player_damage.scss b/ui/scss/core/components/detailed_results/_player_damage.scss
index f6fdd4f3b0..44e6ef9154 100644
--- a/ui/scss/core/components/detailed_results/_player_damage.scss
+++ b/ui/scss/core/components/detailed_results/_player_damage.scss
@@ -2,8 +2,13 @@
cursor: pointer;
}
-.amount-header-cell, .amount-cell {
- text-align: center !important;
+.name-cell {
+ width: 250px;
+}
+
+.dps-cell {
+ max-width: 250px;
+ min-width: 80px;
}
.amount-cell {
@@ -11,7 +16,7 @@
align-items: center;
justify-content: space-between;
height: 35px;
- width: 600px;
+ width: auto;
margin: auto;
}
diff --git a/ui/scss/core/components/detailed_results/_topline_results.scss b/ui/scss/core/components/detailed_results/_topline_results.scss
index 846b312919..1a05478ff2 100644
--- a/ui/scss/core/components/detailed_results/_topline_results.scss
+++ b/ui/scss/core/components/detailed_results/_topline_results.scss
@@ -1,7 +1,21 @@
-@import "../raid_sim_action";
+@import '../raid_sim_action';
.topline-results-root {
- padding-bottom: 1rem;
- display: flex;
- justify-content: space-around;
+ padding-bottom: var(--gap-width);
+
+ .metrics-table {
+ width: max-content;
+ max-width: 100%;
+ width: 100%;
+ table-layout: fixed;
+ }
+ .metrics-table-body {
+ tr {
+ border-bottom: 0;
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+ }
}
diff --git a/ui/scss/core/components/individual_sim_ui/_apl_helpers.scss b/ui/scss/core/components/individual_sim_ui/_apl_helpers.scss
index 35d3ff2023..e8bc7f603e 100644
--- a/ui/scss/core/components/individual_sim_ui/_apl_helpers.scss
+++ b/ui/scss/core/components/individual_sim_ui/_apl_helpers.scss
@@ -2,7 +2,7 @@
display: inline-block;
width: var(--icon-size-sm);
height: var(--icon-size-sm);
- margin-right: map-get($spacers, 1);
+ margin-right: var(--spacer-1);
background-size: cover;
}
diff --git a/ui/scss/core/components/individual_sim_ui/_apl_rotation_picker.scss b/ui/scss/core/components/individual_sim_ui/_apl_rotation_picker.scss
index 30cb008dff..e2b56ce450 100644
--- a/ui/scss/core/components/individual_sim_ui/_apl_rotation_picker.scss
+++ b/ui/scss/core/components/individual_sim_ui/_apl_rotation_picker.scss
@@ -21,8 +21,8 @@
> * > .list-picker-item-container {
background-color: rgba(21, 23, 30, 0.8);
border: 1px solid var(--bs-primary) !important;
- padding: map-get($spacers, 2);
- margin-bottom: map-get($spacers, 2);
+ padding: var(--spacer-2);
+ margin-bottom: var(--spacer-2);
.list-picker-item-header {
align-items: flex-start;
@@ -34,7 +34,7 @@
}
.form-label {
- margin-right: map-get($spacers, 2);
+ margin-right: var(--spacer-2);
margin-bottom: 0;
}
}
@@ -71,7 +71,7 @@
margin: 0;
& > :not(:last-child) {
- margin-right: map-get($spacers, 2);
+ margin-right: var(--spacer-2);
}
.form-label {
@@ -103,7 +103,7 @@
margin: 0;
.apl-action-condition {
- margin-bottom: map-get($spacers, 2) !important;
+ margin-bottom: var(--spacer-2) !important;
}
.input-root {
@@ -112,7 +112,7 @@
border: none;
&:not(:last-child) {
- margin-right: map-get($spacers, 2);
+ margin-right: var(--spacer-2);
}
}
@@ -131,7 +131,7 @@
flex-wrap: wrap;
.apl-picker-builder-multi {
- padding-left: map-get($spacers, 2);
+ padding-left: var(--spacer-2);
border-left: 1px solid $border-color;
}
@@ -156,8 +156,8 @@
.list-picker-item-header {
order: 1;
- margin-left: map-get($spacers, 2) !important;
- line-height: map-get($spacers, 4);
+ margin-left: var(--spacer-2) !important;
+ line-height: var(--spacer-4);
}
}
}
diff --git a/ui/scss/core/components/individual_sim_ui/_cooldowns_picker.scss b/ui/scss/core/components/individual_sim_ui/_cooldowns_picker.scss
index c82bbd5c1d..43607f2e66 100644
--- a/ui/scss/core/components/individual_sim_ui/_cooldowns_picker.scss
+++ b/ui/scss/core/components/individual_sim_ui/_cooldowns_picker.scss
@@ -18,7 +18,7 @@
}
& > :not(:last-child) {
- margin-right: map.get($spacers, 2);
+ margin-right: var(--spacer-2);
}
.cooldown-picker-label {
diff --git a/ui/scss/core/components/individual_sim_ui/_rotation_tab.scss b/ui/scss/core/components/individual_sim_ui/_rotation_tab.scss
index 1210987874..c0141b5bbc 100644
--- a/ui/scss/core/components/individual_sim_ui/_rotation_tab.scss
+++ b/ui/scss/core/components/individual_sim_ui/_rotation_tab.scss
@@ -1,6 +1,6 @@
-@use "sass:map";
+@use 'sass:map';
-@import "./apl_rotation_picker";
+@import './apl_rotation_picker';
#rotation-tab {
&.rotation-type-auto {
@@ -49,7 +49,7 @@
.rotation-tab-apl {
display: none;
}
-
+
.enum-picker-selector,
.number-picker-input {
width: 8rem;
@@ -74,7 +74,7 @@
.rotation-settings {
flex: 1;
- margin-right: 2 * map.get($spacers, 3);
+ margin-right: calc(2 * var(--spacer-3));
}
.cooldown-settings {
@@ -87,5 +87,5 @@
.rotation-settings {
margin-right: 0;
}
- }
+ }
}
diff --git a/ui/scss/core/sim_ui/_shared.scss b/ui/scss/core/sim_ui/_shared.scss
index b791fba114..1aab6e0ab1 100644
--- a/ui/scss/core/sim_ui/_shared.scss
+++ b/ui/scss/core/sim_ui/_shared.scss
@@ -68,6 +68,9 @@ th {
}
.sim-ui--is-unlaunched {
+ .import-export {
+ display: none !important;
+ }
.sim-sidebar {
.sim-sidebar-actions > *:not(.sim-ui-unlaunched-container),
.sim-sidebar-results {
@@ -77,6 +80,8 @@ th {
}
.sim-ui-unlaunched-container {
+ max-width: 400px;
+
i {
color: var(--bs-danger);
}
@@ -109,27 +114,42 @@ th {
}
// TODO: Move these to an organized partial
-.hide-damage-metrics .damage-metrics {
- display: none !important;
+.hide-damage-metrics {
+ .damage-metrics-tab,
+ .damage-metrics {
+ display: none !important;
+ }
}
-.hide-threat-metrics .threat-metrics {
- display: none !important;
+.hide-threat-metrics {
+ .threat-metrics-tab,
+ .threat-metrics {
+ display: none !important;
+ }
}
-.hide-healing-metrics .healing-metrics {
- display: none !important;
+.hide-healing-metrics {
+ .healing-metrics-tab,
+ .healing-metrics {
+ display: none !important;
+ }
}
-.hide-experimental .experimental {
- display: none !important;
+.hide-experimental {
+ .experimental {
+ display: none !important;
+ }
}
-.hide-in-front-of-target .in-front-of-target {
- display: none !important;
+.hide-in-front-of-target {
+ .in-front-of-target {
+ display: none !important;
+ }
}
-.hide-ep-ratios .ep-ratios {
- display: none !important;
+.hide-ep-ratios {
+ .ep-ratios {
+ display: none !important;
+ }
}
// END TODO
diff --git a/ui/scss/homepage/_homepage.scss b/ui/scss/homepage/_homepage.scss
index ef78a522e8..fbc375df05 100644
--- a/ui/scss/homepage/_homepage.scss
+++ b/ui/scss/homepage/_homepage.scss
@@ -35,7 +35,7 @@
.wowsims-logo {
width: 6rem;
- margin-right: map.get($spacers, 3);
+ margin-right: var(--spacer-3);
}
.wowsims-title {
@@ -48,8 +48,8 @@
}
.homepage-header-collapse {
- padding-top: map.get($spacers, 3);
- padding-bottom: map.get($spacers, 3);
+ padding-top: var(--spacer-3);
+ padding-bottom: var(--spacer-3);
align-items: flex-end;
justify-content: flex-end;
}
@@ -125,8 +125,8 @@
}
.sim-links-container {
- margin-left: map.get($spacers, 3) * -1;
- margin-right: map.get($spacers, 3) * -1;
+ margin-left: calc(var(--spacer-3) * -1);
+ margin-right: calc(var(--spacer-3) * -1);
.sim-links {
margin-bottom: 0 !important;
@@ -156,8 +156,8 @@
.homepage-header-container,
.homepage-content-container,
.homepage-footer-container {
- padding-top: map.get($spacers, 3);
- padding-bottom: map.get($spacers, 3);
+ padding-top: var(--spacer-3);
+ padding-bottom: var(--spacer-3);
}
.homepage-header {
@@ -178,7 +178,7 @@
.homepage-content-container {
.info-container {
- margin-bottom: map.get($spacers, 3);
+ margin-bottom: var(--spacer-3);
}
.sim-links-container {
diff --git a/ui/scss/shared/_global.scss b/ui/scss/shared/_global.scss
index 71fa04839e..9f51283c2e 100644
--- a/ui/scss/shared/_global.scss
+++ b/ui/scss/shared/_global.scss
@@ -7,13 +7,13 @@
}
// 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) {
- --bs-body-font-size: 24px;
- }
+ // @media (min-width: map-get($grid-breakpoints, 1440p)) and (max-aspect-ratio: 16/9) {
+ // --bs-body-font-size: 20px;
+ // }
- @include media-breakpoint-up(4k) {
- --bs-body-font-size: 32px;
- }
+ // @include media-breakpoint-up(4k) {
+ // --bs-body-font-size: 24px;
+ // }
@include media-breakpoint-up(lg) {
--section-spacer: var(--section-spacer-lg) !important;
@@ -116,6 +116,12 @@ kbd {
color: var(--bs-white);
}
+.list-reset {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
.dragto:not(.dragfrom) {
filter: brightness(0.75);
}
@@ -145,12 +151,36 @@ kbd {
background-size: cover;
}
+.p-gap {
+ @extend .px-gap;
+ @extend .py-gap;
+}
+.pl-gap {
+ padding-left: var(--gap-width);
+}
+.pr-gap {
+ padding-right: var(--gap-width);
+}
+.pt-gap {
+ padding-top: var(--gap-width);
+}
+.pb-gap {
+ padding-bottom: var(--gap-width);
+}
+.px-gap {
+ @extend .pl-gap;
+ @extend .pr-gap;
+}
+.py-gap {
+ @extend .pt-gap;
+ @extend .pb-gap;
+}
+
@each $label, $value in $item-quality-colors {
.item-quality-#{$label} {
color: var(--bs-#{$label}) !important;
}
}
-
@each $label, $value in $resource-colors {
.resource-#{$label} {
color: var(--bs-#{$label}) !important;
@@ -166,6 +196,27 @@ kbd {
color: var(--bs-#{$label}) !important;
}
}
+@each $label, $value in $spell-school-colors {
+ .spell-school-#{$label} {
+ color: var(--bs-#{$label}) !important;
+ }
+ .bg-spell-school-#{$label} {
+ background: var(--bs-#{$label}) !important;
+ }
+}
+
+@each $label, $value in $multi-spell-school-colors {
+ .spell-school-#{$label} {
+ color: var(--bs-primary);
+ background-image: $value;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .bg-spell-school-#{$label} {
+ background: $value;
+ }
+}
[contenteditable='true']:active,
[contenteditable='true']:focus {
@@ -181,3 +232,9 @@ kbd {
width: 100%;
background: color-mix(in srgb, var(--bs-body-bg), var(--bs-white) 5%);
}
+
+.blurred {
+ filter: blur(2px);
+ overflow: hidden;
+ pointer-events: none;
+}
diff --git a/ui/scss/shared/_global_old.scss b/ui/scss/shared/_global_old.scss
index 76e99c07ae..8a0a666850 100644
--- a/ui/scss/shared/_global_old.scss
+++ b/ui/scss/shared/_global_old.scss
@@ -84,9 +84,9 @@ $sim-transitions: 0.2s ease-in;
.warning {
color: yellow;
text-shadow:
- 0 0 map-get($spacers, 2) $danger,
- 0 0 map-get($spacers, 2) $danger,
- 0 0 map-get($spacers, 2) $danger;
+ 0 0 var(--spacer-2) $danger,
+ 0 0 var(--spacer-2) $danger,
+ 0 0 var(--spacer-2) $danger;
}
.danger {
diff --git a/ui/scss/shared/_variables.scss b/ui/scss/shared/_variables.scss
index 2220706562..0e7640818c 100644
--- a/ui/scss/shared/_variables.scss
+++ b/ui/scss/shared/_variables.scss
@@ -39,6 +39,29 @@ $class-colors: (
);
$theme-colors: map-merge($theme-colors, $class-colors);
+$spell-school-colors: (
+ physical: #e5cc80,
+ arcane: #8ff2ff,
+ fire: #eb4561,
+ frost: #4a80ff,
+ holy: #ffff8f,
+ nature: #d1fa99,
+ shadow: #b8a8f0,
+);
+
+$multi-spell-school-colors: (
+ astral: linear-gradient(90deg, map-get($spell-school-colors, nature), map-get($spell-school-colors, arcane)),
+ shadowflame: linear-gradient(90deg, map-get($spell-school-colors, shadow), map-get($spell-school-colors, fire)),
+ spellfire: linear-gradient(90deg, map-get($spell-school-colors, fire), map-get($spell-school-colors, arcane)),
+ spellfrost: linear-gradient(90deg, map-get($spell-school-colors, arcane), map-get($spell-school-colors, frost)),
+ frostfire: linear-gradient(90deg, map-get($spell-school-colors, frost), map-get($spell-school-colors, fire)),
+ shadowfrost: linear-gradient(90deg, map-get($spell-school-colors, shadow), map-get($spell-school-colors, frost)),
+ chimeric: linear-gradient(90deg, map-get($spell-school-colors, arcane), map-get($spell-school-colors, fire), map-get($spell-school-colors, frost)),
+);
+
+$theme-colors: map-merge($theme-colors, $spell-school-colors);
+
+
$custom-colors: (
expansion: $expansion,
brand: $brand,
diff --git a/ui/scss/sims/raid/_player.scss b/ui/scss/sims/raid/_player.scss
index 4aff4d8d23..609f59744b 100644
--- a/ui/scss/sims/raid/_player.scss
+++ b/ui/scss/sims/raid/_player.scss
@@ -3,7 +3,7 @@
.player {
width: 100%;
height: 2.5rem;
- padding: calc(map-get($spacers, 1) - 1px) map-get($spacers, 1);
+ padding: calc(var(--spacer-1) - 1px) var(--spacer-1);
border: $border-default;
display: flex;
justify-content: space-between;
@@ -15,7 +15,7 @@
}
.player-label {
- margin-right: map-get($spacers, 2);
+ margin-right: var(--spacer-2);
display: flex;
align-items: center;
flex-grow: 1;
diff --git a/ui/scss/sims/raid/_raid_sim_ui.scss b/ui/scss/sims/raid/_raid_sim_ui.scss
index 41dd7022f9..0efa5e52c6 100644
--- a/ui/scss/sims/raid/_raid_sim_ui.scss
+++ b/ui/scss/sims/raid/_raid_sim_ui.scss
@@ -1,37 +1,37 @@
-@use "sass:map";
+@use 'sass:map';
-@import "./assignments_picker";
-@import "./blessings_picker";
+@import './assignments_picker';
+@import './blessings_picker';
@import './player';
@import './player_editor';
-@import "./raid_picker";
-@import "./raid_stats";
-@import "./tanks_picker";
+@import './raid_picker';
+@import './raid_stats';
+@import './tanks_picker';
-@import "./raid_tab";
-@import "./settings_tab";
+@import './raid_tab';
+@import './settings_tab';
.raid-settings-tab {
overflow-y: auto;
}
.raid-settings-sections {
- position: relative;
+ position: relative;
- .settings-section-container {
- position: absolute;
- margin-bottom: 2 * map.get($spacers, 3);
- margin-right: 2 * map.get($spacers, 3);
+ .settings-section-container {
+ position: absolute;
+ margin-bottom: calc(2 * var(--spacer-3));
+ margin-right: calc(2 * var(--spacer-3));
- .raid-encounter-section {
- .encounter-picker-root {
- flex-direction: column;
+ .raid-encounter-section {
+ .encounter-picker-root {
+ flex-direction: column;
- .picker-group {
- flex-direction: column;
- }
- }
- }
+ .picker-group {
+ flex-direction: column;
+ }
+ }
+ }
.consumes-section {
display: grid;
@@ -41,5 +41,5 @@
margin: 3px;
}
}
- }
+ }
}
diff --git a/ui/scss/sims/raid/_raid_stats.scss b/ui/scss/sims/raid/_raid_stats.scss
index 128a05029c..b80fd0ed6a 100644
--- a/ui/scss/sims/raid/_raid_stats.scss
+++ b/ui/scss/sims/raid/_raid_stats.scss
@@ -9,7 +9,7 @@
}
.raid-stats-section-content {
- padding: map.get($spacers, 2);
+ padding: var(--spacer-2);
border: $border-default;
display: grid;
grid-template-columns: repeat(4, 1fr);