feat: abilites

scripts/buildAssets/definitions.ts

@@ -499,18 +499,33 @@ export async function definitions(production: boolean) {
   const squadBattleTypeStyles = await readYAMLDVPL<SquadBattleTypeStyles>(
     `${DATA}/UI/Screens3/Lobby/Hangar/Squad/SquadBattleType.yaml.dvpl`,
   );
+  const gameTypeSelectorStyles = await readYAMLDVPL<SquadBattleTypeStyles>(
+    `${DATA}/UI/Screens/Lobby/Hangar/GameTypeSelector.yaml.dvpl`,
+  );
+  const gameModeNativeNames: Record<string, number> = {};
 
   for (const match of squadBattleTypeStyles.Prototypes[0].components.UIDataLocalBindingsComponent.data[1][2].matchAll(
-    /"(\d+)" -> "(battleType\/[a-zA-Z]+)"/g,
+    /"(\d+)" -> "(battleType\/([a-zA-Z]+))"/g,
   )) {
     const id = Number(match[1]);
     const name = strings[match[2]];
 
+    gameModeNativeNames[match[3]] = id;
     gameDefinitions.gameModes[id] = {
       name,
     };
   }
 
+  for (const match of gameTypeSelectorStyles.Prototypes[0].components.UIDataLocalBindingsComponent.data[1][2].matchAll(
+    /eGameMode\.([a-zA-Z]+) -> "~res:\/Gfx\/UI\/Hangar\/GameTypes\/battle-type_([^"]+)"/g,
+  )) {
+    Object.entries(gameModeNativeNames).forEach(([key, value]) => {
+      if (key.toLowerCase() === match[2].toLowerCase()) {
+        gameModeNativeNames[match[1]] = value;
+      }
+    });
+  }
+
   camouflagesXmlEntries.forEach(([camoKey, camo]) => {
     const yamlEntry = camouflagesYaml[camoKey];
     const fullName = yamlEntry.userString
@@ -706,7 +721,7 @@ export async function definitions(production: boolean) {
 
         tankDefinitions[tankId] = {
           id: tankId,
-          roles: tank.combatRole ?? {},
+          roles: {},
           camouflages: camouflages.length === 0 ? undefined : camouflages,
           description:
             wargamingTankopedia.data[tankId]?.description ?? undefined,
@@ -747,6 +762,22 @@ export async function definitions(production: boolean) {
           tracks: [],
         };
 
+        if (tank.combatRole) {
+          Object.entries(tank.combatRole).forEach(([gameMode, role]) => {
+            const id = Object.entries(gameModeNativeNames).find(
+              ([key]) => key.toLowerCase() === gameMode.toLowerCase(),
+            )?.[1];
+
+            if (id === undefined) {
+              throw new Error(
+                `Unknown game mode in tank ${tankKey}: ${gameMode}`,
+              );
+            }
+
+            tankDefinitions[tankId].roles[id] = role;
+          });
+        }
+
         if (tankDefinitions[tankId].name === tankDefinitions[tankId].nameFull) {
           delete tankDefinitions[tankId].nameFull;
         }
@@ -1336,7 +1367,6 @@ export async function definitions(production: boolean) {
     };
   });
 
-  return;
   await commitAssets(
     'definitions',
     [

scripts/buildAssets/gameModeBanners.ts

@@ -6,7 +6,9 @@ import { FileChange } from '../../src/core/blitzkit/commitMultipleFiles';
 import { DATA } from './constants';
 import { SquadBattleTypeStyles } from './definitions';
 
-export async function gameModeIcons(production: boolean) {
+export async function gameModeBanners(production: boolean) {
+  console.log('Building game mode banners...');
+
   const changes: FileChange[] = [];
   const gameTypeSelectorStyles = await readYAMLDVPL<SquadBattleTypeStyles>(
     `${DATA}/UI/Screens/Lobby/Hangar/GameTypeSelector.yaml.dvpl`,
@@ -48,5 +50,5 @@ export async function gameModeIcons(production: boolean) {
     });
   }
 
-  await commitAssets('game mode icons', changes, production);
+  await commitAssets('game mode banners', changes, production);
 }

scripts/buildAssets/index.ts

@@ -17,7 +17,7 @@ import { consumableProvisionIcons } from './consumableProvisionIcons';
 import { currencies } from './currencies';
 import { definitions } from './definitions';
 import { equipmentIcons } from './equipmentIcons';
-import { gameModeIcons } from './gameModeIcons';
+import { gameModeBanners } from './gameModeBanners';
 import { moduleIcons } from './moduleIcons';
 import { scratchedFlags } from './scratchedFlags';
 import { shellIcons } from './shellIcons';
@@ -30,7 +30,7 @@ import { videos } from './videos';
 if (!targets && !allTargets) throw new Error('No target(s) specified');
 
 const methods = [
-  gameModeIcons,
+  gameModeBanners,
   definitions,
   tankIcons,
   videos,

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) => {
+export const tanksDefinitionsArray = tankDefinitions.then((tanks) =>
-  resolve(Object.entries(await tankDefinitions).map(([, entry]) => entry));
+  Object.values(tanks),
-});
-export const tanksDefinitionsArray = new Promise<TankDefinition[]>(
-  async (resolve) => {
-    resolve((await entries).map((entry) => entry)); // TODO: wtf?
-  },
 );
 export type Tier = (typeof TIERS)[number];