diff --git a/src/commands/ownedTanks.tsx b/src/commands/ownedTanks.tsx index 75dd86f5b..d27980cde 100644 --- a/src/commands/ownedTanks.tsx +++ b/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 ( - {/* TODO: integrate some of these into title bar */} )), )} @@ -132,9 +132,9 @@ export const ownedTanksCommand: CommandRegistry = { )), )} diff --git a/src/components/Tanks/components/Item.tsx b/src/components/Tanks/components/Item.tsx index c4a2f6fa3..e0458eeca 100644 --- a/src/components/Tanks/components/Item.tsx +++ b/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 (
- {type && ( + {tankType && ( )} @@ -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} diff --git a/src/core/blitz/getTreeType.ts b/src/core/blitz/getTreeType.ts new file mode 100644 index 000000000..6bedbe83e --- /dev/null +++ b/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; +} diff --git a/src/core/blitz/tankopedia.ts b/src/core/blitz/tankopedia.ts index 8e6789be0..557f3a4e6 100644 --- a/src/core/blitz/tankopedia.ts +++ b/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 = { heavyTank: 'https://i.imgur.com/P3vbmyA.png', }; +export const TANK_ICONS_COLLECTOR: Record = { + '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 = { diff --git a/src/stitches.config.ts b/src/stitches.config.ts index 374f36a03..b75ceefae 100644 --- a/src/stitches.config.ts +++ b/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),