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

Visualize Item Floats in a Floatbar (Market + Inventory) #274

Merged
merged 6 commits into from
Nov 26, 2024

Conversation

GODrums
Copy link
Collaborator

@GODrums GODrums commented Nov 26, 2024

Motivation

Floats can be a pretty confusing concept at first glance. To illustrate the basics of low/high-floats, we want to introduce a float-bar, which visualizes an item's float according to all possible values in a colored bar.
Solves #9.

Description

This PR contains a new float-bar component:

  • New UI-Component: FloatBar (LitElement) inspired by the floatbar on the CSFloat website:
    • Can be re-used as HTML-element in any component: <float-bar></float-bar>
    • Bar is limited according to provided min/max-float values
    • White marker at the actual item float
    • Opacity of 0.8 to adjust color-spectrum to Steam's "dark theme"
  • Adds FloatBar to inventory-page
  • Adds FloatBar to market-page and limits its width in a responsive manner

Possible follow-ups:

  • Tooltip with more "details" such as the min/max floats in text format
  • Actual Float as "hover" above the float-marker

Screenshots

Floatbar in the inventory:
image
Floatbar on the market:
image
Floatbar on the market (mobile):
image

@GODrums GODrums requested a review from Step7750 November 26, 2024 00:01
@GODrums GODrums self-assigned this Nov 26, 2024
@GODrums GODrums linked an issue Nov 26, 2024 that may be closed by this pull request
8 tasks
Copy link
Member

@Step7750 Step7750 left a comment

Choose a reason for hiding this comment

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

Thanks @GODrums, looks great!

Left a few code-style comments, nits are optional. The tooltip with details such as min/max float would be cool, but it'd probably a decent amount of work to make a re-usable tooltip system -- your choice whether you want to implement that in a follow up!

src/lib/components/inventory/selected_item_info.ts Outdated Show resolved Hide resolved
src/lib/components/market/item_row_wrapper.ts Outdated Show resolved Hide resolved
src/lib/ui/floatbar.ts Outdated Show resolved Hide resolved
src/lib/ui/floatbar.ts Outdated Show resolved Hide resolved
@GODrums GODrums requested a review from Step7750 November 26, 2024 22:10
@GODrums GODrums merged commit e18a074 into master Nov 26, 2024
2 checks passed
@GODrums GODrums deleted the 272-visualize-an-items-float-in-a-float-bar branch November 26, 2024 23:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Visualize an item's float in a float-bar
2 participants