feat: added collector tanks to /ownedtanks

src/commands/ownedTanks.tsx

@@ -6,6 +6,7 @@ import TitleBar from '../components/TitleBar.js';
 import Wrapper from '../components/Wrapper.js';
 import { BLITZ_SERVERS } from '../constants/servers.js';
 import getTankStats from '../core/blitz/getTankStats.js';
+import getTreeType from '../core/blitz/getTreeType.js';
 import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
 import resolveTankName from '../core/blitz/resolveTankName.js';
 import {
@@ -44,7 +45,7 @@ const COMP_TANKS = [
 
 export const ownedTanksCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
+  inDevelopment: true,
   inPublic: true,
 
   command: new SlashCommandBuilder()
@@ -95,7 +96,6 @@ export const ownedTanksCommand: CommandRegistry = {
 
     return (
       <Wrapper>
-        {/* TODO: integrate some of these into title bar */}
         <TitleBar
           name={accountInfo[id].nickname}
           nameDiscriminator={`(Tier ${TIER_ROMAN_NUMERALS[tier as Tier]})`}
@@ -119,9 +119,9 @@ export const ownedTanksCommand: CommandRegistry = {
                   <Tanks.Item
                     key={tank.tank_id}
                     name={await resolveTankName(tank.tank_id)}
-                    type={tank.type}
+                    tankType={tank.type}
                     image={tank.images?.normal}
-                    isPremium={tank.is_premium}
+                    treeType={await getTreeType(tank.tank_id)}
                   />
                 )),
               )}
@@ -132,9 +132,9 @@ export const ownedTanksCommand: CommandRegistry = {
                   <Tanks.Item
                     key={tank.tank_id}
                     name={await resolveTankName(tank.tank_id)}
-                    type={tank.type}
+                    tankType={tank.type}
                     image={tank.images?.normal}
-                    isPremium={tank.is_premium}
+                    treeType={await getTreeType(tank.tank_id)}
                   />
                 )),
               )}

src/components/Tanks/components/Item.tsx

@@ -1,17 +1,36 @@
 import {
   TANK_ICONS,
+  TANK_ICONS_COLLECTOR,
   TANK_ICONS_PREMIUM,
 } from '../../../core/blitz/tankopedia.js';
 import { theme } from '../../../stitches.config.js';
 
-export interface ItemProps {
-  image?: string;
-  type?: string;
-  name: string;
-  isPremium?: boolean;
+export enum TreeType {
+  TechTree,
+  Premium,
+  Collector,
 }
 
-export function Item({ image, type, name, isPremium }: ItemProps) {
+export interface ItemProps {
+  image?: string;
+  tankType?: string;
+  name: string;
+  treeType: TreeType;
+}
+
+const TREE_TYPE_COLOR = {
+  [TreeType.TechTree]: '',
+  [TreeType.Premium]: '_amber',
+  [TreeType.Collector]: '_blue',
+} as const;
+
+const TREE_TYPE_ICONS = {
+  [TreeType.TechTree]: TANK_ICONS,
+  [TreeType.Premium]: TANK_ICONS_PREMIUM,
+  [TreeType.Collector]: TANK_ICONS_COLLECTOR,
+};
+
+export function Item({ image, tankType, name, treeType }: ItemProps) {
   return (
     <div
       style={{
@@ -22,9 +41,8 @@ export function Item({ image, type, name, isPremium }: ItemProps) {
         overflow: 'hidden',
         alignItems: 'center',
         borderRadius: 4,
-        backgroundColor: isPremium
-          ? theme.colors.componentInteractive_amber
-          : theme.colors.componentInteractive,
+        backgroundColor:
+          theme.colors[`componentInteractive${TREE_TYPE_COLOR[treeType]}`],
       }}
     >
       <div
@@ -37,9 +55,9 @@ export function Item({ image, type, name, isPremium }: ItemProps) {
           overflow: 'hidden',
         }}
       >
-        {type && (
+        {tankType && (
           <img
-            src={isPremium ? TANK_ICONS_PREMIUM[type] : TANK_ICONS[type]}
+            src={TREE_TYPE_ICONS[treeType][tankType]}
             style={{ width: 14, height: 14 }}
           />
         )}
@@ -47,9 +65,7 @@ export function Item({ image, type, name, isPremium }: ItemProps) {
           style={{
             fontSize: 16,
             whiteSpace: 'nowrap',
-            color: isPremium
-              ? theme.colors.textLowContrast_amber
-              : theme.colors.textHighContrast,
+            color: theme.colors[`textLowContrast${TREE_TYPE_COLOR[treeType]}`],
           }}
         >
           {name}

src/core/blitz/getTreeType.ts

@@ -0,0 +1,11 @@
+import { TreeType } from '../../components/Tanks/index.js';
+import { tankopedia } from './tankopedia.js';
+
+export default async function getTreeType(id: number) {
+  const entry = (await tankopedia)[id];
+
+  if (entry?.is_collectible) return TreeType.Collector;
+  if (entry?.is_premium) return TreeType.Premium;
+
+  return TreeType.TechTree;
+}

src/core/blitz/tankopedia.ts

@@ -2,6 +2,7 @@ export interface TankopediaEntry {
   name: string;
   nation: string;
   is_premium: boolean;
+  is_collectible: boolean;
   tier: number;
   cost: { price_credit: number; price_gold: number };
   images: { preview: string; normal: string };
@@ -45,6 +46,13 @@ export const TANK_ICONS_PREMIUM: Record<string, string> = {
   heavyTank: 'https://i.imgur.com/P3vbmyA.png',
 };
 
+export const TANK_ICONS_COLLECTOR: Record<string, string> = {
+  'AT-SPG': 'https://i.imgur.com/WTjeirB.png',
+  lightTank: 'https://i.imgur.com/EwhtKkU.png',
+  mediumTank: 'https://i.imgur.com/u8YDMBh.png',
+  heavyTank: 'https://i.imgur.com/8xRf3nc.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,10 @@
-import { amberDark, slate, slateDark, slateDarkA } from '@radix-ui/colors';
+import {
+  amberDark,
+  blueDark,
+  slate,
+  slateDark,
+  slateDarkA,
+} from '@radix-ui/colors';
 import { createBorderStyles, createColors } from 'bepaint';
 
 // this isn't really a stitches config, but the object is compliant
@@ -6,8 +12,11 @@ export const theme = {
   colors: {
     ...createColors(slateDark),
     ...createColors(slate, 'light'),
+
     ...createColors(slateDarkA, 'transparent'),
+
     ...createColors(amberDark, 'amber'),
+    ...createColors(blueDark, 'blue'),
   },
 
   borderStyles: createBorderStyles(slateDark),