feat: popup

packages/i18n/strings/en.json

@@ -6,6 +6,14 @@
   },
 
   "common": {
+    "grades": {
+      "0": "Unspecified grade",
+      "1": "Common",
+      "2": "Rare",
+      "3": "Epic",
+      "4": "Legendary"
+    },
+
     "units": {
       "m": "%s1m",
       "mm": "%s1mm",
@@ -1260,10 +1268,21 @@
         "seo_description": "All World of Tanks Blitz player profile avatars",
         "description": "Player profile avatars",
 
+        "no_description": "This avatar has no description.",
+        "download": "Download",
+        "hidden": "Hidden",
         "unnamed_avatars": "Unnamed avatars",
         "search": {
           "hint": "Search avatars...",
           "results": "%s1 avatars"
+        },
+        "categories": {
+          "0": "Unspecified category",
+          "1": "Premium",
+          "2": "Special",
+          "3": "Accumulative",
+          "4": "Other",
+          "5": "Temporary"
         }
       },
 

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

@@ -1,12 +1,19 @@
-import type { ProfileAvatarComponent } from '@protos/blitz_static_profile_avatar_component';
+import {
+  ProfileAvatarComponent_Category,
+  type ProfileAvatarComponent,
+} from '@protos/blitz_static_profile_avatar_component';
 import type { SellableComponent } from '@protos/blitz_static_sellable_component';
+import { Grade } from '@protos/blitz_static_standard_grades_enum';
 import type { StuffUIComponent } from '@protos/blitz_static_stuff_ui_component';
+import { DownloadIcon, StarFilledIcon } from '@radix-ui/react-icons';
 import {
   Badge,
   Box,
+  Button,
   Dialog,
   Flex,
   Text,
+  type BadgeProps,
   type FlexProps,
 } from '@radix-ui/themes';
 import { literals } from 'packages/i18n/src';
@@ -22,30 +29,116 @@ interface AvatarGroupProps {
   }[];
 }
 
