StatDelta and ItemCompare
A StatDelta shows the change of a stat, as in the item compare of a game. It shows one arrow for a small change, and two or three arrows stacked on top of each other for a medium or large change. Green is better, red is worse, and grey is no change.
An ItemCompare is a table that compares the stats of the equipped item with the stats of a new item. Each row has a StatDelta.
How to add them:
<tb:StatDelta from="24" to="31" />
<tb:StatDelta from="12" to="6" higher-is-better="false" display="Both" />
<tb:ItemCompare name="compare" show-total="true" total-title="Sum of stats" />
var compare = root.Q<ItemCompare>("compare");
var iron = new[] { new ItemStat("Damage", 24), new ItemStat("Weight", 6, higherIsBetter: false) };
var rune = new[] { new ItemStat("Damage", 52), new ItemStat("Weight", 5, higherIsBetter: false),
new ItemStat("Fire damage", 12) }; // a row that only the new item has
compare.SetStats(iron, rune);
// Compare the item under the pointer
slot.RegisterCallback<PointerEnterEvent>(_ => compare.SetStats(equipped.Stats, item.Stats));
StatDelta
| Member | Description |
|---|---|
From (from), To (to) |
The value before and after the change. SetValues(from, to) sets both. |
Delta |
To minus From. |
HigherIsBetter (higher-is-better) |
True (the default) makes a larger value green. False makes a smaller value green, as for a weight or a cooldown. The arrows always point the way the value goes. |
DoubleAt (double-at) |
The change that shows two arrows (default 10). A smaller change shows one arrow. |
TripleAt (triple-at) |
The change that shows three arrows (default 25). |
Percent (percent) |
True (the default): DoubleAt and TripleAt are percents of From. False: they are values. |
Display (display) |
Arrows (the default), Number ("+7") or Both (the arrows, then "+7"). The number has the color of the arrows. |
Format (format) |
The .NET number format of the number (default "0.##"). |
Arrows |
The number of arrows: 0 for no change, else 1, 2 or 3. |
ShowsArrows |
True while the delta draws arrows: the display is not Number, and the value changes. |
IsBetter, IsWorse |
True when the change is good or bad. Both are false for no change. |
StatDelta.ArrowCount(from, to, doubleAt, tripleAt, percent) |
The number of arrows, with no element. |
- The delta draws the arrows with
Painter2Din its left padding, in the USScolor. The text of the label is the number only. No change shows=in the arrows display. - In percent mode, a change from 0 shows three arrows.
- A
StatDeltais aLabel. It takes no pointer events.
ItemCompare
| Member | Description |
|---|---|
SetStats(current, candidate) |
Compares two lists of ItemStat. Null or empty candidate shows the current values with no change. |
ItemStat(name, value, higherIsBetter, format) |
One stat of an item. Set higherIsBetter to false for a stat where less is better. |
Rows |
The rows: the stats of the current item, then the stats that only the candidate has. |
GetRow(name) |
The row of a stat, or null. A row has StatName, Current, Candidate (null when the item does not have the stat), CandidateCell and Delta. |
ShowTotal (show-total) |
Adds a total row. The total adds the values, and subtracts the values of a stat where less is better. TotalRow is the row. |
TotalTitle (total-title) |
The name of the total row (default "Total"). |
CurrentTitle (current-title), CandidateTitle (candidate-title) |
The column headers (default "Equipped" and "New"). |
ShowCurrent (show-current) |
Shows the column of the current values (default true). |
Display, DoubleAt, TripleAt, Percent |
The settings of the StatDelta of every row. |
- A stat that only the new item has gets a row with a dash for the current value. The change is from 0, so it is better.
- A stat that only the current item has gets a row with a dash for the new value. The change is to 0, so it is worse.
- The new value has the color of its arrows: green when it is better, red when it is worse.
SetStatsmakes the rows again. Call it when the pointer enters a slot, or when the focus goes to it.- In the UI Builder, an
ItemComparewithout stats shows three sample stats in a dashed outline. The sample does not show in Play mode or in a build, and the UI Builder does not save it to the UXML file.
Tips:
- Use the numbers display for players who want the exact change, and the arrows for a quick look. The
ItemCompareDemoscene has a field for this. - Put the
ItemComparein aCardor aHoverCard, next to the card of the equipped item.
Styling
| Class | Element |
|---|---|
tb-stat-delta |
The StatDelta: bold small text in --tb-color-text-muted. |
tb-stat-delta--better |
A good change, in --tb-color-success. |
tb-stat-delta--worse |
A bad change, in --tb-color-danger. |
tb-stat-delta--neutral |
No change. |
tb-stat-delta--arrows |
The delta while it draws arrows. Its padding-left (13 px) is the room for the arrows: 9 px for the arrows and 4 px before the number. |
tb-item-compare |
The table. |
tb-item-compare__header |
The header row with the column titles. |
tb-item-compare__row |
A row. |
tb-item-compare__name, __value, __current, __delta |
The cells: the name, a value, the current value and the change. |
tb-item-compare__value--better, --worse |
A new value that is better (--tb-color-success) or worse (--tb-color-danger) than the current value. |
tb-item-compare__row--added, --removed |
A stat that only the new item has (a green name), or that only the current item has (a grey italic name). |
tb-item-compare__total |
The total row, with a line above it. |
tb-item-compare--no-current |
The table with ShowCurrent off. It hides the current column. |
To show a good change in the accent color:
.tb-stat-delta--better { color: var(--tb-color-accent); }