Gradients for Acid / Amber Fades (#311)

* Add gradients for Acid / Amber Fades

* Rework fade function structure

* chore: run prettier

* refactor: update variable naming

Author: GODrums

src/lib/components/common/item_holder_metadata.ts

@@ -32,13 +32,24 @@ export abstract class ItemHolderMetadata extends FloatElement {
                 font-size: 12px;
             }
 
-            .fade {
-                background: -webkit-linear-gradient(0deg, #d9bba5 0%, #e5903b 33%, #db5977 66%, #6775e1 100%);
+            .fade-base {
                 -webkit-background-clip: text;
                 background-clip: text;
                 -webkit-text-fill-color: transparent;
             }
 
+            .fade {
+                background-image: -webkit-linear-gradient(0deg, #d9bba5 0%, #e5903b 33%, #db5977 66%, #6775e1 100%);
+            }
+
+            .amber-fade {
+                background-image: -webkit-linear-gradient(0deg, #627d66 0%, #896944 50%, #7e4201 100%);
+            }
+
+            .acid-fade {
+                background-image: -webkit-linear-gradient(0deg, #2b441b 0%, #3e6b2f 11%, #82a64a 66%, #c1a16c 100%);
+            }
+
             .csfloat-shine-fade-text {
                 font-weight: 1000;
                 -webkit-text-stroke: 1px black;
@@ -81,9 +92,9 @@ export abstract class ItemHolderMetadata extends FloatElement {
         if (!this.itemInfo || !this.asset) return html``;
 
         if (isSkin(this.asset)) {
-            const fadePercentage = this.asset && getFadePercentage(this.asset, this.itemInfo);
+            const fadeDetails = this.asset && getFadePercentage(this.asset, this.itemInfo);
 
-            if (fadePercentage === 100) {
+            if (fadeDetails?.percentage === 100) {
                 $J(this).parent().addClass('full-fade-border');
             }
 
@@ -94,9 +105,12 @@ export abstract class ItemHolderMetadata extends FloatElement {
                     <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
+                        ${fadeDetails !== undefined
+                            ? html`<span
+                                  class="fade-base ${fadeDetails.className} ${rank && rank <= 5
+                                      ? 'csfloat-shine-fade-text'
+                                      : ''}"
+                                  >(${floor(fadeDetails.percentage, 1)}%)</span
                               >`
                             : nothing}
                         ${this.bluegemData

src/lib/components/inventory/selected_item_info.ts

@@ -115,7 +115,7 @@ export class SelectedItemInfo extends FloatElement {
             containerChildren.push(html`<div>Paint Seed: ${formatSeed(this.itemInfo)}</div>`);
 
             // Fade skins
-            const fadePercentage = getFadePercentage(this.asset.description, this.itemInfo);
+            const fadePercentage = getFadePercentage(this.asset.description, this.itemInfo)?.percentage;
             if (fadePercentage !== undefined) {
                 containerChildren.push(html`<div>Fade: ${floor(fadePercentage, 5)}%</div>`);
             }

src/lib/components/market/item_row_wrapper.ts

@@ -222,7 +222,7 @@ export class ItemRowWrapper extends FloatElement {
         }
 
         if (this.itemInfo && isSkin(this.asset)) {
-            const fadePercentage = this.asset && getFadePercentage(this.asset, this.itemInfo);
+            const fadePercentage = this.asset && getFadePercentage(this.asset, this.itemInfo)?.percentage;
 
             return html`
                 <div class="float-row-wrapper">

src/lib/components/market/sort_listings.ts

@@ -6,7 +6,7 @@ import {state} from 'lit/decorators.js';
 import {gFloatFetcher} from '../../services/float_fetcher';
 import {getMarketInspectLink} from './helpers';
 import {ItemInfo} from '../../bridge/handlers/fetch_inspect_info';
-import {getFadeCalculatorAndSupportedWeapon, getFadePercentage} from '../../utils/skin';
+import {getFadeParams, getFadePercentage} from '../../utils/skin';
 import {AppId, ContextId} from '../../types/steam_constants';
 
 enum SortType {
@@ -39,7 +39,7 @@ export class SortListings extends FloatElement {
 
         const asset = g_rgAssets[AppId.CSGO][ContextId.PRIMARY][listingInfo.asset.id];
 
-        return getFadeCalculatorAndSupportedWeapon(asset) !== undefined;
+        return getFadeParams(asset) !== undefined;
     }
 
     computeButtonText(sortType: SortType): string {
@@ -129,7 +129,7 @@ export class SortListings extends FloatElement {
                     info,
                     listingId: listingId!,
                     converted_price: listingInfo?.converted_price || 0,
-                    fadePercentage: (asset && getFadePercentage(asset, info)) || 0,
+                    fadePercentage: (asset && getFadePercentage(asset, info)?.percentage) || 0,
                 };
             });
 

src/lib/utils/skin.ts

@@ -163,9 +163,13 @@ export function isBlueSkin(itemInfo: ItemInfo): boolean {
     );
 }
 
-export function getFadeCalculatorAndSupportedWeapon(
-    asset: rgAsset
-): [typeof FadeCalculator | typeof AcidFadeCalculator | typeof AmberFadeCalculator, string] | undefined {
+export function getFadeParams(asset: rgAsset):
+    | {
+          calculator: typeof FadeCalculator | typeof AcidFadeCalculator | typeof AmberFadeCalculator;
+          weaponName: string;
+          className: string;
+      }
+    | undefined {
     const FADE_TYPE_TO_CALCULATOR = {
         Fade: FadeCalculator,
         'Acid Fade': AcidFadeCalculator,
@@ -175,19 +179,29 @@ export function getFadeCalculatorAndSupportedWeapon(
     for (const [fadeType, calculator] of Object.entries(FADE_TYPE_TO_CALCULATOR)) {
         for (const supportedWeapon of calculator.getSupportedWeapons()) {
             if (asset.market_hash_name.includes(`${supportedWeapon} | ${fadeType}`)) {
-                return [calculator, supportedWeapon.toString()];
+                return {
+                    calculator,
+                    weaponName: supportedWeapon.toString(),
+                    className: fadeType.replace(' ', '-').toLowerCase(),
+                };
             }
         }
     }
 }
 
-export function getFadePercentage(asset: rgAsset, itemInfo: ItemInfo): number | undefined {
-    const fadeCalculatorAndSupportedWeapon = getFadeCalculatorAndSupportedWeapon(asset);
+export function getFadePercentage(
+    asset: rgAsset,
+    itemInfo: ItemInfo
+): {percentage: number; className: string} | undefined {
+    const fadeInfo = getFadeParams(asset);
 
-    if (fadeCalculatorAndSupportedWeapon !== undefined) {
-        const [calculator, supportedWeapon] = fadeCalculatorAndSupportedWeapon;
+    if (fadeInfo !== undefined) {
+        const {calculator, weaponName, className} = fadeInfo;
 
-        return calculator.getFadePercentage(supportedWeapon, itemInfo.paintseed).percentage;
+        return {
+            percentage: calculator.getFadePercentage(weaponName, itemInfo.paintseed).percentage,
+            className,
+        };
     }
 }