feat: rename to avatars

packages/i18n/strings/en.json

@@ -13,7 +13,8 @@
       "hp": "%s1hp",
       "x": "x%s1",
       "percentage": "%s1%",
-      "deg_s": "%s1°/s"
+      "deg_s": "%s1°/s",
+      "times": "x%s1"
     },
 
     "gun_types": {
@@ -1252,18 +1253,20 @@
           }
         }
       },
-      "gallery": {
-        "name": "Gallery",
-        "unnamed_avatar": "Unnamed avatar",
+
+      "avatars": {
+        "name": "Avatars",
         "button": "Browse all",
-        "description": "Blitz player avatars",
-        "seo_description": "All World of Tanks Blitz player avatars",
-        "last_updated": "Last updated on %s1",
+        "seo_description": "All World of Tanks Blitz player profile avatars",
+        "description": "Player profile avatars",
+
+        "unnamed_avatar": "Unnamed avatar",
         "search": {
           "hint": "Search avatars...",
           "results": "%s1 avatars"
         }
       },
+
       "session": {
         "name": "Session",
         "button": "Start tracking",

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

@@ -0,0 +1,46 @@
+---
+import locales from '@blitzkit/i18n/locales.json';
+import { DiscordLogoIcon, PaperPlaneIcon } from '@radix-ui/react-icons';
+import { Button, Flex, Heading, Link, Text } from '@radix-ui/themes';
+import { PageWrapper } from '../components/PageWrapper';
+import { getStrings } from '../core/i18n/getStrings';
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+export interface Props {
+  path: string;
+  locale: string;
+}
+
+const { path, locale } = Astro.props;
+
+const strings = await getStrings(locale);
+const resolvedPath = `/${locale === locales.default ? '' : `${locale}/`}${path}`;
+---
+
+<BaseLayout {locale}>
+  <link
+    slot="head"
+    rel="canonical"
+    href={`${Astro.url.origin}${resolvedPath}`}
+  />
+  <meta slot="head" http-equiv="refresh" content={`0; url=${resolvedPath}`} />
+
+  <PageWrapper align="center" justify="center" gap="0">
+    <Heading>{strings.website.redirect.title}</Heading>
+    <Text color="gray">{strings.website.redirect.body}</Text>
+
+    <Flex mt="4" gap="2">
+      <Link href={resolvedPath}>
+        <Button>
+          <PaperPlaneIcon /> Redirect
+        </Button>
+      </Link>
+
+      <Link href="https://discord.gg/nDt7AjGJQH">
+        <Button variant="outline">
+          <DiscordLogoIcon /> Discord
+        </Button>
+      </Link>
+    </Flex>
+  </PageWrapper>
+</BaseLayout>

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

@@ -35,8 +35,8 @@ export const chartsTool: Tool = {
   button: { color: 'bronze' },
 };
 
-export const galleryTool: Tool = {
-  id: 'gallery',
+export const avatarsTool: Tool = {
+  id: 'avatars',
   enabled: true,
   button: { color: 'gold' },
 };
@@ -68,7 +68,7 @@ export const tools: Tool[] = [
   performanceTool,
   guessTool,
   chartsTool,
-  galleryTool,
+  avatarsTool,
   sessionTool,
   tierListTool,
   embedTool,

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

@@ -3,6 +3,7 @@ import { StuffUIComponent } from '@protos/blitz_static_stuff_ui_component';
 import { BlitzkitAllAvatarsComponent } from '@protos/blitzkit_static_all_avatars_component';
 import { Badge, Box, Flex, Grid, Text } from '@radix-ui/themes';
 import { CatalogItemAccessor } from 'packages/core/src/blitz/catalogItemAccessor';
+import { literals } from 'packages/i18n/src';
 import { PageWrapper } from 'packages/website-ue/src/components/PageWrapper';
 import { metadata } from 'packages/website-ue/src/core/blitz/metadata';
 import { Var } from 'packages/website-ue/src/core/radix/var';
@@ -45,7 +46,7 @@ function Content() {
         );
         const name =
           gameStrings[stuffComponent.display_name] ??
-          strings.website.tools.gallery.unnamed_avatar;
+          strings.website.tools.avatars.unnamed_avatar;
 
         return { avatar, name, stuffComponent, avatarComponent };
       })
@@ -82,7 +83,7 @@ function Content() {
             <Flex direction="column" gap="3" key={name}>
               <Box
                 width="100%"
-                style={{ aspectRatio: '1 / 1' }}
+                style={{ aspectRatio: '7 / 8' }}
                 position="relative"
               >
                 {avatarsReduced.map((avatar, index) => (
@@ -100,26 +101,41 @@ function Content() {
                       backgroundSize: 'cover',
                       backgroundPosition: 'center',
                     }}
-                  />
+                  >
+                    {avatars.length > 1 && (
+                      <Box
+                        width="100%"
+                        height="100%"
+                        style={{
+                          background: `linear-gradient(-45deg, ${Var('black-a9')} 25%, ${Var('black-a1')} 50%)`,
+                        }}
+                      />
+                    )}
+                  </Box>
                 ))}
 
                 {avatars.length > 1 && (
-                  <Box
-                    position="absolute"
-                    bottom="0"
-                    left="50%"
-                    style={{
-                      transform: 'translate(-50%, 25%)',
-                    }}
-                  >
+                  <Box position="absolute" bottom="1" right="1">
                     <Badge variant="solid" color="gray" highContrast size="3">
-                      x{avatars.length}
+                      {literals(strings.common.units.times, [
+                        `${avatars.length}`,
+                      ])}
                     </Badge>
                   </Box>
                 )}
               </Box>
 
-              <Text size="2">{name}</Text>
+              <Text
+                size="2"
+                wrap="nowrap"
+                align="center"
+                style={{
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}
+              >
+                {name}
+              </Text>
             </Flex>
           );
         })}

packages/website-ue/src/pages/[...locale]/avatars/index.astro

@@ -0,0 +1,17 @@
+---
+import { metadata } from 'packages/website-ue/src/core/blitz/metadata';
+import BaseLayout from 'packages/website-ue/src/layouts/BaseLayout.astro';
+import { Page } from './_index';
+
+export { getStaticPaths } from '../index.astro';
+
+const { locale } = Astro.props;
+
+const gameStrings = await metadata.stringsPartial(locale, [
+  'ProfileAvatarEntity__*',
+]);
+---
+
+<BaseLayout {locale}>
+  <Page localeData={{ locale, gameStrings }} client:load />
+</BaseLayout>

packages/website-ue/src/pages/[...locale]/gallery/index.astro

@@ -1,17 +1,9 @@
 ---
-import { metadata } from 'packages/website-ue/src/core/blitz/metadata';
-import BaseLayout from 'packages/website-ue/src/layouts/BaseLayout.astro';
-import { Page } from './_index';
+import LegacyRedirect from 'packages/website-ue/src/components/LegacyRedirect.astro';
 
 export { getStaticPaths } from '../index.astro';
 
 const { locale } = Astro.props;
-
-const gameStrings = await metadata.stringsPartial(locale, [
-  'ProfileAvatarEntity__*',
-]);
 ---
 
-<BaseLayout {locale}>
-  <Page localeData={{ locale, gameStrings }} client:load />
-</BaseLayout>
+<LegacyRedirect {locale} path="avatars" />