From 5742f9dbc3721325a7fb2071ecd2daa221de9b14 Mon Sep 17 00:00:00 2001
From: Tim Cheung <tim@cheung.io>
Date: Tue, 2 Apr 2024 16:15:44 +0100
Subject: [PATCH] show stickers on inventory items

---
 src/components/steam-inventory-item-info.tsx | 21 ++++++++++++
 src/content/steamcommunity/bridge/script.ts  |  1 +
 src/lib/steam.ts                             | 35 ++++++++++++++++++++
 3 files changed, 57 insertions(+)

diff --git a/src/components/steam-inventory-item-info.tsx b/src/components/steam-inventory-item-info.tsx
index 9cf38c5..0a2d609 100644
--- 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
index 081e356..cb58043 100644
--- 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
index 8b4bb27..0439151 100644
--- 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,
   };
 }