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 />

src/components/Armor/components/PrimaryArmorScene.tsx

@@ -7,7 +7,6 @@ import { useArmor } from '../../../hooks/useArmor';
 import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
 import { useTankTransform } from '../../../hooks/useTankTransform';
 import * as Duel from '../../../stores/duel';
-import * as TankopediaPersistent from '../../../stores/tankopediaPersistent';
 import { ModelTankWrapper } from './ModelTankWrapper';
 import { PrimaryArmorSceneComponent } from './PrimaryArmorSceneComponent';
 
@@ -29,13 +28,6 @@ export const PrimaryArmorScene = memo(() => {
   const hullOrigin = correctZYTuple(trackModelDefinition.origin);
   const turretOrigin = correctZYTuple(tankModelDefinition.turretOrigin);
   const gunOrigin = correctZYTuple(turretModelDefinition.gunOrigin);
-  const tankopediaPersistentStore = TankopediaPersistent.useStore();
-
-  console.log(
-    tankModelDefinition.armor,
-    turretModelDefinition.armor,
-    gunModelDefinition.armor,
-  );
 
   useTankTransform(protagonist, turretContainer, gunContainer);
 

src/core/blitzkit/tankCharacteristics.ts

@@ -75,8 +75,6 @@ export function tankCharacteristics(
     provisionDefinitions: ProvisionDefinitions;
   },
 ) {
-  console.log(tank.crew);
-
   const presetRows = equipmentDefinitions.presets[tank.equipment];
   const turretModelDefinition = tankModelDefinition.turrets[turret.id];
   const gunModelDefinition = turretModelDefinition.guns[gun.id];

src/core/blitzkit/tankDefinitions/index.ts

@@ -40,7 +40,7 @@ export type ModuleDefinition =
   | GunDefinition;
 export interface TankDefinition {
   id: number;
-  roles: Record<string, string>;
+  roles: Record<number, string>;
   description?: string;
   fixedCamouflage?: boolean;
   camouflages?: number[];
@@ -173,13 +173,8 @@ export const tankDefinitions = fetchCdonLz4<TankDefinitions>(
   asset('definitions/tanks.cdon.lz4'),
 );
 
-const entries = new Promise<TankDefinition[]>(async (resolve) => {
-  resolve(Object.entries(await tankDefinitions).map(([, entry]) => entry));
-});
-export const tanksDefinitionsArray = new Promise<TankDefinition[]>(
-  async (resolve) => {
-    resolve((await entries).map((entry) => entry)); // TODO: wtf?
-  },
+export const tanksDefinitionsArray = tankDefinitions.then((tanks) =>
+  Object.values(tanks),
 );
 export type Tier = (typeof TIERS)[number];