From 27689f82acfc9162f7f44e2e5bf8b52970e241a8 Mon Sep 17 00:00:00 2001 From: GODrums Date: Wed, 20 Nov 2024 05:11:25 +0100 Subject: [PATCH 1/6] First floatbar design --- .../inventory/selected_item_info.ts | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/src/lib/components/inventory/selected_item_info.ts b/src/lib/components/inventory/selected_item_info.ts index 7317d03d..e94ebff3 100644 --- a/src/lib/components/inventory/selected_item_info.ts +++ b/src/lib/components/inventory/selected_item_info.ts @@ -52,6 +52,28 @@ export class SelectedItemInfo extends FloatElement { color: #ebebeb; text-decoration: none; } + + .market-float-bar-container { + position: relative; + width: 100%; + height: 8px; + margin: 5px 0; + } + + .market-float-bar-marker { + position: absolute; + background-color: #d9d9d9; + width: 3px; + top: -3px; + height: 14px; + border-radius: 4px; + } + + .market-float-bar { + display: inline-block; + vertical-align: top; + height: 100%; + } `, ]; @@ -101,6 +123,7 @@ export class SelectedItemInfo extends FloatElement { const containerChildren: TemplateResult[] = []; if (isSkin(this.asset.description) && this.itemInfo) { + containerChildren.push(this.renderFloatBar()); containerChildren.push( html`
Float: ${this.itemInfo.floatvalue.toFixed(14)} ${renderClickableRank(this.itemInfo)}
` ); @@ -130,6 +153,40 @@ export class SelectedItemInfo extends FloatElement { return html`
${containerChildren}
`; } + renderFloatBar(): TemplateResult<1> { + if (!this.itemInfo) { + return html``; + } + const itemInfo = this.itemInfo; + const left = (this.itemInfo.min * 100).toFixed(0); + const width = ((this.itemInfo.max - this.itemInfo.min) * 100).toFixed(0); + const markerLeft = (100 * this.itemInfo.floatvalue / (this.itemInfo.max - this.itemInfo.min)).toFixed(2); + + let dynamicWidth = (this.itemInfo.max - this.itemInfo.min) * 100; + const floatConditions = [ + { min: 0, max: 6, color: 'green' }, + { min: 6, max: 15, color: '#18a518' }, + { min: 15, max: 38, color: '#9acd32' }, + { min: 38, max: 45, color: '#cd5c5c' }, + { min: 45, max: 100, color: '#f92424' }, + ]; + + return html` +
+
+
+ ${floatConditions.map(cond => { + if (cond.max > (itemInfo.max * 100)) { + return html`
`; + } else { + return html`
`; + } + })} +
+
+ `; + } + renderFloatMarketListing(): TemplateResult<1> { if (!this.stallListing) { return html``; From c89194656420dc39d5ceaf8a19cc2f11b2022913 Mon Sep 17 00:00:00 2001 From: GODrums Date: Tue, 26 Nov 2024 00:37:34 +0100 Subject: [PATCH 2/6] Extending float-bar to market --- .../inventory/selected_item_info.ts | 55 ++------------ src/lib/components/market/item_row_wrapper.ts | 20 +++++- src/lib/ui/floatbar.ts | 72 +++++++++++++++++++ 3 files changed, 98 insertions(+), 49 deletions(-) create mode 100644 src/lib/ui/floatbar.ts diff --git a/src/lib/components/inventory/selected_item_info.ts b/src/lib/components/inventory/selected_item_info.ts index e94ebff3..65ffd926 100644 --- a/src/lib/components/inventory/selected_item_info.ts +++ b/src/lib/components/inventory/selected_item_info.ts @@ -18,6 +18,7 @@ import {Observe} from '../../utils/observers'; import {FetchStallResponse} from '../../bridge/handlers/fetch_stall'; import {gStallFetcher} from '../../services/stall_fetcher'; import {Contract} from '../../types/float_market'; +import '../../ui/floatbar'; /** * Why do we bind to iteminfo0 AND iteminfo1? @@ -52,28 +53,6 @@ export class SelectedItemInfo extends FloatElement { color: #ebebeb; text-decoration: none; } - - .market-float-bar-container { - position: relative; - width: 100%; - height: 8px; - margin: 5px 0; - } - - .market-float-bar-marker { - position: absolute; - background-color: #d9d9d9; - width: 3px; - top: -3px; - height: 14px; - border-radius: 4px; - } - - .market-float-bar { - display: inline-block; - vertical-align: top; - height: 100%; - } `, ]; @@ -157,33 +136,13 @@ export class SelectedItemInfo extends FloatElement { if (!this.itemInfo) { return html``; } - const itemInfo = this.itemInfo; - const left = (this.itemInfo.min * 100).toFixed(0); - const width = ((this.itemInfo.max - this.itemInfo.min) * 100).toFixed(0); - const markerLeft = (100 * this.itemInfo.floatvalue / (this.itemInfo.max - this.itemInfo.min)).toFixed(2); - - let dynamicWidth = (this.itemInfo.max - this.itemInfo.min) * 100; - const floatConditions = [ - { min: 0, max: 6, color: 'green' }, - { min: 6, max: 15, color: '#18a518' }, - { min: 15, max: 38, color: '#9acd32' }, - { min: 38, max: 45, color: '#cd5c5c' }, - { min: 45, max: 100, color: '#f92424' }, - ]; - + return html` -
-
-
- ${floatConditions.map(cond => { - if (cond.max > (itemInfo.max * 100)) { - return html`
`; - } else { - return html`
`; - } - })} -
-
+ + `; } diff --git a/src/lib/components/market/item_row_wrapper.ts b/src/lib/components/market/item_row_wrapper.ts index 1e7cd156..bfbdd041 100644 --- a/src/lib/components/market/item_row_wrapper.ts +++ b/src/lib/components/market/item_row_wrapper.ts @@ -1,4 +1,4 @@ -import {css, html, nothing} from 'lit'; +import {css, html, nothing, TemplateResult} from 'lit'; import {state} from 'lit/decorators.js'; import {CustomElement, InjectAppend, InjectionMode} from '../injectors'; @@ -13,6 +13,7 @@ import {gFilterService} from '../../services/filter'; import {AppId, ContextId, Currency} from '../../types/steam_constants'; import {defined} from '../../utils/checkers'; import {pickTextColour} from '../../utils/colours'; +import '../../ui/floatbar'; @CustomElement() @InjectAppend('#searchResultsRows .market_listing_row .market_listing_item_name_block', InjectionMode.CONTINUOUS) @@ -22,6 +23,7 @@ export class ItemRowWrapper extends FloatElement { css` .float-row-wrapper { margin-bottom: 5px; + max-width: max(50%, 400px); } `, ]; @@ -158,6 +160,7 @@ export class ItemRowWrapper extends FloatElement { return html`
+ ${this.renderFloatBar()} Float: ${this.itemInfo.floatvalue.toFixed(14)} ${renderClickableRank(this.itemInfo)}
Paint Seed: ${formatSeed(this.itemInfo)}${fadePercentage !== undefined @@ -178,4 +181,19 @@ export class ItemRowWrapper extends FloatElement { return html`
Loading...
`; } } + + + renderFloatBar(): TemplateResult<1> { + if (!this.itemInfo) { + return html``; + } + + return html` + + + `; + } } diff --git a/src/lib/ui/floatbar.ts b/src/lib/ui/floatbar.ts new file mode 100644 index 00000000..60d2432b --- /dev/null +++ b/src/lib/ui/floatbar.ts @@ -0,0 +1,72 @@ +import { LitElement, html, css, TemplateResult } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; + +@customElement('float-bar') +export class FloatBar extends LitElement { + @property({ type: Number }) float!: number; + @property({ type: Number }) minFloat = 0; + @property({ type: Number }) maxFloat = 1; + + static styles = css` + .market-float-bar-container { + position: relative; + width: 100%; + height: 8px; + margin: 5px 0; + } + + .market-float-bar-marker { + position: absolute; + background-color: #d9d9d9; + width: 3px; + top: -3px; + height: 14px; + border-radius: 4px; + } + + .market-float-bar { + display: inline-block; + vertical-align: top; + height: 100%; + opacity: 0.8; + } + + .market-float-bar:not([style*='background-color: transparent']):first-of-type { + border-radius: 4px 0 0 4px; + } + .market-float-bar:not([style*='background-color: transparent']):last-of-type { + border-radius: 0 4px 4px 0; + } + `; + + private readonly floatConditions = [ + {min: 0, max: 7, color: 'green'}, + {min: 7, max: 15, color: '#18a518'}, + {min: 15, max: 38, color: '#9acd32'}, + {min: 38, max: 45, color: '#cd5c5c'}, + {min: 45, max: 100, color: '#f92424'}, + ]; + + render(): TemplateResult { + const left = (this.minFloat * 100).toFixed(0); + const markerLeft = ((this.float - this.minFloat) * 100 / (this.maxFloat - this.minFloat)).toFixed(3); + const dynamicWidth = (this.maxFloat - this.minFloat) * 100; + + return html` +
+
+ ${this.floatConditions.map((cond) => html` +
+
+ `)} +
+
+
+ `; + } +} \ No newline at end of file From a43cbaf04323ab1892d99dfb73ea72e706549446 Mon Sep 17 00:00:00 2001 From: GODrums Date: Tue, 26 Nov 2024 00:44:56 +0100 Subject: [PATCH 3/6] chore: run prettier --- .../inventory/selected_item_info.ts | 7 +- src/lib/components/market/item_row_wrapper.ts | 12 +-- src/lib/ui/floatbar.ts | 86 ++++++++++--------- 3 files changed, 50 insertions(+), 55 deletions(-) diff --git a/src/lib/components/inventory/selected_item_info.ts b/src/lib/components/inventory/selected_item_info.ts index 65ffd926..abe57e3b 100644 --- a/src/lib/components/inventory/selected_item_info.ts +++ b/src/lib/components/inventory/selected_item_info.ts @@ -136,12 +136,9 @@ export class SelectedItemInfo extends FloatElement { if (!this.itemInfo) { return html``; } - + return html` - + `; } diff --git a/src/lib/components/market/item_row_wrapper.ts b/src/lib/components/market/item_row_wrapper.ts index bfbdd041..baddf97c 100644 --- a/src/lib/components/market/item_row_wrapper.ts +++ b/src/lib/components/market/item_row_wrapper.ts @@ -160,8 +160,8 @@ export class ItemRowWrapper extends FloatElement { return html`
- ${this.renderFloatBar()} - Float: ${this.itemInfo.floatvalue.toFixed(14)} ${renderClickableRank(this.itemInfo)}
+ ${this.renderFloatBar()} Float: ${this.itemInfo.floatvalue.toFixed(14)} + ${renderClickableRank(this.itemInfo)}
Paint Seed: ${formatSeed(this.itemInfo)}${fadePercentage !== undefined ? html`
@@ -182,17 +182,13 @@ export class ItemRowWrapper extends FloatElement { } } - renderFloatBar(): TemplateResult<1> { if (!this.itemInfo) { return html``; } - + return html` - + `; } diff --git a/src/lib/ui/floatbar.ts b/src/lib/ui/floatbar.ts index 60d2432b..966208c2 100644 --- a/src/lib/ui/floatbar.ts +++ b/src/lib/ui/floatbar.ts @@ -1,42 +1,42 @@ -import { LitElement, html, css, TemplateResult } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import {LitElement, html, css, TemplateResult} from 'lit'; +import {customElement, property} from 'lit/decorators.js'; @customElement('float-bar') export class FloatBar extends LitElement { - @property({ type: Number }) float!: number; - @property({ type: Number }) minFloat = 0; - @property({ type: Number }) maxFloat = 1; + @property({type: Number}) float!: number; + @property({type: Number}) minFloat = 0; + @property({type: Number}) maxFloat = 1; static styles = css` - .market-float-bar-container { - position: relative; - width: 100%; - height: 8px; - margin: 5px 0; - } + .market-float-bar-container { + position: relative; + width: 100%; + height: 8px; + margin: 5px 0; + } - .market-float-bar-marker { - position: absolute; - background-color: #d9d9d9; - width: 3px; - top: -3px; - height: 14px; - border-radius: 4px; - } + .market-float-bar-marker { + position: absolute; + background-color: #d9d9d9; + width: 3px; + top: -3px; + height: 14px; + border-radius: 4px; + } - .market-float-bar { - display: inline-block; - vertical-align: top; - height: 100%; - opacity: 0.8; - } + .market-float-bar { + display: inline-block; + vertical-align: top; + height: 100%; + opacity: 0.8; + } - .market-float-bar:not([style*='background-color: transparent']):first-of-type { - border-radius: 4px 0 0 4px; - } - .market-float-bar:not([style*='background-color: transparent']):last-of-type { - border-radius: 0 4px 4px 0; - } + .market-float-bar:not([style*='background-color: transparent']):first-of-type { + border-radius: 4px 0 0 4px; + } + .market-float-bar:not([style*='background-color: transparent']):last-of-type { + border-radius: 0 4px 4px 0; + } `; private readonly floatConditions = [ @@ -49,24 +49,26 @@ export class FloatBar extends LitElement { render(): TemplateResult { const left = (this.minFloat * 100).toFixed(0); - const markerLeft = ((this.float - this.minFloat) * 100 / (this.maxFloat - this.minFloat)).toFixed(3); + const markerLeft = (((this.float - this.minFloat) * 100) / (this.maxFloat - this.minFloat)).toFixed(3); const dynamicWidth = (this.maxFloat - this.minFloat) * 100; return html`
- ${this.floatConditions.map((cond) => html` -
-
- `)} + ${this.floatConditions.map( + (cond) => html` +
+ ` + )}
`; } -} \ No newline at end of file +} From e26fa152c6349c7f9a5bf581c611da437158182b Mon Sep 17 00:00:00 2001 From: GODrums Date: Tue, 26 Nov 2024 23:07:48 +0100 Subject: [PATCH 4/6] fix: style improvements according to review --- .../inventory/selected_item_info.ts | 2 +- src/lib/components/market/item_row_wrapper.ts | 5 +-- src/lib/ui/floatbar.ts | 33 ++++++++++++++----- 3 files changed, 29 insertions(+), 11 deletions(-) diff --git a/src/lib/components/inventory/selected_item_info.ts b/src/lib/components/inventory/selected_item_info.ts index abe57e3b..df7e8c51 100644 --- a/src/lib/components/inventory/selected_item_info.ts +++ b/src/lib/components/inventory/selected_item_info.ts @@ -133,7 +133,7 @@ export class SelectedItemInfo extends FloatElement { } renderFloatBar(): TemplateResult<1> { - if (!this.itemInfo) { + if (!this.itemInfo || !(this.itemInfo.floatvalue > 0)) { return html``; } diff --git a/src/lib/components/market/item_row_wrapper.ts b/src/lib/components/market/item_row_wrapper.ts index baddf97c..6e8c96cb 100644 --- a/src/lib/components/market/item_row_wrapper.ts +++ b/src/lib/components/market/item_row_wrapper.ts @@ -160,8 +160,9 @@ export class ItemRowWrapper extends FloatElement { return html`
- ${this.renderFloatBar()} Float: ${this.itemInfo.floatvalue.toFixed(14)} - ${renderClickableRank(this.itemInfo)}
+ ${this.renderFloatBar()} + Float: ${this.itemInfo.floatvalue.toFixed(14)} ${renderClickableRank(this.itemInfo)} +
Paint Seed: ${formatSeed(this.itemInfo)}${fadePercentage !== undefined ? html`
diff --git a/src/lib/ui/floatbar.ts b/src/lib/ui/floatbar.ts index 966208c2..bba36e99 100644 --- a/src/lib/ui/floatbar.ts +++ b/src/lib/ui/floatbar.ts @@ -1,4 +1,4 @@ -import {LitElement, html, css, TemplateResult} from 'lit'; +import {LitElement, html, css} from 'lit'; import {customElement, property} from 'lit/decorators.js'; @customElement('float-bar') @@ -31,10 +31,10 @@ export class FloatBar extends LitElement { opacity: 0.8; } - .market-float-bar:not([style*='background-color: transparent']):first-of-type { + .market-float-bar:first-of-type { border-radius: 4px 0 0 4px; } - .market-float-bar:not([style*='background-color: transparent']):last-of-type { + .market-float-bar:last-of-type { border-radius: 0 4px 4px 0; } `; @@ -47,11 +47,28 @@ export class FloatBar extends LitElement { {min: 45, max: 100, color: '#f92424'}, ]; - render(): TemplateResult { + get minFloatPercentage(): number { + return this.minFloat * 100; + } + + get maxFloatPercentage(): number { + return this.maxFloat * 100; + } + + render() { const left = (this.minFloat * 100).toFixed(0); const markerLeft = (((this.float - this.minFloat) * 100) / (this.maxFloat - this.minFloat)).toFixed(3); const dynamicWidth = (this.maxFloat - this.minFloat) * 100; + const getConditionWidth = (condMin: number, condMax: number) => { + return ( + Math.max( + 0, + (Math.min(condMax, this.maxFloatPercentage) - Math.max(condMin, this.minFloatPercentage)) * 100 + ) / dynamicWidth + ); + }; + return html`
@@ -59,10 +76,10 @@ export class FloatBar extends LitElement { (cond) => html`
` )} From 1e4f2f8ce37f88be116ec989ae8b6a373ecc91f6 Mon Sep 17 00:00:00 2001 From: GODrums Date: Tue, 26 Nov 2024 23:36:55 +0100 Subject: [PATCH 5/6] Simplify calculation further --- src/lib/ui/floatbar.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/ui/floatbar.ts b/src/lib/ui/floatbar.ts index bba36e99..2862282d 100644 --- a/src/lib/ui/floatbar.ts +++ b/src/lib/ui/floatbar.ts @@ -56,9 +56,9 @@ export class FloatBar extends LitElement { } render() { - const left = (this.minFloat * 100).toFixed(0); + const left = this.minFloatPercentage.toFixed(0); const markerLeft = (((this.float - this.minFloat) * 100) / (this.maxFloat - this.minFloat)).toFixed(3); - const dynamicWidth = (this.maxFloat - this.minFloat) * 100; + const dynamicWidth = this.maxFloatPercentage - this.minFloatPercentage; const getConditionWidth = (condMin: number, condMax: number) => { return ( From fe2746ee228cb0ba90173ad16391f11f1ceafa8e Mon Sep 17 00:00:00 2001 From: Armin Stanitzok <21990230+GODrums@users.noreply.github.com> Date: Wed, 27 Nov 2024 00:24:50 +0100 Subject: [PATCH 6/6] fix: simplify float check Co-authored-by: Step7750 --- src/lib/components/inventory/selected_item_info.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/inventory/selected_item_info.ts b/src/lib/components/inventory/selected_item_info.ts index df7e8c51..7ad8c450 100644 --- a/src/lib/components/inventory/selected_item_info.ts +++ b/src/lib/components/inventory/selected_item_info.ts @@ -133,7 +133,7 @@ export class SelectedItemInfo extends FloatElement { } renderFloatBar(): TemplateResult<1> { - if (!this.itemInfo || !(this.itemInfo.floatvalue > 0)) { + if (!this.itemInfo || !this.itemInfo.floatvalue) { return html``; }