TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 03:59:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: flag in highlight

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-08-16 20:49:29 -05:00
1 parent 1cf31c67f8
commit b329152dc3
1 file changed
+67 -57
Download Patch File Download Diff File Expand all files Collapse all files
src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx
+67 -57
View File
@@ -1,5 +1,5 @@
import { CaretRightIcon, PlusIcon } from '@radix-ui/react-icons'; import { CaretRightIcon, PlusIcon } from '@radix-ui/react-icons';
import { Flex, Heading, ScrollArea, Text } from '@radix-ui/themes'; import { Box, Flex, Heading, ScrollArea, Text } from '@radix-ui/themes';
import Link from 'next/link'; import Link from 'next/link';
import { use, useEffect, useMemo, useRef } from 'react'; import { use, useEffect, useMemo, useRef } from 'react';
import { asset } from '../../../../../../core/blitzkit/asset'; import { asset } from '../../../../../../core/blitzkit/asset';
@@ -13,7 +13,7 @@ import * as Duel from '../../../../../../stores/duel';
function Card({ id, highlight }: { id: number; highlight?: boolean }) { function Card({ id, highlight }: { id: number; highlight?: boolean }) {
const awaitedTankDefinitions = use(tankDefinitions); const awaitedTankDefinitions = use(tankDefinitions);
const ancestor = awaitedTankDefinitions[id]; const tank = awaitedTankDefinitions[id];
return ( return (
<Link <Link
@@ -25,75 +25,85 @@ function Card({ id, highlight }: { id: number; highlight?: boolean }) {
position: 'relative', position: 'relative',
}} }}
> >
<Flex <Box
direction="column"
align="center"
py="4"
px={highlight ? '4' : '2'}
mx={highlight ? '2' : '0'} mx={highlight ? '2' : '0'}
style={{ style={{
backgroundColor: highlight background: highlight
? 'var(--color-panel-translucent)' ? `url(${asset(`flags/scratched/${tank.nation}.webp`)})`
: undefined, : undefined,
backgroundPosition: '25% center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
boxShadow: highlight ? 'var(--shadow-4)' : undefined, boxShadow: highlight ? 'var(--shadow-4)' : undefined,
borderRadius: 'var(--radius-4)', borderRadius: 'var(--radius-4)',
overflow: 'hidden',
}} }}
> >
<img <Flex
alt={ancestor.name} direction="column"
src={asset(`icons/tanks/big/${id}.webp`)} align="center"
width={64} py="4"
height={64} px={highlight ? '4' : '2'}
style={{ style={{
objectFit: 'contain', backdropFilter: highlight ? 'brightness(0.25)' : undefined,
}} }}
/> >
<img
alt={tank.name}
src={asset(`icons/tanks/big/${id}.webp`)}
width={64}
height={64}
style={{
objectFit: 'contain',
}}
/>
<Flex direction="column" align="center"> <Flex direction="column" align="center">
<Flex gap="2" align="center"> <Flex gap="2" align="center">
<Text color="gray" size="1"> <Text color="gray" size="1">
{TIER_ROMAN_NUMERALS[ancestor.tier]} {TIER_ROMAN_NUMERALS[tank.tier]}
</Text> </Text>
<Text wrap="nowrap">{ancestor.name}</Text> <Text wrap="nowrap">{tank.name}</Text>
</Flex> </Flex>
<Flex gap="2" align="center"> <Flex gap="2" align="center">
<Text color="gray" size="1" wrap="nowrap"> <Text color="gray" size="1" wrap="nowrap">
<Flex gap="1" align="center"> <Flex gap="1" align="center">
<img <img
alt="XP" alt="XP"
src={asset('icons/currencies/xp.webp')} src={asset('icons/currencies/xp.webp')}
style={{ style={{
width: '1em', width: '1em',
height: '1em', height: '1em',
objectFit: 'contain', objectFit: 'contain',
objectPosition: 'center', objectPosition: 'center',
}} }}
/> />
{ancestor.xp === undefined || ancestor.tier === 1 {tank.xp === undefined || tank.tier === 1
? 0 ? 0
: formatCompact(ancestor.xp!)} : formatCompact(tank.xp!)}
</Flex> </Flex>
</Text> </Text>
<Text color="gray" size="1" wrap="nowrap"> <Text color="gray" size="1" wrap="nowrap">
<Flex gap="1" align="center"> <Flex gap="1" align="center">
<img <img
alt="Silver" alt="Silver"
src={asset('icons/currencies/silver.webp')} src={asset('icons/currencies/silver.webp')}
style={{ style={{
width: '1em', width: '1em',
height: '1em', height: '1em',
objectFit: 'contain', objectFit: 'contain',
objectPosition: 'center', objectPosition: 'center',
}} }}
/> />
{formatCompact(ancestor.price.value)} {formatCompact(tank.price.value)}
</Flex> </Flex>
</Text> </Text>
</Flex>
</Flex> </Flex>
</Flex> </Flex>
</Flex> </Box>
</Link> </Link>
); );
} }