feat: icons

This commit is contained in:
TrèsAbhi committed 2023-12-01 12:36:31 -06:00
1 parent bda0c4ef1b
commit 48578407db
2 files changed
+45 -22

No files matched your search

@@ -6,7 +6,12 @@ import { Card, Flex, Inset, Text, TextField } from '@radix-ui/themes';
import { use, useRef } from 'react';
import { Search } from 'react-fuzzysort';
import { tankIcon } from '../../../../../core/blitzkrieg/tankIcon';
import { tanks } from '../../../../../core/blitzkrieg/tankopedia';
import {
TANK_ICONS,
TANK_ICONS_COLLECTOR,
TANK_ICONS_PREMIUM,
tanks,
} from '../../../../../core/blitzkrieg/tankopedia';
import { theme } from '../../../../../stitches.config';
import * as styles from './index.css';
@@ -64,31 +69,49 @@ export function List() {
}}
/>
<Text
<Flex
align="center"
justify="center"
gap="1"
className={styles.listingLabel}
size="4"
color={
tank.tree_type === 'collector'
? 'cyan'
: tank.tree_type === 'premium'
? 'amber'
: undefined
}
weight="medium"
style={{
color:
tank.tree_type === 'tech-tree'
? slateDark.slate11
: undefined,
position: 'absolute',
bottom: 8,
left: 12,
}}
>
{tank.name_short ??
tank.name ??
`Unknown tank ${tank.id}`}
</Text>
<img
src={
(tank.tree_type === 'collector'
? TANK_ICONS_COLLECTOR
: tank.tree_type === 'premium'
? TANK_ICONS_PREMIUM
: TANK_ICONS)[tank.type]
}
style={{ width: '1em', height: '1em' }}
/>
<Text
size="4"
color={
tank.tree_type === 'collector'
? 'blue'
: tank.tree_type === 'premium'
? 'amber'
: undefined
}
weight="medium"
style={{
color:
tank.tree_type === 'tech-tree'
? slateDark.slate11
: undefined,
}}
>
{tank.name_short ??
tank.name ??
`Unknown tank ${tank.id}`}
</Text>
</Flex>
</Inset>
</Card>
</a>
+3 -3
View File
@@ -61,21 +61,21 @@ export const tankNamesDiacritics = tankNames.then((tankNames) =>
),
);
export const TANK_ICONS: Record<string, string> = {
export const TANK_ICONS: Record<TankType, string> = {
'AT-SPG': 'https://i.imgur.com/BIHSEH0.png',
lightTank: 'https://i.imgur.com/CSNha5V.png',
mediumTank: 'https://i.imgur.com/wvf3ltm.png',
heavyTank: 'https://i.imgur.com/ECeqlZa.png',
};
export const TANK_ICONS_PREMIUM: Record<string, string> = {
export const TANK_ICONS_PREMIUM: Record<TankType, 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 const TANK_ICONS_COLLECTOR: Record<string, string> = {
export const TANK_ICONS_COLLECTOR: Record<TankType, string> = {
'AT-SPG': 'https://i.imgur.com/WTjeirB.png',
lightTank: 'https://i.imgur.com/EwhtKkU.png',
mediumTank: 'https://i.imgur.com/u8YDMBh.png',