-const dx = '4px';
+export function AvatarGroup(props: AvatarGroupProps) {
-const MAX_AVATARS_PREVIEW = 5;
-
-export function AvatarGroup({ name, avatars }: AvatarGroupProps) {
   return (
     <Dialog.Root>
       <Dialog.Trigger>
-        <Content avatars={avatars} name={name} />
+        <Content {...props} />
       </Dialog.Trigger>
 
-      <Dialog.Content>asd</Dialog.Content>
+      <Dialog.Content>
+        <Popup {...props} />
+      </Dialog.Content>
     </Dialog.Root>
   );
 }
 
+const CATEGORY_COLORS: Record<
+  ProfileAvatarComponent_Category,
+  BadgeProps['color']
+> = {
+  [ProfileAvatarComponent_Category.CATEGORY_UNSPECIFIED]: 'gray',
+  [ProfileAvatarComponent_Category.CATEGORY_PREMUM]: 'gray',
+  [ProfileAvatarComponent_Category.CATEGORY_SPECIAL]: 'gray',
+  [ProfileAvatarComponent_Category.CATEGORY_ACCUMULATIVE]: 'gray',
+  [ProfileAvatarComponent_Category.CATEGORY_OTHER]: 'gray',
+  [ProfileAvatarComponent_Category.CATEGORY_TEMPORARY]: 'gray',
+};
+const GRADE_COLORS = {
+  [Grade.GRADE_UNSPECIFIED]: 'gray',
+  [Grade.GRADE_COMMON]: 'gray',
+  [Grade.GRADE_RARE]: 'blue',
+  [Grade.GRADE_EPIC]: 'purple',
+  [Grade.GRADE_LEGENDARY]: 'amber',
+} satisfies Record<Grade, BadgeProps['color']>;
+
+function Popup({ name, avatars }: AvatarGroupProps) {
+  const { strings, gameStrings } = useLocale();
+
+  return (
+    <>
+      <Dialog.Title>{name}</Dialog.Title>
+
+      <Flex direction="column" gap="3" mt="5">
+        {avatars.map(({ avatar, stuff }, index) => (
+          <Flex key={index} gap="5">
+            <Box
+              m="1"
+              mb="4"
+              height="10rem"
+              style={{
+                aspectRatio: '7 / 8',
+                borderRadius: Var('radius-4'),
+                outline: `${Var('space-1')} solid ${Var(`${GRADE_COLORS[stuff.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',
+                backgroundPosition: 'center',
+              }}
+              position="relative"
+            >
+              <Badge
+                mt="1"
+                style={{
+                  position: 'absolute',
+                  top: '100%',
+                  left: '50%',
+                  transform: 'translate(-50%, -50%)',
+                }}
+                variant="solid"
+                color={GRADE_COLORS[stuff.grade]}
+              >
+                <StarFilledIcon /> {strings.common.grades[stuff.grade]}
+              </Badge>
+            </Box>
+
+            <Flex direction="column" gap="3" justify="center">
+              <Text>
+                {gameStrings[stuff.description] ??
+                  (gameStrings[stuff.obtaining_methods]
+                    ? undefined
+                    : strings.website.tools.avatars.no_description)}{' '}
+                {gameStrings[stuff.obtaining_methods]}
+              </Text>
+
+              <Flex>
+                <Button variant="outline">
+                  <DownloadIcon /> {strings.website.tools.avatars.download}
+                </Button>
+              </Flex>
+            </Flex>
+          </Flex>
+        ))}
+      </Flex>
+    </>
+  );
+}
+
+const dx = '4px';
+const MAX_AVATARS_PREVIEW = 5;
+
 function Content({ avatars, name, ...props }: FlexProps & AvatarGroupProps) {
   const { strings } = useLocale();
-  const avatarsReduced = [...avatars].reverse().slice(0, MAX_AVATARS_PREVIEW);
+  const avatarsReduced = [...avatars].slice(-MAX_AVATARS_PREVIEW);
 
   return (
     <Flex direction="column" gap="3" style={{ cursor: 'pointer' }} {...props}>
       <Box width="100%" style={{ aspectRatio: '7 / 8' }} position="relative">
         {avatarsReduced.map((avatar, index) => (
           <Box
+            key={index}
             position="absolute"
             top={`calc(${dx} * ${index})`}
             left={`calc(${dx} * ${index})`}
@@ -53,7 +146,7 @@ function Content({ avatars, name, ...props }: FlexProps & AvatarGroupProps) {
             height={`calc(100% - ${dx} * ${avatarsReduced.length - 1})`}
             style={{
               filter: `brightness(${(index + 1) / avatarsReduced.length})`,
-              borderRadius: Var('radius-2'),
+              borderRadius: Var('radius-4'),
               boxShadow: Var('shadow-2'),
               backgroundImage: `url(${avatar.avatar.avatar})`,
               backgroundSize: 'cover',

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

@@ -19,7 +19,7 @@ export function BlitzKitTheme({
       appearance="dark"
       panelBackground="solid"
       radius="full"
-      accentColor="amber"
+      accentColor="iris"
       suppressHydrationWarning
       suppressContentEditableWarning
       {...props}

packages/website-ue/src/components/Footer.astro

@@ -38,7 +38,11 @@ const strings = await getStrings(locale);
         sm: 'start',
       }}
     >
-      <Heading>BlitzKit</Heading>
+      <Flex align="center" gap="2">
+        <Heading> BlitzKit </Heading>
+        <Code size="1" color="gray" variant="ghost">{packageJson.version}</Code>
+      </Flex>
+
       <Text color="gray">{strings.website.footer.motto}</Text>
       <Text size="1" color="gray">
         {strings.website.footer.copyright}
@@ -127,23 +131,4 @@ const strings = await getStrings(locale);
       </Flex>
     </Flex>
   </Flex>
-
-  <Flex gap="5" display={{ initial: 'flex', sm: 'none' }}>
-    <Flex direction="column" justify="between" align="end">
-      <Text size="2" color="gray">BlitzKit</Text>
-    </Flex>
-
-    <Flex direction="column" justify="between" align="start">
-      <Code size="2" color="gray">
-        {packageJson.version}
-      </Code>
-    </Flex>
-  </Flex>
-
-  <Flex gap="2" align="center" display={{ initial: 'none', sm: 'flex' }}>
-    <Text size="2" color="gray">BlitzKit</Text>
-    <Code size="2" color="gray">
-      {packageJson.version}
-    </Code>
-  </Flex>
 </Flex>

packages/website-ue/src/components/Navbar.astro

@@ -13,11 +13,10 @@ import { Var } from '../core/radix/var';
 import { LinkI18n } from './LinkI18n';
 
 export interface Props {
-  integrated?: boolean;
   locale: string;
 }
 
-const { integrated, locale } = Astro.props;
+const { locale } = Astro.props;
 const toolsFiltered = tools.filter((tool) => tool.enabled);
 const branchName = resolveBranchName();
 const isBranchNamed = branchName !== undefined;
@@ -76,12 +75,6 @@ const strings = await getStrings(locale);
   });
 </script>
 
-{
-  !integrated && (
-    <Box className="padder" height={{ initial: '3.5rem', sm: '3rem' }} />
-  )
-}
-
 <Flex
   direction="column"
   align="center"
@@ -89,7 +82,7 @@ const strings = await getStrings(locale);
   className="navbar"
   width="100%"
   top="0"
-  position="fixed"
+  position="sticky"
   style={{
     zIndex: 1,
     backdropFilter: 'blur(4rem)',
@@ -101,7 +94,6 @@ const strings = await getStrings(locale);
     p={{ initial: '4', sm: '3' }}
     direction="column"
     align="center"
-    style={{ backgroundColor: integrated ? undefined : Var('gray-1') }}
   >
     <Flex gap="4" direction="column" maxWidth="80rem" width="100%">
       <Flex align="center">

packages/website-ue/src/constants/tools.ts

@@ -38,6 +38,7 @@ export const chartsTool: Tool = {
 export const avatarsTool: Tool = {
   id: 'avatars',
   enabled: true,
+  significant: true,
   button: { color: 'gold' },
 };
 

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

@@ -16,10 +16,10 @@ import { useMemo } from 'react';
 
 const allAvatars = await metadata
   .get('BlitzkitAllAvatarsEntity.blitzkit_all_avatars')
-  .then(
+  .then((entity) =>
-    (entity) =>
+    entity
-      entity.get(BlitzkitAllAvatarsComponent, 'blitzkitAllAvatarsComponent')
+      .get(BlitzkitAllAvatarsComponent, 'blitzkitAllAvatarsComponent')
-        .avatars,
+      .avatars.reverse(),
   );
 
 export function Page({ localeData }: LocaleAcceptorProps) {
@@ -71,7 +71,7 @@ function Content() {
   }, []);
 
   return (
-    <PageWrapper color="gold">
+    <PageWrapper color="amber">
       <Grid
         columns={{
           initial: 'repeat(auto-fill, minmax(6rem, 1fr))',
@@ -83,7 +83,7 @@ function Content() {
         flexGrow="1"
       >
         {groups.map(([name, avatars]) => (
-          <AvatarGroup key={name} name={name} avatars={avatars} />
+          <AvatarGroup key={`${name}`} name={name} avatars={avatars} />
         ))}
       </Grid>
     </PageWrapper>