Extending float-bar to market

csfloat · Nov 25, 2024 · c891946 · c891946
1 parent 27689f8
commit c891946
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 49 deletions.
diff --git 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`
-            <div class="market-float-bar-container" style="left: ${left}%; width: ${width}%;">
-                <div class="market-float-bar-marker" style="left: calc(${markerLeft}% - 2px);"></div>
-                <div style="height: 100%; border-radius: 4px; overflow: hidden">
-                    ${floatConditions.map(cond => {
-                        if (cond.max > (itemInfo.max * 100)) {
-                            return html`<div class="market-float-bar" style="width: 0%;"></div>`; 
-                        } else {
-                            return html`<div class="market-float-bar" style="width: ${(cond.max - cond.min) * 100 / dynamicWidth}%; background-color: ${cond.min < itemInfo.min ? "none" : cond.color};"></div>`;
-                        }
-                    })}
-                </div>
-            </div>
+            <float-bar
+                float=${this.itemInfo.floatvalue}
+                minFloat=${this.itemInfo.min}
+                maxFloat=${this.itemInfo.max}>
+            </float-bar>
         `;
     }
 

diff --git 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`
                 <div class="float-row-wrapper">
+                    ${this.renderFloatBar()}
                     Float: ${this.itemInfo.floatvalue.toFixed(14)} ${renderClickableRank(this.itemInfo)}<br />
                     Paint Seed:
                     ${formatSeed(this.itemInfo)}${fadePercentage !== undefined
@@ -178,4 +181,19 @@ export class ItemRowWrapper extends FloatElement {
             return html`<div>Loading...</div>`;
         }
     }
+
+
+    renderFloatBar(): TemplateResult<1> {
+        if (!this.itemInfo) {
+            return html``;
+        }
+
+        return html`
+            <float-bar
+                float=${this.itemInfo.floatvalue}
+                minFloat=${this.itemInfo.min}
+                maxFloat=${this.itemInfo.max}>
+            </float-bar>
+        `;
+    }
 }
diff --git a/src/lib/ui/floatbar.ts 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`
+            <div class="market-float-bar-container" style="left: ${left}%; width: ${dynamicWidth.toFixed(2)}%;">
+                <div style="height: 100%; border-radius: 4px; overflow: hidden; font-size: 0;">
+                    ${this.floatConditions.map((cond) => html`
+                        <div
+                            class="market-float-bar"
+                            style="width: ${((Math.min(cond.max, this.maxFloat * 100) -
+                                Math.max(cond.min, this.minFloat * 100)) *
+                                100) /
+                            dynamicWidth}%; background-color: ${cond.color};">
+                        </div>
+                    `)}
+                </div>
+                <div class="market-float-bar-marker" style="left: calc(${markerLeft}% - 2px);"></div>
+            </div>
+        `;
+    }
+}