Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Item Popup stat bars display revamp #10821

Merged
merged 6 commits into from
Dec 2, 2024
Merged

Item Popup stat bars display revamp #10821

merged 6 commits into from
Dec 2, 2024

Conversation

chainrez
Copy link
Contributor

@chainrez chainrez commented Dec 1, 2024

Currently, stat bars are made up of multiple segments, each with its own tooltip, some difficult to aim a mouse at.
image

image


This PR

  • Eases the interaction by making the whole bar a single tooltip target.
  • Adds sub-segmentation to represent stat changes from weapon parts (barrels, magazines, etc)
  • Adds red negative segments (when there's room) representing stat loss.
  • Changes the tooltip to name/explain all the segments at once.

image

image

image

image

@@ -2,7 +2,7 @@
* Given a value 0-1, returns a string describing it as a percentage from 0-100
*/
export function percent(val: number): string {
return `${Math.min(100, Math.floor(100 * val))}%`;
return `${Math.min(100, Math.floor((1000 * val) / 10))}%`;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fixed a JS rounding issue. .29 would become 28%.

Copy link
Contributor

@bhollis bhollis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The updated UI looks great. I haven't checked the code but i'm sure it's fine.

@chainrez chainrez merged commit 8ba5d47 into master Dec 2, 2024
7 checks passed
@chainrez chainrez deleted the stat-bars-revamp branch December 2, 2024 22:52
opacity: 0.8;
}

.tooltipNetStat {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As a general rule, we don't need to nest selectors unless they have different properties when nested and when un-nested. Otherwise, since they're always uniquely-named, they won't ever conflict with anything else.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair in tooltipNetStat, though some of these simpler class names like "negative" "mod" etc are doing double duty with nesting as bar colors and text colors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants