Market Comparison feature

GODrums · Feb 22, 2025 · 7f11b45 · 7f11b45
1 parent df4830a
commit 7f11b45
Show file tree

Hide file tree

Showing 20 changed files with 425 additions and 96 deletions.
diff --git a/assets/logos/skinbid.svg b/assets/logos/skinbid.svg
diff --git a/assets/screenshots/youpin-buyorder-example.png b/assets/screenshots/youpin-buyorder-example.png
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "betterfloat",
 	"displayName": "BetterFloat",
-	"version": "3.0.16",
+	"version": "3.1.0",
 	"description": "Enhance your website experience on 9+ CS2 skin markets!",
 	"author": "Rums",
 	"license": "CC BY NC SA 4.0",

diff --git a/src/contents/csfloat_script.ts b/src/contents/csfloat_script.ts
@@ -1622,7 +1622,8 @@ async function addBuffPrice(
 		source === MarketSource.Steam ||
 		(source === MarketSource.C5Game && priceListing) ||
 		(source === MarketSource.YouPin && priceListing) ||
-		(source === MarketSource.CSFloat && priceListing);
+		(source === MarketSource.CSFloat && priceListing) ||
+		(source === MarketSource.CSMoney && priceListing);
 
 	if (priceContainer && !container.querySelector('.betterfloat-buffprice') && popout !== POPOUT_ITEM.SIMILAR && itemExists) {
 		const buffContainer = generatePriceLine({

diff --git a/src/contents/skinbid_script.ts b/src/contents/skinbid_script.ts
@@ -3,7 +3,7 @@ import Decimal from 'decimal.js';
 
 import { activateHandler, initPriceMapping } from '~lib/handlers/eventhandler';
 import { getItemPrice, getMarketID, loadMapping } from '~lib/handlers/mappinghandler';
-import { ICON_ARROWUP_SMALL, ICON_BUFF, ICON_C5GAME, ICON_CAMERA, ICON_CLOCK, ICON_CSFLOAT, ICON_STEAM, ICON_YOUPIN, MarketSource } from '~lib/util/globals';
+import { AvailableMarketSources, ICON_ARROWUP_SMALL, ICON_BUFF, ICON_CAMERA, ICON_CLOCK, ICON_CSFLOAT, MarketSource } from '~lib/util/globals';
 import {
 	CurrencyFormatter,
 	calculateEpochFromDate,
@@ -604,39 +604,20 @@ function generateBuffContainer(
 	source: MarketSource,
 	isItemPage = false
 ) {
-	let icon = '';
-	let iconStyle = 'height: 20px; margin-right: 5px;';
-	let containerStyle = '';
-	if (source === MarketSource.Buff) {
-		icon = ICON_BUFF;
-		iconStyle += 'border: 1px solid #323c47;';
-	} else if (source === MarketSource.Steam) {
-		icon = ICON_STEAM;
-	} else if (source === MarketSource.C5Game) {
-		icon = ICON_C5GAME;
-		iconStyle += 'border: 1px solid #323c47;';
-		containerStyle = 'justify-content: flex-start;';
-	} else if (source === MarketSource.YouPin) {
-		icon = ICON_YOUPIN;
-		iconStyle += 'border: 1px solid #323c47;';
-		containerStyle = 'justify-content: flex-start;';
-	} else if (source === MarketSource.CSFloat) {
-		icon = ICON_CSFLOAT;
-		iconStyle += 'border: 1px solid #323c47;';
-		containerStyle = 'justify-content: flex-start;';
-	}
+	const { logo: icon, style: iconStyle } = AvailableMarketSources.find((s) => s.source === source) ?? { logo: '', style: '' };
+	const containerStyle = priceListing && priceOrder ? '' : 'justify-content: flex-start;';
 	const formatter = CurrencyFormatter(currencyText);
 	const buffContainer = html`
 		<a class="betterfloat-buff-container" target="_blank" href="${href}" style="display: flex; margin: 5px 0; cursor: pointer; align-items: center;">
 			${
 				isItemPage
 					? html`
 						<div style="display: flex; align-items: center; gap: 4px; width: 50%">
-							<img src="${icon}" style="${iconStyle}" />
+							<img src="${icon}" style="height: 20px; margin-right: 5px; ${iconStyle}" />
 							<span style="font-size: 14px; font-weight: 700; color: #a3a3cb;">${toTitleCase(source)}</span>
 						</div>
 				  `
-					: html`<img src="${icon}" style="${iconStyle}" />`
+					: html`<img src="${icon}" style="height: 20px; margin-right: 5px; ${iconStyle}" />`
 			}
 			<div class="suggested-price betterfloat-buffprice" style="height: 100%; margin: 0; line-height: 1; align-items: center; ${isItemPage ? 'width: 50%;' : ''}${containerStyle}">
 				${

diff --git a/src/contents/skinport_script.ts b/src/contents/skinport_script.ts
@@ -4,18 +4,16 @@ import Decimal from 'decimal.js';
 import { dynamicUIHandler, mountSpItemPageBuffContainer } from '~lib/handlers/urlhandler';
 import { addPattern, createLiveLink, filterDisplay } from '~lib/helpers/skinport_helpers';
 import {
+	AvailableMarketSources,
 	ICON_ARROWUP_SMALL,
 	ICON_BUFF,
-	ICON_C5GAME,
 	ICON_CAMERA,
 	ICON_CAMERA_FLIPPED,
 	ICON_CSFLOAT,
 	ICON_CSGOSTASH,
 	ICON_EXCLAMATION,
 	ICON_PRICEMPIRE,
-	ICON_STEAM,
 	ICON_STEAMANALYST,
-	ICON_YOUPIN,
 	MarketSource,
 } from '~lib/util/globals';
 import { CurrencyFormatter, checkUserPlanPro, delay, getBuffPrice, getFloatColoring, getMarketURL, isBuffBannedItem, isUserPro, toTitleCase, waitForElement } from '~lib/util/helperfunctions';
@@ -940,34 +938,13 @@ function convertCurrency(price: Decimal, currencyRate: number, settingRate: stri
 
 function generateBuffContainer(container: HTMLElement, priceListing: Decimal | undefined, priceOrder: Decimal | undefined, currencySymbol: string, source: MarketSource, containerIsParent = false) {
 	const CurrencyFormatter = new Intl.NumberFormat(undefined, { style: 'currency', currency: currencySymbol, currencyDisplay: 'narrowSymbol', minimumFractionDigits: 0, maximumFractionDigits: 2 });
-	let icon = '';
-	let iconStyle = 'height: 22px; margin-right: 5px; border-radius: 5px;';
-	switch (source) {
-		case MarketSource.Buff:
-			icon = ICON_BUFF;
-			iconStyle += 'border: 1px solid #323c47;';
-			break;
-		case MarketSource.Steam:
-			icon = ICON_STEAM;
-			break;
-		case MarketSource.C5Game:
-			icon = ICON_C5GAME;
-			iconStyle += 'border: 1px solid #323c47;';
-			break;
-		case MarketSource.YouPin:
-			icon = ICON_YOUPIN;
-			iconStyle += 'border: 1px solid #323c47;';
-			break;
-		case MarketSource.CSFloat:
-			icon = ICON_CSFLOAT;
-			break;
-	}
+	const { logo: icon, style: iconStyle } = AvailableMarketSources.find((s) => s.source === source) ?? { logo: '', style: '' };
 
 	const showBothPrices = [MarketSource.Buff, MarketSource.Steam].includes(source) || (MarketSource.YouPin === source && isUserPro(extensionSettings['user']));
 
 	const buffContainer = html`
 		<div class="betterfloat-buff-container" style="display: flex; margin-top: 5px; align-items: center;">
-			<img src="${icon}" style="${iconStyle}" />
+			<img src="${icon}" style="height: 22px; margin-right: 5px; border-radius: 5px; ${iconStyle}" />
 			<div class="suggested-price betterfloat-buffprice" data-betterfloat="${JSON.stringify({ priceListing, priceOrder, currencySymbol })}">
 				${
 					showBothPrices

diff --git a/src/css/csfloat_styles.css b/src/css/csfloat_styles.css
@@ -37,6 +37,7 @@ body.light-theme {
 	display: inline-flex;
 	align-items: center;
 	font-size: 15px;
+	width: fit-content;
 }
 
 .betterfloat-sale-tag {

diff --git a/src/lib/handlers/mappinghandler.ts b/src/lib/handlers/mappinghandler.ts
@@ -27,7 +27,8 @@ const priceMapping: {
 	c5game: Extension.PriceMappingMisc;
 	steam: Extension.PriceMappingSteam;
 	csfloat: Extension.PriceMappingMisc;
-} = { buff: {}, youpin: {}, c5game: {}, steam: {}, csfloat: {} };
+	csmoney: Extension.PriceMappingMisc;
+} = { buff: {}, youpin: {}, c5game: {}, steam: {}, csfloat: {}, csmoney: {} };
 // crimson web mapping
 let crimsonWebMapping: Extension.CrimsonWebMapping | null = null;
 
@@ -104,7 +105,7 @@ export function getMarketID(name: string, source: MarketSource) {
 			case MarketSource.C5Game:
 				return 'c5';
 			default:
-				// csfloat can be queried via buff name
+				// other markets can be queried via buff name
 				return null;
 		}
 	};

diff --git a/src/lib/handlers/urlhandler.tsx b/src/lib/handlers/urlhandler.tsx
@@ -9,6 +9,7 @@ import { CSFloatHelpers } from '~lib/helpers/csfloat_helpers';
 import { createLiveLink, filterDisplay } from '~lib/helpers/skinport_helpers';
 import CSFAutorefresh from '~lib/inline/CSFAutorefresh';
 import CSFBargainButtons from '~lib/inline/CSFBargainButtons';
+import CSFMarketComparison from '~lib/inline/CSFMarketComparison';
 import CSFMenuControl from '~lib/inline/CSFMenuControl';
 import CSFQuickMenu from '~lib/inline/CSFQuickMenu';
 import CSFThemeToggle from '~lib/inline/CSFThemeToggle';
@@ -73,7 +74,7 @@ export function dynamicUIHandler() {
 		await handleChange(state);
 	}, 1500);
 
-	// setTimeout(showUpdatePopup, 3000);
+	setTimeout(showUpdatePopup, 3000);
 }
 
 async function showUpdatePopup() {
@@ -151,6 +152,34 @@ async function handleCSFloatChange(state: Extension.URLState) {
 		}
 	}
 
+	const showMarketComparison = await ExtensionStorage.sync.get<boolean>('csf-marketcomparison');
+	if (showMarketComparison && state.path.includes('/item/') && !document.querySelector('betterfloat-market-comparison')) {
+		const success = await waitForElement('div.full-screen-dialog .container');
+		if (!success) return;
+		const popup = document.querySelector<HTMLElement>('div.full-screen-dialog');
+		const container = popup?.querySelector<HTMLElement>('.container');
+		if (popup && container) {
+			popup.style.width = Number(popup.style.width.substring(0, popup.style.width.length - 2)) + 230 + 'px';
+			container.style.gridTemplateColumns = '250px 1fr 210px 210px';
+			const root = await mountShadowRoot(<CSFMarketComparison />, {
+				tagName: 'betterfloat-market-comparison',
+				parent: container,
+			});
+			const ownContainer = document.querySelector<HTMLElement>('betterfloat-market-comparison');
+			if (ownContainer) {
+				ownContainer.style.gridRow = '1 / span 2';
+			}
+			// unmount on url change
+			const interval = createUrlListener((url) => {
+				if (!url.pathname.includes('/item/')) {
+					root.unmount();
+					document.querySelector('betterfloat-market-comparison')?.remove();
+					clearInterval(interval);
+				}
+			}, 1000);
+		}
+	}
+
 	const csfShowThemeToggle = await getSetting<boolean>('csf-themetoggle');
 	if (csfShowThemeToggle && !document.querySelector('betterfloat-theme-toggle')) {
 		const root = await mountShadowRoot(<CSFThemeToggle />, {