feat: docs

.gitmodules

@@ -4,3 +4,6 @@
 [submodule "submodules/CUE4Parse"]
 	path = submodules/CUE4Parse
 	url = https://github.com/FabianFG/CUE4Parse
+[submodule "submodules/blitzkit-internal"]
+	path = submodules/blitzkit-internal
+	url = https://github.com/blitzkit/internal

.vscode/settings.json

@@ -51,6 +51,7 @@
     "CUBEMAP",
     "CUBETEXCOORD",
     "customperiod",
+    "Datacard",
     "datasource",
     "Dava",
     "dbid",

packages/website-ue/src/components/Avatars/Group.tsx

@@ -1,4 +1,4 @@
-import type { BlitzKitAvatar } from '@protos/blitzkit_static_all_avatars_component';
+import type { BlitzKitAvatar } from '@protos/blitzkit';
 import { Dialog } from '@radix-ui/themes';
 import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
 import { Content } from './Content';

packages/website-ue/src/components/Avatars/Popup.tsx

@@ -9,6 +9,7 @@ import {
 import { Badge, Box, Button, Dialog, Flex, Link, Text } from '@radix-ui/themes';
 import { Var } from '../../core/radix/var';
 import { useLocale } from '../../hooks/useLocale';
+import { RewardBadge } from '../RewardBadge';
 import { GRADE_COLORS } from './Colors';
 import type { AvatarGroupProps } from './Group';
 
@@ -79,11 +80,11 @@ export function Popup({ name, avatars }: AvatarGroupProps) {
                 )}
 
                 {avatar.sale && (
-                  <Badge>
-                    {JSON.stringify(
-                      avatar.sale.reward_list[0].currency_reward?.amount,
-                    )}
-                  </Badge>
+                  <RewardBadge
+                    reward={avatar.sale}
+                    color="gray"
+                    variant="surface"
+                  />
                 )}
               </Flex>
 

packages/website-ue/src/components/RewardBadge.tsx

@@ -0,0 +1,42 @@
+import type { StandardReward } from '@protos/blitz_static_standard_reward';
+import { Badge, type BadgeProps } from '@radix-ui/themes';
+import { useLocale } from '../hooks/useLocale';
+
+interface RewardBadgeProps {
+  reward: StandardReward;
+}
+
+export function RewardBadge({
+  reward,
+  ...props
+}: RewardBadgeProps & BadgeProps) {
+  const { locale } = useLocale();
+
+  if (reward.reward_list.length !== 1) {
+    throw new Error('reward_list must be length 1');
+  }
+
+  const reward0 = reward.reward_list[0];
+
+  Object.entries(reward0).forEach(([key, value]) => {
+    if (key !== 'currency_reward' && value !== undefined) {
+      throw new Error(`unsupported reward type: ${key}`);
+    }
+  });
+
+  return (
+    <Badge {...props}>
+      {reward0.currency_reward && (
+        <>
+          <img
+            src={`/api/currencies/${reward0.currency_reward.currency_catalog_id.replace(
+              'CurrencyEntity.',
+              '',
+            )}.webp`}
+          />
+          {reward0.currency_reward.amount.toLocaleString(locale)}
+        </>
+      )}
+    </Badge>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { StuffUIComponent } from '@protos/blitz_static_stuff_ui_component';
+import type { APIRoute, GetStaticPaths } from 'astro';
+import { api } from 'packages/website-ue/src/core/blitzkit/api';
+
+export const getStaticPaths: GetStaticPaths = () => {
+  return api.metadata
+    .filter((item) => item.startsWith('CurrencyEntity.'))
+    .map((item) => ({
+      params: { currency: item.undiscriminatedId() },
+      props: { ui: item.get(StuffUIComponent, 'UIComponent') },
+    }));
+};
+
+export const GET: APIRoute<{ ui: StuffUIComponent }> = async ({ props }) => {
+  console.log(props.ui.icon);
+
+  const response = await fetch(props.ui.icon);
+  const buffer = await response.arrayBuffer();
+
+  return new Response(buffer, { headers: response.headers });
+};