From 382f04229e12cab72ac38d294e75de9717fec6a8 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 16 Dec 2024 13:30:35 -0600
Subject: [PATCH] feat: better icons and sizing

---
 packages/core/src/blitzkit/tankIcon.ts                     | 2 ++
 packages/scripts/src/buildAssets/tankIcons.ts              | 7 +++++--
 packages/website/src/components/TankCard/index.tsx         | 4 +++-
 .../components/TankSearch/components/TankCardWrapper.tsx   | 5 ++++-
 packages/website/src/components/TankSearch/index.tsx       | 4 ++--
 .../HeroSection/components/TankSandbox/index.tsx           | 5 +++--
 .../HeroSection/components/TankSandboxLoader.tsx           | 7 +++++--
 7 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/blitzkit/tankIcon.ts b/packages/core/src/blitzkit/tankIcon.ts
index 1a2c0d5e9..352a55b6c 100644
--- a/packages/core/src/blitzkit/tankIcon.ts
+++ b/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`);
 }
diff --git a/packages/scripts/src/buildAssets/tankIcons.ts b/packages/scripts/src/buildAssets/tankIcons.ts
index 04f462791..859ad69e7 100644
--- a/packages/scripts/src/buildAssets/tankIcons.ts
+++ b/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',
     });
diff --git a/packages/website/src/components/TankCard/index.tsx b/packages/website/src/components/TankCard/index.tsx
index 406d02f6c..397d42287 100644
--- a/packages/website/src/components/TankCard/index.tsx
+++ b/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">
diff --git a/packages/website/src/components/TankSearch/components/TankCardWrapper.tsx b/packages/website/src/components/TankSearch/components/TankCardWrapper.tsx
index ea6cf9dbc..07427c961 100644
--- a/packages/website/src/components/TankSearch/components/TankCardWrapper.tsx
+++ b/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"
diff --git a/packages/website/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx
index 0aa5f8e01..f3735b4bd 100644
--- a/packages/website/src/components/TankSearch/index.tsx
+++ b/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 DEFAULT_LOADED_CARDS = 75;
+const PREVIEW_COUNT = 20;
+const DEFAULT_LOADED_CARDS = 64;
 
 const [gameDefinitions, modelDefinitions, tankDefinitions, tankNames] =
   await Promise.all([
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx
index 511d3c09c..1a8089469 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx
+++ b/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%',
-          height: naked ? 480 : '100%',
+          width: naked ? BLITZKIT_TANK_ICON_SIZE.width : '100%',
+          height: naked ? BLITZKIT_TANK_ICON_SIZE.height : '100%',
           outline: naked ? '1rem red solid' : undefined,
         }}
       >
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandboxLoader.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandboxLoader.tsx
index 6d11c0043..827c59cbf 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandboxLoader.tsx
+++ b/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}