feat: download

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

@@ -1,6 +1,4 @@
-import { type ProfileAvatarComponent } from '@protos/blitz_static_profile_avatar_component';
-import type { SellableComponent } from '@protos/blitz_static_sellable_component';
-import type { StuffUIComponent } from '@protos/blitz_static_stuff_ui_component';
+import type { BlitzKitAvatar } from '@protos/blitzkit_static_all_avatars_component';
 import { Dialog } from '@radix-ui/themes';
 import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
 import { Content } from './Content';
@@ -8,11 +6,7 @@ import { Popup } from './Popup';
 
 export interface AvatarGroupProps {
   name?: string;
-  avatars: {
-    stuff: StuffUIComponent;
-    avatar: ProfileAvatarComponent;
-    sellable?: SellableComponent;
-  }[];
+  avatars: { avatar: BlitzKitAvatar }[];
 }
 
 export function AvatarGroup(

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

@@ -1,6 +1,12 @@
 import { Grade } from '@protos/blitz_static_standard_grades_enum';
-import { DownloadIcon, StarFilledIcon } from '@radix-ui/react-icons';
-import { Badge, Box, Button, Dialog, Flex, Text } from '@radix-ui/themes';
+import {
+  CardStackIcon,
+  DownloadIcon,
+  ExternalLinkIcon,
+  EyeNoneIcon,
+  StarFilledIcon,
+} from '@radix-ui/react-icons';
+import { Badge, Box, Button, Dialog, Flex, Link, Text } from '@radix-ui/themes';
 import { Var } from '../../core/radix/var';
 import { useLocale } from '../../hooks/useLocale';
 import { GRADE_COLORS } from './Colors';
@@ -13,8 +19,8 @@ export function Popup({ name, avatars }: AvatarGroupProps) {
     <>
       <Dialog.Title>{name}</Dialog.Title>
 
-      <Flex direction="column" gap="3" mt="5">
-        {avatars.map(({ avatar, stuff }, index) => (
+      <Flex direction="column" gap="5" mt="5">
+        {[...avatars].reverse().map(({ avatar }, index) => (
           <Flex key={index} gap="5">
             <Box
               m="1"
@@ -23,16 +29,27 @@ export function Popup({ name, avatars }: AvatarGroupProps) {
               style={{
                 aspectRatio: '7 / 8',
                 borderRadius: Var('radius-4'),
-                outline: `${Var('space-1')} solid ${Var(`${GRADE_COLORS[stuff.grade]}-9`)}`,
+                outline: `${Var('space-1')} solid ${Var(`${GRADE_COLORS[avatar.grade]}-9`)}`,
                 boxShadow: `0 0 ${
-                  1.5 * (stuff.grade / Grade.GRADE_LEGENDARY)
-                }rem ${Var(`${GRADE_COLORS[stuff.grade]}-9`)}`,
-                backgroundImage: `url(${avatar.avatar})`,
-                backgroundSize: 'cover',
+                  1.5 * (avatar.grade / Grade.GRADE_LEGENDARY)
+                }rem ${Var(`${GRADE_COLORS[avatar.grade]}-9`)}`,
+                backgroundImage: 'url(/assets/sad-ghost.png)',
+                backgroundRepeat: 'no-repeat',
                 backgroundPosition: 'center',
+                backgroundSize: '3rem',
               }}
               position="relative"
             >
+              <Box
+                width="100%"
+                height="100%"
+                style={{
+                  backgroundImage: `url(/api/avatars/${avatar.id}.webp)`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                }}
+              />
+
               <Badge
                 mt="1"
                 style={{
@@ -42,25 +59,54 @@ export function Popup({ name, avatars }: AvatarGroupProps) {
                   transform: 'translate(-50%, -50%)',
                 }}
                 variant="solid"
-                color={GRADE_COLORS[stuff.grade]}
+                color={GRADE_COLORS[avatar.grade]}
               >
-                <StarFilledIcon /> {strings.common.grades[stuff.grade]}
+                <StarFilledIcon /> {strings.common.grades[avatar.grade]}
               </Badge>
             </Box>
 
             <Flex direction="column" gap="3" justify="center">
+              <Flex gap="1">
+                <Badge color="gray" variant="surface">
+                  <CardStackIcon />
+                  {strings.website.tools.avatars.categories[avatar.category]}
+                </Badge>
+
+                {avatar.hidden_if_not_obtained && (
+                  <Badge color="gray" variant="surface">
+                    <EyeNoneIcon /> {strings.website.tools.avatars.hidden}
+                  </Badge>
+                )}
+
+                {avatar.sale && (
+                  <Badge>
+                    {JSON.stringify(
+                      avatar.sale.reward_list[0].currency_reward?.amount,
+                    )}
+                  </Badge>
+                )}
+              </Flex>
+
               <Text>
-                {gameStrings[stuff.description] ??
-                  (gameStrings[stuff.obtaining_methods]
+                {gameStrings[avatar.description] ??
+                  (gameStrings[avatar.obtaining]
                     ? undefined
                     : strings.website.tools.avatars.no_description)}{' '}
-                {gameStrings[stuff.obtaining_methods]}
+                {gameStrings[avatar.obtaining]}
               </Text>
 
-              <Flex>
-                <Button variant="outline">
-                  <DownloadIcon /> {strings.website.tools.avatars.download}
-                </Button>
+              <Flex gap="2">
+                <Link href={`/api/avatars/${avatar.id}.webp`} download>
+                  <Button variant="solid">
+                    <DownloadIcon /> {strings.website.tools.avatars.download}
+                  </Button>
+                </Link>
+
+                <Link href={`/api/avatars/${avatar.id}.webp`} target="_blank">
+                  <Button variant="outline">
+                    <ExternalLinkIcon /> {strings.website.tools.avatars.enlarge}
+                  </Button>
+                </Link>
               </Flex>
             </Flex>
           </Flex>

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

@@ -11,7 +11,7 @@ export function Stack({ avatars }: { avatars: AvatarGroupProps['avatars'] }) {
 
   return (
     <>
-      {avatars.map((avatar, index) => (
+      {avatars.map(({ avatar }, index) => (
         <Box
           key={index}
           position="absolute"
@@ -23,12 +23,24 @@ export function Stack({ avatars }: { avatars: AvatarGroupProps['avatars'] }) {
             filter: `brightness(${(index + 1) / avatars.length})`,
             borderRadius: Var('radius-4'),
             boxShadow: Var('shadow-2'),
-            backgroundImage: `url(${avatar.avatar.avatar})`,
-            backgroundSize: 'cover',
+            overflow: 'hidden',
+            backgroundImage: 'url(/assets/sad-ghost.png)',
+            backgroundRepeat: 'no-repeat',
             backgroundPosition: 'center',
+            backgroundSize: '3rem',
           }}
         >
-          {avatars.length > 1 && (
+          <Box
+            width="100%"
+            height="100%"
+            style={{
+              backgroundImage: `url(/api/avatars/${avatar.id}.webp)`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+          />
+
+          {avatars.length > 1 && index === avatars.length - 1 && (
             <Box
               width="100%"
               height="100%"

packages/website-ue/src/core/blitz/metadata.remote.ts

@@ -1,5 +1,5 @@
 import { RemoteMetadataAccessor } from 'packages/core/src';
 
 export const remoteMetadata = new RemoteMetadataAccessor(
-  '/api/metadata/catalog',
+  '/api/internal/catalog',
 );

packages/website-ue/src/pages/[...locale]/avatars/_index.tsx

@@ -1,10 +1,8 @@
-import { ProfileAvatarComponent } from '@protos/blitz_static_profile_avatar_component';
-import { SellableComponent } from '@protos/blitz_static_sellable_component';
-import { StuffUIComponent } from '@protos/blitz_static_stuff_ui_component';
 import { BlitzkitAllAvatarsComponent } from '@protos/blitzkit_static_all_avatars_component';
-import { Grid } from '@radix-ui/themes';
-import { times } from 'lodash-es';
-import { CatalogItemAccessor } from 'packages/core/src/blitz/catalogItemAccessor';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Flex, Grid, Spinner, TextField } from '@radix-ui/themes';
+import fuzzysort from 'fuzzysort';
+import { debounce, times } from 'lodash-es';
 import { AvatarGroup } from 'packages/website-ue/src/components/Avatars/Group';
 import { PageWrapper } from 'packages/website-ue/src/components/PageWrapper';
 import { metadata } from 'packages/website-ue/src/core/blitz/metadata';
@@ -14,7 +12,7 @@ import {
   type LocaleAcceptorProps,
 } from 'packages/website-ue/src/hooks/useLocale';
 import type { MaybeSkeletonComponentProps } from 'packages/website-ue/src/types/maybeSkeletonComponentProps';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
 const allAvatars = await metadata
   .get('BlitzkitAllAvatarsEntity.blitzkit_all_avatars')
@@ -36,25 +34,17 @@ const DEFAULT_LOADED = 42;
 const PREVIEW_COUNT = 28;
 
 function Content({ skeleton }: MaybeSkeletonComponentProps) {
-  const { gameStrings } = useLocale();
+  const { strings, gameStrings } = useLocale();
+  const input = useRef<HTMLInputElement>(null);
+  const [search, setSearch] = useState<string | null>(null);
+  const [searching, setSearching] = useState(false);
   const groups = useMemo(() => {
     const avatars = allAvatars
-      .map((id) => {
-        const item = new CatalogItemAccessor(id);
-        const stuff = item.get(StuffUIComponent, 'UIComponent');
-        const avatar = item.get(
-          ProfileAvatarComponent,
-          'profileAvatarComponent',
-        );
-        const sellable = item.getOptional(
-          SellableComponent,
-          'sellableComponent',
-        );
-        const name = gameStrings[stuff.display_name] as string | undefined;
-
-        return { avatar, name, stuff, sellable };
-      })
-      .sort((a, b) => a.stuff.grade - b.stuff.grade)
+      .map((avatar) => ({
+        avatar,
+        name: gameStrings[avatar.name] as string | undefined,
+      }))
+      .sort((a, b) => a.avatar.grade - b.avatar.grade)
       .sort((a, b) =>
         a.name === undefined
           ? 1
@@ -75,10 +65,50 @@ function Content({ skeleton }: MaybeSkeletonComponentProps) {
     return [...groups].map(([name, avatars]) => ({ name, avatars }));
   }, []);
   const [loadedAvatars, setLoadedAvatars] = useState(DEFAULT_LOADED);
-  const filtered = useMemo(() => groups, []);
+  const filtered = useMemo(() => {
+    setSearching(false);
+
+    if (search === null || search.trim().length === 0) return groups;
+
+    return fuzzysort
+      .go(search, groups, { key: 'name' })
+      .map((result) => result.obj);
+  }, [search]);
+  const requestSearch = useCallback(
+    debounce(() => {
+      if (!input.current) return;
+      setSearch(input.current.value);
+    }, 500),
+    [],
+  );
 
   return (
     <PageWrapper color="amber">
+      <Flex justify="center">
+        <TextField.Root
+          ref={input}
+          my="7"
+          placeholder={strings.website.tools.avatars.search.hint}
+          style={{
+            flex: 1,
+            maxWidth: '30rem',
+          }}
+          onChange={(event) => {
+            if (event.target.value.trim().length === 0) {
+              setSearching(false);
+              return;
+            }
+
+            requestSearch();
+            setSearching(true);
+          }}
+        >
+          <TextField.Slot>
+            {searching ? <Spinner /> : <MagnifyingGlassIcon />}
+          </TextField.Slot>
+        </TextField.Root>
+      </Flex>
+
       <Grid
         columns={{
           initial: 'repeat(auto-fill, minmax(6rem, 1fr))',

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

@@ -0,0 +1,30 @@
+import { ProfileAvatarComponent } from '@protos/blitz_static_profile_avatar_component';
+import type { APIRoute, GetStaticPaths, GetStaticPathsItem } from 'astro';
+import { socketMetadata } from 'packages/website-ue/src/core/blitz/metadata.socket';
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const paths: GetStaticPathsItem[] = [];
+
+  for (const item in socketMetadata.items) {
+    if (!item.startsWith('ProfileAvatarEntity.')) continue;
+
+    const id = await socketMetadata
+      .get(item)
+      .then((item) => item.undiscriminatedId());
+
+    paths.push({ params: { id } });
+  }
+
+  return paths;
+};
+
+export const GET: APIRoute<{}, { id: string }> = async ({ params }) => {
+  const item = await socketMetadata.get(`ProfileAvatarEntity.${params.id}`);
+  const avatar = item.get(ProfileAvatarComponent, 'profileAvatarComponent');
+
+  try {
+    return await fetch(avatar.avatar);
+  } catch {
+    return new Response(null, { status: 404 });
+  }
+};