feat: better sizing

scripts/buildAssets/tankIcons.ts

@@ -1,7 +1,8 @@
 import { readdir } from 'fs/promises';
+import sharp from 'sharp';
 import { Vector3Tuple } from 'three';
 import { NATION_IDS } from '../../src/constants/nations';
-import { readBase64DVPL } from '../../src/core/blitz/readBase64DVPL';
+import { readDVPLFile } from '../../src/core/blitz/readDVPLFile';
 import { readXMLDVPL } from '../../src/core/blitz/readXMLDVPL';
 import { readYAMLDVPL } from '../../src/core/blitz/readYAMLDVPL';
 import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
@@ -50,23 +51,29 @@ export async function tankIcons(production: boolean) {
           const parameters = await readYAMLDVPL<TankParameters>(
             `${DATA}/${POI.tankParameters}/${nation}/${tankKey}.yaml.dvpl`,
           );
-          const small = `${DATA}/${parameters.resourcesPath.smallIconPath
+          const smallPath = `${DATA}/${parameters.resourcesPath.smallIconPath
             .replace(/~res:\//, '')
             .replace(/\..+/, '')}.packed.webp.dvpl`;
-          const big = `${DATA}/${parameters.resourcesPath.bigIconPath
+          const bigPath = `${DATA}/${parameters.resourcesPath.bigIconPath
             .replace(/~res:\//, '')
             .replace(/\..+/, '')}.packed.webp.dvpl`;
+          const big = await sharp(await readDVPLFile(bigPath))
+            .trim()
+            .toBuffer();
+          const small = await sharp(await readDVPLFile(smallPath))
+            .trim()
+            .toBuffer();
 
           if (big) {
             changes.push({
-              content: await readBase64DVPL(big),
+              content: big.toString('base64'),
               encoding: 'base64',
               path: `icons/tanks/big/${id}.webp`,
             });
           }
           if (small) {
             changes.push({
-              content: await readBase64DVPL(small),
+              content: small.toString('base64'),
               encoding: 'base64',
               path: `icons/tanks/small/${id}.webp`,
             });

src/app/tools/compare/page.tsx

@@ -28,7 +28,7 @@ export default function Page() {
   );
 
   return (
-    <PageWrapper color="crimson">
+    <PageWrapper color="crimson" size="100%">
       <Flex justify="center">
         <Dialog.Root
           open={addTankDialogOpen}
@@ -66,45 +66,63 @@ export default function Page() {
         </Dialog.Root>
       </Flex>
 
-      <Table.Root variant="surface">
+      {tanks.length > 0 && (
-        <Table.Header>
+        <Flex justify="center">
-          <Table.Row>
+          <Table.Root
-            <Table.ColumnHeaderCell>Statistics</Table.ColumnHeaderCell>
+            variant="surface"
-            {tanks.map((id) => {
+            style={{
-              const tank = awaitedTankDefinitions[id];
+              maxWidth: '100%',
-
+            }}
-              return (
+          >
-                <Table.ColumnHeaderCell>
+            <Table.Header>
-                  <Flex direction="column">
+              <Table.Row>
-                    <img src={tankIcon(id)} />
+                <Table.ColumnHeaderCell width="0">
-                    <Text>{tank.name}</Text>
+                  Statistics
-                  </Flex>
                 </Table.ColumnHeaderCell>
-              );
+                {tanks.map((id) => {
-            })}
+                  const tank = awaitedTankDefinitions[id];
-          </Table.Row>
-        </Table.Header>
 
-        <Table.Body>
+                  return (
-          <Table.Row>
+                    <Table.ColumnHeaderCell width="0">
-            <Table.RowHeaderCell>Stat 1</Table.RowHeaderCell>
+                      <Flex direction="column" align="center">
-            {tanks.map((id) => {
+                        <img
-              const tank = awaitedTankDefinitions[id];
+                          src={tankIcon(id)}
+                          width={64}
+                          height={64}
+                          style={{
+                            objectFit: 'contain',
+                          }}
+                        />
+                        <Text>{tank.name}</Text>
+                      </Flex>
+                    </Table.ColumnHeaderCell>
+                  );
+                })}
+              </Table.Row>
+            </Table.Header>
 
-              return <Table.Cell>{Math.random()}</Table.Cell>;
+            <Table.Body>
-            })}
+              <Table.Row>
-          </Table.Row>
+                <Table.RowHeaderCell>Stat 1</Table.RowHeaderCell>
+                {tanks.map((id) => {
+                  const tank = awaitedTankDefinitions[id];
 
-          <Table.Row>
+                  return <Table.Cell>{Math.random()}</Table.Cell>;
-            <Table.RowHeaderCell>Stat 2</Table.RowHeaderCell>
+                })}
-            {tanks.map((id) => {
+              </Table.Row>
-              const tank = awaitedTankDefinitions[id];
 
-              return <Table.Cell>{Math.random()}</Table.Cell>;
+              <Table.Row>
-            })}
+                <Table.RowHeaderCell>Stat 2</Table.RowHeaderCell>
-          </Table.Row>
+                {tanks.map((id) => {
-        </Table.Body>
+                  const tank = awaitedTankDefinitions[id];
-      </Table.Root>
+
+                  return <Table.Cell>{Math.random()}</Table.Cell>;
+                })}
+              </Table.Row>
+            </Table.Body>
+          </Table.Root>
+        </Flex>
+      )}
     </PageWrapper>
   );
 }

src/components/PageWrapper.tsx

@@ -3,7 +3,7 @@ import { ComponentProps } from 'react';
 
 type PageWrapperProps = FlexProps & {
   color?: ComponentProps<typeof Theme>['accentColor'];
-  size?: number;
+  size?: number | string;
 };
 
 export default function PageWrapper({