feat: abilites

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

@@ -0,0 +1,56 @@
+import { Box, Flex, Heading } from '@radix-ui/themes';
+import { use } from 'react';
+import { asset } from '../../../../../../core/blitzkit/asset';
+import { gameDefinitions } from '../../../../../../core/blitzkit/gameDefinitions';
+import * as Duel from '../../../../../../stores/duel';
+
+export function GameModeSection() {
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const awaitedGameDefinitions = use(gameDefinitions);
+
+  return (
+    <Flex direction="column" gap="4" align="center">
+      <Heading size="6">Game mode abilities</Heading>
+
+      <Flex justify="center" gap="4" wrap="wrap">
+        {Object.entries(tank.roles).map(([key, value]) => {
+          const id = Number(key);
+          const gameMode = awaitedGameDefinitions.gameModes[id];
+
+          return (
+            <Flex
+              // width="256px"
+              height="256px"
+              overflow="hidden"
+              style={{
+                borderRadius: 'var(--radius-3)',
+                background: `url(${asset(`icons/game_mode_banners/${id}.webp`)})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+              }}
+            >
+              <Box
+                style={{
+                  aspectRatio: '1 / 2',
+                  background: `url(${asset(`icons/game_mode_banners/${id}.webp`)})`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                }}
+              />
+
+              <Flex
+                flexGrow="1"
+                p="3"
+                style={{
+                  backdropFilter: 'blur(4rem)',
+                }}
+              >
+                <Heading size="4">{gameMode.name}</Heading>
+              </Flex>
+            </Flex>
+          );
+        })}
+      </Flex>
+    </Flex>
+  );
+}

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

@@ -1,30 +0,0 @@
-import { Flex, Link, Text } from '@radix-ui/themes';
-import PageWrapper from '../../../../../../components/PageWrapper';
-import { PatreonIcon } from '../../../../../../icons/Patreon';
-
-export function TankopediaPlug() {
-  return (
-    <PageWrapper>
-      <Flex justify="center">
-        <Text>
-          Liking BlitzKit? Consider donating on{' '}
-          <Link
-            href="https://www.patreon.com/tresabhi"
-            target="_blank"
-            underline="hover"
-          >
-            <PatreonIcon
-              style={{
-                width: '1em',
-                height: '1em',
-                transform: 'translateY(12.5%)',
-              }}
-            />{' '}
-            Patreon
-          </Link>
-          .
-        </Text>
-      </Flex>
-    </PageWrapper>
-  );
-}

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

@@ -126,6 +126,7 @@ export function TechTreeSection() {
 
   return (
     <Flex
+      my="6"
       p="5"
       style={{
         overflow: 'hidden',

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

@@ -8,6 +8,7 @@ import * as Duel from '../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../stores/tankopediaEphemeral';
 import { HistorySection } from './components/HistorySection';
 import { CharacteristicsSection } from './components/Model/CharacteristicsSection';
+import { GameModeSection } from './components/Model/GameModeSection';
 import { HeroSection } from './components/Model/HeroSection';
 import { TechTreeSection } from './components/Model/TechTreeSection';
 import { ShotDisplaySection } from './components/ShotDisplaySection';
@@ -79,6 +80,7 @@ export default function Page({ params }: { params: { id: string } }) {
       {!exempt && <AdMidSectionResponsive />}
       <CharacteristicsSection />
       {!exempt && <AdMidSectionResponsive />}
+      <GameModeSection />
       <TechTreeSection />
       <VideoSection />
       <HistorySection />