Skip to content

Commit

Permalink
fixup
Browse files Browse the repository at this point in the history
  • Loading branch information
@timche
timche committed Feb 4, 2024
1 parent 290d6e0 commit d9f2ac4
Show file tree
Hide file tree
Showing 5 changed files with 283 additions and 231 deletions.
239 changes: 15 additions & 224 deletions src/content/steamcommunity/features/trade-offer-items-info.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,9 @@
import { ItemSkinportPrice } from "@/components/item-skinport-price";
import { featureManager } from "@/content/feature-manager";
import { createWidgetElement } from "@/content/widget";
import { formatPrice } from "@/lib/format";
import { createUseSkinportItemPrices } from "@/lib/skinport";
import {
Item,
getIsSupportedSteamAppId,
getItemFromSteamMarketUrl,
} from "@/lib/steam";
import { cn } from "@/lib/utils";
import { useSkinportItemPrices } from "@/lib/skinport";
import { Item, getItemFromSteamMarketUrl } from "@/lib/steam";
import elementReady from "element-ready";
import ky from "ky";
import { $, $$ } from "select-dom";

async function addSkinportItemPrices(itemElements: HTMLElement[]) {
Expand Down Expand Up @@ -111,228 +104,26 @@ async function addSkinportItemPrices(itemElements: HTMLElement[]) {
}

async function steamTradeOfferItemsInfo() {
if (/^\/tradeoffer\//.test(location.pathname)) {
for (const tradeOfferSelector of ["#trade_yours", "#trade_theirs"]) {
const tradeOfferElement = await elementReady(
`${tradeOfferSelector}.ready`,
{
stopOnDomReady: false,
timeout: 30000,
},
);

const tradeItemElements = $$(".trade_slot.has_item", tradeOfferElement);
for (const tradeOfferSelector of ["#trade_yours", "#trade_theirs"]) {
const tradeOfferElement = await elementReady(
`${tradeOfferSelector}.ready`,
{
stopOnDomReady: false,
timeout: 30000,
},
);

if (tradeItemElements.length === 0) {
return;
}
const tradeItemElements = $$(".trade_slot.has_item", tradeOfferElement);

addSkinportItemPrices(tradeItemElements);
if (tradeItemElements.length === 0) {
return;
}
}

if (/\/tradeoffers\/$/.test(location.pathname)) {
const tradeOfferElements = $$(".tradeoffer");

for (const tradeOfferElement of tradeOfferElements) {
const tradeOfferPartyElements = [
$(".tradeoffer_items.primary", tradeOfferElement),
$(".tradeoffer_items.secondary", tradeOfferElement),
];

const [
usePrimaryPartySkinportItemPrices,
useSecondaryPartySkinportItemPrices,
] = await Promise.all(
tradeOfferPartyElements.map(async (tradeOfferPartyElement) => {
const tradeItemElements = $$(
".trade_item[data-economy-item]",
tradeOfferPartyElement,
);

const tradeItemsByDataEconomyItem: Record<
string,
Item & { element: HTMLElement }
> = {};

await Promise.all(
tradeItemElements.map(async (tradeItemElement) => {
const tradeItemDataEconomyItemValue =
tradeItemElement.getAttribute("data-economy-item");

if (!tradeItemDataEconomyItemValue) {
return;
}

const [_, itemMarketHashName, itemAppId] =
(
await ky(
`https://steamcommunity.com/economy/${tradeItemDataEconomyItemValue.replace(
"classinfo",
"itemclasshover",
)}`,
{
searchParams: {
content_only: 1,
l: "english",
},
},
).text()
).match(/"market_hash_name\":"([^"]+)".*"appid":"(\d+)"/) || [];

if (
itemMarketHashName &&
itemAppId &&
getIsSupportedSteamAppId(itemAppId)
) {
tradeItemsByDataEconomyItem[tradeItemDataEconomyItemValue] = {
name: decodeURIComponent(itemMarketHashName),
appId: itemAppId as Item["appId"],
element: tradeItemElement,
};
}
}),
);

const useSkinportItemPrices = await createUseSkinportItemPrices(
Object.values(tradeItemsByDataEconomyItem).map(({ name }) => name),
);

for (const tradeItem of Object.values(tradeItemsByDataEconomyItem)) {
const [skinportItemPriceElement] = createWidgetElement(() => {
const skinportItemPrices = useSkinportItemPrices();

const skinportItemPrice =
skinportItemPrices.data?.items[tradeItem.name];

if (!skinportItemPrice) {
return;
}

return (
<div className="absolute left-1.5 bottom-0.5 z-10 flex gap-1">
<ItemSkinportPrice
price={skinportItemPrice[1]}
currency={skinportItemPrices.data?.currency}
size="sm"
priceTitle="none"
linkItem={tradeItem}
/>
</div>
);
});

tradeItem.element.append(skinportItemPriceElement);
}

return useSkinportItemPrices;
}),
);

for (const tradeOfferPartyElement of tradeOfferPartyElements) {
if (!tradeOfferPartyElement) {
break;
}

const tradeOfferPartyHeaderElement = $(
".tradeoffer_items_header",
tradeOfferPartyElement,
);

if (!tradeOfferPartyHeaderElement) {
break;
}

const [totalSkinportItemPriceElement] = createWidgetElement(() => {
const primaryPartySkinportItemPrices =
usePrimaryPartySkinportItemPrices();
const secondaryPartySkinportItemPrices =
useSecondaryPartySkinportItemPrices();

if (
!primaryPartySkinportItemPrices.data ||
!secondaryPartySkinportItemPrices.data
) {
return;
}

const isPrimaryParty =
tradeOfferPartyElement.classList.contains("primary");

let totalPartySkinportItemPrice = 0;

for (const [
_lowestPrice,
suggestedSkinportItemPrice,
] of Object.values(
isPrimaryParty
? primaryPartySkinportItemPrices.data.items
: secondaryPartySkinportItemPrices.data.items,
)) {
if (suggestedSkinportItemPrice) {
totalPartySkinportItemPrice += suggestedSkinportItemPrice;
}
}

let totalOtherPartySkinportItemPrice = 0;

for (const [
_lowestPrice,
suggestedSkinportItemPrice,
] of Object.values(
isPrimaryParty
? secondaryPartySkinportItemPrices.data.items
: primaryPartySkinportItemPrices.data.items,
)) {
if (suggestedSkinportItemPrice) {
totalOtherPartySkinportItemPrice += suggestedSkinportItemPrice;
}
}

const totalDifferencePrice =
totalOtherPartySkinportItemPrice - totalPartySkinportItemPrice;

const totalDifferencePercentage = (
(totalDifferencePrice / totalPartySkinportItemPrice) *
100
).toFixed(2);

return (
<div className="flex gap-1">
<div>
Total{" "}
<span className="text-white font-semibold">
{formatPrice(
totalPartySkinportItemPrice,
primaryPartySkinportItemPrices.data.currency,
)}
</span>
</div>
<div
className={cn({
"text-red-600": totalDifferencePrice < 0,
"text-green-600": totalDifferencePrice > 0,
})}
>
({totalDifferencePrice > 0 && "+"}
{formatPrice(
totalDifferencePrice,
primaryPartySkinportItemPrices.data.currency,
)}{" "}
/ {totalDifferencePrice > 0 && "+"}
{totalDifferencePercentage}%)
</div>
</div>
);
});

tradeOfferPartyElement.append(totalSkinportItemPriceElement);
}
}
addSkinportItemPrices(tradeItemElements);
}
}

featureManager.add(steamTradeOfferItemsInfo, {
matchPathname: /(^\/tradeoffer\/)|(\/tradeoffers\/$)/,
matchPathname: /^\/tradeoffer\//,
awaitDomReady: true,
});
Loading

0 comments on commit d9f2ac4

Please sign in to comment.