feat: start of gallery

packages/website/src/components/Performance/Tanks.tsx

@@ -140,7 +140,7 @@ export function Tanks({ skeleton }: MaybeSkeletonComponentProps) {
     <Table.Body>
       <Total tanks={tanks} />
 
-      {tanks.slice(0, loadedRows).map((averages, index) => {
+      {tanks.slice(0, loadedRows).map((averages) => {
         const tank = tankDefinitions.tanks[averages.id];
 
         if (tank === undefined) return null;

packages/website/src/constants/tools.ts

@@ -150,10 +150,24 @@ export const homeTool: Tool = {
   image: 'rUPie9G',
 };
 
+export const galleryTool: Tool = {
+  id: 'gallery',
+  title: 'Gallery',
+  description: 'Blitz player avatars',
+  pageDescription: 'All World of Tanks Blitz player avatars',
+  button: {
+    text: 'Browse',
+    color: 'gold',
+  },
+  image: 'VhKlknk',
+  branches: ['main', 'dev'],
+};
+
 export const TOOLS: Tool[] = [
   tankopediaTool,
   compareTool,
   performanceTool,
+  galleryTool,
   sessionTool,
   embedTool,
   // ratingTool,

packages/website/src/core/blitz/fetchGlossary.ts

@@ -0,0 +1,6 @@
+import { assertSecret, type BlitzGlossary } from '@blitzkit/core';
+
+export async function fetchGlossary() {
+  const response = await fetch(assertSecret(import.meta.env.WOTB_GLOSSARY));
+  return (await response.json()) as BlitzGlossary;
+}

packages/website/src/pages/api/gallery/[avatar].webp.ts

@@ -0,0 +1,27 @@
+import type { APIRoute, GetStaticPaths } from 'astro';
+import { fetchGlossary } from '../../../core/blitz/fetchGlossary';
+
+export const getStaticPaths = (async () => {
+  const glossary = await fetchGlossary();
+  const avatarKeys = Object.keys(glossary)
+    .filter((key) => key.startsWith('avatar_'))
+    .map((key) => key.replace('avatar_', ''));
+
+  return avatarKeys.map((avatar) => ({ params: { avatar } }));
+}) satisfies GetStaticPaths;
+
+const glossary = await fetchGlossary();
+
+export const GET: APIRoute<{}, { avatar: string }> = async ({ params }) => {
+  const image =
+    glossary[`avatar_${params.avatar}`].image_url ??
+    'https://i.imgur.com/uXBiK05.jpeg';
+
+  if (import.meta.env.MODE === 'development') {
+    return Response.redirect(image);
+  } else {
+    const response = await fetch(image);
+    const blob = await response.blob();
+    return new Response(blob, { headers: response.headers });
+  }
+};

packages/website/src/pages/index.astro

@@ -1,11 +1,12 @@
 ---
-import { Box, Flex, Heading } from '@radix-ui/themes';
+import { Flex, Heading } from '@radix-ui/themes';
 import HomeHero from '../components/HomeHero.astro';
 import { Plugs } from '../components/Plugs.tsx';
 import ToolCard from '../components/ToolCard.astro';
 import {
   compareTool,
   discordTool,
+  galleryTool,
   moreTool,
   performanceTool,
   sessionTool,
@@ -30,15 +31,15 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={galleryTool} />
         <ToolCard tool={sessionTool} />
         {/* <ToolCard tool={embedTool} /> */}
         {/* <ToolCard tool={ratingTool} /> */}
-        <ToolCard tool={discordTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={discordTool} />
         <ToolCard tool={moreTool} />
-        <Box flexGrow="1" />
       </Flex>
 
       <Heading align="center" mt="6">Other cool projects</Heading>

packages/website/src/pages/tools/gallery/index.astro

@@ -0,0 +1,45 @@
+---
+import { assertSecret, type BlitzGlossary } from '@blitzkit/core';
+import { Flex, Text } from '@radix-ui/themes';
+import { PageWrapper } from '../../../components/PageWrapper';
+import { galleryTool } from '../../../constants/tools';
+import ToolLayout from '../../../layouts/ToolLayout.astro';
+
+const response = await fetch(assertSecret(import.meta.env.WOTB_GLOSSARY), {
+  cache: 'force-cache',
+});
+const avatars = Object.entries((await response.json()) as BlitzGlossary)
+  .filter(
+    ([key, value]) =>
+      key.startsWith('avatar') &&
+      !key.endsWith('_part') &&
+      value.image_url !== null,
+  )
+  .sort(([, a], [, b]) => a.title.localeCompare(b.title));
+---
+
+<ToolLayout tool={galleryTool}>
+  <PageWrapper>
+    <Flex wrap="wrap" gap="4">
+      {
+        avatars.map(([key, value]) => {
+          return (
+            <Flex direction="column" align="center">
+              <img
+                style={{
+                  width: '4rem',
+                  aspectRatio: '7 / 8',
+                  objectFit: 'cover',
+                }}
+                src={`/api/gallery/${key.replace('avatar_', '')}.webp`}
+              />
+              <Text style={{ maxWidth: '6rem' }} align="center">
+                {value.title}
+              </Text>
+            </Flex>
+          );
+        })
+      }
+    </Flex>
+  </PageWrapper>
+</ToolLayout>