feat: better icons and sizing

packages/core/src/blitzkit/tankIcon.ts

@@ -1,5 +1,7 @@
 import { asset } from '@blitzkit/core';
 
+export const BLITZKIT_TANK_ICON_SIZE = { width: 40 * 16, height: 30 * 16 };
+
 export function tankIcon(id: number, size: 'big' | 'small' = 'big') {
   return asset(`icons/tanks/${size}/${id}.webp`);
 }

packages/scripts/src/buildAssets/tankIcons.ts

@@ -1,4 +1,4 @@
-import { fetchTankDefinitions } from '@blitzkit/core';
+import { BLITZKIT_TANK_ICON_SIZE, fetchTankDefinitions } from '@blitzkit/core';
 import { exec } from 'child_process';
 import { launch } from 'puppeteer';
 import sharp from 'sharp';
@@ -17,7 +17,10 @@ export async function tankIcons() {
 
   let index = 0;
   for (const { id, name } of tanks) {
-    await page.setViewport({ width: 640 - 1, height: 480 });
+    await page.setViewport({
+      width: BLITZKIT_TANK_ICON_SIZE.width - 1,
+      height: BLITZKIT_TANK_ICON_SIZE.height,
+    });
     await page.goto(`http://localhost:4321/api/tankopedia/tank-icon/${id}/`, {
       waitUntil: 'networkidle0',
     });

packages/website/src/components/TankCard/index.tsx

@@ -34,7 +34,7 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
       <Text
         ref={ref}
         tabIndex={onSelect ? 0 : undefined}
-        size="1"
+        size="2"
         color={
           tank.type === TankType.COLLECTOR
             ? 'blue'
@@ -56,6 +56,7 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
         data-provide-link={provideLink}
         style={{
           backgroundImage: `url(${asset(`flags/scratched/${tank.nation}.webp`)})`,
+          backgroundSize: '75%',
           ...style,
         }}
         {...props}
@@ -81,6 +82,7 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
             align="center"
             overflow="hidden"
             width="100%"
+            mt="1"
           >
             <Icon className="class-icon" />
             <Text align="center" className="name">

packages/website/src/components/TankSearch/components/TankCardWrapper.tsx

@@ -4,7 +4,10 @@ export function TankCardWrapper(props: GridProps) {
   return (
     <Grid
       py="4"
-      columns="repeat(auto-fill, minmax(100px, 1fr))"
+      columns={{
+        initial: 'repeat(auto-fill, minmax(6rem, 1fr))',
+        sm: 'repeat(auto-fill, minmax(7rem, 1fr))',
+      }}
       flow="dense"
       gap="2"
       gapY="6"

packages/website/src/components/TankSearch/index.tsx

@@ -39,8 +39,8 @@ type TankSearchProps = Omit<FlexProps, 'onSelect'> & {
   onSelectAll?: (tanks: TankDefinition[]) => void;
 };
 
-const PREVIEW_COUNT = 25;
+const PREVIEW_COUNT = 20;
-const DEFAULT_LOADED_CARDS = 75;
+const DEFAULT_LOADED_CARDS = 64;
 
 const [gameDefinitions, modelDefinitions, tankDefinitions, tankNames] =
   await Promise.all([

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx

@@ -1,3 +1,4 @@
+import { BLITZKIT_TANK_ICON_SIZE } from '@blitzkit/core';
 import { Canvas } from '@react-three/fiber';
 import {
   forwardRef,
@@ -182,8 +183,8 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
         }}
         style={{
           userSelect: 'none',
-          width: naked ? 640 : '100%',
+          width: naked ? BLITZKIT_TANK_ICON_SIZE.width : '100%',
-          height: naked ? 480 : '100%',
+          height: naked ? BLITZKIT_TANK_ICON_SIZE.height : '100%',
           outline: naked ? '1rem red solid' : undefined,
         }}
       >

packages/website/src/components/Tankopedia/HeroSection/components/TankSandboxLoader.tsx

@@ -1,4 +1,4 @@
-import { tankIcon } from '@blitzkit/core';
+import { asset } from '@blitzkit/core';
 import { Flex, type FlexProps, Progress } from '@radix-ui/themes';
 import { useProgress } from '@react-three/drei';
 
@@ -11,7 +11,10 @@ export function TankSandboxLoader({ id, ...props }: TankSandboxLoaderProps) {
 
   return (
     <Flex width="100%" height="100%" align="center" justify="center" {...props}>
-      <img src={tankIcon(id)} style={{ height: '60%', filter: 'blur(4px)' }} />
+      <img
+        src={asset(`icons/tanks/blitzkit/${id}.webp`)}
+        style={{ height: '60%', filter: 'blur(4px)' }}
+      />
       <Progress
         size="3"
         value={data.progress}