Merge pull request #266 from csfloat/feature/charm-info

Shows Pattern for Unapplied Charms on SCM and Inventory
csfloat · Nov 5, 2024 · 849a246 · 849a246
2 parents 3ed6053 + a344152
commit 849a246
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 38 deletions.
diff --git a/src/lib/bridge/handlers/fetch_inspect_info.ts b/src/lib/bridge/handlers/fetch_inspect_info.ts
@@ -10,8 +10,13 @@ interface Sticker {
     wear?: number;
 }
 
+interface Keychain extends Sticker {
+    pattern: number;
+}
+
 export interface ItemInfo {
     stickers: Sticker[];
+    keychains: Keychain[];
     itemid: string;
     defindex: number;
     paintindex: number;

diff --git a/src/lib/components/common/item_holder_metadata.ts b/src/lib/components/common/item_holder_metadata.ts
@@ -4,7 +4,7 @@ import {state} from 'lit/decorators.js';
 import {rgAsset} from '../../types/steam';
 import {gFloatFetcher} from '../../services/float_fetcher';
 import {ItemInfo} from '../../bridge/handlers/fetch_inspect_info';
-import {formatFloatWithRank, formatSeed, getFadePercentage, getLowestRank} from '../../utils/skin';
+import {formatFloatWithRank, formatSeed, getFadePercentage, getLowestRank, isCharm} from '../../utils/skin';
 import {isSkin, floor} from '../../utils/skin';
 import {getRankColour} from '../../utils/ranks';
 import {Observe} from '../../utils/observers';
@@ -67,29 +67,41 @@ export abstract class ItemHolderMetadata extends FloatElement {
     }
 
     protected render(): HTMLTemplateResult {
-        if (!this.itemInfo) return html``;
+        if (!this.itemInfo || !this.asset) return html``;
 
-        const fadePercentage = this.asset && getFadePercentage(this.asset, this.itemInfo);
+        if (isSkin(this.asset)) {
+            const fadePercentage = this.asset && getFadePercentage(this.asset, this.itemInfo);
 
-        if (fadePercentage === 100) {
-            $J(this).parent().addClass('full-fade-border');
-        }
+            if (fadePercentage === 100) {
+                $J(this).parent().addClass('full-fade-border');
+            }
 
-        const rank = getLowestRank(this.itemInfo);
-
-        return html`
-            <span>
-                <span class="float">${formatFloatWithRank(this.itemInfo, 6)}</span>
-                <span class="seed"
-                    >${formatSeed(this.itemInfo)}
-                    ${fadePercentage !== undefined
-                        ? html`<span class="fade ${rank && rank <= 5 ? 'csfloat-shine-fade-text' : ''}"
-                              >(${floor(fadePercentage, 1)}%)</span
-                          >`
-                        : nothing}</span
-                >
-            </span>
-        `;
+            const rank = getLowestRank(this.itemInfo);
+
+            return html`
+                <span>
+                    <span class="float">${formatFloatWithRank(this.itemInfo, 6)}</span>
+                    <span class="seed"
+                        >${formatSeed(this.itemInfo)}
+                        ${fadePercentage !== undefined
+                            ? html`<span class="fade ${rank && rank <= 5 ? 'csfloat-shine-fade-text' : ''}"
+                                  >(${floor(fadePercentage, 1)}%)</span
+                              >`
+                            : nothing}</span
+                    >
+                </span>
+            `;
+        } else if (isCharm(this.asset)) {
+            return html`
+                <span>
+                    <span class="seed"
+                        >#${this.itemInfo.keychains?.length > 0 ? this.itemInfo.keychains[0].pattern : 'NA'}</span
+                    >
+                </span>
+            `;
+        } else {
+            return html``;
+        }
     }
 
     async connectedCallback() {
@@ -114,7 +126,7 @@ export abstract class ItemHolderMetadata extends FloatElement {
     async onInit() {
         if (!this.asset) return;
 
-        if (!isSkin(this.asset)) return;
+        if (!isSkin(this.asset) && !isCharm(this.asset)) return;
 
         // Commodities won't have inspect links
         if (!this.inspectLink) return;

diff --git a/src/lib/components/inventory/selected_item_info.ts b/src/lib/components/inventory/selected_item_info.ts
@@ -5,7 +5,7 @@ import {state} from 'lit/decorators.js';
 import {InventoryAsset} from '../../types/steam';
 import {gFloatFetcher} from '../../services/float_fetcher';
 import {ItemInfo} from '../../bridge/handlers/fetch_inspect_info';
-import {formatSeed, getFadePercentage, isSkin, renderClickableRank, floor} from '../../utils/skin';
+import {formatSeed, getFadePercentage, isSkin, renderClickableRank, floor, isCharm} from '../../utils/skin';
 import {Observe} from '../../utils/observers';
 import {FetchStallResponse} from '../../bridge/handlers/fetch_stall';
 import {gStallFetcher} from '../../services/stall_fetcher';
@@ -86,20 +86,33 @@ export class SelectedItemInfo extends FloatElement {
             return html`<div>Loading...</div>`;
         }
 
-        if (!this.itemInfo) {
+        if (!this.itemInfo || !this.asset?.description) {
             return html``;
         }
 
-        const fadePercentage = this.asset && getFadePercentage(this.asset.description, this.itemInfo);
-
-        return html`
-            <div class="container">
-                <div>Float: ${this.itemInfo.floatvalue.toFixed(14)} ${renderClickableRank(this.itemInfo)}</div>
-                <div>Paint Seed: ${formatSeed(this.itemInfo)}</div>
-                ${fadePercentage !== undefined ? html`<div>Fade: ${floor(fadePercentage, 5)}%</div>` : nothing}
-                ${this.renderListOnCSFloat()} ${this.renderFloatMarketListing()}
-            </div>
-        `;
+        if (isSkin(this.asset.description)) {
+            const fadePercentage = this.asset && getFadePercentage(this.asset.description, this.itemInfo);
+
+            return html`
+                <div class="container">
+                    <div>Float: ${this.itemInfo.floatvalue.toFixed(14)} ${renderClickableRank(this.itemInfo)}</div>
+                    <div>Paint Seed: ${formatSeed(this.itemInfo)}</div>
+                    ${fadePercentage !== undefined ? html`<div>Fade: ${floor(fadePercentage, 5)}%</div>` : nothing}
+                    ${this.renderListOnCSFloat()} ${this.renderFloatMarketListing()}
+                </div>
+            `;
+        } else if (isCharm(this.asset.description)) {
+            return html`
+                <div class="container">
+                    <div>
+                        Pattern:
+                        #${this.itemInfo.keychains?.length > 0 ? this.itemInfo.keychains[0].pattern : 'Unknown'}
+                    </div>
+                </div>
+            `;
+        } else {
+            return html``;
+        }
     }
 
     renderFloatMarketListing(): TemplateResult<1> {
@@ -147,7 +160,7 @@ export class SelectedItemInfo extends FloatElement {
 
         if (!this.asset) return;
 
-        if (!isSkin(this.asset.description)) return;
+        if (!isSkin(this.asset.description) && !isCharm(this.asset.description)) return;
 
         // Commodities won't have inspect links
         if (!this.inspectLink) return;

diff --git a/src/lib/components/market/item_row_wrapper.ts b/src/lib/components/market/item_row_wrapper.ts
@@ -8,7 +8,7 @@ import {rgAsset, ListingData} from '../../types/steam';
 import {gFloatFetcher} from '../../services/float_fetcher';
 import {ItemInfo} from '../../bridge/handlers/fetch_inspect_info';
 import {getMarketInspectLink, inlineEasyInspect, inlineStickers} from './helpers';
-import {formatSeed, getFadePercentage, isSkin, renderClickableRank, floor} from '../../utils/skin';
+import {formatSeed, getFadePercentage, isSkin, renderClickableRank, floor, isCharm} from '../../utils/skin';
 import {gFilterService} from '../../services/filter';
 import {AppId, ContextId, Currency} from '../../types/steam_constants';
 import {defined} from '../../utils/checkers';
@@ -145,11 +145,15 @@ export class ItemRowWrapper extends FloatElement {
             return html``;
         }
 
-        if (this.asset && !isSkin(this.asset)) {
+        if (!this.asset) {
             return nothing;
         }
 
-        if (this.itemInfo) {
+        if (this.asset && !isSkin(this.asset) && !isCharm(this.asset)) {
+            return nothing;
+        }
+
+        if (this.itemInfo && isSkin(this.asset)) {
             const fadePercentage = this.asset && getFadePercentage(this.asset, this.itemInfo);
 
             return html`
@@ -162,6 +166,12 @@ export class ItemRowWrapper extends FloatElement {
                         : nothing}
                 </div>
             `;
+        } else if (this.itemInfo && isCharm(this.asset)) {
+            return html`
+                <div class="float-row-wrapper">
+                    Pattern: #${this.itemInfo.keychains?.length > 0 ? this.itemInfo.keychains[0].pattern : 'Unknown'}
+                </div>
+            `;
         } else if (this.error) {
             return html`<div style="color: orangered">CSFloat ${this.error}</div>`;
         } else {

diff --git a/src/lib/utils/skin.ts b/src/lib/utils/skin.ts
@@ -112,6 +112,19 @@ export function isSkin(asset: rgAsset): boolean {
           );
 }
 
+export function isCharm(asset: rgAsset): boolean {
+    if (asset.market_hash_name.startsWith('Charm')) {
+        // Tags aren't available on SCM items, so use a MHN heuristic instead
+        return true;
+    }
+
+    if (!asset.tags) {
+        return false;
+    }
+
+    return asset.tags.some((e) => e.category === 'Type' && e.internal_name === 'CSGO_Tool_Keychain');
+}
+
 export function getFadeCalculatorAndSupportedWeapon(
     asset: rgAsset
 ): [typeof FadeCalculator | typeof AcidFadeCalculator | typeof AmberFadeCalculator, string] | undefined {