stuff icon

packages/website-ue/src/api/abstract.ts

@@ -46,6 +46,7 @@ export abstract class AbstractAPI {
   abstract backgrounds(): Promise<Backgrounds>;
 
   abstract currencyIcon(id: string): Promise<string>;
+  abstract stuffIcon(id: string): Promise<string>;
 
   private assertLocale(locale: string) {
     const supported = locales.supported.find(

packages/website-ue/src/api/client.ts

@@ -116,6 +116,11 @@ export class ClientAPI extends AbstractAPI {
   currencyIcon() {
     return rejected();
   }
+
+  @UnimplementedOnClient
+  stuffIcon() {
+    return rejected();
+  }
 }
 
 function UnimplementedOnClient(

packages/website-ue/src/api/server.ts

@@ -388,9 +388,16 @@ export class ServerAPI extends AbstractAPI {
 
   @Cache()
   async currencyIcon(id: string) {
-    const item = this.metadata.item(`CurrencyEntity.${id}`);
+    const item = this.metadata.item(id);
     const stuffUI = item.StuffUI("UIComponent");
+    return this.mediaPrefix(stuffUI.icon!.value);
+  }
 
+  @Cache()
+  async stuffIcon(id: string) {
+    const item = this.metadata.item(id);
+    console.log(id);
+    const stuffUI = item.StuffUI("UIComponent");
     return this.mediaPrefix(stuffUI.icon!.value);
   }
 }

packages/website-ue/src/components/Price/index.tsx

@@ -26,23 +26,44 @@ interface PriceEntryProps {
 }
 
 function PriceEntry({ entry }: PriceEntryProps) {
-  const locale = useLocale();
+  if (entry.premium_time_price !== undefined) {
+    console.log(entry);
 
-  if (
-    entry.premium_time_price !== undefined ||
-    entry.stuff_price !== undefined ||
-    entry.currency_price === undefined
-  ) {
     throw new Error("Unsupported price type");
   }
 
-  const [, iconName] = entry.currency_price.currency_catalog_id.split(".");
+  return (
+    <>
+      {entry.currency_price && (
+        <PriceInternal
+          icon={`/api/currencies/${entry.currency_price.currency_catalog_id}.webp`}
+          value={entry.currency_price.amount}
+        />
+      )}
+
+      {entry.stuff_price && (
+        <PriceInternal
+          icon={`/api/stuff/${entry.stuff_price.stuff_catalog_id}.webp`}
+          value={entry.stuff_price.amount}
+        />
+      )}
+    </>
+  );
+}
+
+interface PriceInternalProps {
+  icon: string;
+  value: number;
+}
+
+function PriceInternal({ icon, value }: PriceInternalProps) {
+  const locale = useLocale();
 
   return (
     <Text weight="light" size="minor" lowContrast className={styles.entry}>
       <div className={styles.wrapper}>
-        <img className={styles.icon} src={`/api/currencies/${iconName}.webp`} />
+        <img className={styles.icon} src={icon} />
-        {formatCompact(locale, entry.currency_price.amount)}
+        {formatCompact(locale, value)}
       </div>
     </Text>
   );

packages/website-ue/src/pages/[api]/currencies/[id].webp.ts

@@ -5,7 +5,7 @@ import { getStaticPaths as _getStaticPaths } from "../_index";
 
 export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
   const group = api.metadata.group("CurrencyEntity");
-  return group.map(({ name }) => ({ params: { id: name } }));
+  return group.map(({ id }) => ({ params: { id } }));
 });
 
 export async function GET({ params }: { params: { id: string } }) {

packages/website-ue/src/pages/[api]/stuff/[id].webp.ts

@@ -0,0 +1,14 @@
+import { api } from "../../../api/dynamic";
+import { imageProxy } from "../../../api/imageProxy";
+import { mixStaticPaths } from "../../../astro/mixStaticPaths";
+import { getStaticPaths as _getStaticPaths } from "../_index";
+
+export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
+  const group = api.metadata.group("ProxyEntity");
+  return group.map(({ id }) => ({ params: { id } }));
+});
+
+export async function GET({ params }: { params: { id: string } }) {
+  const icon = await api.stuffIcon(params.id);
+  return await imageProxy(icon);
+}