show stickers on inventory items

skinport · Apr 2, 2024 · 5742f9d · 5742f9d
1 parent 724f1e0
commit 5742f9d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/src/components/steam-inventory-item-info.tsx b/src/components/steam-inventory-item-info.tsx
@@ -2,6 +2,7 @@ import { SteamItemSkinportPrice } from "@/components/steam-item-skinport-price";
 import type { SelectedSkinportItemPrice } from "@/lib/skinport";
 import type { SteamItem } from "@/lib/steam";
 import { useEffect } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 export function SteamInventoryItemInfo({
   inventoryItem,
@@ -50,8 +51,28 @@ export function SteamInventoryItemInfo({
     }
   };
 
+  const renderItemStickers = () => {
+    if (inventoryItem?.stickers) {
+      return (
+        <div className="absolute top-1.5 right-0.5 z-10">
+          {inventoryItem.stickers.map(({ image, marketHashName }) => (
+            <div>
+              <Tooltip>
+                <TooltipTrigger>
+                  <img src={image} alt={marketHashName} className="w-5" />
+                </TooltipTrigger>
+                <TooltipContent side="left">{marketHashName}</TooltipContent>
+              </Tooltip>
+            </div>
+          ))}
+        </div>
+      );
+    }
+  };
+
   return (
     <>
+      {renderItemStickers()}
       <div className="absolute left-1.5 bottom-0.5 z-10">
         {renderItemQuality()}
         <SteamItemSkinportPrice

diff --git a/src/content/steamcommunity/bridge/script.ts b/src/content/steamcommunity/bridge/script.ts
@@ -29,6 +29,7 @@ declare type RgDescription = {
   actions?: MarketAction[];
   appid: SteamItemAppId;
   classid: SteamItemClassId;
+  descriptions: { type: "html"; value: string }[];
   market_hash_name: string;
   marketable: 0 | 1;
   tradable: 0 | 1;

diff --git a/src/lib/steam.ts b/src/lib/steam.ts
@@ -43,6 +43,7 @@ export type SteamItem = {
   qualityColor: string | null;
   rarity: string | null;
   rarityColor: string | null;
+  stickers: { image: string; marketHashName: string }[] | null;
 };
 
 export function parseSteamItem({
@@ -51,6 +52,7 @@ export function parseSteamItem({
   assetid,
   classid,
   contextid,
+  descriptions,
   market_hash_name,
   marketable,
   tags,
@@ -63,6 +65,7 @@ export function parseSteamItem({
   assetid?: string;
   classid: string;
   contextid?: "2" | "6";
+  descriptions?: { type: "html"; value: string }[];
   market_hash_name: string;
   marketable: 0 | 1;
   tags?: {
@@ -107,6 +110,37 @@ export function parseSteamItem({
     );
   }
 
+  let stickers: { image: string; marketHashName: string }[] | null = null;
+
+  if (descriptions) {
+    for (const { type, value } of descriptions) {
+      if (type === "html" && value.indexOf("sticker_info") !== -1) {
+        const images = value.match(
+          /(https:\/\/steamcdn-a\.akamaihd\.net\/apps\/[\w.\/]+)/g,
+        );
+
+        const marketHashNames = value
+          .match(/<br>[\w]+: (.+)<\/center>/)?.[1]
+          .split(",");
+
+        if (
+          images &&
+          marketHashNames &&
+          images.length === marketHashNames.length
+        ) {
+          stickers = [];
+
+          for (let i = 0; i < images.length; i++) {
+            stickers.push({
+              image: images[i],
+              marketHashName: marketHashNames[i].trim(),
+            });
+          }
+        }
+      }
+    }
+  }
+
   return {
     appId: appid,
     assetId,
@@ -126,6 +160,7 @@ export function parseSteamItem({
     qualityColor: qualityTag?.color ? `#${qualityTag.color}` : null,
     rarity: rarityTag?.internal_name || null,
     rarityColor: rarityTag?.color ? `#${rarityTag.color}` : null,
+    stickers,
   };
 }