feat: falg

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

@@ -115,7 +115,16 @@ export function TechTreeSection() {
       <Flex align="center" gap="6">
         {tank.ancestors && (
           <>
-            <Flex direction="column" style={{}} gap="4">
+            <Flex
+              wrap="wrap"
+              direction="column"
+              align="center"
+              justify="center"
+              style={{
+                maxHeight: 360,
+              }}
+              gap="4"
+            >
               {tank.ancestors.map((id) => (
                 <Card key={id} id={id} />
               ))}
@@ -125,15 +134,44 @@ export function TechTreeSection() {
           </>
         )}
 
-        <Flex direction="column" style={{}}>
+        <Flex
+          direction="column"
+          style={{
+            position: 'relative',
+          }}
+        >
           <Card id={tank.id} />
+
+          <img
+            src={asset(`flags/scratched/${tank.nation}.webp`)}
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              height: 180,
+              transform: 'translate(-42%, -50%)',
+              backgroundRepeat: 'no-repeat',
+              zIndex: -1,
+              opacity: 1 / 4,
+              filter: 'blur(4px)',
+            }}
+          />
         </Flex>
 
         {tank.successors && (
           <>
             <Arrow />
 
-            <Flex direction="column" style={{}} gap="4">
+            <Flex
+              wrap="wrap"
+              direction="column"
+              align="center"
+              justify="center"
+              style={{
+                maxHeight: 360,
+              }}
+              gap="4"
+            >
               {tank.successors.map((id) => (
                 <Card key={id} id={id} />
               ))}

src/app/tools/tankopedia/[id]/page.tsx

@@ -5,11 +5,9 @@ import PageWrapper from '../../../../components/PageWrapper';
 import { assignDuelMember } from '../../../../core/blitzkit/assignDuelMember';
 import { mutateDuel, useDuel } from '../../../../stores/duel';
 import { mutateTankopediaTemporary } from '../../../../stores/tankopedia';
-import { CharacteristicsSection } from './components/Model/CharacteristicsSection';
 import { HeroSection } from './components/Model/HeroSection';
 import { HistoricalSection } from './components/Model/HistoricalSection';
 import { TechTreeSection } from './components/Model/TechTreeSection';
-import { TankopediaSeparator } from './components/TankopediaSeparator';
 import { Videos } from './components/Videos';
 
 export default function Page({ params }: { params: { id: string } }) {
@@ -64,8 +62,8 @@ export default function Page({ params }: { params: { id: string } }) {
           <HeroSection />
           {/* <TankopediaPlug /> */}
           <TechTreeSection />
-          <CharacteristicsSection />
-          <TankopediaSeparator />
+          {/* <CharacteristicsSection />
+          <TankopediaSeparator /> */}
           <Videos />
           <HistoricalSection />
         </>