feat: updated /ownedtanks to new design

src/commands/ownedTanks.tsx

@@ -90,7 +90,6 @@ export const ownedTanksCommand: CommandRegistry = {
       `https://api.wotblitz.${server}/wotb/clans/accountinfo/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}&extra=clan`,
     );
     const leftColumnSize = Math.ceil(tanks.length / 2);
-    const rightColumnSize = tanks.length - leftColumnSize;
     const leftColumn = tanks.slice(0, leftColumnSize);
     const rightColumn = tanks.slice(leftColumnSize);
 
@@ -114,16 +113,32 @@ export const ownedTanksCommand: CommandRegistry = {
 
         {tanks.length > 0 && (
           <Tanks.Root>
-            {await Promise.all(
-              tanks.map(async (tank) => (
-                <Tanks.Item
-                  key={tank.tank_id}
-                  name={await resolveTankName(tank.tank_id)}
-                  type={tank.type}
-                  icon={tank.images?.normal}
-                />
-              )),
-            )}
+            <Tanks.Column>
+              {await Promise.all(
+                leftColumn.map(async (tank) => (
+                  <Tanks.Item
+                    key={tank.tank_id}
+                    name={await resolveTankName(tank.tank_id)}
+                    type={tank.type}
+                    image={tank.images?.preview}
+                    isPremium={tank.is_premium}
+                  />
+                )),
+              )}
+            </Tanks.Column>
+            <Tanks.Column>
+              {await Promise.all(
+                rightColumn.map(async (tank) => (
+                  <Tanks.Item
+                    key={tank.tank_id}
+                    name={await resolveTankName(tank.tank_id)}
+                    type={tank.type}
+                    image={tank.images?.preview}
+                    isPremium={tank.is_premium}
+                  />
+                )),
+              )}
+            </Tanks.Column>
           </Tanks.Root>
         )}
 

src/components/Tanks/components/Column.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+
+export interface RootProps {
+  children: ReactNode;
+}
+
+export function Column({ children }: RootProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+        flex: 1,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/components/Tanks/components/Item.tsx

@@ -1,38 +1,62 @@
-import { TANK_ICONS } from '../../../core/blitz/tankopedia.js';
+import {
+  TANK_ICONS,
+  TANK_ICONS_PREMIUM,
+} from '../../../core/blitz/tankopedia.js';
+import { theme, themeAmber } from '../../../stitches.config.js';
 
 export interface ItemProps {
-  icon?: string;
+  image?: string;
   type?: string;
   name: string;
+  isPremium?: boolean;
 }
 
-export function Item({ icon, type, name }: ItemProps) {
+export function Item({ image, type, name, isPremium }: ItemProps) {
   return (
     <div
       style={{
-        flex: 1,
-        minWidth: 128,
-        height: 128,
         display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
+        height: 32,
+        paddingLeft: 8,
+        paddingRight: 8,
         overflow: 'hidden',
+        alignItems: 'center',
+        borderRadius: 4,
+        backgroundColor: isPremium
+          ? themeAmber.colors.componentInteractive
+          : theme.colors.componentInteractive,
       }}
     >
-      {icon && <img src={icon} style={{ flex: 1, objectFit: 'contain' }} />}
-
-      <div style={{ display: 'flex', margin: 'auto', gap: 4 }}>
+      <div
+        style={{
+          display: 'flex',
+          gap: 4,
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          overflow: 'hidden',
+        }}
+      >
         {type && (
-          <img src={TANK_ICONS[type]} style={{ width: 14, height: 14 }} />
+          <img
+            src={isPremium ? TANK_ICONS_PREMIUM[type] : TANK_ICONS[type]}
+            style={{ width: 14, height: 14 }}
+          />
         )}
-
         <span
-          style={{ fontSize: 16, textAlign: 'center', whiteSpace: 'nowrap' }}
+          style={{
+            fontSize: 16,
+            whiteSpace: 'nowrap',
+            color: isPremium
+              ? themeAmber.colors.textLowContrast
+              : theme.colors.textHighContrast,
+          }}
         >
           {name}
         </span>
       </div>
+
+      {image && <img src={image} style={{ flex: 1 }} />}
     </div>
   );
 }

src/components/Tanks/components/Root.tsx

@@ -9,10 +9,7 @@ export function Root({ children }: RootProps) {
     <div
       style={{
         display: 'flex',
-        flexWrap: 'wrap',
-        gap: 16,
-        alignItems: 'center',
-        justifyContent: 'center',
+        gap: 8,
       }}
     >
       {children}

src/components/Tanks/index.ts

@@ -1,2 +1,3 @@
+export * from './components/Column.js';
 export * from './components/Item.js';
 export * from './components/Root.js';

src/core/blitz/tankopedia.ts

@@ -35,6 +35,13 @@ export const TANK_ICONS: Record<string, string> = {
   heavyTank: 'https://i.imgur.com/ECeqlZa.png',
 };
 
+export const TANK_ICONS_PREMIUM: Record<string, string> = {
+  'AT-SPG': 'https://i.imgur.com/TCu3EdR.png',
+  lightTank: 'https://i.imgur.com/zdkpTRb.png',
+  mediumTank: 'https://i.imgur.com/3z7eHX6.png',
+  heavyTank: 'https://i.imgur.com/P3vbmyA.png',
+};
+
 export type Tier = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 
 export const TIER_ROMAN_NUMERALS: Record<Tier, string> = {

src/stitches.config.ts

@@ -1,4 +1,4 @@
-import { slate, slateDark } from '@radix-ui/colors';
+import { amberDark, slate, slateDark } from '@radix-ui/colors';
 import { createBorderStyles, createColors } from 'bepaint';
 
 // this isn't really a stitches config, but the object is compliant
@@ -7,3 +7,4 @@ export const theme = {
   borderStyles: createBorderStyles(slateDark),
 };
 export const themeLight = { colors: createColors(slate) };
+export const themeAmber = { colors: createColors(amberDark) };