feat: flag in highlight

src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx

@@ -1,5 +1,5 @@
 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 { use, useEffect, useMemo, useRef } from 'react';
 import { asset } from '../../../../../../core/blitzkit/asset';
@@ -13,7 +13,7 @@ import * as Duel from '../../../../../../stores/duel';
 
 function Card({ id, highlight }: { id: number; highlight?: boolean }) {
   const awaitedTankDefinitions = use(tankDefinitions);
-  const ancestor = awaitedTankDefinitions[id];
+  const tank = awaitedTankDefinitions[id];
 
   return (
     <Link
@@ -24,23 +24,32 @@ function Card({ id, highlight }: { id: number; highlight?: boolean }) {
         color: 'inherit',
         position: 'relative',
       }}
+    >
+      <Box
+        mx={highlight ? '2' : '0'}
+        style={{
+          background: highlight
+            ? `url(${asset(`flags/scratched/${tank.nation}.webp`)})`
+            : undefined,
+          backgroundPosition: '25% center',
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
+          boxShadow: highlight ? 'var(--shadow-4)' : undefined,
+          borderRadius: 'var(--radius-4)',
+          overflow: 'hidden',
+        }}
       >
         <Flex
           direction="column"
           align="center"
           py="4"
           px={highlight ? '4' : '2'}
-        mx={highlight ? '2' : '0'}
           style={{
-          backgroundColor: highlight
+            backdropFilter: highlight ? 'brightness(0.25)' : undefined,
-            ? 'var(--color-panel-translucent)'
-            : undefined,
-          boxShadow: highlight ? 'var(--shadow-4)' : undefined,
-          borderRadius: 'var(--radius-4)',
           }}
         >
           <img
-          alt={ancestor.name}
+            alt={tank.name}
             src={asset(`icons/tanks/big/${id}.webp`)}
             width={64}
             height={64}
@@ -52,9 +61,9 @@ function Card({ id, highlight }: { id: number; highlight?: boolean }) {
           <Flex direction="column" align="center">
             <Flex gap="2" align="center">
               <Text color="gray" size="1">
-              {TIER_ROMAN_NUMERALS[ancestor.tier]}
+                {TIER_ROMAN_NUMERALS[tank.tier]}
               </Text>
-            <Text wrap="nowrap">{ancestor.name}</Text>
+              <Text wrap="nowrap">{tank.name}</Text>
             </Flex>
 
             <Flex gap="2" align="center">
@@ -70,9 +79,9 @@ function Card({ id, highlight }: { id: number; highlight?: boolean }) {
                       objectPosition: 'center',
                     }}
                   />
-                {ancestor.xp === undefined || ancestor.tier === 1
+                  {tank.xp === undefined || tank.tier === 1
                     ? 0
-                  : formatCompact(ancestor.xp!)}
+                    : formatCompact(tank.xp!)}
                 </Flex>
               </Text>
 
@@ -88,12 +97,13 @@ function Card({ id, highlight }: { id: number; highlight?: boolean }) {
                       objectPosition: 'center',
                     }}
                   />
-                {formatCompact(ancestor.price.value)}
+                  {formatCompact(tank.price.value)}
                 </Flex>
               </Text>
             </Flex>
           </Flex>
         </Flex>
+      </Box>
     </Link>
   );
 }